Десять ошибок при работе с цветом в UI

Самые распространенные ошибки дизайнеров при работе с цветом в интерфейсе. От неочевидных до банальных. С примерами, объяснением и рекомендациями, как исправить.

Иллюстрация Elizabeth Sanchez
Иллюстрация Elizabeth Sanchez

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

Обратите внимание, что примеры в статье утрированы для большей наглядности.

Итак, поехали

❌ 1. Использование бренд-цвета без изменений

Часто дизайнеры получают клиентский брендбук, в котором уже содержатся цвета бренда. Они разрабатываются графическими дизайнерами, которые уделяют внимание печатной продукции и тщательно прорабатывают основные оттенки в CMYK и Pantone, но при этом не уделяют достаточного внимания отображению бренд-цветов в интерфейсе.

Десять ошибок при работе с цветом в UI

Как исправить

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

❌ 2. Злоупотребление акцентным цветом

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

Десять ошибок при работе с цветом в UI

Как исправить

  • Всегда держите в голове правило 60-30-10, которое используют дизайнеры интерьеров. Применяйте его в работе с интерфейсом.
Десять ошибок при работе с цветом в UI
  • Добавляя очередной элемент с акцентным цветом в макет, спросите себя, можете ли вы обойтись без использования цвета или заменить его второстепенным цветом или оттенком.

  • Помните, что в идеале в поле зрения пользователя должен быть видимым только один главный элемент с целевым действием. Это поможет расставить приоритеты в макете.

❌ 3. Много ярких цветов, которые «спорят» с акцентным

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

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

Десять ошибок при работе с цветом в UI

Как исправить

  • Используйте менее насыщенные цвета для второстепенных элементов.
  • Откажитесь от сплошных заливок там, где это можно сделать.
  • Если во время работы все же нужен новый цвет или оттенок, поместите его, например, в группу Experimental. Дайте ему шанс показать себя на других макетах. Регулярно проводите ревизию цветов из этой группы и избавляйтесь от ненужных или, наоборот, переносите в дизайн-систему те цвета, которые хорошо себя показали.

❌ 4. Использование акцентного цвета для обозначения различных состояний интерфейса

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

Десять ошибок при работе с цветом в UI

Похожая проблема возникает, когда у продукта красный или зеленый акцентный цвет. Это создает трудности при дизайне сообщений об ошибках и успешных действиях пользователя. Из-за того, что такие элементы визуально «спорят» с акцентными.

Десять ошибок при работе с цветом в UI

Как исправить

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

❌ 5. Неудачное сочетание цветов

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

Десять ошибок при работе с цветом в UI

Как исправить

  • Проверяйте различные сочетания цветов и их контраст относительно друг друга на этапе проработки цветовой палитры для UI.
  • Пользуйтесь специальными инструментами:

❌ 6. «Недоступность» цветов

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

Под доступностью цветов зачастую понимают контраст между фоном и текстом по стандартам WCAG 2.0. Прорабатывая таким образом цвета, вы улучшаете пользовательский опыт не только для людей с нарушениями зрения, но и для всех, кто будет использовать интерфейс при ярком солнечном освещении.

К сожалению, даже те дизайнеры, которые знают о принципах доступности, часто ими пренебрегают.

Десять ошибок при работе с цветом в UI

Как исправить

  • Следуйте стандартам WCAG 2.0.
  • Проверяйте цвета на юзабилити-тестировании.
  • Проверяйте контраст и симулируйте различные нарушения зрения при помощи плагинов и специальных инструментов:

❌ 7. Неосторожное обращение с градиентами

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

Будьте внимательными при построении цветовой системы, которая содержит градиенты.

Десять ошибок при работе с цветом в UI

Как исправить

Проверяйте контраст каждой области градиента, где расположен текст по стандартам WCAG 2.0.

❌ 8. Недостаточное количество оттенков

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

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

Десять ошибок при работе с цветом в UI

Как исправить

  • Подумайте, как проект может развиваться в будущем, как он будет расти.
  • Определитесь с оптимальным количеством оттенков.
  • Воспользуйтесь специальными инструментами:

❌ 9. Дубли одного и того же цвета с разными параметрами

Эта ошибка встречается у начинающих дизайнеров, которые вводят новые цвета и не описывают (или не добавляют их) в основной ui-kit или дизайн-систему. Затем по какой-либо причине они решают изменить цвет. Но при этом в дизайне остаются элементы с предыдущим оттенком. Так появляется очередной дубль цвета и 23-й оттенок черного в тексте.

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

Десять ошибок при работе с цветом в UI

Как исправить

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

❌ 10. Копирование цветов из светлой темы в темную

Проработка цветов для темной темы — объемный вопрос и заслуживает отдельной статьи. Я затрону только один момент — перенос цветов из светлой темы в темную.

Цветные элементы после переноса со светлого фона на темный с большой вероятностью будут образовывать «плохой» контраст с фоном. Так что просто перекрасить фон в интерфейсе в черный и не модифицировать цвета не получится.

Десять ошибок при работе с цветом в UI

Как исправить

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

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

Черновик этой статьи лежал у меня больше года. За это время вышло немало хороших материалов о цвете в интерфейсе. Например, эта статья от дизайн-команды Lyft. Мыслим мы с ребятами очень похоже. Почитайте. 😉

Спасибо, что дочитали до конца. Если вам понравилось, подпишитесь на мой Telegram-канал. Там я делюсь своим опытом. Без подборок и чужих ссылок.

Больше моих статей можно почитать в блоге на Medium.

428428
57 комментариев

Отличная шпаргалка со ссылками.
Спасибо!

34
Ответить

Окей, Гугл, как тебе пункт №9?

29
Ответить

Ха ) Ну за 11 лет думаю сменилось немало дизайнеров. Всем хотелось хоть что-то перекрасить 😉

1
Ответить

Боян же, да ещё и неправда.

1
Ответить

А есть какое то правило, чтоб определять в какой момент инвертировать цвет шрифта?
Вот например, в данном случае я везде белым оставил :-\

7
Ответить

Привет, да есть. Коэффициент контрастности текста и фона. Я не размещал на этом скрине этот коэфициент, чтобы макет был компактным. Начиная с Primary40 коэффициент у чёрного текста выше, а у белого не проходит по стандартам WCAG 2.0 

7
Ответить