Цвет в интерфейсе: Прикладные основы

(Перевод статьи Erik D. Kennedy, Color in UI Design: A (Practical) Framework)

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

Я бы назвал этот подход бесполезным.

Но если теория цвета не поможет подобрать палитру для интерфейса, тогда что поможет?

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

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

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

Эта схема:

  • Позволит использовать всего один основной цвет для любых целей (это очень полезно, и, как мы позже увидим, приложения вроде Facebook уже так делают).
  • Поможет понять, как правильно изменить цвет, чтобы он хорошо смотрелся.
  • Сделает подбор палитры менее «интуитивным» (говоря «интуитивный», мы часто имеем в виду «я не понял, как это работает» — именно так представляют себе процесс люди со стороны).

Едем дальше? Отлично.

Светлые и темные вариации

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

Вы ведь не думаете, что поисковая строка — это просто полупрозрачный черный прямоугольник поверх синего фона шапки? Правильный ответ: нет. Ни при каком проценте прозрачности черного слоя вы не получите такой цвет поисковой строки. Тут нужно кое-что другое.

Взгляните на интерфейс Swell Grid, изумительного приложения с прогнозами для серфингистов.

Та-дам. Перед нами целое море вариаций. Сколько их? Зайдите на сайт и посчитайте.

Практически все цвета на этой странице — это вариации основного синего.

Или вот еще один простенький пример:

Здесь цветовыми вариациями обозначены состояния элемента. И было бы неправильно назвать их «тремя оттенками голубого». Это один и тот же голубой в разных вариациях.

Но тогда возникает вопрос: что именно нужно сделать с цветом, чтобы получить такие вариации?

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

  1. Мы будем обращаться к реальному миру. И хотя интерфейс — лишь имитация реальности, мы упорно продолжаем копировать привычные нашему глазу закономерности, ожидаем, что свет и цвет всегда будут работать определенным образом.
  2. Мы будем использовать систему HSB. По сути, это самая понятная система из широко распространенных. В Sketch и Photoshop она доступна. Если вы не знаете, что такое цветовой тон (hue), насыщенность (saturation) и яркость (brightness), давайте на 10 минут прервемся.

Цветовые вариации в реальном мире

Оглянитесь вокруг. Какие «цветовые вариации» нам встречаются на каждом шагу?

Правильно, тени.

Можете считать тени темной вариацией основного цвета.

Автор фото — David Blaikie

Видите?

А теперь давайте откроем Sketch, приготовим пипетку и выясним, что именно происходит, когда на коралловую стену падает тень.

Как я уже говорил, выяснять мы это будем в системе HSB.

Примечание: В зависимости от свойств монитора/изображения у вас эти параметры могут быть другими.

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

Автор фото — Matthias Uhlig

Так ли работают тени на картинке с Кубой? Сейчас узнаем.

Отлично, сравним результаты. Заметили сходство?

Если на стену падает тень, то ее яркость уменьшается, а насыщенность увеличивается. Мы рассмотрели всего два примера, но по моим наблюдениям это правило универсально.

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

Правила

Давайте немного разберемся в этой схеме.

Темная вариация цвета = насыщенность выше + яркость ниже

Если вы еще раз посмотрите на пример с поисковой строкой Facebook, вы увидите, что происходит:

Цветовой тон сдвигается на 1° из 360°, а это фактически погрешность округления.

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

Почему в реальном мире затемнение цвета сопровождается увеличением насыщенности? Я понятия не имею. Но могу предположить: интенсивность света (яркость) гасит интенсивность цвета (насыщенность), в результате цвет становится более размытым — и наоборот.

Может, это мои домыслы, но звучит логично, согласитесь?

Светлая вариация цвета = насыщенность ниже + яркость выше

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

Схватываете на лету!

Но мы можем пойти еще дальше. Если до бесконечности уменьшать насыщенность и увеличивать яркость, то что мы получим?

А вот что:

Мы получим белый.

Сравните светлую вариацию с цветом, полученным за счет добавления белого. Есть два очень простых способа сделать это в Sketch:

  1. Уменьшите прозрачность элемента, если он на белом фоне.
  2. Положите полупрозрачный белый слой поверх элемента.

Самое важное

