Как дизайнеры, мы создаем прототипы для множества различных целей: запуск пользовательских тестов, представление реалистичных планов заинтересованным сторонам, донесение замыслов и идей до разработчиков, список можно продолжать бесконечно.
Поскольку прототипы очень важны в процессе проектирования, опыт должен позволять делать все быстро и просто. Чтобы упростить и ускорить рабочий процесс создания прототипа, я собрал для вас несколько моих любимых советов и приемов. Читать дальше!
Используйте мастер-компоненты для ускорения соединений прототипа
Допустим, вы проектируете экран с какой-то постоянной навигацией, например панелью вкладок. Вы должны привязать каждый пункт меню к определенному фрейму (например, связать кнопку «домой» с фреймом домашней страницы). Если это меню повторяется на нескольких экранах, как это часто бывает с панелями вкладок, утомительная задача связывания может занять больше времени, чем могла бы.
Решение. В самом начале вашего процесса, превратите ваше меню гамбургера в компонент. Как только вы это сделаете, свяжите каждый пункт меню этого мастер-компонента с соответствующим фреймом. Далее, каждый раз, когда вы создаете экземпляр компонента гамбургера, все соединения будут автоматически распространяться! Больше не надо биться головой о стену, по-поводу этой утомительной работы.
Одно предостережение: это не работает, если вы перетаскиваете экземпляр компонента из командной библиотеки. Поскольку главный компонент находится в другом файле, отличном от вашего, вы не сможете использовать ранее упомянутый совет.
Вместо этого создайте новый мастер-компонент с экземпляром из вашей библиотеки внутри него. Figma позволяет вам выбирать глубоко вложенные слои внутри каждого компонента, так что вы все равно можете связать несколько пунктов меню из экземпляра, не отрывая его от мастера. Я часто размещаю некоторые из этих повторяющихся компонентов в стороне, за пределами моих макетов, в качестве удобного места для доступа к ним и поддержания связанных соединений с различными экранами.
Используйте компоненты для прокрутки контента
При разработке более длинных скролл-экранов с фиксированными элементами, такими как строки состояния, верхние или нижние колонтитулы, вы можете просто перетащить нижнюю часть рамки вниз, чтобы разместить дополнительный контент. Если содержимое превышает высоту области просмотра для выбранного вами устройства, Figma автоматически прокручивает кадр в режиме прототипа. Удобно, правда?
Но бывают случаи, когда вы хотите увидеть то, что видно в окне просмотра по умолчанию (то есть до того, как пользователь прокрутит). Это дает вам представление о том, какой контент изначально отключается, когда пользователи впервые переходят к этому фрейму прототипа. Устройства с различными размерами области просмотра будут сегментировать контент в разных местах. Чтобы облегчить просмотр этих разных визуализаций, используйте компонент.
Чтобы увидеть, какой контент изначально виден в прокручиваемом фрейме:
- Превратите свой прокручиваемый контент в компонент.
- Убедитесь, что вы установили ограничения для всех элементов внутри.
- Убедитесь, что на панели свойств установлен флажок «clip content» (по умолчанию этот параметр должен быть включен).
- Перейдите в режим прототипирования и включите нужное направление прокрутки, настроив «overflow Behavior.».
- Поместите экземпляр этого компонента в свои проекты и измените их размер.
Теперь вы можете понять, что находится в поле зрения для каждого из устройств разного размера и централизованно управлять всем прокручиваемым контентом с помощью одного компонента.
Используйте временные задержки и наложения для имитации взаимодействия
С прототипами мгновенное взаимодействие может казаться резким для конечного пользователя. Возможно, вы захотите добавить элементы реализма, такие как имитация загрузочных экранов или добавление небольшой задержки.
Одним из легких способов, который вы можете использовать для этого, является запуск после задержки, когда взаимодействие происходит после заданной продолжительности. Задержки по времени особенно полезны в сочетании с оверлеями, как вы можете видеть на примере простой формы ниже.
Пользователи ожидают, что форма переместит их на страницу подтверждения, но если это произойдет слишком резко, они могут чувствовать дезориентацию. Используя наложения, ручное позиционирование и функцию наложения свопов, мы можем создать простое взаимодействие кнопок в тандеме с временными задержками. Затем происходит взаимодействие отправки, краткая последовательность загрузки и сообщение об успешном завершении до появления страницы подтверждения.
Стартовый экран
Прототипы в Figma в настоящее время ограничены отдельными страницами. Это позволяет вам иметь отдельные прототипы в одном документе, каждый со своим уникальным URL-адресом, которыми вы можете поделиться с людьми, когда они захотят их просмотреть. Но иногда вы просто хотите поделиться одной ссылкой с людьми, которая позволяет им увидеть несколько вариантов дизайна.
Для этого в Figma создайте фрейм оглавления в качестве стартового экрана вашего прототипа. Затем свяжите каждый элемент списка в оглавлении с другим пользовательским флоу. Изнутри Figma будет интерпретировать все это как один прототип, но конечные пользователи будут воспринимать их как разные прототипы с выбором между ними в начале. Примечание: все ваши пользовательские флоу должны быть на одной странице, чтобы это работало.
Используйте режим наблюдения
Знаете ли вы о режиме наблюдения в Figma? Это позволяет вам следить за экраном другого человека, пока он что-то показывает. Вы можете щелкнуть аватар вашего сотрудника в верхнем правом углу редактора, чтобы увидеть все, что он видит в файле дизайна.
Режим наблюдения ТАКЖЕ работает с прототипами. Вы можете щелкнуть аватар вашего сотрудника, чтобы узнать, где он находятся в прототипе и что он там делает. Это отлично подходит для удаленных пользовательских тестов, когда вы хотите изучить, как пользователь взаимодействует с вашим дизайном. Это также отличный способ заставить всех следить, когда вы представляете свою работу на собрании.
Совершенствуйтесь и начинайте прототипирование!
Я надеюсь, что некоторые из этих советов помогут вам ускорить процесс создания прототипа. Как всегда, не стесняйтесь делиться своими советами, вопросами и опытом в нашем онлайн-сообществе на Spectrum.
Перевод статьи Thomas Lowry
Найновіші коментарі (0)