Прототипирование меню электронного оборудования в Figma

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

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

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

Я не буду подробно останавливаться на том, как прототипировать в Figma. На этот счет есть подробная документация на сайте Figma и немало материалов на YouTube. Подробно остановлюсь на том как оптимальнее разрабатывать меню именно дисплеев электроники. Поскольку тема непростая, особенно для новичков в Figma я также записал видео объясняющее как прототипировать дисплеи электронных приборов в Figma (см. ниже).

Импорт в Figma 3D модели корпуса прибора

Чтобы пользователи могли потестировать разрабатываемое меню, желательно создать полноценную иллюзию работы с прибором. Передняя панель для изготовления прессформы разрабатывается в некотором CAD. В моем примере 3D модель была выполнена в SolidWorks. Здесь доступно несколько вариантов экспорта в векторную графику: Adobe Illustrator (AI), SVG и DXF.

Figma умеет импортировать SVG файл, но SolidWorks некорректно экспортирует в AI и SVG. Модель преобразуется в битмап, который вставляется в векторную графику. По счастью, с DXF проблем не было.

С помощью бесплатного InkScape импортнул DXF файл, поправил некоторые нюансы и конвертнул в SVG. Получил векторный файл с изображением передней панели устройства.
В Figma выбрал File -> Place image… и загрузил подготовленный SVG файл. Передняя панель устройства в Figma.
Изменил пропорционально масштаб импортированного изображения в 3 раза, чтобы на мониторе 1920х1080 хорошо смотрелось.
После изменения масштаба увеличил в 3 раза и толщину (stroke) линий, чтобы они смотрелись нормально. Выделил линию нужной толщины и затем Edit -> «Select all with the same stroke» и в поле толщины линии умножаем на *3.
При экспорте в DXF все скругленные участки экспортируются отдельными короткими линиями. Замкнутые объекты, вроде кнопок, состоят из большого набора линий. С этим неудобно работать в Figma, поэтому нужно либо поправить в InkScape, заменив кнопки на соответствующие геометрические фигуры (прямоугольники, окружности и пр.), либо сделать преобразование в Figma. Я редактировал в Figma, он достаточно удобен для этого.
Поверх прямоугольника обозначающего место размещения LCD экрана помещается frame нужного размера и указывается различимое название, например, «LCD screen» (пробелы в именах в Figma разрешены). В нем будет скроллироваться отрисованные экраны ЖК дисплея.
После редактирования все объекты группируются и корпус прибора помещается в Frame по периметру: правая клавиша мыши -> «Frame Selection«.
Готовый корпус копируется и из копии создается компонент: правая кнопка мыши на выделенном объекте -> Create component (Ctrl-Alt-K). Я, на всякий случай, оставляю исходный объект из которого делается мастер, хотя можно просто скопировать мастер компонент и разорвать с ним связь: правая кнопка мыши на копии компонета -> Detach Instance (Ctrl-Alt-B).

Лайфхаки

В процессе работы по прототипированию LCD экрана в Figma я сталкивался с разными моментами, некоторые из которых следует использовать для упрощения жизни дизайнера-прототипировщика:

Меню LCD дисплея содержит общие элементы (стиль): заголовок, разделительные линии, текстовые блоки, иконки и пр. Нужно создать мастер компонент на основе таких общих элементов, которые будут наследоваться в других LCD экранах: отрисовываем LCD экран с общими элементами, выделяем, правая клавиша мыши -> Create component (Ctrl-Alt-K).
От мастер-компонента уже копируем другие экраны и в них вносим правки. Этот момент очень важный, поскольку если после тестирования прототипа на пользователях UI дизайнер решил, что иконка будет выглядеть по-другому, а для прототипирования мы уже сделали несколько десятков копии, не отнаследовав от мастера, то правки придется вносить в каждый экран. Если же копии отнаследованы от мастера, то достаточно изменить иконку только в мастер компоненте.
Естественно можно менять отдельные элементы в отнаследованных от мастер-компонента копиях, то они не будут влиять на мастер-компонент. Все как в ООП — это очень удобно!
Чтобы на экране не было месива из компонентов — используйте Pages — > Add new pages. Например, компоненты можно разложить на одной странице, назвав её Components, а на странице Prototype создавать прототип.