Если вы запомните только одну мысль из этой статьи, пусть это будет следующее:

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

По этой схеме вы сможете, имея всего один цвет, создавать потрясающие вещи.

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

Это Harvest, приложение для планирования. Я сам им пользуюсь и очень его люблю.

Посмотрите на меню в шапке. При наведении пункты светлеют. В активном состоянии темнеют.

Или посмотрите на зеленую кнопку New Entry.

При наведении мы видим темную вариацию цвета — насыщенность выше, яркость ниже.

Та же история.

По правде говоря, не в каждом дизайне это правило соблюдается на 100%. В шапке Harvest на предыдущей картинке активное состояние пункта меню задается только уменьшением яркости, без изменения насыщенности. А состояние наведения — только уменьшением насыщенности, без изменения яркости. Но сравнивая со свойствами цвета в реальном мире, мы понимаем, что делает этот дизайн таким привлекательным. Он стремится к изложенным принципам, хотя и не полностью им следует.

Так что на счет цветового тона?

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

Соответственно, объясняю как можно более сжато.

Начнем с того, что каждый цвет имеет свою «воспринимаемую яркость». Это называется светимость.

Хотя и этот желтый, и этот синий имеют яркость 100%, какой из них выглядит ярче?

Я имею в виду, если вы спросите человека с улицы: какой цвет ярче?

«Эм… Желтый?»

Спасибо, дружище. Ты только что открыл для нас светимость.

«Так я угадал?»

Совершенно верно. Не трогая яркость и насыщенность, и меняя только цветовой тон, вы получите разные уровни светимости или «воспринимаемой яркости». Это значение варьируется от 0 до 100.

На картинке мы видим круги с интервалом цветового тона в 30°, насыщенность и яркость у всех одинаковая — 100%.

А здесь мы видим те же круги в режиме Luminosity (если вы хотите повторить эксперимент в Sketch, обязательно делайте это на белом фоне). Цифры на кругах — это яркость получившегося серого. Так мы получаем значение светимости исходных цветных кругов.

В режиме Luminosity светло-серый означает высокую светимость, темно-серый — низкую. Об этом стоит задуматься.

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

График светимости

Смотрите-ка, тут есть закономерность.

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

Для начала, обратите внимание, что на графике есть три точки максимума и три точки минимума. Точки минимума: красный (red), зеленый (green) и синий (blue). Точки максимума: голубой (cyan), пурпурный (magenta) и желтый (yellow).

Ничего не напоминает? Все верно, это популярные схемы RGB и CMY. Но не заостряйте на этом внимание, это только запутает.

Здесь важно вот что: смещение цветового тона в сторону красного (0°), зеленого (120°) или синего (240°) уменьшает светимость. Смещение в сторону желтого (60°), голубого (180°) или пурпурного (300°) увеличивает светимость.

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

Вот почему цветовой тон тени на коралловой стене уменьшился — он сдвинулся в сторону красного, к 0°, это ближайшая точка минимума для 21°.

И по той же причине цветовой тон тени на сине-зеленой стене увеличился — он сдвинулся в сторону синего, к 240°, это ближайшая точка минимума для 194°.

Вы еще здесь?

Дорога цвета

Подбирая палитру для интерфейса, спросите себя: а что если просто взять темные и светлые вариации одного и того же цвета?

И если вы хотите получить что-то простое и чистое, в большинстве случаев это будет правильное решение.

Темная вариация:

  • Яркость (brightness) уменьшается
  • Насыщенность (saturation) увеличивается
  • Цветовой тон (hue) сдвигается в сторону минимальной светимости (красный, зеленый, синий)

Светлая вариация:

  • Яркость (brightness) увеличивается
  • Насыщенность (saturation) уменьшается
  • Цветовой тон (hue) сдвигается в сторону максимальной светимости (желтый, голубой, пурпурный)

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

Интерфейс с одним цветом и огромным количеством его вариаций

Я тут накидал небольшой пример. Весь интерфейс построен на базе одного цвета. Узнаете темную вариацию сине-зеленого?

Вообще-то, мы рассмотрели эту тему довольно поверхностно. К ней остается много вопросов:

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

Когда-нибудь узнаем.

Show your support

Clapping shows how much you appreciated Churakova Anastasia’s story.