Продуктовая колористика: сборка тоновых растяжек в примитивах дизайн-систем

Проблема
Как тоновые растяжки решают проблему
Тоновые растяжки в Primitives (три уровня переменных)
Некорректные методы сборки 
Корректные методы сборки
Лайфхаки
Выводы

Проблема

У многих дизайнеров есть проблема: в их дизайн-системах или КИТах цвета подбираются хаотично и выбор зависит скорее от вкусовщины, нежели от какой-то конкретно системы. В лучшем случае дизайнеру помогает брендбук, но цвета из него чаще всего придётся доработать под интерфейсы. 

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

Как тоновые растяжки решают проблему

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

Тоновые растяжки могут помочь в разных аспектах: 

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

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

3. Быстрая реакция на изменения в продукте — например, внедрение тёмной темы в продукт: сегодня есть только светлая тема, а завтра бизнес решит добавить ценности в продукт и нужно будет быстро создать и ввести тёмную тему.

4. Масштабирование продукта — разрастание функционала и появление новых функций приведёт к появлению новых компонентов, как базовых (атомы и молекулы), так и кастомных (организмы), но тональные растяжки дадут возможность этим компонентам быть максимально синонимичными уже созданным компонентам, в том числе, благодаря качественно спроектированной колористике.

Тоновые растяжки в Primitives

Часть коллег использует в дизайн-системах подход с тремя уровнями, и этот подход становится постепенно стандартом для остальных. Последние 2-3 года я всё чаще встречаю этот подход уже не только в крупнейших компаниях страны, но и в региональных компаниях или в стартапах. Все цвета, размеры, шрифты мы располагаем в variables, если нет строгих ограничений работать по старинке — на стилях, и наследуем от уровня к уровню. Разберём кратко три уровня переменных:

1. Примитивный уровень (примитивы)На этом уровне наши переменные имеют максимально примитивные названия. На первом уровне наши цвета могут быть разбиты по названиям кор-цветов: Blue, Red, Green, Orange, Purple и проч., и иметь нэйминг внутри растяжки кор-цвета: 100, 200, 300 и проч. Как видим, всё достаточно абстрактно.

2. Семантический уровень (семантика)
На этом уровне наши переменные начинают разделяться на категории, например: Text, Background, Strokes, Icon — в каких-то дизайн-системах Strokes могут называться Borders, в каких-то дизайн-системах колористика Icon слита с Text. Подход и нэйминг всегда очень зависит от бэкграунда дизайнера или команды, которые занимаются дизайн-системой. То есть, на этом уровне мы видим, как колористика декомпозируется на простые категории, появляется семантическая составляющая. Мы уже не называем цвета примитивно, исходя из их хромы, и не проставляем номера их тонам, а мы говорим, что есть цвета для типографики: Text/Primary, Text/Secondary, Text/Inverted  и проч., есть цвета для фона, есть цвета для линий и т.д. Этот нэйминг может указывать нам на приоритеты использования цветов, а также на состояния (этот подход также может разниться и где-то колористика состояний выносится отдельно от основных категорий — зависит от авторов конкретной дизайн-системы).

3. Компонентный уровень (объекты)
На этом уровне мы можем привязывать нашу колористику уже к конкретным компонентам, например, к кнопкам. Это значит, что Brand 750 наследуется в BG (Background) переменные и будет основой для фонов Primary brand, а оттуда наследуется в Button тип Main приоритет Primary состояние Default — на выходе мы получаем переменную цвета фона конкретной кнопки в конкретном состоянии (см.схему ниже).

Тоновые растяжки живут на уровне примитивов и станут фундаментом, на котором мы уже построим нашу дизайн-систему. Теперь разберёмся, какие методы есть для создания тоновых растяжек, чтобы сделать их качественно и, по возможности, — быстро.

Некорректные методы сборки

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

1 метод — наложение

— наложение черного (000000) или белого (FFFFFF) с прозрачностью на основной цвет:

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

2 метод — прозрачность

— использование прозрачности (opacity) пошагово в самом кор-цвете:

Дизайнер не понимает, как ему сделать тоновую растяжку, поэтому делает 20 квадратов, заливает их кор-цветом и начинает делать прозрачность, постепенно её увеличивая, например с шагом 10% или 5%. После этого дизайнер заводит цвет в variables, назначая прозрачность. Я более 10 лет работаю с фронтендом и знаю, что разработка относится негативно к такому методу — сложнее работать, цвета ведут себя непредсказуемо, если накладываются объект на объект — это может привести к тому, что UI будет выглядеть так, словно что-то сломалось, да и в целом, это может выглядеть неряшливо. Использовать цвета с прозрачностью мы можем в двух случаях:

1) для оверлея, когда на нём будет располагаться диалоговое окно — попап (все это называют одним словом «модалка»);

2) в очень редком случае, когда в нашем UI — 3 и более основных фона, чтобы объекты при наложении на разные фоны смотрелись однообразно (очень редкий кейс, но он возможен).

