Click to order

Практика 3

Соблюдать последовательность в макетах

Взаимодействие с любым интерфейсом — это последовательность действий, соответствующая пути пользователя (User flow). Линейные алгоритмы встречаются нечасто, поэтому, очень важно, рисуя одно ответвление, не упустить остальные. И мало их нарисовать, важно визуализировать логику происходящего на канве, чтобы она была одинаково ясна дизайнеру, менеджеру проекта, заказчику и разработчику.

«Собака Павлова» в соцсетях

Что мы делаем для этого:

1. Составные элементы экрана размещаем по принципу сверху вниз. Чтобы не искать header в самом низу списка слоев. Исключение — при настройке прототипа, когда дизайнер жестко задает поведение элемента. В этом случае зафиксированные элементы (например tabbar) размещается выше остальных слоев.
2. Сами экраны также размещаем в соответствии с user flow — последовательно, слева направо, сверху вниз.
Варианты маршрута пользователя | SobakaPav.ru><meta itemprop=
3. Состояния экранов размещаем рядом и обязательно даем названия всем фреймам.


4. Иллюстрируем последовательность стрелками (screenflow), возле которых подписываем, какое действие на предыдущем экране привело к результату на следующем.
Варианты маршрута пользователя | SobakaPav.ru><meta itemprop=
Пример screenflow небольшой части проекта маркетплейса
5. Рядом с макетами оставляем комментарии для разработчиков. Например, объясняем, как будет работать скролл внутри фрейма.
6. По запросу заказчика в сложных проектах собираем интерактивные прототипы. Это самый надежный и самый трудозатратный способ выявить все ошибки в сборке макетов: невыставленные привязки, неправильную последовательность блоков и непрописанные параметры автолэйаутов.
Варианты маршрута пользователя | SobakaPav.ru><meta itemprop=
Пример кликабельного прототипа небольшой части сложного проекта
Эти приемы существенно сэкономят время и усилия разработчиков и позволят им как можно реже обращаться к дизайнерам за разъяснениями.