Именуйте ключевые элементы экранов и фреймы самих экранов понятным образом Тогда при выборе в маршруте перехода при прототипировании frame-а будет меньше ошибок.
В мастер-компоненте можно добавлять все иконки, которые должны использоваться в различных экранах. Достаточно их скрыть в мастер-компоненте и отобразить в отнаследованных нужные.
Используйте пиксельные шрифты, чтобы получить максимальное приближение прототипа LCD дисплея к реальному виду прибора.
Кнопки устройства для которых действие при прототипировании (маршрут перехода) должно быть одинаковое оформляйте в виде компонента. Например, на корпусе прибора есть клавиша, которая всегда вызывает заглавный экран меню. Оформив её в виде компонента и поместив в дизайн корпуса прибора копию получим возможность быстро менять маршрут во всех копиях фрейма прибора. Например, решили в какой-то момент, что эта кнопка должна вызывать другой экран — изменили маршрут для мастер-компонента и он изменится во всех отнаследованных копиях.
Не пытайтесь реализовать прототип «в лоб». Сначала подумайте и посмотрите ролики на YouTube и переспите с мыслями после просмотра. В Figma есть очень серьезный функционал анимирования, который позволяет упростить создание прототипа, уменьшив количество копий экрана прибора. Пример будет ниже.

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

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

Можно прототипировать «в лоб», т.е. отрисовывается каждый экран меню и вставляется в соотвествующее обрамление корпуса. Затем при прототипировании задаются все необходимые переходы от экрана к экрану, чтобы создать иллюзию перемещения при нажатии кнопок. Но тогда получится вот такое «месиво» из экранов и переходов.

Можно ли в Figma решить эту-же задачу, создавая минимум экранов? Пришлось немного извратится, поскольку штатного инструмента, позволяющего менять экраны при нажатии на одну и ту-же кнопку я не нашел. Техподдержка Figma также не смогла дать рекомендаций по этому поводу («I don’t think this is possible without duplicating the frames.»).

Одна кнопка — один экран

Если каждой клавише на панели прибора соответствует свой экран, который нужно подставить в LCD — задача решается тривиально:

Создадим изображение прибора с Frame-ом названным LCD_screen на месте экрана (см. выше).

Размещение LCD Frame-а на корпусе прибора.

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

Мастер-компонент LCD экрана. **Шрифты пиксельные** для максимального эффекта.

Компонент стоит обернуть frame-ом (правая клавиша мыши -> «Frame Selection«), иначе не получится его выбрать в выпадающем списке объектов для перехода. Хотя без frame-а можно будет создать переход визуально.
Компонент LCD экрана копируется столько раз, сколько планируется сделать экранов у прибора.
Все экраны выстраиваются строго один под другим. Если будет незачительное смещение, то переход между экранами будет смотрется некрасиво, рывками.
Можно сгруппировать экраны, но в этом случае их нельзя будет выбирать в меню настройки перехода для Scroll To. Придется визуально настраивать связь.
Смещаем экраны так, чтобы экран по-умолчанию занял правильное место в Frame-е на корпусе.

Обрезание лишних элементов для экрана прибора.

В некоторых случаях удобнее размещать экраны не вниз, а вверх, чтобы они не заслоняли кнопки. Это упростит привязку маршрутов к клавишам.
Чтобы не отображать пункты меню, которые должны появится при нажатии на клавиши нужно выделить Frame экрана и отметить пункт «Clip content». Все содержимое вне frame-а будет скрыто.
Затем нужно перейти на закладку «Prototype» и задать для фрейма LCD дисплея свойство «Overflow behavior» -> «Vertical scrolling«. Если этого не сделать, то при запуске прототипа смена экранов не будет отрабатывать.

Для фрейма экрана нужно задать режим скроллирования, иначе действие «Scroll to» не будет отрабатывать.

Далее в режиме Prototype нужно выбрать объект на изображении корпуса приборе(кнопку), нажатие на который должно привести к смене экрана.
От появившегося справа на объекте плюсика провести линк до изображения экрана, который должен появится. Возможно, для удобства придется временно отключить «Clip content«, чтобы увидеть к какому объекту тянуть линк. В левой панели объектов выделяется объект, который выбран для перехода.
Лучше экраны размещать не сверху вниз от экрана по-умолчанию, а снизу вверх. В этом случае проще будет выбирать экран для перехода. поскольку экраны не закроют кнопки прибора.

Скроллирование до нужного экрана при нажатии на кнопку на приборе.

