{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}
Дизайн
Andrey Zhulidin

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

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

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

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

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

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

❌ 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.

0
57 комментариев
Написать комментарий...
Al Al

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

Ответить
Развернуть ветку
Dmitry Tverdokhlebov

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

Ответить
Развернуть ветку
Andrey Zhulidin
Автор

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

Ответить
Развернуть ветку
Рина Рейми

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

Ответить
Развернуть ветку
Целый украинец

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

Ответить
Развернуть ветку
Andrey Zhulidin
Автор

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

Ответить
Развернуть ветку
6 комментариев
Ilya Khromov
Ответить
Развернуть ветку
Ревизор

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

Ответить
Развернуть ветку
Andrey Zhulidin
Автор

Привет,

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

Приведу самый простой пример. Тебе нужно разместить ссылку не на белом фоне, а на сером или цветном. И тут начинаются проблемы. Фон и ссылка визуально «не дружат» или у текста и фона недостаточный коэффициент контрастности. Ну и создание тёмной темы в разы упрощается с таким подходом. 

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

Ответить
Развернуть ветку
Илья Константинович

+1 не раскрыта тема теней и эффектов прозрачности, ими можно тоже классно обыграть имея даже 2 цвета в арсенале

Ответить
Развернуть ветку
1 комментарий
Юрий

Отличный материал !))

Не согласен с парой пунктов,

п.8 - зачем плодить сразу столько оттенков, чтобы кодер думал(=делал): "они же одинаковые" и ставил "примерно такой же"? На эти грабли мы уже неоднократно наступали. Вариант с красным смайлом считаю более приемлемым, но только если три цвета сделать более контрастным )

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

Ответить
Развернуть ветку
Andrey Zhulidin
Автор

Привет, 

8 - У нас нет такой проблемы, все цвета описаны в коде ещё на старте проекта. Разработчик выбирает элемент в Figma и видит в инспекторе название цвета, затем выбирает стиль таким же названием в коде. 

9 - Бывает )  Но я уже давно такого не встречал. Хороших экранных шрифтов уже достаточно. Конечно можно нарушать любые правила, если делать это осознанно. 😉 

Ответить
Развернуть ветку
Anton Smets

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

Ответить
Развернуть ветку
Ревизор

Что такое "финальный" дизайн?) 

Ответить
Развернуть ветку
1 комментарий
Дмитрий Пационко

Спасибо огромное. Очень полезный материал.

Ответить
Развернуть ветку
Alex Kukharenko

Я уже давно дизайнер, но вот про фишку  60-30-10 не знал. Спасибо! И очень наглядно. 

Ответить
Развернуть ветку
Ревизор

"Я уже давно дизайнер"

Ну, давно так давно))) 

Ответить
Развернуть ветку
Нина Брилевич

Я тоже 😉😉😉

Ответить
Развернуть ветку
アドルフ・・ ヴァイスマン
Воспользуйтесь специальными инструментами:

ColorBox
Lch and Lab colour and gradient picker
Leonardo
HCL Easy

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

Ответить
Развернуть ветку
Алексей Шайхелисламов

В HCL Easy тоже можно!) В скрине ниже я показал
Не очевидно, согласен. Исправимся =)
@Andrey Zhulidin Скоро мы выкатим плагин HCL Easy для Figma с автоматизацией как в "ColorBox" и стартовыми наборами палитр из популярных дизайн систем. 

Ответить
Развернуть ветку
2 комментария
Andrey Zhulidin
Автор

Привет,  

В Leonardo можно. 
В остальных нужно знать HSL или HSB цвета. Ну или на глаз двигать ползунки ) 

Я делаю так. Определяюсь в редакторе с цветом, смотрю его параметры HSB и выбираю в сервисе. Затем начинаю настраивать более точные параметры. 

Ответить
Развернуть ветку
2 комментария
Гордый коктейль

классно стопроцентов в копилку знаний

Ответить
Развернуть ветку
Сталинский кофе

Отличная статья! Спасибо !

Ответить
Развернуть ветку
Saveliy D.

Спасибо!

Ответить
Развернуть ветку
New Vegas

Отличный материал! Спасибо!

Ответить
Развернуть ветку
bruuuh

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

Ответить
Развернуть ветку
Obraztsov Sergey

подскажите инструмент для фигмы/хрома, в котором можно замерять контрастность?

Ответить
Развернуть ветку
Vasiliy Dudin

Для Фигмы самый адекватный — "A11y - Color Contrast Checker".

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sabit Sugirov

Полезная инфа, спасибо.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
New Vegas

@АндрейАндреевич и почему ты минусишь мой коммент?

Ответить
Развернуть ветку
Alex Kalinin

Спасибо большое👍 многое узнал и сайты все полезные 🔥

Ответить
Развернуть ветку
Artemida Svet

"ты можешь создать 1000 дизайнов красивых кнопочек,
но какой в этом толк если Налоги платишь многоразовые"
Сальвадор Дали

Ответить
Развернуть ветку
Павел Харламов

Спасибо большое!
очень полезный контент)
Понравилось как можно выйти из ситуации когда допустил ошибку.

Было бы интересно узнать теперь про формы фигур,геометрию ,симметрию и золотое сечение так же подробно)
Ждём 🙌

Ответить
Развернуть ветку
Wera Ferat

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

Ответить
Развернуть ветку
Денис Верхоломчук

Спасибо за статью, закрепил свои знания )

Ответить
Развернуть ветку
Yulia Podgaiskaya

Хороший материал. Недизайнерам тоже читать! К вопросу о том, почему нужно обращаться к профи и тренировать "насмотренность".

Ответить
Развернуть ветку
Лунтик Небообразный

выкладывал бы кто переводы с medium

Ответить
Развернуть ветку
Paul Zheleznyak

Прикольно. Для человека, который в этом не варится, всё пункты были новыми и интересными =)

Ответить
Развернуть ветку
Гордый коктейль

давно не читал так по кайфу

Ответить
Развернуть ветку
Aleks Melnik

Спасибо за статью!

Ответить
Развернуть ветку
Денис Горелов

В пункте 9 всё наоборот на картинке - справа ошибочное, слева норм.

Ответить
Развернуть ветку
Анастасия Сарвилина. Английский для начинающих

спасибо, крутая статья

Ответить
Развернуть ветку
Alexander Designer

Хорошая статья, все по делу, без воды 👍
Спасибо, Андрей!

Ответить
Развернуть ветку
Читать все 57 комментариев
null