Введение
Индустрия HMI (англ. human-machine interface, рус. человеко-машинный интерфейс) все еще подобна голубому океану. Многие дизайнеры не решаются войти в эту новую отрасль, ошибочно полагая, что тут всё сложно и порог входа весьма высок. Данная статья призвана познакомить всех желающих с этой отраслью и прояснить некоторые базовые принципы и основы проектирования автомобильных интерфейсов. В процессе повествования будет показано множество примеров из реальных дизайн-кейсов.
Сразу уточню: спецификации используются для того, чтобы в том числе их нарушать, а статья имеет исключительно справочный характер
Из чего состоит дизайн-спецификация?
Дизайн-спецификация включает в себя: визуальную (UI) спецификацию и спецификацию взаимодействия. Сейчас мы ограничимся только визуальной составляющей, а про особенности взаимодействия с интерфейсом автомобиля будет рассказано в последующих статьях.
Визуальная спецификация
Между дизайном для автомобильных устройств и дизайнами веб- или мобильного интерфейсов на текущий момент существует большая разница. Основное отличие при этом кроется в их макетах (лейаутах). Проясним этот момент с позиции текста, цвета, расположения элементов в пространстве, закругленных углов, иконок и прочих составляющих дизайна, попутно приводя примеры из дизайн-практики.
Текстовая спецификация
Текст - очень важный элемент дизайна пользовательского интерфейса. Его использование - возможность протестировать уровень базовых навыков дизайнера. Именно текст напрямую влияет на впечатления и опыт пользователя, приобретаемые им в процессе использования продукта. В отношении используемого в дизайне текста важны такие параметры как выбор шрифта, его размер, цвет, начертание и высота текстовой строки.
1. Выбор шрифта
При работе над дизайном HMI важно определиться с тем, какой шрифт будет использоваться интерфейсом: кириллический, латинский, числовой или мультиязычный.
Если вы работаете, например, в консалтинговой компании, заказчик может передать вам в работу уже готовый пакет шрифтов, чем привнесет в вашу жизнь немного экшена: сразу после того, как клиент выбрал шрифт, если этот шрифт является платным, следует сначала уточнить у клиента, получил ли он лицензию на использование - дабы избежать последующих судебных споров.
Компания и сама может определиться со шрифтом, наняв профессионального шрифтового дизайнера для создания и проработки кастомного сета. Также в работе можно использовать и бесплатные шрифты (со свободной лицензией) - например, Roboto. В мультиязычных и международных проектах для языков, не покрываемых шрифтом Roboto, на помощь может прийти Noto Sans - этот шрифт создан на основе метрик, аналогичных Roboto, и своим существованием направлен на достижение визуально гармоничной интернационализации.
Кто-то задастся вопросом: почему нельзя использовать шрифты от Apple, разве они не бесплатные?
Отвечаю: автомобильные HMI-системы - это всегда коммерческое использование. Применение шрифтов Apple в своей работе без разрешения правообладателя является нарушением прав компании Apple на данные шрифты. Мобильные приложения же, размещаемые в App Store, тем не менее можно создавать с использованием шрифтов Apple, так как они фактически остаются внутри Apple-экосистемы (поэтому здесь нарушений нет).
2. Размер шрифта (font size)
Размер шрифта автомобильного HMI также должен соответствовать правилам: он должен быть намного больше, чем при работе с мобильным и веб-дизайном, дабы пользователю было комфортнее сканировать текстовую информацию. Наш проект объединил в себе результаты исследования интерфейса Baidu Apollo (прояснялись текстовые параметры) и типографскую шкалу для Android Automotive OS от Google. Ниже приведена текстовая спецификация для обоих проектов (красным выделена разница между ними):
При работе над проектом задаваемый размер шрифта поддерживается нами на уровне, кратном 4px (в соответствии со спецификацией от Google), что помогает сохранять консистентность и визуальную иерархию.
В целом, нижней планкой допустимого размера шрифта следовало бы считать отметку в 20px, однако саму ее следует применять с осторожностью. Обычно этот размер используется в качестве вспомогательного для текстовых значений внутри небольших лейблов, тогда как минимальный размер шрифта для текста на самом деле составляет 24px.
Подготовка и проработка текстовых спецификаций имеет два преимущества:
- Повторное использование стиля текста - прекрасная идея, несомненно повышающая эффективность работы как дизайнеров, так и кодеров;
- Для дизайна интерфейса теперь установлены правила, которым нужно следовать, чтобы избежать снижения общего ощущения гармонии.
3. Правила выбора цвета шрифта
- Контрастность между цветом текста и цветом фона должна соответствовать стандарту WCAG, при этом необходимо учитывать требования доступности интерфейсов для пользователей с различными возможностями. В связи с этим контраст должен поддерживаться нами на уровне 4.5:1 - 7:1, чтобы текст был четким и легко читаемым.
- Акцентируем цветом внимание на наиболее важных областях.
- Передаем через цвет ощущение визуальной иерархии между текстовыми элементами.
4. Вес шрифта (font weight)
Визуальный вес слова напрямую зависит от степени толщины начертания текста (она же - вес или насыщенность шрифта). Вес шрифта показан ниже:
Будьте осторожны при использовании среднего начертания шрифта (Medium) и старайтесь совсем не использовать жирный шрифт (Bold). Из-за bold-начертания страница будет визуально ощущаться совсем иначе, переходы между текстовыми элементами будут выглядеть неестественно, а также пропадет ощущение деликатности и легкости интерфейса.
Формируя спецификации шрифта, постарайтесь совсем убрать bold-шрифты из нее. Если вы хотите визуально отделить что-то жирным шрифтом от остальной информации, лучше выберите для такого случая medium-вес шрифта (примечание: на деле все это должно определяться в соответствии с реальными требованиями проекта, а моя спецификация приведена тут только для общего сведения).
5. Интерлиньяж (font line height)
Данный пункт был добавлен сюда потому, что об этом многократно меня спрашивали друзья, а я в свое время таки нашел ответ на данный вопрос. В текстовом модуле необходимо дополнительно увеличивать безопасное расстояние, о чем подробно рассказываю далее.
Высота текстового блока всегда беспокоила дизайнеров. Какой способ общения с кодером следует им использовать? Можем ли мы в процессе проектирования для выравнивания элементов относительно друг друга использовать размер текста вместо регулировки высоты строки текста? Ответ: Нет
В качестве примера можно привести WeChat Moments:
Высота текстовой строки должна быть больше размера шрифта. Размер шрифта информационной ленты мессенджера - 16px (для дизайн-проекта с кратностью разрешения @1x). В случае с многострочным текстом разработчиками WeChat вручную регулируется высота строки: в то время как обычная высота текстовой строки была бы равна 22px, ее фактическая высота устанавливается на уровне 20px. В свою очередь текстовый блок, высота строки в котором теперь 20px, потребуется еще и сдвинуть на 3px вверх, чтобы изображение и текст визуально располагались на одной линии.
Если разработку производить с учетом вышеупомянутого, кодеру необходимо уделить особое внимание фактической разнице между расположением изображения и текста в свойстве CSS. Такой дизайн с несогласованными высотами по итогу приводит к более громоздкому процессу разработки и верстки.
Окончательный вывод: обязательно общайтесь с кодером по поводу высоты текстовой строки.
Небольшое дополнение: высота строки для текстовых параграфов в автомобильном HMI обычно составляет 140% - 180% от размера шрифта (значение при этом округляется до целого числа), что обеспечивает комфортные условия чтения для пользователей. И немного профессиональных знаний: в процессе разработки шрифта шрифтовые дизайнеры обычно сразу закладывают некоторое безопасное расстояние для своих шрифтов во благо стабилизации их отображения.
При проектировании мы хоть и зададим, к примеру, размер шрифта San Francisco равный 30px, в фактическое значение интерлиньяжа мы обязаны будем включить еще и безопасное расстояние между верхней и нижней частями текста. В итоге фактическая высота будет равна 42px.
Высота строки для разных шрифтов будет различной: например, исходя из требований дизайн-системы Ant Design, для шрифта размером 30px она составит 38px (см. методику расчета на рисунке ниже).
Цветовая спецификация
1. Сценарий использования (usage scenario)
Воздействие солнца в течение дня (великое множество уровней интенсивности солнечного света утром, в середине и после полудня), дождливый сезон, ночь, подземные туннели... Существует очень много неопределенных факторов, которые могут оказывать влияние на интерфейс и на самого пользователя во время вождения автомобиля. Наиболее важной из них видится интерференция интенсивности света. Освещенность сильно варьируется в зависимости от времени суток, погоды, тонировки окон автомобиля и т.д. Из-за этого при использовании интерфейса в реальном мире обозреваемый цвет не всегда будет тем же, что был виден на компьютере при проектировании.
Учитывайте всегда то, как яркость цвета может влиять на условия вождения и как низкоконтрастные цвета будут размываться под прямыми солнечными лучами. Всегда предварительно просматривайте ваше приложение при различных условиях освещения, чтобы видеть то, как отображаются все цвета. При необходимости внесите коррективы, чтобы обеспечить наилучшее восприятие пользователем интерфейса в большинстве случаев его использования.
Начнем с того, что в большинстве систем, созданных и поддерживаемых производителями автомобилей, наиболее предпочтительным является темный фон. Например, возьмем две значимые автосистемы - Android Auto от Google и CarPlay от Apple. В своем проекте я тоже поначалу использовал темные цвета.
2. Цветовое сочетание
Хотел бы привести здесь одно из официальных высказываний Apple: "Цвета могут обеспечить интерактивность и визуальную согласованность и привнести жизнь в интерфейс". Это предложение очень хорошо передает всю суть. А суть состоит в том, что главное правило использования цвета в UI-дизайне - следование правилу 60-30-10 в дизайне страниц + создание ощущения сбалансированности, дабы фокус внимания пользователя мог легко и комфортно смещаться с одной точки на другую и при вождении автомобиля не формировалось ощущение большого визуального разрыва.
Цветовая спецификация для автомобильных HMI систем традиционно включает в себя фирменный цвет, смысловой цвет и нейтральный цвет.
Фирменный цвет (brand color), также известный как "акцентный цвет". Обычно HMI система имеет только один фирменный цвет, который также является цветом с высокой частотой. Основные сценарии использования акцентного цвета: индикация переключения вкладок и состояния кнопок, анимация звуковой дорожки при воспроизведении музыки и т.д.
Смысловой цвет (semantic color). Семантический цвет нужно привносить в пользовательский интерфейс, завязанный на точном выражении передаваемой информации. В сложных сценах цветовая тенденция должна быть очень очевидной для пользователя - это поспособствует уменьшению его трудозатрат на понимание значений цветов и времени, потраченного на обретение этого понимания, а также добавит щепотку хорошего опыта вождения в опыт путешествий.
Нейтральный цвет. В основном используется не только для текста, но и для таких случаев как цвет фона, разделительные линии, серая заливка, границы и обводки и т.д.
Примечание: при изменении цвета фона другие цвета системы меняются вслед за ним, что представляет собой переключение между двумя различными сетами цветовых спецификаций.
Как сформировать цветовую спецификацию для HMI?
Старайтесь использовать как можно меньше цветов в своем дизайне и не допускать чрезмерно высокой их насыщенности, дабы не провоцировать развитие зрительных расстройств и не мешать вождению.
Избегайте использования единой цветовой схемы для интерактивных и неинтерактивных элементов - если интерактивные и неинтерактивные элементы имеют одинаковый цвет, может быть трудно понять, куда нажать.
Поддерживайте цветовую консистентность - не используйте произвольно разные цвета для внесения различий в отображение дублирующих компонентов в пределах одного экрана. Если эти цвета не добавляют элементам какое-то значение и не имеют объективной ценности - пользуйтесь ими с особой осторожностью.
Устанавливайте визуальную иерархию с помощью различных значений непрозрачности или той же цветовой системы, но не злоупотребляйте - не применяйте слишком много значений непрозрачности или контраста к слишком большому количеству элементов.
Попробуйте использовать в своем дизайне темный фон, как это делают многие производители автомобилей на рынке. Хотя Apple CarPlay удалось успешно запустить и светлую тему для адаптации к дневному режиму освещения. Мы тоже добавили дневной режим в наш проект, но уже на средней и более поздней стадиях его реализации - после дорожных испытаний мы поняли, что когда солнце ослепительно светит, черный цвет отражает свет и водитель не может разглядеть отображаемый на экране контент.
В конце концов, цветовая схема приложения всегда тестируется в различных реальных условиях освещения.
При проектировании UI-системы автомобильного HMI берется в расчет и оценка достаточности цветовой контрастности, о чем уже упоминалось ранее (см. пункт "Сценарий использования").
В своей следующей статье я детально разберу требования WCAG, чтобы подробно объяснить особенности восприятия, работоспособности и стабильности интерфейсов. Сейчас же я сосредоточусь на самом важном.
Полное название WCAG - Руководство по обеспечению доступности веб-контента. WCAG-требования представляют собой группу рекомендаций и предложений по облегчению доступа пользователей к веб-контенту. В основном они ориентированы на людей с ограниченными возможностями и делятся на три уровня: A (минимальный уровень), AA и AAA (максимальный уровень).
Теперь о концепции. Контрастность двух белых цветов (#FFFFFF и #FFFFFF) составляет 1:1, а контрастность белого (#FFFFFF) и черного (#000000) - 21:1.
Чтобы соответствовать стандарту ААА, контрастность текста и изображения с текстом (когда весь текст представлен картинкой, а не как совокупность символов) по отношению к фону под ними должна составлять не менее 7:1, а контрастность крупного текста и крупного изображения с текстом должна составлять не менее 4.5:1.
Резюмируем
Скрупулезность в использовании цвета - свидетельство дизайнерской глубины и долговечности.
Все вышеупомянутые правила использования цвета не могут быть применимы ко всем дизайн-схемам в мире, однако должны быть детально проанализированы при работе над конкретными проектами. У разных групп пользователей разные сценарии применения приложения. Например, дизайн экрана с контентом для водителей и людей, сидящих на заднем сиденье, определенно будет отличаться.
Автор статьи: LambTroy
Оригинал статьи: AxureBoutique
