Теория цвета — Примеры

Пример 1 — Перекодируем статус, основанный только на цвете

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

Очередь
  #4021   ●   Бристоль
  #4018   ●   Лидс
  #4012   ●   Кардифф

Решение

Очередь
  #4021   ✓ отправлен    Бристоль
  #4018   ⚠ задержан     Лидс
  #4012   ✓ отправлен    Кардифф

Теперь каждое состояние несёт слово и отличимую форму. За счёт этого оно переживает дальтонизм, монохромную распечатку и экран в бликах: оттенок становится избыточным, а не несущим. Никогда не кодируйте смысл только оттенком. Обычная неудача выглядит иначе: слово добавлено, однако два статуса остались разными оттенками одного красного, и это не убирает ни зависимости от цвета, ни двусмысленности между «задержан» и «не прошёл».

Пример 2 — Строим линейку и оставляем акцент

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

Сейчас
  [ синий баннер: Пробный период заканчивается через 3 дня ]
  [ синяя главная кнопка: Обновить тариф ]
  [ синяя ссылка: Управлять тарифом ]
  [ синяя информационная панель: Что останется ]

Решение

blue-50   поверхность
blue-200  граница
blue-600  база: только интерактивные элементы
blue-800  текст на blue-50

  [ neutral-100 баннер: Пробный период заканчивается через 3 дня ]
  [ blue-600 главная кнопка: Обновить тариф ]
  [ blue-600 ссылка: Управлять тарифом ]
  [ neutral-50 информационная панель: Что останется ]
  [ red-600 разрушительная кнопка: Удалить аккаунт ]

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