{"id":4879,"title":"\u0427\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043f\u0435\u0442\u044c, \u043f\u043e\u043a\u0430 \u0432\u044b \u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e","url":"\/redirect?component=advertising&id=4879&url=https:\/\/vc.ru\/otpbank\/266952&hash=82572a4a372a00657a2afc359f19a24c0bd24be8cecbd743f0681209c07c9a3a","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. Там ты найдешь больше интересных материалов о дизайне.

{ "author_name": "Egor Komarov", "author_type": "self", "tags": ["fff","000"], "comments": 26, "likes": 76, "favorites": 523, "is_advertisement": false, "subsite_label": "design", "id": 199498, "is_wide": true, "is_ugc": true, "date": "Fri, 22 Jan 2021 10:40:52 +0300", "is_special": false }
0
26 комментариев
Популярные
По порядку
Написать комментарий...
5

Автор выдаёт интересные материалы, плюсую.

Ответить
3

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

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

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

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

Ответить
1

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

Ответить
1

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
Читать все 26 комментариев
Роскомнадзор заблокировал сайт с текстами песен Genius.com Статьи редакции

За несколько лет десятки материалов сайта были внесены в список запрещённых в России.

Джефф Безос предложил покрыть до $2 млрд расходов NASA в обмен на контракт для отправки космонавтов на Луну Статьи редакции

В апреле NASA отдало контракт SpaceX, но в мае приостановило его из-за протеста конкурентов.

Лунный посадочный модуль Blue Moon
Wildberries проиграл продавцу суд на 39 млн рублей

Мы уверены, что тысячи продавцов мечтают подать такой иск по отношению к маркетплейсу, но боятся. Но эти опасения — дело временное. Как только долговая планка маркетплейса достигает предела — доходит до суда. У героя этого дела терпение кончилось после сотни поданных обращений и появления суммы долга с 6 нулями.

Как запустить FinTech-стартап и завоевать доверие консервативной аудитории

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

Академия Ростеха – о движении Ворлдскиллс Россия и его развитии на предприятиях Ростеха

Академия Ростеха уже на протяжении четырех лет формирует и готовит сборную Госкорпорации к Национальному чемпионату сквозных рабочих профессий высокотехнологичных отраслей промышленности WorldSkills Hi-Tech. О том, как проходит отбор чемпионов на предприятиях, что дает сотрудникам участие в движении и как Ворлдскиллс популяризирует актуальные…

7 советов стартапам по работе с корпорациями

О том, как стартапам предлагать свои разработки крупным корпорациям и оказаться замеченными, рассказывает директор Центра развития новых продуктов Академии Ростеха, трекер фонда развития интернет-инициатив, эксперт в области запуска акселерационных программ и работы с высокотехнологичными стартапами Андрей Батрименко.

Санкт-Петербургская биржа начнёт торговать акциями онлайн-брокера Robinhood Статьи редакции

Компания запланировала привлечь $2 млрд и продать 55 млн акций по цене от $38 до $42 за штуку.

Пирамида Finiko собрала миллиарды рублей и рухнула — но это не первый проект её создателя, где люди потеряли деньги Статьи редакции

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

Кирилл Доронин
Не покупает рекламу, не продаёт акции, не повышает цены: как производитель соуса Huy Fong занял 10% рынка США Статьи редакции

Основатель Дэвид Тран сбежал из коммунистического Вьетнама, открыл свой бизнес в США и достиг выручки в $150 млн в год без торговой марки и маркетинга.

Дэвид Тран с главными символами компании — бутылками соуса шрирачи Huy Fong Foods
Бизнес-модель на 1 листе

Кстати, если вы делаете проект имейте в виду - ваше решение это или лекарство от боли или витамины. Лекарство - помогает от боли, витамины помогают избежать боли в будущем.

Поддельные штрафы, «левые» QR-коды и фейковые тесты на ковид. Как защититься от мошенников в сети

Пандемия вдохновила мошенников на новые идеи преступлений в сети. Собрали 10 популярных видов киберпреступности и способы защиты от них.

null