Рубрика «дизайн мобильных приложений»

Привет. Меня зовут Белла Гурина, я работаю в команде Яндекс.Заправок. На днях мы обновили наше приложение, чтобы упростить оплату топлива для водителей. Процесс и раньше не был сложным и особо не отличался от оплаты в других приложениях Яндекса. Но некоторые водители всё равно в нём путались. Мы провели исследование и эксперименты, чтобы выяснить причины. В итоге поняли, как сделать удобнее.

Новая версия Яндекс.Заправок: с учётом (неожиданного) опыта водителей - 1

Немного о нас, чтобы вы понимали, с чем имеете дело. Яндекс.Заправки — это относительно молодой сервис, мы запустили его в конце 2018 года. Тогда подобных сервисов мы не встречали, поэтому во многом приходилось набивать шишки.

Два года всё бурно росло. Мы подключали топливные сети, заходили в новые регионы и добавляли услуги. В итоге сейчас в сервисе более 7000 АЗС, расположенных по всей России. Но во время интенсивной работы над развитием Заправок стали замечать, что часть водителей срезается перед оплатой, когда номер колонки и тип топлива уже введены. Это показалось странным, и мы начали разбираться. Итогом стало обновление интерфейса приложения.

Читать полностью »

Привет! Уже завтра День программиста (12.09.2020), и специально к нашему профессиональному празднику я написал не хардкорно-технический пост, а лайтовую статью о маленьких, не всегда очевидных фичах, которые хоть и не часто, но встречаются в мобильных приложениях и не только. Как вы уже догадались — это пасхалки. И не просто пасхалки, а отечественного производства. Если хотите ненадолго погрузиться в детали, которые мы обычно не замечаем, либо которые сложно найти, — добро пожаловать под кат.

Российские пасхалки в мобильных приложениях. Какие они? - 1
Читать полностью »

На днях вышла статья, посвящённая разнице между квадратом со скруглёнными краями и «квадрокругом» — промежуточной фигурой между окружностью и квадратом, полученной из формулы cуперэллипса. Мнения читателей разделились — не все увидели разницу, а кто увидели — не все отдали предпочтение «правильному» варианту. И я подозреваю, почему: эти ваши квадрокруги — ненастоящие!

Ваши квадрокруги — неправильные - 1

Читать полностью »

Давайте сыграем в игру. У нас есть два ряда знакомых всем пользователям iOS-иконок. На первый взгляд иконки сверху и снизу одинаковые. Но это не так. В одном ряду вы видите настоящие иконки, а в другом подделку.

Секрет формы иконок iOS: это сквиркл? Разбор - 1

Секрет формы иконок iOS: это сквиркл? Разбор - 2

Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?

Настоящие иконки находятся сверху. Думаю многие из вас заметили, что с нижними иконками что-то не так. По какой-то причине их форма выглядят не аккуратно, будто где-то был отрезан лишний пиксель. Почему так происходит?

Дело в том, что поддельные иконки по форме — это квадраты с закруглёнными углами, ну и прямоугольник если говорить о серой подложке.

Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!

Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.

Читать полностью »

Сегодня мы попробуем разобраться, почему Open Source приложениями никто не хочет пользоваться. Статья получилась довольно длинной, но не пугайтесь, будет интересно.

Поехали!

Читать полностью »

Кому адресована статья

В данной публикации я хочу помочь начинающим и «не очень» бизнес-аналитикам, менеджерам проектов, владельцам продуктов, желающим сделать свой первый сайт и всем-всем, кому надо сделать макет сайта или приложения, а он не знает с какой стороны подступиться к делу.

В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.

Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.
Читать полностью »

Однажды в деревне мой дядя Слава спросил, чем я занимаюсь. Большой, мол, уже, 25 лет. Должен же чем-то заниматься. Я ответил, что работаю в Москве дизайнером мобильных приложений. Он кивнул и помолчал с полминуты. Потом переспросил: «Так это значит… в телефоне там все… рисуешь?» «Да», — говорю, чтобы не распространяться. Он достает из кармана кнопочную Nokia и протягивает ее мне — мол, давай, показывай, что ты из этого нарисовал. Вот эту иконку «сообщения» или ту, с телефонным справочником?

Эта история произошла со мной всего пару лет назад, в 2018, и должна была стать курьезным исключением из правил, но как-то незаметно превратилась в правило. Даже продакт-менеджеры нередко принимают продуктовых дизайнеров за ребят, которые рисуют иконки телефонных справочников и раскрашивают кнопки действия в продающий цвет. Поэтому и задачи они ставят в форме «давай вот эту кнопку сделаем побольше, а то чот не нажимают, а вот тут заголовок пожирнее».

Как же сделать так, чтобы задачи от продакт-менеджеров принимали вид «я хочу увеличить Retention нашего раздела, давай подумаем как это сделать», без «подвинь эту кнопку вправо» и «сделай зеленый зеленее»?

Методом проб и ошибок, я вывел для себя список вопросов, которые помогают уточнить задачу у продакт-менеджера и предотвратить все возможные недопонимания.

Этот список поможет дизайнеру выстроить коммуникацию с продакт-менеджером, а продакту — лучше понять, чего ожидать от дизайнера.
Читать полностью »

Ошибка – это не UIAlertController - 1

Дизайнеры, с которыми я работаю, часто рассматривают сообщения об ошибках в iOS как что-то очевидное. А если конкретно – как UIAlertController.

Читать полностью »

image

Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.

Адаптировать дизайн под другую платформу — неотъемлемая часть работы дизайнера мобильных приложений. Цель этой работы — органично вписать дизайн в паттерны взаимодействия пользователя. К тому же, проработанная адаптация упрощает разработку за счёт использования нативных компонентов платформы.

Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.

Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:

  1. Базовые отличия.
  2. Отличия в навигации и паттернах (UX).
  3. Отличия в компонентах (UI).
  4. Прочие отличия.

Особенности iOS будут слева, а Android — справа или сверху/снизу.

Базовые отличия

Human Interface Guidelines vs Material Design

Почти все отличия этой статьи взяты из анализа этих гайдлайнов. Их суть на идейном уровне следующая. HIG — это про плоский, лёгкий, дружелюбный дизайн, пришёл он из постепенного отказа от скевоморфизма.

Material же имеет несколько основополагающих принципов: материал как метафора; смелый, графический, сознательный; осмысленная анимация; гибкая основа и кроссплатформенность. Если вы не знакомы с гайдлайнами, лучше их прочесть до того, как ознакомитесь со статьёй.

image

image
Читать полностью »

Персонализированный интерфейс. Часть 1. Плюсы и минусы концепции - 1

Всем привет! Хочу поделиться своим опытом одной экспериментальной разработки, за которой стоит большая, на мой взгляд, идея: персонализированный интерфейс, который конфигурируется на основе потребностей клиента. Представьте, что два человека смотрят в одну и ту же программу, имеют одинаковые права доступа, но видят разные функции на экране своего монитора.

В этой статье расскажу о подготовительной части: о трудностях и преимуществах, которые пришлось взвесить, прежде чем вписаться в этот блудняк эту историю.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js