Новости

Статьи

Home News

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

23.08.2018

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

Программируемое реле для управления освещением в квартире

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



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


Освещение на даче

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

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


DALI управление светодиодными панелями

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующая заметка

© 2011-2015 Детская художественная школа
Россия, Ульяновская область,
г.Димитровград, проспект Автостроителей, 55, тел/факс (84235) 7-56-38

rss