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

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

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

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

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

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

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

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

Эта схема:

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

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

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

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

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

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

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

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

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

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

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

Image for post
Image for post
Автор фото — David Blaikie

Видите?

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

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

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

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

Image for post
Image for post
Автор фото — Matthias Uhlig

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

Image for post
Image for post

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

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

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

Правила

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

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

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

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

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

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

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

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

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

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

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

А вот что:

Image for post
Image for post

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

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

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

Самое важное

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

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

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

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

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

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

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

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

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

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

Image for post
Image for post

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

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

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

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

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

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

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Вы еще здесь?

Дорога цвета

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

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

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

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

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

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

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

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

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

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

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

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

Usethics ⭕ doc

Коллективный блог сотрудников Usethics, первой российской…

Churakova Anastasia

Written by

User interface designer

Usethics ⭕ doc

Коллективный блог сотрудников Usethics, первой российской студии по проектированию/тестированию интерфейсов

Churakova Anastasia

Written by

User interface designer

Usethics ⭕ doc

Коллективный блог сотрудников Usethics, первой российской студии по проектированию/тестированию интерфейсов

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store