{"id":13455,"url":"\/distributions\/13455\/click?bit=1&hash=8bce2c32fc522b9cfe1ab89089eff75ab558dbec8812c3dda390faecf1c743f2","title":"\u00ab\u0410 \u0442\u044b \u0442\u043e\u0447\u043d\u043e \u0440\u0438\u0435\u043b\u0442\u043e\u0440?\u00bb \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u043b\u043e\u0432\u043a\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0431\u0440\u043e\u043a\u0435\u0440\u0443","buttonText":"\u041f\u043e\u043a\u0430\u0436\u0438\u0442\u0435","imageUuid":"ca4cf1a1-a5ed-5aca-9f34-357accc11bb1","isPaidAndBannersEnabled":false}
Дизайн
Egor Komarov

Как создать качественную цветовую палитру для UI

Перевод полезной статьи от Buninux о создании цветовой палитры для веб-сайта или приложения. 8 советов по созданию качественных цветовых схем.

Как создать качественную цветовую палитру для UI komarov.design

Привет VC, с вами Егор Комаров и сегодня я хочу поделиться интересным материалом и подходом о создании цветовой палитры.

Вступление

Цвет повсюду. Работа с цветом — это неотъемлемая часть любого дизайн бренда и современный интерфейс стремится к его узнаваемости. Поэтому выбор и использование цветов для достижения бизнес-целей может оказаться тяжелой задачей для любого дизайнера.

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

1. Нужно сделать выбор. Но выбирать нужно умом.

Определение основных цветов.

Первичный цвет — это первое с чем стоит определиться.

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

Найти свои белые и черные цвета.

Единственное правило здесь — это не использовать абсолютно белый или черный цвет.

Абсолютный черный цвет и белый цвет могут утомлять глаза при чтении или выполнении действий. Белый ( #FFF ) имеет 100% яркость цвета, а черный (#000) — 0%. Такая неравномерность создает интенсивный контраст, к которому человеческим глазам труднее адаптироваться при навигации и чтении.

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

Использование акцентных цветов.

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

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

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

Семантические цвета используют:

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

2. Правила 60–30–10

Этот метод исходит из основного дизайна, но он идеально подходит для цифровых продуктов. Правило 60% + 30% + 10% работает, потому что оно приносит ощущение баланса и помогает глазу плавно перемещаться от одной области CTA (call to action) к другой, направляя пользователя через интерфейс.

Правило очень простое и звучит так:

60% — пространства предназначено для основного цвета / цвета области;30% — это вторичный / поддерживающий цвет;10% — акцент и сопровождающий цвет.

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

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

Пример, для лучшего помимания правила «60–30–10»:

Бонусный совет:

Также можно применять цвета в другом порядке, и это все равно будет работать.

Знание своей аудитории

Ключ к хорошему UX — понимание своей аудитории.

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

Поэтому при выборе цвета важно задать следующие вопросы и ответить на них:

  • Кто ваша целевая аудитория?
  • Сколько им лет?
  • Какая специализация у вашего продукта?
  • Какие эмоции вы хотите, чтобы ваш бренд вызвал?

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

Использование фотографии, чтобы создать цветовую палитру

Один из очень классных трюков — использовать природу или архитектуру, чтобы вдохновиться и создать уникальную цветовую схему.

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

Примеры для использования:

Получайте удовольствие и черпайте вдохновение в вещах, которые вам нравятся.

5. Контраст — ваш друг

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

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

Такие цвета, как синий, зеленый и красный, быстро расскажут о контексте еще до того, как пользователь прочитает текст кнопок.

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

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

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

6. Следите за доступностью

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

Несколько советов, которые следует учитывать при разработке цифровых продуктов:

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

7. Точно подписывайте цвета.

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

Избегайте использования градации цвета в названиях, таких как Голубой или Темно-синий. Вместо этого используйте функциональные слова, которые лучше всего описывают цвет в пользовательском интерфейсе, например, «Положительный», «Предупреждение», «Активный», «Основной синий».

8. Инструменты и дополнительные материалы

Инструменты

  • Coolors.co — хороший инструмент для выбора цвета.
  • Khroma — AI генератDesignspiration.comор цветовых палитр
  • Designspiration.com — можно найти изображения на основе цвета по вашему выбору.
  • Material Color Tool — можно применить цветовые палитры к пользовательскому интерфейсу и измерить уровень доступности любой комбинации цветов.
  • Palx — можно создать цветовую палитру на основе основного цвета.
  • Copypalette.app — создание своей палитру, которую можно легко скопировать / вставить ее в Sketch или Figma.

Для вдохновения

Для чтения

Color Theory For Designers — узнайте больше о теории цвета и различных типах цветовых схем.

The Psychology Of Color — узнайте значение каждого цвета.

Заключение

Подводя итог всему сказанному о цветах UI, можно прийти к трем основными принципами с Material design, которые можно использовать в своей работе

Последовательность

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

Определенность

Цвет должен создавать различие между элементами, с достаточным контрастом между ними.

Намеренность

Цвета следует применять целенаправленно, чтобы передать смысл разными способами, например отношениями между элементами и степенями иерархии.

Личные советы

От себя бы я еще добавил пару советов при создании палитры.

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

2. Пытайтесь, по возможности, минимизировать количество оттенков. Чем меньше цветов - тем проще будет при разработке.

3. Используйте OPACITY для оттенков. Вам не обязательно на каждый оттенок создавать отдельный цвет. Если эту функцию может выполнить "прозрачность" - используйте ее. Кроме этого, если правильно использовать прозрачность, вам и вовсе не надо будет менять цвет в светлой и темной теме. Он и там и там, будет смотреться хорошо. Добавляйте альтернативные варианты цвета с OPACITY в UI Kit, для общего понимания и удобства.

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

👌 Бонус: 6 полезных инструментов для работы с цветом, о которых вы могли не знать.

Перевод на русский: Komarov.Design / Алина Остапенко

⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Telegram / Instagram / Facebook / Medium/ Linkedin. Там ты найдешь больше интересных материалов о дизайне.

0
26 комментариев
Написать комментарий...
Аккаунт заморожен

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

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

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

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

+++
А ещё не поддерживаю комментарий автора по поводу использования одного значения прозрачности в светлой и тёмной теме. «Он и там и там, будет смотреться хорошо» – я ни разу на практике не видел, чтобы такое случалось :) В тёмной теме цвет должен быть в принципе другого оттенка, менее «яркого» (речь идёт не о характеристике Brightness, а о визуальном восприятии), чтобы снизить нагрузку на зрение.
Опять же, кмк, лучше захардкодить плотную заливку, подобранную вручную.

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

