7 заметок с меткой интерфейс

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

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

  • Этот дизайн точно делал программистЭтот дизайн точно делал программист

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эволюция интерфейса камеры в фильмах

Когда главный герой в фильме снимает что-то на камеру или телефон, или нам показывают найденную кассету, то это нужно как-то объяснить зрителям, иначе мы не поймём, что это — ЗАПИСЬ. Поэтому сверху видео накладываются элементы интерфейса камеры.

Главный герой включает камеру, спускается в подвал, и сейчас будет что-то ужасноеГлавный герой включает камеру, спускается в подвал, и сейчас будет что-то ужасное

Эти элементы эволюционируют. В течение 20 лет был популярен приём с полосками по всему экрану, рамкой и огромной надписью REC. А сегодня мы видим интерфейс камеры айфона:

Кадр из фильма The Vatican TapesКадр из фильма The Vatican Tapes

Я понимаю, для чего используется подобный приём: чтобы мы почувствовали себя на месте главного героя. И что-то на экране должно напоминать нам, что это — не кусок фильма, а видеозапись внутри фильма. Но меня смущает, что этот интерфейс пририсовали на видеоматериал фильма.

Через 50 лет люди не будут знать, что красный кружочек — это кнопка REC. У них возникнут вопросы :) Поэтому предлагаю универсальный способ на все времена:

В подписи даётся дополнительная информация для понимания сюжетаВ подписи даётся дополнительная информация для понимания сюжета

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

Выбор персонажа

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

— чтобы Катя не знала, кто кого выбрал (до тех пор, пока гости не зайдут в дверь),
— чтобы каждый выбрал персонажа из списка, и при этом не было повторов,
— желательно обойтись без бумажек, звонков и переписки.

Кажется, это идеальные условия для создания онлайн-сервиса:

Онлайн-сервис выбора персонажа написан «на коленке» при помощи jquery, php и mysql. Все запросы идут по ajax. Работает на любых устройствах, где есть интернет. Кате осталось только разместить ссылку вКонтакте — и на следующий день все уже выбрали свои роли.

Да, я был в роли Джека Воробья :) Фотки выложу попозже :)

Браузер из будущего

Вот список функций, которые должны быть встроены в браузер:

  • — удобный просмотр картинок (с зумом и перелистыванием),
  • — аудио- и видеоплеер,
  • — удобная загрузка файлов на сервер,
  • — кнопка «Наверх».

В настоящее время эти и многие другие нужные вещи приходится писать на яваскрипте или даже флеше, и это печально.

Прямые углы в природе

Всё то, что мы видим на экране компьютера или телефона, вписано в прямоугольную рамку. Но является ли такая форма оптимальной для восприятия? Разве так сохраняются в голове визуальные образы (например, красивый пейзаж)?

Удобно в производстве. Неестественно для восприятия.Удобно в производстве. Неестественно для восприятия.

Кстати, этот планшет специально сфоткан под углом (прямоугольник искажён перспективой): такой образ интереснее и приятнее.

Поле зрения

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

Границы поля зрения (для белого, синего, красного и зелёного цветов)Границы поля зрения (для белого, синего, красного и зелёного цветов)

Полноценное поле зрения, где хорошо различаются все цвета, представляет из себя круг (в лучше случае овал, но никак не прямоугольник).

Затем мозг анализирует каждый объект, и в частности, его форму (силуэт). При этом не важно, как лежат объекты: в ряд, друг за другом, или свалены в кучу. Даже мозг ребёнка успешно справляется с этой задачей.

▼ Читать дальше

Защита от копирования во флеше

В раскрасках на ejonok.ru многое сделано вручную. Поэтому хотелось максимально защитить свои труды. Известно, что любой элемент из флеш-приложения можно вытащить (с помощью специальных программ). Также известно, что в интернете воруют обычно то, что плохо лежит. Поэтому эффективно работают самодельные методы защиты, незнакомые потенциальному вору.

Разделяем ресурсы

Раньше раскраску можно было скачать и запустить на компьютере «как есть», теперь — нельзя. Одна из причин кроется в разделении флешки на две части: оболочка (интерфейс) + подгружаемый рисунок, доступный только в интернете.

Проверка домена

Оболочка проверяет адрес своего расположения (ejonok.ru) и загружает рисунок. Если запустить оболочку на своём компе или на другом сайте, мы увидим лишь белый экран.

Саму оболочку можно «распотрошить», вытащить оттуда всю графику (кнопочки, плашечки) и скрипты. Кнопочки вряд ли кому-то нужны (есть готовые клипарты), а вот код полезен, потому что в нём зашиты все секреты. Если код изменить до неузнаваемости обфускатором, то разобраться в нём будет очень тяжело.

▼ Читать дальше

Выход из личного кабинета на сайте МГТС

Есть «виндовская» традиция: подтверждать каждый чих пользователя (да/нет/отмена/крестик). По возможности лучше избегать таких окошечек-вопросов.

Достаточно проверить условия:
1) действие нельзя выполнить случайно;
2) действие легко отменить

— если хотя бы одно из них верно, то можно не спрашивать подтверждения перед выполнением этого действия.

В личном кабинете МГТС есть промежуточная страничка, которая появляется по нажатию кнопки «Выход»:

Страница подтверждения выхода из системыСтраница подтверждения выхода из системы

Во-первых, не страшно, если человек случайно выйдет из личного кабинета: это ж не система управления самолётом. Зайдёт заново — делов-то!

Но меня бесит эта страничка по другой причине: зачем после чёткого вопроса на Да/Нет дополнительно объяснять значение кнопок? Это не помогает, а наоборот сбивает с толку, заставляя лишний раз вчитываться в текст.

▼ Читать дальше

© 2004...2018