Редакция Romanov Lab · Опубликовано
Фирменная палитра и палитра интерфейса решают разные задачи. На упаковке яркий цвет помогает узнать бренд. На сайте нужно ещё прочитать цену, отличить ссылку от подписи и понять, закончилась ли отправка формы. Если перенести все цвета брендбука на кнопки и уведомления без распределения ролей, получится узнаваемая, но непредсказуемая страница.
Рабочий результат — набор разрешённых сочетаний с объяснением их назначения. Не стоит начинать с десятков оттенков. Сначала выясните, сколько разных смыслов должен передавать сайт, затем подберите минимальный набор, который с ними справляется.
Разделите идентичность и поведение
Выпишите элементы, где фирменный цвет должен сохраняться: знак, крупный акцент, отдельные иллюстрации, упаковка товара на фотографии. Рядом составьте список интерфейсных ролей: основной текст, второстепенный текст, фон страницы, поверхность карточки, граница поля, главное действие, ссылка, ошибка, предупреждение и успешное завершение. Один и тот же оттенок может выполнять несколько ролей, но не должен случайно придавать им противоположный смысл.
Предположим, бренд строительной мастерской использует насыщенный оранжевый. Из этого не следует, что белый мелкий текст на оранжевой кнопке будет читаться или что каждое оранжевое сообщение обозначает опасность. Можно оставить яркий цвет в декоративных полосах, выбрать более тёмный родственный тон для кнопки и отдельный оттенок для предупреждения. Связь с брендом сохраняется через композицию и повторяемые акценты.
Если брендбук запрещает изменение основного цвета, обсуждайте область применения. Не обязательно перекрашивать знак. Иногда достаточно светлой поверхности и тёмной надписи на кнопке либо фирменной рамки вокруг нейтрального элемента. Решение должно быть согласовано как конкретное сочетание, а не как разрешение «сделать чуть темнее» во всех местах.
Соберите палитру от нейтральных поверхностей
Начните со страницы, текста и карточки. Посмотрите, различаются ли уровни без акцентов: где начинается секция, что относится к одной карточке, где второстепенное пояснение. Если всё держится на яркой заливке, палитра будет перегружена уже после появления баннера и фотографий.
Для условного каталога можно попробовать тёплый светлый фон, белые карточки, тёмный основной текст и более мягкий текст пояснений. Эти названия описывают роли; точные значения выбирают на реальном содержании. Слишком близкие оттенки карточки и фона потребуют дополнительной границы или расстояния. Слишком сильная разница разобьёт спокойный каталог на множество конкурирующих прямоугольников.
Не создавайте несколько почти одинаковых серых только потому, что разные экраны рисовали разные люди. Для каждого нового оттенка спросите: какую различимую роль он добавляет? Если ответа нет, существующего часто достаточно. При этом одинаковый цвет может выглядеть иначе на соседних поверхностях, поэтому решение проверяют внутри компонента, а не только в панели образцов.
Проверяйте сочетания, а не отдельные цвета
У цвета нет самостоятельной «доступности». Проверять нужно конкретную пару переднего плана и фона. Для обычного текста WCAG уровня AA предусматривает контраст не ниже 4,5:1, для крупного — 3:1; определение крупного текста и исключения приведены в пояснениях W3C. Фирменное происхождение цвета не отменяет проверку текста кнопки.
Заведите простую ведомость пар: основной текст на странице, пояснение на карточке, надпись главной кнопки, ссылка в абзаце, сообщение об ошибке. Запишите допустимость и ограничения: например, акцент пригоден для крупного заголовка, но не для подписи. Не публикуйте выдуманные значения контраста; измерьте фактические цвета выбранного варианта.
У прозрачных элементов учитывайте итоговое наложение. Цвет с пониженной непрозрачностью на белом и на сером фоне даёт разные результаты. Не переносите отметку «проверено» с непрозрачного образца на полупрозрачную подпись поверх фотографии. Для фотографий нужен отдельный сценарий проверки, поскольку подложка там неоднородна.
Назначьте цветам понятные обязанности
Главное действие должно отличаться от соседних альтернатив, но это не означает, что каждая секция получает собственную яркую кнопку. На карточке услуги основным может быть «Обсудить задачу», а «Скачать описание» остаётся спокойной ссылкой. Если обе кнопки одинаково насыщенные, цвет не помогает выбирать.
Ссылки внутри текста желательно узнавать без угадывания. Статус тоже следует сообщать словами или дополнительным знаком: «Оплачено», «Нужны уточнения», «Отправка не завершена». В критерии W3C Use of Color прямо описано ограничение использования одного цвета как единственного носителя информации. Для макета это означает, что убрать насыщенность не должно означать убрать смысл.
На условном экране заказов зелёная точка без подписи не объясняет, означает ли она оплату, наличие товара или присутствие менеджера. Текстовый статус решает проблему точнее, чем подбор более выразительного зелёного. Цвет остаётся полезной подсказкой при быстром просмотре, но не единственным способом понять состояние.
Сначала рисуйте состояния, затем утверждайте палитру
Одна кнопка в обычном виде не показывает, хватит ли набора оттенков. Соберите рядом обычное, наведённое, нажатое, сфокусированное и недоступное состояния. Проверьте, не превращается ли главное действие при наведении в цвет ошибки и не исчезает ли рамка клавиатурного фокуса на соседней поверхности.
То же сделайте с полем: пустое, заполненное, с подсказкой, с ошибкой, недоступное. В состоянии ошибки текст пользователя должен оставаться читаемым. Красная заливка всего поля может перетянуть внимание и ухудшить чтение, тогда как граница, значок и ясное пояснение решают задачу спокойнее.
Не смешивайте недоступность и второстепенность. Второстепенная ссылка всё ещё активна. Если она выглядит как отключённая кнопка, человек может не попробовать её нажать. Это вопрос функционального смысла палитры, а не личного отношения к светло-серому цвету.
Разберите конфликт на одном рабочем экране
Представим страницу записи в мастерскую. На ней есть оранжевый логотип, главная кнопка, выбор свободного времени и предупреждение о необходимости привезти деталь. В первом варианте всё оранжевое. Посетитель видит четыре похожих акцента и не понимает, какой из них обозначает выбранный слот.
Во втором варианте логотип остаётся фирменным, главная кнопка получает согласованную контрастную пару, выбор времени отмечается рамкой и словом «Выбрано», предупреждение — отдельным фоном и поясняющим значком. Преимущество — разделение смыслов. Цена решения — необходимость подготовить несколько состояний вместо одного универсального акцента. Нельзя заранее приписывать этому рост конверсии; полезность проверяется выполнением задачи записи.
Покажите экран человеку и попросите определить выбранное время, найти предупреждение и продолжить запись. Не объясняйте значения заранее. Если участник ошибается, выясните, связано ли это с цветом, подписью или расположением. Менять всю палитру из-за одной неудачной формулировки не нужно.
Как сокращать палитру без потери смысла
Предположим, после нескольких итераций в макете появились три синих для ссылок, два почти одинаковых серых для подписей и четыре варианта зелёного. Не объединяйте их автоматически по близости значений. Сначала найдите места применения. Один зелёный может быть цветом товара, другой — статусом успешного действия. Их сходство не делает роли взаимозаменяемыми.
Для ссылок выберите один базовый вариант и отдельно проверьте нужные состояния. У подписей сравните реальные размеры и поверхности: возможно, второй серый появился для компенсации неудачного контраста и должен быть заменён более устойчивой парой. Содержательные цвета товара сохраняйте как данные, не подчиняя их интерфейсной палитре.
Затем соберите один экран со всеми оставшимися ролями. Если после сокращения ошибка и предупреждение стали одинаковыми, восстановите различие через текст, знак и оформление. Цель — убрать случайные различия, а не любой ценой получить минимальное число цветов. Подписи «ошибка» и «внимание» должны оставаться понятными даже при близких оттенках.
На встрече согласования покажите не только полоску образцов, но и форму с ошибкой, карточку товара и длинный текст со ссылкой. Попросите оценивать конкретные пары и сценарии. Вопрос «нравится ли этот синий» редко завершает спор; вопрос «можно ли отличить ссылку и прочитать её на карточке» даёт проверяемое основание для решения.
Приёмка и передача
- Каждый цвет имеет роль и пример применения, а не только красивое имя.
- Проверены фактические пары текста и поверхности, включая второстепенные подписи.
- Статусы понятны без цветового различия; выбранное состояние имеет дополнительный признак.
- Основное действие узнаётся рядом с альтернативами и не путается с уведомлением.
- Фокус и ошибки видны на всех разрешённых поверхностях.
- Для спорного фирменного цвета записано согласованное ограничение, а не устная договорённость.
Передайте дизайнеру и разработчику страницу примеров вместе со значениями цветов. Если позже появляется новый статус или фон, его проверяют в этих сочетаниях, а не добавляют произвольный оттенок. Так палитра остаётся управляемой даже без большой отдельной дизайн-системы.
Нужен план для вашего проекта? Напишите нам в Telegram или по электронной почте. Обсудим разработку, продвижение или поддержку сайта.
