Цветовые палитры интерфейсов. Часть 1. Введение и факторы

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

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

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

Это первая статья, мы в ней разберем причины цветовых палитр и факторы, влияющие на них. Во второй статье мы изучим варианты цветовых палитр для разных контекстов работы. В третьей — как практически проработать набор палитр на уровне токенов дизайн-системы, с разными частными случаями из моей практики, чтобы не сойти с ума.

Считайте, эдакий эргономический взгляд на графический дизайн — впрочем, тема эта намного шире, чем лишь только вопросы освещенности, и, вероятно, потом будут еще статьи на тему эргономичного оформления интерфейсов.

О каких продуктах будет идти речь

Чтобы изложение не звучало чересчур абстрактным, приведу примеры продуктов, используемых в разных условиях освещенности.

• Обычное офисное приложение (например, текстовый редактор или бухгалтерская система)
• Мониторингово-управляющая система, применяемая круглосуточно в каком-нибудь центре управления (например, в центре управления полётами, авиационном диспетчерском центре и т.д.)
• Медицинское оборудование, используемое в ярко освещенной операционной. Либо рабочее место лаборанта-рентгенолога с дисплеями и пультом управления в полутёмной комнате с рентгенонепрозрачным окном в освещенную процедурную, где проводится обследование.
• Автомобильная приборная панель, навигатор и infotainment система.
• Навигационные инструменты, стоящие прямо в кокпите (то есть снаружи) лодки или яхты, и используемые в таких предельных ситуациях, как в тёмную ночь в открытом море, либо когда солнечный свет падает прямо на экран.
• Микшерский пульт звукорежиссера с встроенным дисплеем и прочие студийные и концертные приложения/продукты.

Но, конечно, вы можете держать в уме и собственные примеры.

Зачем нужны палитры?

Самый первый вопрос, с которого стоит начать — зачем вообще нужно делать несколько цветовых палитр? И хотя ответ очевиден, некоторые нюансы помогут нам лучше подготовиться к рассмотрению факторов.

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

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

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

Факторы

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

Условия освещенности

Освещенность среды, в которой будет использоваться продукт — один из основных факторов. Освещение в принципе бывает двух типов:

• Естественное — то, которое определяется временем года, временем суток и погодными условиями в конкретной местности. Не контролируется, является данностью. В нашей власти лишь понимать, как часто наш продукт будет находиться в условиях естественного освещения, и можем ли мы как-то компенсировать его условия с помощью искусственного освещения.
• Искусственное — обеспечивается спроектированными источниками света, а значит, к слову, может не только учитываться, но и проектироваться (если, например, мы проектируем какой-нибудь центр управления или мониторинга, работающий круглосуточно — с видеостенами, рабочими станциями, основным и резервным освещением).

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

Распределение света

Очень важно еще и распределение света в окружающей нашу систему среде. Ключевыми областями являются:

• Область непосредственно вокруг и за экраном — именно она часто определяет необходимую яркость дисплея, дабы он не был ярким бельмом в полумраке или наоборот, черным квадратом Малевича на ярком фоне.
• Освещенность напротив экрана — хотя оператор и расположен к ней затылком и не воспринимает её, она может формировать блики и лишние отражения в экране, усложняющие восприятие изображения. Даже сам оператор и его одежда может быть «проблемой» — если его лицо освещает яркий солнечный свет, он будет видеть скорее себя, чем содержимое дисплея при недостаточной яркости дисплея.
• Рабочие области внимания — если оператор не смотрит все рабочее время только в экран или экраны перед ним, но еще и переводит взгляд в другие места — например, смотрит в окно судового мостика или на пациента из лаборантской, то освещенность рабочей области и яркость экрана тоже должны быть гармонизированы. Ибо нашим глазам нужно время на адаптацию как в сторону от более яркого к более темному, так и наоборот.

Человеческий фактор

Как все мы знаем, у нас на сетчатке есть два вида фоторецепторов. Один из них — колбочки — отвечает за дневное и цветовое восприятие. Плюс он хорошо реагирует на быстро движущиеся объекты. Другой — палочки — отвечает за ночное зрение, но видит всё в черно-белом цвете. Рассмотрим это поподробнее, и как влияет на восприятие «картинки» на экране.

Адаптация к ночному зрению занимает довольно продолжительное время, тогда как активация колбочек (и «выключение» палочек) ярким светом происходит заметно быстрее. Это значит, что если мы смотрели во время ночной вахты какое-то время в окно судна, то достаточно нескольких секунд взгляда на яркий дисплей на мостике, чтобы мы потеряли способность видеть ночью и снова проходили адаптацию к темноте. То же самое происходит когда мы едем ночью по трассе и на встречу нам едут машины — даже ближний свет фар вырубает наше ночное зрение напрочь.

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

Изменения восприятия одного и того же в прямой и периферийной областях

В условиях ночного зрения, объекты в периферии заметны лучше (кажутся ярче), чем когда мы смотрим на них напрямую. Это хорошо заметно, когда смотришь на ясное небо тёмной ночью — звезды лучше видны, когда на них смотришь чуть «сбоку», и могут совсем пропадать, когда смотришь на них напрямую.

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

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

Фактор аппаратных средств

Яркость экрана

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

Яркость измеряется в канделах на квадратный метр. Чем она больше — тем ярче световой поток от экрана. И именно она задает возможности применения экрана.

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

Вместе с тем, слишком яркий дисплей может быть недостаточно хорош для ночного использования. Уровни яркости в современных экранах довольно дискретны (попробуйте прямо сейчас пойти в комнату без света — например в ванную — и сделать минимальную яркость дисплея ноутбука или телефона, с которого вы читаете пост и посидеть там минут 20), и даже использование значения в единицы процентов может приводить к чересчур яркой для необходимых условий картинке.

Светимость черного

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

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

Матовые и глянцевые экраны

Экраны бывают матовыми и глянцевыми, причем в последнее время матовые стали встречаться всё реже. Я помню, когда лет семь назад все переходили на глянцевые экраны, это у многих вызывало удивление — ведь глянцевые экраны хоть и выдавали субъективно более «сочную» картинку, вместе с тем также и прекрасно заменяли зеркало (вспомним одноименный сериал), в котором мы видели в том числе себя и яркий фон за нами.

Меж тем, матовые экраны тоже не лишены недостатков — блики в них хоть и становятся мягче, но разрастаются во все стороны, цвета же несколько теряют свою насыщенность и контраст. Поэтому, как всегда, для разных задач и контекстов стоит выбирать разные дисплеи.

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

Автоматическая и ручная регулировка яркости

В мобильных телефонах и современных ноутбуках активно используются сенсоры освещенности (часто в их роли служит вебкамера) и они пытаются регулировать яркость экрана автоматически. Далеко не всегда эти алгоритмы работают хорошо или хотя бы настолько хорошо, чтобы не приходилось пользоваться ручной настройкой — а часто и откровенно халтурят. Одна из причин в том, что они замеряют яркость не фона за экраном, а, то что происходит прямо перед экраном — грубо говоря, яркость нашего лица, а не окружения экрана, поэтому, например, приблизив голову к экрану, система может внезапно поменять яркость (этим страдают и Макбуки). Для профессиональных контекстов такое поведение может быть нежелательно.

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

Факторы рабочих задач

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

Продолжительность работы

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

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

Частота переключений внимания с экрана за его пределы

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

Наличие значимых индикаций

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

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

Что дальше?

Мы с вами рассмотрели самые разные факторы, которые влияют на выбор палитры пользовательских интерфейсов — в принципе, этого достаточно, чтобы подходить к созданию цветовой модели UI/HMI осмысленно.

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