Правило 60-30-10 не работает: современные цветовые системы, которые действительно эффективны.

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

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

Правило не ошибочно. Оно просто создано для другой задачи. Вместо этого лучшие дизайн-системы используют не пропорцию, а систему токен, основанную на ролях. В этой статье рассматривается, почему правило 60-30-10 не работает, что ему пришло на смену, и пять реальных дизайн-систем, которые внедряют эту замену в больших масштабах.

---

Откуда взялось правило 60-30-10

Правило 60-30-10 — это упрощенный подход к дизайну интерьеров середины XX века, адаптированный для цифрового дизайна людьми, которым нужно было правило для цитирования.

Его истоки лежат в дизайне жилых помещений. В комнате есть доминирующий цвет (стены), второстепенный цвет (обивка, шторы) и акцентный цвет (подушки, картины). Шестьдесят, тридцать, десять. Это работает для комнат, потому что комнаты — это единые статичные поверхности, которые одновременно видит один человек, и они остаются одного цвета, пока кто-то не перекрасит их.

Ни одно из этих предположений не выдерживает столкновения с дизайном продукта. Цифровой продукт — это не статичная поверхность. Это сотни поверхностей, каждая со своими состояниями, темами и контекстами. Правило никогда не было разработано для этого мира, и это видно.

--

Почему оно рушится в дизайне продукта

Правило 60-30-10 предполагает одну статичную поверхность и одного зрителя, что совершенно не соответствует тому, как работает дизайн продукта.

В реальных интерфейсах есть отключенные кнопки, состояния при наведении курсора, кольца фокусировки, баннеры ошибок, всплывающие уведомления об успехе, ряды данных диаграмм, пустые состояния, скелеты загрузки и семантические цвета для деструктивных действий. Ничто из этого не соответствует «60, 30 или 10 процентам холста». Это не холст. Это поведение.

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

Доступность — это последний гвоздь. WCAG коэффициенты контрастности не интересует, какой процент вашей страницы занимает синий цвет. Их интересует, достаточно ли контраста у конкретного синего цвета на конкретной кнопке с конкретным фоном позади неё. Эту проблему нельзя решить с помощью соотношений площади.

--

Что используют современные цветовые системы вместо этого

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

| Уровень | Что он делает | Примеры токенов |

|------|---------------|---------------------|

| Поверхность | Фоновые слои и высоты | bg-default, bg-subtle, bg-raised, bg-overlay |

| Содержимое | Текст и значки на поверхностях | text-default, text-muted, text-on-accent |

| Акцент | Фирменные и основные цвета действий | accent-primary, accent-primary-hover, accent-secondary |

| Состояние | Состояния взаимодействия и обратной связи | state-hover, state-focus, state-disabled |

| Семантика | Сигналы, нагруженные смыслом | success, warning, critical, info |

Каждый токен описывает роль. «Этот цвет — поверхность за карточкой». «Этот цвет — текст поверх акцента».

Дизайнер никогда не выбирает между «вторичным или акцентным режимом на 30 процентов». Он выбирает между ролями, которые уже определены системой.

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

--

Пять дизайн-систем, которые делают это правильно

Эти системы внедряются в больших масштабах с палитрами на основе ролей, которые работают в светлом и темном режимах, а также на любой поверхности, к которой прикасается пользователь.

Material Design 3

Смотрите трансляцию в прямом эфире на m3.material.io

Material 3 наиболее явно демонстрирует этот сдвиг. Система определяет цветовые роли, такие как «основной», «на основном», «поверхность», «на поверхности», «инверсный основной», при этом каждая роль предварительно подобрана для обеспечения контраста. Дизайнеры не выбирают цвета. Они выбирают роли, и токены преобразуются в соответствующие значения для активной темы.

Что стоит позаимствовать: соглашение об именовании «на-». on-primary для текста/иконок, расположенных поверх основной поверхности, кодирует доступность непосредственно в имя токена.

Radix Colors

Смотрите трансляцию в прямом эфире на radix-ui.com

Radix Colors поставляется с 12-ступенчатой ​​шкалой для каждого оттенка, при этом каждая ступень предварительно назначена роли (фон приложения, ненавязчивый фон, элемент пользовательского интерфейса, при наведении курсора, фокус, активный, сплошной, текст, высококонтрастный текст). Нет логики пропорций. Каждая ступень — это роль.

Что стоит позаимствовать: нумерованная шкала с аннотациями ролей. Она предоставляет дизайнерам общий словарь, который устраняет 90 процентов споров о том, какой серый цвет использовать.

Shopify Polaris

Смотрите прямую трансляцию на polaris.shopify.com

