Десять ошибок при работе с цветом в UI
Самые распространенные ошибки дизайнеров при работе с цветом в интерфейсе. От неочевидных до банальных. С примерами, объяснением и рекомендациями, как исправить.
Идея этой статьи появилась после того, как я стал замечать одни и те же ошибки, которые совершают начинающие дизайнеры при работе с цветом в интерфейсе. Цвет — один из сильнейших инструментов в руках дизайнера, поэтому важно уметь правильно с ним обращаться.
Обратите внимание, что примеры в статье утрированы для большей наглядности.
Итак, поехали
❌ 1. Использование бренд-цвета без изменений
Часто дизайнеры получают клиентский брендбук, в котором уже содержатся цвета бренда. Они разрабатываются графическими дизайнерами, которые уделяют внимание печатной продукции и тщательно прорабатывают основные оттенки в CMYK и Pantone, но при этом не уделяют достаточного внимания отображению бренд-цветов в интерфейсе.
Как исправить
- Если цвет просто сконвертирован из CMYK в RGB, это легко заметить по насыщенности. Обычно такие цвета выглядят приглушенными на экранах. В таком случае сделайте отдельную экранную версию цвета, не сильно отличающуюся от бренд-цвета, но удовлетворительную по насыщенности и контрасту.
- Даже если дизайнер, разработавший брендбук, уделил внимание экранной версии бренд-цветов, проверьте контраст и то, как они работают (выглядят) в интерфейсе.
❌ 2. Злоупотребление акцентным цветом
Дизайнеры заигрываются и начинают раскрашивать все элементы интерфейса в акцентные цвета. Не будем подробно останавливаться на причинах таких действий. Например, это может быть просьба клиента, менеджера или банальный непрофессионализм дизайнера.
Как исправить
- Всегда держите в голове правило 60-30-10, которое используют дизайнеры интерьеров. Применяйте его в работе с интерфейсом.
Добавляя очередной элемент с акцентным цветом в макет, спросите себя, можете ли вы обойтись без использования цвета или заменить его второстепенным цветом или оттенком.
- Помните, что в идеале в поле зрения пользователя должен быть видимым только один главный элемент с целевым действием. Это поможет расставить приоритеты в макете.
❌ 3. Много ярких цветов, которые «спорят» с акцентным
Dribbble и похожие площадки породили дизайнеров, уверенных, что интерфейс должен быть максимально ярким, с большим количеством цветов и их оттенков. Также часто дизайнеры ситуативно добавляют и вводят новый цвет в интерфейс без каких-либо предпосылок.
Так интерфейс обрастает новыми дополнительными цветами, которые не образуют систему. Теряются действительно важные элементы с целевым действием. У пользователя увеличивается когнитивная нагрузка.
Как исправить
- Используйте менее насыщенные цвета для второстепенных элементов.
- Откажитесь от сплошных заливок там, где это можно сделать.
- Если во время работы все же нужен новый цвет или оттенок, поместите его, например, в группу Experimental. Дайте ему шанс показать себя на других макетах. Регулярно проводите ревизию цветов из этой группы и избавляйтесь от ненужных или, наоборот, переносите в дизайн-систему те цвета, которые хорошо себя показали.
❌ 4. Использование акцентного цвета для обозначения различных состояний интерфейса
Часто дизайнеры не уделяют должного внимания деталям, и в итоге все сообщения — будь то ошибка или информационное сообщение — обозначаются акцентным цветом. Это усложняет понимание сообщений пользователем, так как визуально они практически неразличимы.
Похожая проблема возникает, когда у продукта красный или зеленый акцентный цвет. Это создает трудности при дизайне сообщений об ошибках и успешных действиях пользователя. Из-за того, что такие элементы визуально «спорят» с акцентными.
Как исправить
- Прорабатывайте цвета для всех состояний и следите за тем, чтобы они отличались от акцентного.
- Используйте другой оттенок или цвет для ошибок, информационных сообщений и успешных (success) состояний. Так вы дифференцируете элементы интерфейса друг от друга. Например, Netflix на момент написания этой статьи использует оранжевый цвет для отображения ошибок.
❌ 5. Неудачное сочетание цветов
На этапе подбора цветов дизайнеры часто забывают, что в будущем цвета могут размещаться не только на основном фоне (например, белом или черном), но и комбинироваться и располагаться друг на друге. Неудачные комбинации цветов создают неприятный для глаз контраст и плохо считываются.
Как исправить
- Проверяйте различные сочетания цветов и их контраст относительно друг друга на этапе проработки цветовой палитры для UI.
- Пользуйтесь специальными инструментами:
❌ 6. «Недоступность» цветов
Тема доступности становится популярнее в последние годы, и все больше дизайнеров уделяет ей внимание при работе с интерфейсами. В том числе, это касается потребностей пользователей с нарушениями зрения.
Под доступностью цветов зачастую понимают контраст между фоном и текстом по стандартам WCAG 2.0. Прорабатывая таким образом цвета, вы улучшаете пользовательский опыт не только для людей с нарушениями зрения, но и для всех, кто будет использовать интерфейс при ярком солнечном освещении.
К сожалению, даже те дизайнеры, которые знают о принципах доступности, часто ими пренебрегают.
Как исправить
- Следуйте стандартам WCAG 2.0.
- Проверяйте цвета на юзабилити-тестировании.
- Проверяйте контраст и симулируйте различные нарушения зрения при помощи плагинов и специальных инструментов:
❌ 7. Неосторожное обращение с градиентами
Уже лет 5 как градиенты не выходят из подборок дизайн-трендов. Кажется, мы пережили волну их популярности в интерфейсах, но дизайнеры продолжают их использовать. При этом нет ничего плохого в градиентах как таковых. Но может быть такое, что часть градиента будет недоступной с точки зрения контраста (см. предыдущий пункт).
Будьте внимательными при построении цветовой системы, которая содержит градиенты.
Как исправить
Проверяйте контраст каждой области градиента, где расположен текст по стандартам WCAG 2.0.
❌ 8. Недостаточное количество оттенков
На старте дизайн-проекта дизайнеры начинают с определения одного оттенка для акцентного цвета. Если повезет, то создают еще парочку оттенков для нескольких состояний. Например, для состояния hover. На этом работа с цветом заканчивается.
Но во время разработки проекта выясняется, что такого количества оттенков недостаточно, и дизайнер по ходу дела придумывает дополнительные. Это происходит в разгар рабочего процесса. В результате они выбираются рандомно и не образуют систему.
Как исправить
- Подумайте, как проект может развиваться в будущем, как он будет расти.
- Определитесь с оптимальным количеством оттенков.
- Воспользуйтесь специальными инструментами:
❌ 9. Дубли одного и того же цвета с разными параметрами
Эта ошибка встречается у начинающих дизайнеров, которые вводят новые цвета и не описывают (или не добавляют их) в основной ui-kit или дизайн-систему. Затем по какой-либо причине они решают изменить цвет. Но при этом в дизайне остаются элементы с предыдущим оттенком. Так появляется очередной дубль цвета и 23-й оттенок черного в тексте.
Возможно, визуальные отличия будут минимальными, но такой подход сильно усложняет жизнь разработчикам и другим дизайнерам в команде.
Как исправить
Добавляйте в стили все цвета, которые вводите в макет. Обновляйте их только через стили. Даже если вам нужно для эксперимента ввести новый цвет, создайте стиль под названием Experimental. В будущем, когда поймете, работает ли этот стиль, обновите основной.
❌ 10. Копирование цветов из светлой темы в темную
Проработка цветов для темной темы — объемный вопрос и заслуживает отдельной статьи. Я затрону только один момент — перенос цветов из светлой темы в темную.
Цветные элементы после переноса со светлого фона на темный с большой вероятностью будут образовывать «плохой» контраст с фоном. Так что просто перекрасить фон в интерфейсе в черный и не модифицировать цвета не получится.
Как исправить
- На начальном этапе прорабатывайте достаточное количество как темных, так и светлых оттенков (например, как в Material Design).
- Используйте менее насыщенные оттенки для темной темы.
- Не забывайте про цвет текста. Например, на кнопках, с большой долей вероятности, его придется инвертировать.
На мой взгляд, мы разобрали самые распространенные ошибки и, в то же время, самые важные. Я надеюсь, что статья поможет вам избежать подобных просчетов в своей работе.
Черновик этой статьи лежал у меня больше года. За это время вышло немало хороших материалов о цвете в интерфейсе. Например, эта статья от дизайн-команды Lyft. Мыслим мы с ребятами очень похоже. Почитайте. 😉
Спасибо, что дочитали до конца. Если вам понравилось, подпишитесь на мой Telegram-канал. Там я делюсь своим опытом. Без подборок и чужих ссылок.
Больше моих статей можно почитать в блоге на Medium.
Отличная шпаргалка со ссылками.
Спасибо!
Окей, Гугл, как тебе пункт №9?
Ха ) Ну за 11 лет думаю сменилось немало дизайнеров. Всем хотелось хоть что-то перекрасить 😉
Боян же, да ещё и неправда.
А есть какое то правило, чтоб определять в какой момент инвертировать цвет шрифта?
Вот например, в данном случае я везде белым оставил :-\
Привет, да есть. Коэффициент контрастности текста и фона. Я не размещал на этом скрине этот коэфициент, чтобы макет был компактным. Начиная с Primary40 коэффициент у чёрного текста выше, а у белого не проходит по стандартам WCAG 2.0
вот же, из части про контрастность — https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-examples-head