Если бы экраны не были сгруппированы, а представляли собой последовательность не сгруппированных фреймов друг под другом, то для действия по событию «On click» -> «Scroll to» -> можно было бы выбрать нужный фрейм из списка. Но экранов будет много и если их не группировать, есть риск, что при перемещении что-то съедет.

Выбор нужного экрана для скроллирования при нажатии на кнопку устройства. Стрелка указывает в «пустоту» на нужный (скрытый) экран.

Далее запускаем прототип и видим, что при нажатии на выбранную кнопку происходит изменение экрана.
Как вспомогательная тестовая процедура — подвигать курсором мыши по LCD экрану, ударживая левую клавишу. Экраны должны скроллироваться.

Одна кнопка — много экранов (циклическая смена LCD экранов)

Теперь подошли к самому интересному. Как менять экраны с использованием Scroll To мы научились. Но, как быть, когда нажатие на одну и ту-же кнопку должно приводить к циклической смене экранов? Реализации такой фишки напрямую в Figmе нет (на 02.2021 🙂 ).

Воспользуемся уже отработанным трюком с Scroll To, но используем его и для скроллирования кнопки. Каждое нажатие кнопки по событию On Click должно приводить к смене кнопки, а по другому событию Mouse Down скроллировать экран на LCD дисплее.

Очень важно, чтобы смена (скроллирование) кнопки была именно по событию On Click.
С событием Mouse Down подмена кнопки не работает!

Приходится использовать два события, поскольку в Figma в объекте событие можно использовать только один раз. Таким образом нам нужно:

В изображении кнопки прибора создать frame внутри которого будут скроллироваться кнопки. К каждой кнопке в списке для скроллирования привяжем экраны, т.е. приведем к предыдущему варианту. Нужно не забыть для этого frame-а задать «Clip content» и на закладке Prototype задать вертикальное или горизонтальное (как удобно) скроллирование.
Создать несколько кнопок одну под другой (или рядом для горизонтального скроллирования) по числу экранов — 1 (один экран дефолтный). К каждой кнопке будет привязан свой экран.
В режиме просмотра прототипа можно посмотреть все ли корректно настроено, проскроллировав кнопки. Они визуально одинаковые, но процесс скроллированив Figma плавный, так что сразу понятно, что все работает.
Для каждой кнопки задать два события: по первому (Mouse Down) — смена (Scroll To) экрана в LCD frame-е, а по второму (On click) подстановка в frame основной кнопки (Scroll To) следующей кнопки.
Соответственно, при каждом нажатии на кнопку во frame кнопки сменится экран и подставится новая кнопка. Для нее уже будет привязка к переходу на следующий экран.

Оптимизация структуры макета

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

Создаем мастер-компонент с общими элементами для всех экранов.
Если в экране есть иконки — оформляем их отдельными компонентами, чтобы можно было изменять по желанию заказчика. Хотя можно и в мастер компоненте оставить, поскольку их уже можно будет заменить в одном месте.
Создаем на основе мастер-компонента экрана копии экранов и их редактируем. В копии компонента объекты перемещать нельзя, но можно редактировать их свойства. Например, сдвинуть линию не получится, но можно изменить толщину.
В мастер компонент отдельными объектами добавляются элементы, которые не являются общими для всех экранов. Они группируются, именуются понятным образом и скрываются на мастер-компоненте. На копиях можно будет скрыть одни элементы и открыть другие.
Группируем созданные экраны по некоторому логическому принципу. Например, объединяем в один блок все подменю.
Создаем компоненты на основе этих блоков. Даем им интуитивно понятное название.
Создаем изображение прибора с LCD frame-ом и подставляем в него один из компонентов экранов.
Создаем из изображения прибора компонент.
При копировании созданного компонента прибора в дальнейшем можно будет заменить компонент поставленный в экран, используя «Swap instance«.

Замена компонента блока экранов «Component 1» на блок экранов «Component 2» в копии компонента.

При необходимости создаем отдельные копоненты для таких логически связанных блоков меню.
Комбинируем скроллирование меню в рамках компонента и переходы на другие компоненты с полным изображением экрана прибора. Это улучшает визуализацию. Например, один подпункт меню объединен в корпусе прибора и смена экранов происходит в рамках компонента. При переходе в другое подменю идет переход на полную копию корпуса прибора. Такой подход укорачивает списки кнопок/экранов не перегружая разработку.