· Юлия Груздева
Последовательность в дизайн-макетах
Взаимодействие с любым интерфейсом — это последовательность действий, соответствующая пути пользователя (User flow).
Линейные алгоритмы встречаются нечасто, поэтому, очень важно, рисуя одно ответвление, не упустить остальные.
И мало их нарисовать, важно визуализировать логику происходящего на канве, чтобы она была одинаково ясна дизайнеру, менеджеру проекта, заказчику и разработчику.
Саймон де Майл. «Ноев ковчег на горе Арарат»
Что для этого нужно делать:
- Соблюдать последовательность в элементах экрана
- Соблюдать последовательность экранов
- Не терять состояния экранов
- Использовать визуализацию пользовательского пути
- Комментировать происходящее на канве
- При необходимости собирать кликабельные прототипы
1. Соблюдать последовательность в элементах экрана
Составные элементы экрана размещаем по принципу сверху вниз. Чтобы не искать header в самом низу списка слоев. Исключение — при настройке прототипа, когда дизайнер жестко задает поведение элемента. В этом случае зафиксированные элементы (например tabbar) размещается выше остальных слоев.
Пример неправильного и правильного расположения элементов
2. Соблюдать последовательность экранов
Сами экраны также размещаем в соответствии с user flow — последовательно, слева направо, сверху вниз.
Пример размещения экранов авторизации в соответствии с User flow
3. Не терять состояния экранов
Состояния экранов размещаем рядом и обязательно даем названия всем фреймам.
Состояния экранов должны находиться рядом с основным и называться соответствующим образом
4. Использовать визуализацию пользовательского пути
Иллюстрируем последовательность стрелками (screenflow), возле которых подписываем, какое действие на предыдущем экране привело к результату на следующем.
Пример screenflow небольшой части проекта маркетплейса
5. Комментировать происходящее на канве
Рядом с макетами оставляем комментарии для разработчиков. Например, объясняем, как будет работать скролл внутри фрейма.
Иллюстрация списка правок при внедрении нового функционала
6. При необходимости собирать кликабельные прототипы
По запросу заказчика в сложных проектах собираем интерактивные прототипы. Это самый надежный и самый трудозатратный способ выявить все ошибки в сборке макетов: невыставленные привязки, неправильную последовательность блоков и непрописанные параметры автолэйаутов.
Пример кликабельного прототипа небольшой части сложного проекта
Эти приемы существенно сэкономят время и усилия разработчиков и позволят им как можно реже обращаться к дизайнерам за разъяснениями.
Дизайн-задачник
Научим всему, что умеем сами: делать хорошие интерфейсы, управлять проектами и писать хорошие тексты.