Polaris организует цвета по ролям компонентов: фон (поверхность), текст (контент), иконка, граница и интерактивный элемент. Каждый компонент имеет подроли для наведения курсора, нажатия, отключения, выбора. Система структурно затрудняет дизайнеру выход за пределы определенных токенов.

Что стоит позаимствовать: группировка ролей. Разделение токенов «границы» и «поверхности» заставляет целенаправленно использовать цвета на уровне компонентов.

---

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

---

Два бренда, внедряющие это в производство

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

Stripe

Смотрите трансляцию в прямом эфире на stripe.com

Stripe поставляется с готовым брендом, а не просто с документацией по дизайн-системе. На общедоступном сайте показано, как выглядит цветовая схема, основанная на ролях, в реальных условиях.

Почти все поверхности и контент нейтральны. Фиолетовый — это акцентный уровень, и он появляется именно там, где находятся действия, ссылки и сигналы бренда. Никакой логики пропорций. Логика ролей.

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

Linear

Смотрите прямую трансляцию на linear.app

Linear в большей степени опирается на нейтральные цвета, чем почти любой другой бренд, выпускающий продукцию в больших масштабах. Весь продукт представляет собой слои темных поверхностных элементов с одним акцентным оттенком (фиолетовым), выполняющим всю основную работу. Никакие правила пропорций не смогли бы это обеспечить. Это чисто ролевая система, где «акцентный» уровень — это один цвет, используемый сдержанно, а «поверхностный» уровень — это полный набор оттенков.

Что стоит позаимствовать: уверенность в том, что акцентный уровень может быть одного цвета. Многие новые системы дизайна чрезмерно используют акцентные цвета. Linear доказывает, что один хорошо подобранный акцент, используемый последовательно, создает более сильную узнаваемость, чем три акцента в пропорции.

---

Как создать палитру на основе ролей

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

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

1. Определите уровни ролей. Начните с поверхности, контента, акцента, состояния, семантики. Большинству продуктов нужны именно эти пять. Некоторым нужен шестой уровень для визуализации данных.

2. Напишите токены перед выбором шестнадцатеричных значений. Каждый токен должен описывать роль (surface-subtle, content-muted, accent-primary-hover). Если имя токена описывает цвет («светло-голубой»), переименуйте его.

3. Определите уровни ролей. 3. Сначала заполните нейтральную шкалу. Большая часть реального интерфейса состоит из нейтральных цветов. Создайте полную шкалу (Radix использует 12 ступеней не просто так), прежде чем менять фирменный цвет.

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

5. Настройте темный режим, переопределив токены, а не перепроектировав его. Если ваша система основана на ролях, темный режим — это замена значений токенов, а не изменение цвета.

6. Обеспечьте доступность на уровне токенов. Каждый токен on-surface должен соответствовать своему парному интерфейсу с коэффициентом 4,5:1. Заложите проверку.

Заманчивый способ — определить три роли (основная, второстепенная, акцентная), объявить о победе и выпустить продукт. Это правило 60-30-10 в костюме токенов. Оно рушится в той же точке: на первом реальном компоненте.

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

--

Часто задаваемые вопросы

Полезна ли когда-нибудь правило 60-30-10?

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

Сколько цветов должно быть в дизайн-системе?

Меньше исходных шестнадцатеричных значений, чем вы думаете, и больше токенов, чем вы думаете. В большинстве дизайн-систем от 8 до 12 нейтральных шагов, от 8 до 12 акцентных шагов и от 3 до 5 семантических семейств, все они разбиты на токены, основанные на ролях. Количество исходных цветов невелико. Количество ролей велико.

В чем разница между цветовой палитрой и цветовой системой?

цветовая палитра — это набор цветов. Цветовая система — это набор ролей, набор правил взаимодействия этих ролей и сопоставление ролей с цветами, которое может меняться в зависимости от темы. Палитра отвечает на вопрос: «Какие цвета присутствуют в бренде?». Система отвечает на вопрос: «Какого цвета этот элемент в этом состоянии в этой теме?».

---

Прекратите измерять цвет в процентах

Правило 60-30-10 не является злом. Оно просто выходит за рамки.

Дизайн продукта — это не комната. Это система поверхностей, состояний и ролей, которая меняется по мере того, как пользователь перемещается по ней.

Измерение цвета в процентах имеет тот же смысл, что и измерение типографики в процентах от страницы. Вы не говорите: «30 процентов текста — это заголовки». Вы говорите: «Заголовки — это роль с определенным стилем». С цветом должно быть то же самое.

Бренды, которые демонстрируют наилучшую масштабируемость визуальная идентичность — Material, Radix, Polaris, Stripe, Linear — поняли это и построили свою стратегию вокруг этого. Копирование их процентного соотношения упускает суть. Копирование их структуры ролей — вот в чем вся суть.

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

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