Эрик Д. Кеннеди, UX дизайнер-самоучка, написал полезное исследования о теории цвета. Команда GoDesigner не оставила его усилия в тени, и пересказала основные аспекты, которые превратят ваш дизайн в живописную картинку.
1. Используй темные и светлые вариации одного цвета
При выборе цветов интерфейса главное — умение создавать много вариантов одного базового цвета. Используйте один главный цвет практически для любых целей.
Такой приём использует, например, Facebook, в приложении которого 3 оттенка синего: темная вариация для поля поиска, базовый цвет в заголовке, и светлый оттенок в значке. Панель поиска — не просто черная прозрачная плашка, никакой оверлей поверх синего не даст вам такой цвет. Здесь замешано другое колдовство.
А теперь давайте-ка взглянем на прекрасное погодное приложение Swell Grid: накрывает волной вариаций. Сколько их — зайдите на сайт и посчитайте.
Даже состояния элементов взяты из палитры оттенков одного цвета. Это не палитра трех синих цветов, а один синий цвет и его вариации.
2. Следи за тенью
Эрик советует пользоваться цветовой моделью HSB (hue, saturation, brightness — тон, насыщенность, яркость), потому что это самая интуитивная палитра, подходящая для широкого использования (Sketch и Photoshop): в реальном мире, по его мнению, рядом всегда присутствуют цветовые вариации — больше всего их у теней. И тень — это темная вариация базового цвета.
Дизайнер провел исследование с пипеткой в Sketch и выявил закономерность: яркость у теней всегда снижается , а насыщенность растет. Это видно из обоих примеров ниже.
С тоном все менее очевидно: его значение снижается в тени на коралловой стене и вырастает на бирюзовой, объяснение этому ниже.
3. Темная лошадка: как подобрать теневую вариацию цвета
Из этого эксперимента следует первое правило дизайнера: темная вариация цвета = повышенная насыщенность + пониженная яркость. Если вернуться к примеру со строкой поиска Facebook, то это — как раз тот самый случай. Оттенок меняется на 1° из 360° — это практически мелкая погрешность. Насыщенность (S) увеличилась, а яркость (B) понизилась.
Поэтому это никак не может быть полупрозрачной черной плашкой на синем фоне, потому что в модели HSB добавление черного — то же самое, что снижение яркости, а нам нужно снизить яркость и одновременно повысить насыщенность. Черный цвет не даст нам насыщенности!
4. На светлой стороне: как подобрать светлый
Обратная модификация цвета даст нам светлую вариацию. Если мы снижаем насыщенность и поднимаем яркость до предела, получается белый.
То есть, осветление цвета — то же самое, что добавление белого. А в Sketch есть два простейших способа разбавить цвет белым:
- Снизить прозрачность элемента (если он на белом фоне)
- Добавить прозрачный белый слой поверх элемента
Если из всей статьи вы извлечете только один урок, пусть он будет таким: темные вариации получаются при снижении яркости и повышении насыщенности. Светлые вариации получаются при повышении яркости и снижении насыщенности.
Темные вариации получаются при снижении яркости и повышении насыщенности.
Правда в том, что такое разнообразие цветов элементов (и даже их состояний) — на самом деле модификации одного и того же цвета.
Возьмем приложение для учета рабочего времени: Harvest. Обратите внимание на заголовок. При наведении курсора цвет становится светлее. При выборе элемента он становится темнее.
Или взглянем на зеленую кнопку New Entry.Наводим указатель мыши — она темнеет, — насыщенность повышается, яркость снижается.
Светлые вариации получаются при повышении яркости и снижении насыщенности.
Это правило применяется не всегда: в заголовке Harvest при выборе элемента понижается яркость (насыщенность не меняется), а при наведении курсора понижается только насыщенность (яркость остается). Тем не менее главное понять, как работают цвета в реальном мире и что прелесть такого дизайна в том, что он следует законам природы хотя бы приблизительно.
5. Следите за тоном
Тон во всей этой системе изменения яркости и насыщенности впротивоположных направлениях вторичен, и вот какой обоснование дает Эрик. У каждого цвета есть воспринимаемая яркость цвета (luminosity).
Несмотря на то, что яркость по модели HSB и у желтого, и у синего цвета равна 100%, какой из них кажется ярче? Желтый. Ниже — оттенки с интервалом в 30° при насыщенности и яркости 100%.
Яркость кругов серого цвета соответствует яркости наших оттенков в режиме наложения Luminosity (если вы параллельно чтению пробуете повторить то же в Sketch, фон должен быть белым.) В режиме наложения Luminosity чем выше яркость, тем светлее серый; чем ниже яркость — тем серый темнее. Это логично.
Помните, мы обнаружили странное поведение оттенка в тени — его значение иногда повышалось, а иногда понижалось? А почему? Обратите внимание, что на этом графике есть три максимума и три минимума.
Минимумы — красный, зеленый и синий. Максимумы — циановый, пурпурный и желтый. При изменении оттенка в сторону красного (0°), зеленого (120°) или синего (240°), яркость цвета будет снижаться, а при изменении в сторону желтого (60°), голубого (180°) или пурпурного (300°) воспринимаемая яркость цвета будет повышаться.
Осветление цвета — то же самое, что добавление белого
Весь фокус заключается в том, чтобы изменение тона совпадало с изменением насыщенности и яркости. Для создании темной вариации изменяйте насыщенность в сторону красного (0°), зеленого (120°) или синего (240°) — в зависимости от того, который из них ближе, — и наоборот (к циановому, пурпурному и желтому), если добиваетесь светлой вариации. (Конечно, подразумевается, что вы заодно снижаете яркость и повышаете насыщенность.)
Вот почему на коралловой стене значение оттенка снижалось — оно двигалось в сторону красного (0°) — ближайшего к 21° минимума.
И потому же повышалось значение оттенка на бирюзовой стене — оно двигалось к синему (240°) — минимуму, самому близкому к 194°.
Заключение
Если вы хотите создать что-то простое и аккуратное, достаточно просто светлых и темных вариаций уже имеющегося цвета. Для дизайна интерфейса достаточно одного тона, бесчисленные темные и светлые вариации которого вы можете применять, как только пожелаете. Напоследок, целый интерфейс, при создании которого использовался только один цвет. Кстати, узнали бирюзовую тень?
