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

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

Ostapenko Alina

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

Вступление

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

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

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

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

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

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

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

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

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

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

1_h15TATyZMDOjlMN4791kvg.png

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

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

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

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

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

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

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

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

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

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

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

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

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

1__SD0EjkE9DnzkOnOxiF7IA.png

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

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

1_e2mQ3XwdxmlQBf5yZsVitQ.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1_Lznom8bkcbP29BgZUNXrPQ.png

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

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

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

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

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

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

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

Инструменты

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

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

Для чтения

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

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

Заключение

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

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

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

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

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

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

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

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