Аналитик вкатывается в Figma. Практический гайд. Часть 2 - Интерактивные прототипы

Figma — мощный инструмент, который позволяет не только проектировать интерфейсы, но и создавать довольно сложные интерактивные прототипы. Чтобы не сидеть часами, разбираясь в соединении экранов и настраивая переходы, нужно понимать основные принципы создания прототипов.

Визуализация графического интерфейса упрощает понимание желаний заказчика. Причем, и командой, и с заказчиком. Но одних картинок бывает недостаточно. Пользователи хотят «пощупать» Систему, чтобы понять, как они будут взаимодействовать с ней. Хорошая новость – разработчики Figma это предусмотрели.

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

С помощью Figma можно открыть прототип проекта в браузере и уже на этапе разработки дизайна оценить пользовательский опыт при работе с ним. Кроме того, это удобный способ демонстрации своей работы коллегам и заказчикам.

Процесс создания интерактивных компонентов очень прост и завязан на одной из их фич — Variants. Нам необходимо создать компоненту, внутри которой разместить все наши варианты этого компонента. Открыть панель «Прототип» и связать каждый вариант компонента между собой по определенному событию.

Figma позволяет задавать различные виды взаимодействия с помощью настройки триггеров и действий.

Процесс настройки интерактивных действий прототипа осуществляется на правой панели на закладке Prototype в разделе Interactions. Выберите любой элемент и нажмите на + в разделе Interactions,чтобы задать элементу поведение.

Поведение элемента настраивается с помощью Триггера, который вызывает определенное Действие.

Триггер определяет, как пользователь должен воздействовать на элемент, чтобы вызвать действие. Например, кликнуть или навести курсор.

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

Представим, что мы хотим продемонстрировать открытие страницы справочника Реестр заявок на транспорт со страницы обложки модуля Заявки на транспорт по нажатию на одноимённую ссылку на справочник.

Шаг 1. Создайте фреймы с прототипами страниц: обложку модуля и реестр.

Шаг 2. Выберите элемент с текстом Реестр заявок на транспорт и на правой панели на закладке Prototype в разделе Interaction нажмите +.

Шаг 3. Нам нужно, чтобы при нажатии на ссылку Реестр заявок на транспорт осуществлялся переход от одного фрейма (обложка модуля) к другому (справочник). Выберите триггер On click (выбирается по умолчанию) и действие Navigate to. В следующем выпадающем списке найдите страницу, на которую нужно перейти.

Готово. Теперь посмотрим, что у нас получилось.

Способ 1. Нажмите на треугольник в правом верхнем углу — действие Present (комбинация клавиш ctrl+alt+enter). В новой вкладке откроется прототип в режиме презентации.

При нажатии на пустом месте голубым цветом выделятся все элементы с которыми можно взаимодействовать.

Нажмите на ссылку Реестр заявок на транспорт, чтобы открылась страница со справочником.

Способ 2. Выберите стартовый фрейм, с которого начнется демонстрация. На правой панели на закладке Prototype в разделе Flow starting point нажмите +. Слева от фрейма появится голубая плашка Flow 1. На жмите на иконку на ней и прототип откроется в режиме презентации в маленьком окне. Чтобы открыть прототип в большом окне, нажмите на значок со стрелкой.

В режиме презентации все изменения прототипа отображаются в реальном времени. Если вы, например, настроите новое действие, его можно будет сразу же проверить. Перезагрузка страницы не потребуется.

На странице справочника Реестр заявок на транспорт есть кнопка "Назад". По нажатию на неё необходимо с фрейма справочника перейти на фрейм обложки модуля.

Шаг 1. Выберите элемент, по нажатию на который будете осуществляться переход.

Шаг 2. При наведении появится значок плюса, зажмите его и перетащите на фрейм, на который нужно перейти (фрейм с обложкой модуля). При перетаскивании появится стрелка.

Шаг 3. Отпустите зажатую клавишу мыши. Появится окно с настройками триггера и действия. Поля уже будут заполнены значениями On click, Navigate to и фреймом с обложкой модуля, куда осуществляется переход.

У нас есть компонент — чек-бокс. С двумя вариантами — чек-бокс отмечен (true) и не отмечен (false).

У чек-бокса должны быть два взаимодействия:

Для этого нужно:

