Палитра интерфейса
Палитра интерфейса почти никогда не бывает «пятью красивыми цветами». Она устроена из трёх групп, и у каждой своя работа.
| группа | что это | где |
|---|---|---|
| акцентный | один основной цвет бренда | главные кнопки, ссылки, активные элементы |
| нейтральные | ряд серых от почти белого до почти чёрного | фоны, текст, рамки, разделители — большая часть экрана |
| статусные | зелёный, красный, жёлтый, синий | успех, ошибка, предупреждение, подсказка |
Самая большая группа по площади — нейтральные. Фон страницы, фон карточки, текст, второстепенный текст, рамки полей, разделители — всё это оттенки одного серого ряда. Обычно их десять, от 50 (почти белый) до 900 (почти чёрный). Нейтральные часто слегка подкрашивают в сторону акцента: холодный серый к синему бренду, тёплый — к оранжевому. Так экран выглядит цельным.
Акцентный цвет — один, иногда два. Им красят то, что человек должен сделать: главную кнопку, ссылку, выбранный пункт. Чем реже он встречается, тем сильнее работает. Если акцентом покрашено полэкрана, главная кнопка теряется среди него.
Статусные цвета несут смысл, а не красоту: красный — ошибка, зелёный — успех, жёлтый — внимание. Использовать красный «потому что красиво» в интерфейсе нельзя: человек прочтёт его как ошибку. И наоборот, ошибку нельзя покрасить в фирменный цвет, если он, скажем, фиолетовый.
У каждого цвета в палитре не один оттенок, а ряд: светлые для фонов, средние для кнопок, тёмные для текста и нажатого состояния. Синий 50 — фон подсказки, синий 600 — кнопка, синий 700 — кнопка под пальцем. Такой ряд называют шкалой оттенков, и он строится по тому же принципу, что шкала размеров шрифта.
Переменные в два слоя
Цвет, как и текст, не красят руками. Его заводят переменной (или стилем цвета) и назначают по имени. Правка переменной перекрашивает всё, что на неё ссылается, — так же, как правка текстового стиля меняла все абзацы.
В хорошем макете переменные устроены в два слоя. Нижний — палитра: сырые цвета с номерами оттенков — «blue / 600», «gray / 900». Они отвечают на вопрос «что это за цвет». Верхний — смысловые переменные: «Кнопка / фон», «Текст / основной», «Фон / карточка». Они отвечают на вопрос «для чего цвет» и не хранят цвет сами, а ссылаются на палитру.
Экраны красят только смысловыми переменными. Зачем такая сложность? Представьте, что бренд решил сменить синий на зелёный. Если кнопки покрашены «blue / 600», придётся найти все кнопки и перекрасить — а ещё ссылки, иконки, выделения. Если кнопки покрашены «Кнопка / фон», достаточно направить эту переменную на «green / 600». Одна правка вместо сотни.
Второй плюс — смысл виден в имени. «Текст / второстепенный» ясно говорит, где его применять, а «gray / 500» — нет: этот серый может быть и текстом, и рамкой, и иконкой, и через месяц никто не вспомнит, где он был задуман.
Такие переменные называют ещё токенами дизайна. Слово пришло из разработки: разработчик заводит те же имена у себя в коде, и цвет кнопки в макете и на сайте меняется одной правкой в одном месте.
Контраст
Красивый цвет бесполезен, если текст на нём не читается. Контраст — это отношение яркости текста и фона, от 1:1 (одинаковые цвета) до 21:1 (чёрное на белом). Для него есть общепринятые пороги из правил доступности.
Основному тексту нужно не меньше 4,5:1. Крупному тексту — от 24 точек или жирному от 19 — достаточно 3:1: крупные буквы читаются легче. Тот же порог 3:1 нужен значкам, рамкам полей ввода и другим элементам, по которым человек понимает интерфейс. Проверять на глаз нельзя: на хорошем мониторе в тёмной комнате бледный серый выглядит читаемым, а на телефоне на солнце он исчезает.
Самая частая ошибка — серый на сером: светло-серый второстепенный текст на светло-сером фоне карточки. Выглядит изящно, читается плохо. Вторая — белый текст на ярком цвете: жёлтой, светло-зелёной, оранжевой кнопке. Белое на жёлтом почти никогда не проходит порог, и надпись на такой кнопке пишут тёмным.
Контраст считают специальные инструменты: в редакторах есть плагины и встроенные проверки, которые показывают число. Проверять стоит пары, которые повторяются: основной текст на фоне страницы, второстепенный текст на фоне карточки, надпись на главной кнопке.
И отдельное правило: смысл не передают только цветом. Поле с ошибкой обводят красным и подписывают текстом, что не так. Обязательное поле отмечают звёздочкой, а не только цветом. Примерно каждый двенадцатый мужчина плохо различает красный и зелёный, и для него «красная рамка» без подписи — просто рамка.
Светлая и тёмная тема
Двухслойные переменные окупаются полностью, когда у интерфейса появляется тёмная тема. Смысловая переменная «Фон / страница» в светлой теме ссылается на почти белый, а в тёмной — на почти чёрный. Экраны при этом не перерисовывают: они покрашены смысловыми именами, и переключение темы меняет только то, куда эти имена указывают.
| смысловая переменная | светлая тема | тёмная тема |
|---|---|---|
| Фон / страница | gray / 50 | gray / 900 |
| Фон / карточка | white | gray / 800 |
| Текст / основной | gray / 900 | gray / 50 |
| Кнопка / фон | blue / 600 | blue / 400 |
Такие наборы значений в редакторе называются режимами переменных: одна коллекция, в ней два столбца — «Светлая» и «Тёмная». Переключив режим у фрейма, вы видите тот же экран в другой теме и сразу замечаете, где что-то покрашено мимо переменных: такой слой остался в старом цвете.
Тёмная тема — не инверсия светлой. Если просто поменять белое и чёрное местами, акцентный цвет станет слишком ярким и начнёт «гореть», а тени перестанут работать. Поэтому в тёмной теме акцент обычно берут на ступень-две светлее и чуть менее насыщенным (в таблице — blue / 400 вместо 600), фон делают не чисто чёрным, а тёмно-серым, а глубину показывают не тенью, а более светлым фоном карточки.
Контраст проверяют заново в каждой теме: пара, которая прошла в светлой, в тёмной может провалиться. Особенно часто — второстепенный текст и рамки полей.
Режимы годятся не только для тем. Тот же механизм позволяет держать два бренда в одном макете или сезонную раскраску: имена одни, значения разные. Главное условие везде одно — экраны покрашены смыслом, а не палитрой.