Бесплатные курсы по it-профессиям на FreeTutorials.ru.

х
Наверх

Прототипирование в Figma

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

прототипирование в FigmaДалее необходимо выбрать определенный элемент, например, вкладку. Кликнув на нее, появится круг, потянув за который вы сможете направить стрелку для установки связи между элементами. Выбирая триггер, необходимо определить каким будет действие при его запуске.

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

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

  • «Navigate» – При клике на элемент, пользователь перейдет на другой экран. Допустим вы нажали на каталог товаров, после чего загрузится другая страница с товарами из этого каталога.
  • «Swap» – Это замена одного элемента другим при клике. Допустим вы кликнули на иконку контактной информации в нижней части страницы. Вместо данной вкладки появляется меню, в котором вы можете выбрать окно чата, находящееся на том же месте. Таким образом, сама страница не заменяется на другую.
  • «Overlay» – Это вывод нового элемента поверх остальных. Например, при клике на вкладку или кнопку появляется окно с диалогом, форма, или другая панель, в которой необходимо совершить действие. 

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

раздел None в FigmaКроме того, в настройках «Interaction details» вам будет доступна настройка анимации перехода между страницами. Есть несколько видов анимации, с возможностью просмотра в небольшом экране, который находится ниже. Вы также можете задать направление анимации, и время перехода.   

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

выбор устройства для тестирования сайта в FigmaЗатем в правом верхнем углу нажмите на вкладку запуска.

запуск сайта для теста прототипирования в FigmaПоявится редактор, в котором вы увидите результат работы. Это хорошая возможность увидеть недочеты в порототипировании, и в случае выявления ошибок подкорректировать их.

просмотр результатов прототипа сайта в FigmaИтак, в этом уроке мы рассмотрели, как устроено создание прототипов в Фигме. Этот процесс может отнимать много времени, особенно в том случае, если необходимо настроить связь и переходы между элементами, а не просто нарисовать структуру. Однако для тестирования прототипа этот навык необходим.


Полезные ссылки:

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Оставить свой комментарий