Шаг 1. Выбрать пустой чек-бокс и помощью зажатия левой кнопки мыши перетянуть плюс на отмеченный вариант. Автоматически подставится триггер On click и действие Change to, а также выберется свойство, отвечающее за смену вариантов.

Шаг 2. Выбрать заполненный чек-бокс и перетянуть плюс к неотмеченному. Все нужные параметры снова заполнятся автоматически.

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

Настроили один чек-бокс, а работают все.

Нам нужно, чтобы при наведении на кнопку, она меняла свой цвет. А при нажатии на эту же кнопку должно открываться контекстное меню.

Для этого понадобятся три элемента: фрейм с карточкой документа, компонент-кнопка и фрейм с контекстным меню.

У компонента-кнопки уже настроены 2 варианта: обычное состояние и состояние при наведении (цвет кнопки становится темнее).

На один элемент можно навесить два разных триггера:

А вот навесить один и тот же триггер на один элемент нельзя.

Для кнопки нам нужно сделать смену вариантов при наведении. Для этого:

Шаг 1. Выберите элемент и на правой панели создайте новое взаимодействие по кнопке +

Шаг 2. Выберите триггер — While hovering и действие Change to. Затем укажите нужный вариант кнопки.

Готово. Теперь настроим открытие контекстного меню.

Шаг 3. Выберите элемент и создайте новое взаимодействие.

Шаг 4. Укажите действие Open overlay. Выберите фрейм с контекстным меню.

Шаг 5. В разделе Overlay settings выберите Manual — это позволит нам вручную указать, где поверх нашего основного фрейма будет открываться другой фрейм. Передвиньте фрейм с контекстным меню на нужное место.

Шаг 6. Установите чек-бокс Close while clicking outside, чтобы фрейм-оверлей закрывался при нажатии на область за его пределами.

Нужно, чтобы при наведении на кнопку избранное появлялась подсказка, что эта кнопка делает. Нам понадобятся: карточка документа с кнопкой "Избранное" и всплывающая подсказка.

Шаг 1. Выберите элемент и создайте новое взаимодействие.

Шаг 2. Укажите триггер While hovering и действие Open overlay. Затем укажите фрейм со всплывающей подсказкой.

Шаг 3. В поле ниже, где указано Instant, выберите Dissolve. Это поле отвечает за анимацию при появлении и исчезании оверлея.

Шаг 4. Выберите положение для оверлея Manual и расположите фрейм с подсказкой в нужном месте.

Теперь, при наведении на кнопку "Избранное" будет плавно появляться всплывающая подсказка:

При нажатии кнопки "Назад" в карточке несохранённого документа должно появляться всплывающее окошко с предупреждением.

Нам потребуются: карточка документа, кнопка назад и окно с подтверждением. При нажатии на кнопку "Назад" должен появляться оверлей с подтверждением, который можно закрыть только нажатием на "Нет" или на крестик в правом углу.

Шаг 1. Создайте взаимодействие, при котором после нажатия на "Назад" появляется предупреждение. Выберите элемент с кнопкой. Нажмите + на правой панели. Нужный триггер On click уже установлен, выберите действие Open overlay. И укажите, что оверлеем будет фрейм с окном подтверждения.

Шаг 2. По умолчанию фрейм с подтверждением будет появляться по центру — это нам подходит. При этом варианте можно настроить затемнение (выбрать цвет и его прозрачность в процентах). Укажем чуть темнее, чем 25%.

Параметр Close when clicking outside оставляем как есть. Теперь, при нажатии на "Назад" у нас появится оверлей. Добавим действия для его закрытия.

Шаг 3. Выберите крестик на фрейме с предупреждением. С помощью зажатия левой кнопки мыши потяните за плюс. Появятся две голубые иконки. Одна из них отвечает за закрытие оверлея (Close overlay), вторая — за возвращение на предыдущую страницу (Back). Нам нужно навести мышь на иконку закрытия и отпустить левую кнопку мыши.

Шаг 4. Настроим то же действие для кнопки "Нет". Выберите кнопку и на правой панели создайте новое взаимодействие. Выберите действие — Close overlay.

Готово:

Мы рассмотрели, как можно применить основные триггеры и действия в своих прототипах.

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

Надеюсь, что благодаря примерам из этой статьи, мир интерактивных прототипов стал для вас чуточку понятнее!