Панель управления фарами: дизайн проекта Arduino

Разработчики Arduino обычно не заморачиваются над дизайном. В лучшем случае мы увидим сборную солянку, собранную из бесплатных клипартов из интернета. В заводских приложениях ситуация получше: всё выровнено по сетке, элементы не прилипают друг к другу.

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

Как сделать наглядный и удобный тач-скрин

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

Экран бортового компьютера, отвечающий за фары

Правило 1. Элементы на экране располагаем примерно так, как они расположены на самом деле.

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

...Аналогично создан второй экран, показывающий температуру двигателя и температуру в салоне автомобиля:

По расположению очевидно, к чему относится температура

Некоторым элементам придётся нарисовать несколько состояний, например, включен / выключен, и подготвить их в виде отдельных файлов в формате PNG:

Активные и пассивные состояния кнопочек

Правило 3. Активное состояние кнопки должно говорить само за себя. Физические элементы в активном состоянии светятся.

В принципе, на этом этапе работа дизайнера закончена. Но лучше всего создать прототип проекта в какой-нибудь среде разработки, чтобы программист ничего не перепутал.

Скелет проекта в Nextion Editor

Аккуратно переносим все нарисованные элементы в приложение, в моём случае это Nextion Editor. Моя версия приложения не поддерживала прозрачный фон у иконок, пришлось переделать все значки, зацепив их вместе с куском фона. Это нужно учитывать, чтобы не было косяков с наложением рядом стоящих элементов. Прозначные края можно имитировать, и конечный пользователь ни о чём не догадается.

Координаты кнопок можно подсматривать в Фотошоповском окошке «Инфо»:

Координаты элементов, выровненных по сетке

Я видел несколько проектов, где кнопочка «едет» на 1 пиксель при наведении или при включении активного состояния. Да что там говорить, такое бывало даже в бюджетных телефонах. Отсюда правило номер 4:

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

Демонстрационное видео проекта

Хороший дизайн угадывается по нюансам. Например, здесь автомобиль нарисован по образу и подобию настоящего Pajero, в котором и будет стоять данный бортовой компьютер.

Смотрите также

Комментарии