Разработчики Arduino обычно не заморачиваются над дизайном. В лучшем случае мы увидим сборную солянку, собранную из бесплатных клипартов из интернета. В заводских приложениях ситуация получше: всё выровнено по сетке, элементы не прилипают друг к другу.
Если вы хотите сделать красивое и удобное приложение, то лучше всего обратиться к знакомому дизайнеру. Нарисовать такой проект в фотошопе — не сложно. Важно не перестараться с украшательством. Если без слов понятно, как управлять прибором, значит, дизайнер хорошо потрудился.
Чтобы панель управления была наглядной, рекомендую задуматься о реальном положении вещей — и просто перенести это на экран. Например, при разработке панели управления внешними световыми приборами мы расположили на фоне автомобиль, а поверх него — кнопки. Кнопки снабжены крупной и понятной иконкой, и расположены примерно там же, где находится соответствующая фара или фонарь. Фары на иконках направлены в ту сторону, в которую они реально светят.
Правило 1. Элементы на экране располагаем примерно так, как они расположены на самом деле.
Правило 2. Кнопка делается больше отпечатка пальца, чтобы по ней было удобно жмякать в любых условиях, на ходу, и даже в экстренной ситуации.
...Аналогично создан второй экран, показывающий температуру двигателя и температуру в салоне автомобиля:
Некоторым элементам придётся нарисовать несколько состояний, например, включен / выключен, и подготвить их в виде отдельных файлов в формате PNG:
Правило 3. Активное состояние кнопки должно говорить само за себя. Физические элементы в активном состоянии светятся.
В принципе, на этом этапе работа дизайнера закончена. Но лучше всего создать прототип проекта в какой-нибудь среде разработки, чтобы программист ничего не перепутал.
Аккуратно переносим все нарисованные элементы в приложение, в моём случае это Nextion Editor. Моя версия приложения не поддерживала прозрачный фон у иконок, пришлось переделать все значки, зацепив их вместе с куском фона. Это нужно учитывать, чтобы не было косяков с наложением рядом стоящих элементов. Прозначные края можно имитировать, и конечный пользователь ни о чём не догадается.
Координаты кнопок можно подсматривать в Фотошоповском окошке «Инфо»:
Я видел несколько проектов, где кнопочка «едет» на 1 пиксель при наведении или при включении активного состояния. Да что там говорить, такое бывало даже в бюджетных телефонах. Отсюда правило номер 4:
Правило 4. Картинки различных состояний элементов должны совпадать пиксель в пиксель. Перед запуском проекта нужно запустить демо режим и проверить все эти состояния в работе.
Хороший дизайн угадывается по нюансам. Например, здесь автомобиль нарисован по образу и подобию настоящего Pajero, в котором и будет стоять данный бортовой компьютер.
Задача:имеется CRM-система, в которой ведётся учёт объектов недвижимости, входящих контактов, текущих клиентов, запланированных событий, записи разговоров с продавцами и т.п.Нужно сделать мобильную копию CRM, немного урезать функционал, чтобы было удобно пользоваться на смартфоне или планшете — во время встречи с клиентами и в условиях плохого интернета за городом.
Ключевой момент — удобство и мобильность, то есть: крупные иконки, крупный шрифт и ничего лишнего. Приложение мы делали для нашей компании, для внутреннего использования девушками-продавцами.
Совместно с Иваном Мироновым мы выбрали те функции CRM, которые необходимы в мобильной версии, продумали структуру и набросали черновик сценариев на бумаге. Далее я нарисовал примерные экраны приложения и обозначил для нашего программиста связи между экранами, указав активные элементы:
▼ Читать дальше
Когда главный герой в фильме снимает что-то на камеру или телефон, или нам показывают найденную кассету, то это нужно как-то объяснить зрителям, иначе мы не поймём, что это — ЗАПИСЬ. Поэтому сверху видео накладываются элементы интерфейса камеры.
Эти элементы эволюционируют. В течение 20 лет был популярен приём с полосками по всему экрану, рамкой и огромной надписью REC. А сегодня мы видим интерфейс камеры айфона:
Я понимаю, для чего используется подобный приём: чтобы мы почувствовали себя на месте главного героя. И что-то на экране должно напоминать нам, что это — не кусок фильма, а видеозапись внутри фильма. Но меня смущает, что этот интерфейс пририсовали на видеоматериал фильма.
Через 50 лет люди не будут знать, что красный кружочек — это кнопка REC. У них возникнут вопросы 😃 Поэтому предлагаю универсальный способ на все времена:
Подпись появляется на пару секунд, чтобы люди успели прочитать, и потом плавно угасает, оставляя зрителя наедине с чистой картинкой, которую он бы видел в реальности.
Вот список функций, которые должны быть встроены в браузер:
В настоящее время эти и многие другие нужные вещи приходится писать на яваскрипте или даже флеше, и это печально.
Всё то, что мы видим на экране компьютера или телефона, вписано в прямоугольную рамку. Но является ли такая форма оптимальной для восприятия? Разве так сохраняются в голове визуальные образы (например, красивый пейзаж)?
Кстати, этот планшет специально сфоткан под углом (прямоугольник искажён перспективой): такой образ интереснее и приятнее.
Восприятие начинается с картинки, которую получает наш мозг от каждого глаза. Границы этой картинки называются полем зрения. Вот так выглядит поле зрения у здорового человека:
Полноценное поле зрения, где хорошо различаются все цвета, представляет из себя круг (в лучше случае овал, но никак не прямоугольник).
Затем мозг анализирует каждый объект, и в частности, его форму (силуэт). При этом не важно, как лежат объекты: в ряд, друг за другом, или свалены в кучу. Даже мозг ребёнка успешно справляется с этой задачей.
В раскрасках на ejonok многое сделано вручную. Поэтому хотелось максимально защитить свои труды. Известно, что любой элемент из флеш-приложения можно вытащить (с помощью специальных программ). Также известно, что в интернете воруют обычно то, что плохо лежит. Поэтому эффективно работают самодельные методы защиты, незнакомые потенциальному вору.
Раньше раскраску можно было скачать и запустить на компьютере «как есть», теперь — нельзя. Одна из причин кроется в разделении флешки на две части: оболочка (интерфейс) + подгружаемый рисунок, доступный только в интернете.
Оболочка проверяет адрес своего расположения (ejonok.ru) и загружает рисунок. Если запустить оболочку на своём компе или на другом сайте, мы увидим лишь белый экран.
Саму оболочку можно «распотрошить», вытащить оттуда всю графику (кнопочки, плашечки) и скрипты. Кнопочки вряд ли кому-то нужны (есть готовые клипарты), а вот код полезен, потому что в нём зашиты все секреты. Если код изменить до неузнаваемости обфускатором, то разобраться в нём будет очень тяжело.
Есть «виндовская» традиция: подтверждать каждый чих пользователя (да/нет/отмена/крестик). По возможности лучше избегать таких окошечек-вопросов.
Достаточно проверить условия:1) действие нельзя выполнить случайно;2) действие легко отменить
— если хотя бы одно из них верно, то можно не спрашивать подтверждения перед выполнением этого действия.
В личном кабинете МГТС есть промежуточная страничка, которая появляется по нажатию кнопки «Выход»:
Во-первых, не страшно, если человек случайно выйдет из личного кабинета: это ж не система управления самолётом. Зайдёт заново — делов-то!
Но меня бесит эта страничка по другой причине: зачем после чёткого вопроса на Да/Нет дополнительно объяснять значение кнопок? Это не помогает, а наоборот сбивает с толку, заставляя лишний раз вчитываться в текст.
Иван Титов