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

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

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

• Основной цвет (Hue)

Речь о родительском цвете — насыщенном, без добавления белого или черного.

• Осветление (Tint)

Получается, когда к основному цвету добавляется белый.

• Затенение (Shade)

Получается, когда к основному цвету добавляется черный.

• Тон (Tone)

Получается, когда к оттенку добавляется серый (и белый, и черный).

• Яркость (Value)

Показывает, насколько цвет темный или светлый. Указывает на количество отражаемого света.

• Насыщенность (Saturation)

Насыщенность относится к яркости и интенсивности цвета. Высоко насыщенные цвета — яркие, низко насыщенные цвета — тусклые.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1. Основные и системные цвета

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

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

Шаг 2. Создание палитры

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

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

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

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

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

• Color Tool Material Design
  

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

• Dribbble.com/colors
  

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

• Coolors.co
  

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

• Shaderade
  

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



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