Комментарии
Советы и полезные сервисы для создания цветовой палитры
10 принципов использования цвета в дизайне пользовательского интерфейса
Сибирикс

10 принципов использования цвета в дизайне пользовательского интерфейса

Советы и полезные сервисы для создания цветовой палитры
Здесь собраны несколько советов для начинающих дизайнеров, для продолжающих в конце статьи есть несколько полезных сервисов. Велком!

1. Понимание терминологии

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

  • Основной цвет (Hue)
Речь о родительском цвете — насыщенном, без добавления белого или черного.
  • Осветление (Tint)
Получается, когда к основному цвету добавляется белый.
  • Затенение (Shade)
Получается, когда к основному цвету добавляется черный.
  • Тон (Tone)
Получается, когда к оттенку добавляется серый (и белый, и черный).
  • Яркость (Value)
Показывает, насколько цвет темный или светлый. Указывает на количество отражаемого света.
  • Насыщенность (Saturation)
Насыщенность относится к яркости и интенсивности цвета. Высоко насыщенные цвета — яркие, низко насыщенные цвета — тусклые.

2. Иерархия

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

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

Более важный элемент должен иметь больший визуальный вес. Это позволяет пользователю быстро просматривать страницу и различать важную и менее важную информацию.

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

3. Выразительность

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

4. Инклюзивность (Inclusive Design или ID)

В рекомендациях, как обеспечить доступность веб-контента (WCAG), есть информация, как обеспечить доступность цветов в интерфейсе для людей с двигательными, слуховыми и когнитивными нарушениями. Например, их стандарт для текста требует контрастности как минимум 4.5:1.

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

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

5. Значение цветов

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

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

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

6. Ограничение по цветам

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

Обратите внимание: у многих приложений, где много красочных постов и непредсказуемого контента, таких как Instagram или Twitter, интерфейс довольно прост. Это нюанс, который отвлекает внимание от самого интерфейса и фокусирует его на контенте.

7. Состояния

Цвет может дать информацию о состоянии приложения, его компонентов и элементов.

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

8. Согласованность и контекст

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

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

9. Цветовые палитры

Теперь вопрос на миллион долларов, как получить идеальную цветовую палитру? Все начинается с простого понимания теории цвета и основных инструментов.

Шаг 1. Основные и системные цвета
Сначала определите основной цвет на основе ваших предпочтений, аналитики или значения цвета (как описано в пункте 5). Основной цвет будет цветом бренда.

Далее нужно выбрать цвета для текста, фона и других элементов. Рекомендуется выбирать темный цвет для текста и светлый сероватый цвет для фона.

Шаг 2. Создание палитры
После того, как базовые цвета для пользовательского интерфейса выбраны, поместите их в Google color tool, чтобы получить их различные оттенки.

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

Шаг 3. Соедините все вместе

10. Правило 60−30−10

60% — основной цвет, 30% — второстепенный, а 10% — для того, чтобы расставлять акценты. Это правило пришло из дизайна интерьера. Эта формула создает ощущение баланса и позволяет глазу комфортно перемещаться от одного фокуса к другому. Техника 60−30−10 также помогает избежать излишней пестроты.

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

Инструменты и ресурсы для создания цвета

О нем мы уже упоминали. Сервис использует алгоритм, который создаёт палитры, доступные и эстетичные.

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

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

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



Подготовлено на основе перевода материала 10 Principles for Color Usage in UI Design.