Цвет в интерфейсе: Прикладные основы
(Перевод статьи Erik D. Kennedy, Color in UI Design: A (Practical) Framework)
Учитывая то, что я самоучка в сфере дизайна интерфейсов, я всегда недоумевал, почему в стольких статьях и книгах говорится о теории цвета и цветовом круге. По моему опыту, если использовать «раздельно-комплиментарные сочетания» в дизайне, то вероятность сделать симпатичный интерфейс стремится к нулю.
Я бы назвал этот подход бесполезным.
Но если теория цвета не поможет подобрать палитру для интерфейса, тогда что поможет?
Вот мое предложение: цветовые вариации. Это когда вы настраиваете параметры оттенка по определенной схеме, а не выбираете из цветового круга.
Другими словами, ключевой навык в подборе палитры для интерфейса состоит в том, чтобы уметь создавать из одного основного цвета множество вариаций.
Возможно, это звучит немного странно, но все равно дочитайте до конца. Я покажу вам схему, по которой вы сможете подобрать цвета для вашего дизайна.
Эта схема:
- Позволит использовать всего один основной цвет для любых целей (это очень полезно, и, как мы позже увидим, приложения вроде Facebook уже так делают).
- Поможет понять, как правильно изменить цвет, чтобы он хорошо смотрелся.
- Сделает подбор палитры менее «интуитивным» (говоря «интуитивный», мы часто имеем в виду «я не понял, как это работает» — именно так представляют себе процесс люди со стороны).
Едем дальше? Отлично.
Светлые и темные вариации
Сравнивая интерфейсы, которые считаю красивыми, я заметил одну вещь: во многих из них используются темные и светлые вариации одного основного цвета.
Вы ведь не думаете, что поисковая строка — это просто полупрозрачный черный прямоугольник поверх синего фона шапки? Правильный ответ: нет. Ни при каком проценте прозрачности черного слоя вы не получите такой цвет поисковой строки. Тут нужно кое-что другое.
Взгляните на интерфейс Swell Grid, изумительного приложения с прогнозами для серфингистов.
Та-дам. Перед нами целое море вариаций. Сколько их? Зайдите на сайт и посчитайте.
Практически все цвета на этой странице — это вариации основного синего.
Или вот еще один простенький пример:
Здесь цветовыми вариациями обозначены состояния элемента. И было бы неправильно назвать их «тремя оттенками голубого». Это один и тот же голубой в разных вариациях.
Но тогда возникает вопрос: что именно нужно сделать с цветом, чтобы получить такие вариации?
Мы до этого дойдем, но я хочу, чтобы вы понимали основы. Вот два базовых принципа, которые помогут нам разобраться:
- Мы будем обращаться к реальному миру. И хотя интерфейс — лишь имитация реальности, мы упорно продолжаем копировать привычные нашему глазу закономерности, ожидаем, что свет и цвет всегда будут работать определенным образом.
- Мы будем использовать систему HSB. По сути, это самая понятная система из широко распространенных. В Sketch и Photoshop она доступна. Если вы не знаете, что такое цветовой тон (hue), насыщенность (saturation) и яркость (brightness), давайте на 10 минут прервемся.
Цветовые вариации в реальном мире
Оглянитесь вокруг. Какие «цветовые вариации» нам встречаются на каждом шагу?
Правильно, тени.
Можете считать тени темной вариацией основного цвета.
Видите?
А теперь давайте откроем Sketch, приготовим пипетку и выясним, что именно происходит, когда на коралловую стену падает тень.
Как я уже говорил, выяснять мы это будем в системе HSB.
Итак, уменьшилась яркость, что довольно предсказуемо. Но не будем торопиться с выводами и посмотрим на другой пример.
Так ли работают тени на картинке с Кубой? Сейчас узнаем.
Отлично, сравним результаты. Заметили сходство?
Если на стену падает тень, то ее яркость уменьшается, а насыщенность увеличивается. Мы рассмотрели всего два примера, но по моим наблюдениям это правило универсально.
С цветовым тоном все немного сложнее — его значение уменьшается для тени на коралловой стене и увеличивается для тени на сине-зеленой стене. Этому есть объяснение, но оно не так важно и не так легко для понимания, как в случае с яркостью и насыщенностью. Так что к цветовому тону вернемся чуть позже.
Правила
Давайте немного разберемся в этой схеме.
Темная вариация цвета = насыщенность выше + яркость ниже
Если вы еще раз посмотрите на пример с поисковой строкой Facebook, вы увидите, что происходит:
Насыщенность увеличивается, яркость уменьшается. Причина, по которой поисковая строка не может быть черным полупрозрачным слоем на базовом синем, состоит в следующем. В HSB добавление черного равнозначно уменьшению яркости. Но мы хотим уменьшить яркость одновременно с увеличением насыщенности. А черный цвет никакой насыщенности не добавляет.
Почему в реальном мире затемнение цвета сопровождается увеличением насыщенности? Я понятия не имею. Но могу предположить: интенсивность света (яркость) гасит интенсивность цвета (насыщенность), в результате цвет становится более размытым — и наоборот.
Может, это мои домыслы, но звучит логично, согласитесь?
Светлая вариация цвета = насыщенность ниже + яркость выше
Как наблюдательный и опытный читатель, вы, вероятно, уже догадались, что обратные действия дадут обратный результат — светлую вариацию.
Схватываете на лету!
Но мы можем пойти еще дальше. Если до бесконечности уменьшать насыщенность и увеличивать яркость, то что мы получим?
А вот что:
Мы получим белый.
Сравните светлую вариацию с цветом, полученным за счет добавления белого. Есть два очень простых способа сделать это в Sketch:
- Уменьшите прозрачность элемента, если он на белом фоне.
- Положите полупрозрачный белый слой поверх элемента.
Самое важное
Если вы запомните только одну мысль из этой статьи, пусть это будет следующее:
Чтобы создать темную вариацию цвета, уменьшите яркость и увеличьте насыщенность. Чтобы создать светлую вариацию, увеличьте яркость и уменьшите насыщенность.
По этой схеме вы сможете, имея всего один цвет, создавать потрясающие вещи.
Суть в том, что для большинства элементов и их состояний вы будете использовать не разные цвета, а разные вариации одного и того же цвета.
Это 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 — минимальные и максимальные точки на графике светимости?
Когда-нибудь узнаем.