Корректные методы сборки

1 метод — автоматизация

Вам подходит, если у вас достаточно времени, чтобы разобраться с рабочими инструментами и в них собрать растяжки, а после — проверить корректность сборки.

Алгоритм работы:

1. Выберите цветовую модель (от нее в том числе будет зависеть качество цвета): RGB, HSL или OKLCH (LCH) — о них писала в первой части цикла.

2. Выберите инструмент для сборки растяжки: atmos, OKLCH Color Picker & Converter, ColorBox, Hueton (про инструменты — во второй части цикла), либо тот, в котором вы уверены.

3. Создайте набор кор-цветов: постарайтесь, чтобы в параметре Litghtness они были близки — это даст больше консистентности всей палитре.

4. Постройте в инструменте от кор-цвета тоновую растяжку с выходом, как в светлые тона, так и в тёмные; не забывайте, что ваша растяжка должна быть не менее 25 тонов, чтобы вам было проще работать дальше с цветом, когда продукт будет расти и масштабироваться, а также это пригодится для наличия двух тем в продукте: светлой и тёмной.

5. Можно проверить и откорректировать полученную растяжку, откалибровать тона в растяжке в Pallete App или в Hueton, чтобы всё было максимально плавно в растяжке.

6. Занесите полученную растяжку в Фигму и внесите в коллекцию Primitives: Color.

7. Также на канве Фигмы сделайте визуализацию этой растяжки для всей продуктовой команды (чтобы все могли посмотреть колористику).

8. Разработке новую тоновую растяжку или весь набор растяжек стоит передать в формате json. Сейчас как колористические инструменты, так и плагины в Фигме позволяют сделать такой экспорт.

2 метод — ручная сборка

Если времени изучать инструментарий — нет, разбираться в цветовых моделях вы не хотите, растяжки нужны «вчера», да и в целом, вам просто важно, чтобы растяжка была плавной и эффективной, то это ваш вариант.

Алгоритм работы:

1. Создайте набор кор-цветов: постарайтесь, чтобы в параметре Litghtness они были близки — это даст больше консистентности всей палитре.

2. Создайте два фрейма: один белого цвета (FFFFFF), второй — чёрного (000000).

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

4. Залейте все квадраты кор-цветом.

5. С помощью арифметической прогрессии (убывающей) начните назначать квадратам прозрачность. Например, 100% прозрачность, следующий квадрат 95% прозрачности, если вы выбрали для своей прогрессии d=5. И таким образом, вы будете делать каждый новый квадрат всё более прозрачным: 100, 95, 90, 85, 80, 75 и так далее. Если вы выбрали d=8, то будет 100, 92, 84, 76 и проч.

6. Когда вы всем квадратам назначили прозрачность — наложите их на белый фрейм.

7. Создайте такое же количество квадратов рядом с фреймом, на котором лежат квадраты кор-цвета с опасити.

8. Теперь включаем пипетку и снимаем цвет с квадратов с прозрачностью — так вы получите чистый цвет.

9. Сняв пипеткой цвет с opacity квадратов наложенных на белый фон, проделываем всё то же самое, но теперь накладываем opacity квадраты на чёрный фон.

10. Вы получили набор тонов от кор-цвета в белый и набор тонов от кор-цвета в чёрный — теперь объедините их в одну растяжку. Не забудьте добавить тон в середину, который был изначально 100% и вы от него начинали строить прозрачность. 

Лайфхаки

1. Как, в чём и для чего бы вы не создавали тоновые растяжки — всегда отсматривайте их не только на ретине маков, но и на виндоус экранах, потому что люди используют разные ОС и разные гаджеты, нам нужно понимать, что подобранные цвета смотрятся адекватно на разных экранах. Лучше смотреть не только на ноутбуках, но и на мониторах — выше вероятность увидеть проблемы в растяжке.

2. Не ленитесь потратить дополнительно время, чтобы проверить контрастность тонов (ААА и АА) — это можно сделать в любом колор чекере (например, в этом) или использовать плагины в Фигме (например, в этом). 

3. Используйте для проверки плавности растяжки Pallete App или Hueton — в них сразу будет видно: какие тона выбиваются в растяжке и насколько плавно цвет переходит из тона в тон.

4. При сборке в OKLCH параметр Hue должен быть стабильным и не меняться от тона к тону, также не нужно использовать период (например, 240-260), Hue — должен быть постоянной величиной, выраженной в конкретных цифрах (например, 248).

5. Самые «проблемные цвета» — жёлтый и чистый серый, поэтому уделяйте им особое внимание, когда делаете растяжки. Растяжку жёлтого вы скорее всего пересоберёте не один раз, чтобы получить более аккуратные тона в растяжке, особенно, когда жёлтый выходит в чёрный.

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

Выводы

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

Если вам интересна тема колористики и вы хотите узнать про какой-то инструмент больше, то напишите в комментариях, я постараюсь этот инстурмент и работу с цветом в нём — подробно разобрать.