Ну вот один и тот же цвет. Читается и там и там текст. Контраст по алгоритму, допустимый. АА. 

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

То, что я на практике не встречал, это конечно же не значит, что такого не бывает :) Другое дело, что по моему мнению данный подход менее универсален. Речь идёт больше о "брендовых" цветах, условно – ярко синий цвет, ярко красный и прочие.

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

конечно, но в любом случае, в дизайн системах, чем меньше всего - тем лучше. 

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

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

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

И есть ещё интересная тема по шрифтам https://vc.ru/u/680298-neyromarketing/199803-podsoznatelnoe-vozdeystvie-shrifta

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

Про opacity не совсем понятно. Почему это она предпочтительнее непосредственных оттенков?

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

Ну как, у тебя один цвет, белый например. Тебе надо три оттенка для него. Есть разница дополнительных отдельных три цвета менять или один белый? opacity к тому же менять не надо, если грамотно сделано, для темной и светлой темы. 

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

Не проще ли прописать просто несколько номеров палитры, а не один номер и несколько значений opacity? Так удобнее лично мне и людям.

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

Без визуализации не совсем полимаю о чем речь. Оpacity как угодно можно прописывать в гайде. Главное чтобы было понятно и удобно. Главное то, что на фронте, когда ты меняешь один цвет, остальные параметры opacity подтягиваются автоматически. 

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

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

Я вот думал на тему юзать HSL для палетты. Тогда оттенки легко можно извлечь параметром L сохраняя одинаковые H и S.

Так мне кажется могут получиться общие кодированные параметры оттенков типо Primary-70, Primary-90 и Secondary-70...

(И да я согласен что hex читается легче чем hsl)

@Egor Komarov что думаешь?

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

ты про это ? http://scg.ar-ch.org/
Если про это,  то мы пытались, но такой подход сильно режет цветовую палитру, и нужных оттенков не было. Если использовать такой подход, то надо заранее это оговаривать с дизайнером. 

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

Не люблю цитаты с медиума но этот чувак наглядно осветил идею с примером стилевых переменных:

Не в коем случае не спор за лучший подход, интересен был твой опыт на тему HSL, буду иметь ввиду! Спасибо!

Ответить
Развернуть ветку
Егор Быков

Спасибо за статью. Интересный материал

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

Ссылки на Coolors.co и Designspiration.com хорошо бы починить.

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

вот же вы ленивые ))) поправил

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

Нет :) Как минимум в разделах 4 и 8 остались битые ссылки, ведущие на komarov.design.

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

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

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

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

Ответить
Развернуть ветку
Вадим Д.

В мобильной версии можно и #000 использовать, если это в целом уместно. Пока нет уголовных статей, запрещающих это.

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

Насчёт названий цветов в дизайн-системах. Замечал несколько разных подходов:

1. Прямое название - в честь оттенка (Black, White, etc)
2. Название по назначению (Comment, Stroke, etc)
3. Название для состояния (Warning, Danger, etc)
4. Градация по частоте (Primary, Secondary, etc)
5. Цвета в зависимости от палитры (Accent, Brand, etc)

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

Последний апдейт фигмы позволяет вкладывать все уровни друг в друга, что немного снимает боль (ведь ещё есть группировка по теме: Dark, Light, etc), но принципиально проблема однозначного именования цветов не решена.

Когда смотришь чужие дизайн-системы, понимаешь, что подходы налеплены друг на друга в случайном порядке. Часть цветов названы оттенками, часть – состояниями, часть – в зависимости от палитры и так далее. Использовать это с удобством может только автор самой палитры :) 

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

Годная статья, плюс однозначно 

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

А кто-нибудь может сказать или подкинуть, как адекватно работать с брендовым зелёным? Как адекватно отделить от success state зелёного?
И вообще чёт хороших примеров основного зелёного не встречал... Поделитесь примерами?

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

сделай белым плашку а иконку зеленым 

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