Цвет — это сигнал, а не украшение

Урок 8.3 · Интерфейсы и сайты с нуля · Модуль 8. Интерфейс, который понятно · По подписке

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

Нужно знать заранее: Урок 2.1 «Цвет, размер и скругление», урок 8.2

Объяснение

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

Как это работает: Цвет описывают тремя параметрами: оттенок (какой именно цвет — красный, синий), насыщенность (насколько он чистый и яркий) и светлота (насколько он светлый). Меняя насыщенность и светлоту, из одного оттенка получают всю палитру: светлые пастельные фоны, средние акценты, тёмный текст. В интерфейсе у цвета четыре роли, и их не надо смешивать: фон — большой и спокойный (светлый нейтральный или пастельный); поверхность — карточки, обычно белые, чтобы текст на них читался; акцент — один цвет для главного действия (кнопка); состояния — зелёный «готово», янтарный «внимание», красный «ошибка».

Уроки модуля 8

• 8.1 Один главный объект: иерархия экрана (бесплатно)
• 8.2 Близость и воздух: отступы вместо рамок (по подписке)
• 8.3 Цвет — это сигнал, а не украшение — вы здесь (по подписке)
• 8.4 Сочетание цветов: почему это читается (по подписке)
• 8.5 Контраст: чтобы видели все (по подписке)
• 8.6 Кнопка, которая ведёт себя как кнопка (по подписке)
• 8.7 Проект: переделать страницу по правилам (по подписке)
• 8.8 Разбор экрана: почему не видно главного (по подписке)