ЛЕКЦИЯ 11
ЦВЕТ В ИНТЕРФЕЙСЕ
Цвет в интерфейсе должен не заменять композицию, а усиливать её: помогать различать иерархию, действия, статусы и типы данных. В лекции рассматриваются схемы сочетания цветов, модели описания цвета, создание палитр и проверка контрастности, а также показано, как применять эти принципы в интерфейсах и дизайн-системах.
Композиция
Цвет следует добавлять после того, как определена структура интерфейса.
До выбора палитры нужно понять, что на экране главное и второстепенное, какие элементы связаны между собой, какие кликабельны, какие информационные или декоративные. Иерархию рекомендуется сначала выстроить в чёрно-белом варианте.
Композицию формируют:
- размер элементов;
- близость объектов;
- контраст;
- цветовые пятна на фоне;
- роль элемента.
Роль может быть главной, второстепенной, интерактивной или связанной с опасным действием. Цвет помогает обозначить эти роли, но сам по себе не должен компенсировать неудачную композицию.
Таймкод: 18:45–21:30.
До выбора палитры нужно понять, что на экране главное и второстепенное, какие элементы связаны между собой, какие кликабельны, какие информационные или декоративные. Иерархию рекомендуется сначала выстроить в чёрно-белом варианте.
Композицию формируют:
- размер элементов;
- близость объектов;
- контраст;
- цветовые пятна на фоне;
- роль элемента.
Роль может быть главной, второстепенной, интерактивной или связанной с опасным действием. Цвет помогает обозначить эти роли, но сам по себе не должен компенсировать неудачную композицию.
Таймкод: 18:45–21:30.
1. Определить функцию экрана и его элементов
2. Установить визуальную иерархию в чёрно-белом виде
3. Создать повторно используемые элементы и компоненты
4. Добавить цвет, усиливая уже заданные акценты.
На следующих этапах автолейауты превращаются в компоненты, которые можно повторно использовать на разных экранах. Если палитра подключена к компонентам через переменные, изменение цветовых значений позволяет быстро обновить внешний вид всего интерфейса.
Таймкод: 21:30–22:54.
2. Установить визуальную иерархию в чёрно-белом виде
3. Создать повторно используемые элементы и компоненты
4. Добавить цвет, усиливая уже заданные акценты.
На следующих этапах автолейауты превращаются в компоненты, которые можно повторно использовать на разных экранах. Если палитра подключена к компонентам через переменные, изменение цветовых значений позволяет быстро обновить внешний вид всего интерфейса.
Таймкод: 21:30–22:54.
Цвет в интерфейсе
Цвет нужен не только для декоративного оформления. Он выполняет несколько функций:
- Поддержание бренда.
Связь интерфейса с фирменными цветами помогает узнавать продукт — например, Google Docs или «МойОфис».
- Обозначение действия.
Основная кнопка может быть заметнее второстепенных; цвет дополняет контраст и композицию.
- Передача статуса.
В лекции приведены распространённые соответствия: красный — ошибка, оранжевый или жёлтый — предупреждение, зелёный — успешное выполнение, синий — информационное сообщение.
- Разделение данных.
Цвет может помогать различать пользователей или категории контента.
- Кодирование значений.
Например, на графике цветом можно обозначать рост или снижение цены. Один и тот же цвет не следует бездумно использовать для разных категорий данных. Статусы, пользовательские метки и элементы интерфейса должны различаться достаточно ясно, иначе пользователь может неверно истолковать обозначение.
Таймкод: 25:40–28:28.
- Поддержание бренда.
Связь интерфейса с фирменными цветами помогает узнавать продукт — например, Google Docs или «МойОфис».
- Обозначение действия.
Основная кнопка может быть заметнее второстепенных; цвет дополняет контраст и композицию.
- Передача статуса.
В лекции приведены распространённые соответствия: красный — ошибка, оранжевый или жёлтый — предупреждение, зелёный — успешное выполнение, синий — информационное сообщение.
- Разделение данных.
Цвет может помогать различать пользователей или категории контента.
- Кодирование значений.
Например, на графике цветом можно обозначать рост или снижение цены. Один и тот же цвет не следует бездумно использовать для разных категорий данных. Статусы, пользовательские метки и элементы интерфейса должны различаться достаточно ясно, иначе пользователь может неверно истолковать обозначение.
Таймкод: 25:40–28:28.
Мы воспринимаем цвет, когда свет отражается от поверхности и попадает в глаз; затем информация обрабатывается зрительной системой и мозгом. Цвет воспринимается в контексте ожиданий: необычный цвет привычного объекта может вызвать сомнение или диссонанс. При выборе оттенков важно учитывать, что цвет воспринимается не изолированно, а в сочетании с соседними цветами и общим контрастом интерфейса. Для тёмной темы спикер рекомендует использовать приглушённые оттенки, чтобы избежать чрезмерно резких сочетаний.
Таймкод: 27:09–31:25.
Таймкод: 27:09–31:25.
Свойства цвета и схемы сочетаний
Цветовые схемы помогают подобрать сочетания, если палитру трудно составить интуитивно. Они задают отношения между оттенками на цветовом круге, но не определяют автоматически итоговое настроение: оно зависит также от насыщенности и светлоты.
Параметры цвета:
- Оттенок (Hue) – положение цвета на цветовом круге.
- Насыщенность (Saturation) – интенсивность цвета; при снижении насыщенности цвет приближается к серому.
- Светлота (Lightness) – переход от тёмного к светлому, в том числе добавление чёрного или белого. Также цвета описаны как светлые или тёмные, тёплые, нейтральные или холодные. Например, зелёный может восприниматься теплее, если он ближе к жёлтому, и холоднее, если он тяготеет к синему.
Таймкод: 31:25–46:28.
Параметры цвета:
- Оттенок (Hue) – положение цвета на цветовом круге.
- Насыщенность (Saturation) – интенсивность цвета; при снижении насыщенности цвет приближается к серому.
- Светлота (Lightness) – переход от тёмного к светлому, в том числе добавление чёрного или белого. Также цвета описаны как светлые или тёмные, тёплые, нейтральные или холодные. Например, зелёный может восприниматься теплее, если он ближе к жёлтому, и холоднее, если он тяготеет к синему.
Таймкод: 31:25–46:28.
- Аналоговая схема – соседние цвета на цветовом круге. Она ассоциируется с гармонией, спокойствием, естественностью, мягкостью и уютом. Изменение светлоты и насыщенности может менять настроение, сохраняя общее сочетание оттенков.
- Монохроматическая схема – оттенки одного цвета. Она позволяет создать минималистичное и цельное оформление, используя один фирменный цвет для акцентов и его вариации для остальных элементов. В лекции с ней связывались единство, элегантность, порядок и спокойствие.
- Комплементарная схема – противоположные цвета на цветовом круге, например синий и оранжевый, зелёный и фиолетовый или красный и зелёный. Такое сочетание даёт сильный контраст и может передавать энергию, напряжение, динамику и выразительность.
- Сплит-комплементарная схема - основной цвет сочетается с двумя оттенками по сторонам от его противоположного цвета. Контраст сохраняется, но становится менее прямолинейным; сочетание может выглядеть разнообразнее и сбалансированнее.
- Триада – три цвета, равномерно расположенные на цветовом круге. Она даёт больше разнообразия и может создавать игривое, активное и оптимистичное впечатление.
- Квадратная схема – четыре цвета, расположенные на равном расстоянии друг от друга, по 90 градусов. Она позволяет использовать много разных оттенков и передавать насыщенность, смелость и динамику. В интерфейсе важно различать оттенки, если цветом кодируются разные типы данных. Например, цвет ошибки не должен быть неотличим от цвета, которым обозначается пользователь или эмоциональная метка
Таймкод: 41:40–44:53.
- Монохроматическая схема – оттенки одного цвета. Она позволяет создать минималистичное и цельное оформление, используя один фирменный цвет для акцентов и его вариации для остальных элементов. В лекции с ней связывались единство, элегантность, порядок и спокойствие.
- Комплементарная схема – противоположные цвета на цветовом круге, например синий и оранжевый, зелёный и фиолетовый или красный и зелёный. Такое сочетание даёт сильный контраст и может передавать энергию, напряжение, динамику и выразительность.
- Сплит-комплементарная схема - основной цвет сочетается с двумя оттенками по сторонам от его противоположного цвета. Контраст сохраняется, но становится менее прямолинейным; сочетание может выглядеть разнообразнее и сбалансированнее.
- Триада – три цвета, равномерно расположенные на цветовом круге. Она даёт больше разнообразия и может создавать игривое, активное и оптимистичное впечатление.
- Квадратная схема – четыре цвета, расположенные на равном расстоянии друг от друга, по 90 градусов. Она позволяет использовать много разных оттенков и передавать насыщенность, смелость и динамику. В интерфейсе важно различать оттенки, если цветом кодируются разные типы данных. Например, цвет ошибки не должен быть неотличим от цвета, которым обозначается пользователь или эмоциональная метка
Таймкод: 41:40–44:53.
Генерация палитры и представление цвета
- Adobe Color – генератор палитр с вариантами сочетания цветов; позволяет также загрузить изображение-референс и получить палитру по нему.
- Coolors – сервис для генерации палитр. Для примера была показана монохроматическая палитра: оттенки одного цвета различались светлотой и насыщенностью
Таймкод: 44:53–46:28.
- Coolors – сервис для генерации палитр. Для примера была показана монохроматическая палитра: оттенки одного цвета различались светлотой и насыщенностью
Таймкод: 44:53–46:28.
HSL – модель, в которой цвет задаётся через оттенок, насыщенность и светлоту. Спикер представила её как интуитивно понятный способ исследовать цвет и подбирать оттенки.
HEX-код – буквенно-числовое представление цвета, используемое, в частности, в CSS. В работе с разработчиками и переменными Figma удобно передавать один HEX-код, а не три параметра HSL.
RGB описывает цвет через красный, зелёный и синий каналы.
В варианте RGBA добавляется альфа-канал, который задаёт прозрачность: значение 1 означает полную непрозрачность. RGB связан с устройством экранов: пиксели формируют изображение с помощью красного, зелёного и синего компонентов.
Таймкоды: 46:28–50:01; 50:01–54:21.
HEX-код – буквенно-числовое представление цвета, используемое, в частности, в CSS. В работе с разработчиками и переменными Figma удобно передавать один HEX-код, а не три параметра HSL.
RGB описывает цвет через красный, зелёный и синий каналы.
В варианте RGBA добавляется альфа-канал, который задаёт прозрачность: значение 1 означает полную непрозрачность. RGB связан с устройством экранов: пиксели формируют изображение с помощью красного, зелёного и синего компонентов.
Таймкоды: 46:28–50:01; 50:01–54:21.
Даже если цвета подобраны по одинаковым значениям HSL, человеческий глаз может воспринимать их по-разному. В примере насыщенные синий, жёлтый, зелёный, розовый и фиолетовый выглядели неодинаково по яркости и визуальному весу. Поэтому палитру нужно оценивать зрительно: цвета должны быть сбалансированы между собой и не создавать конкурирующие акценты.
Таймкод: 54:21–58:16.
Таймкод: 54:21–58:16.
OKLCH – модель Lightness, Chroma, Hue, которая учитывает восприятие цвета человеческим глазом. Она может помочь получить более согласованную растяжку оттенков, поскольку цвета воспринимаются не одинаково даже при формально равных параметрах HSL. Итоговые значения всё равно переводятся в HEX для использования в интерфейсе.
Таймкоды: 58:16–1:01:46.
Таймкоды: 58:16–1:01:46.
На примере экранов Revolut иерархия должна читаться даже в чёрно-белом варианте.
– На первом экране взгляд привлекает сумма 19 долларов благодаря размеру текста, расположению и контрасту.
– Кнопки с похожим контрастом воспринимаются как интерактивные; подпись-глагол уточняет, какое действие произойдёт.
– Навигационная панель показывает текущий раздел более контрастным выделением, чем остальные.
– Неактивная кнопка выглядит приглушённой; активная — контрастной, например со светлым фоном и тёмным текстом.
– На экране с графиком свечение и выделение элементов усиливают заметность данных, важных для решения о покупке или продаже.
- Основное целевое действие – покупка – выделено сильнее, чем дополнительные действия: настройка уведомлений, добавление в избранное и выбор периода. Цвет дополняет эту структуру: фирменные оттенки поддерживают визуальный стиль, а красный и зелёный кодируют снижение и рост цены. При этом цвет бренда криптовалюты помогает идентифицировать актив, не подменяя фирменную палитру самого приложения. Нужно соблюдать осторожность при перекрашивании логотипов и фирменных знаков: если значок биткоина сделать цветом основного бренда Revolut, можно потерять узнаваемость актива, сместить акценты и создать ложное впечатление, будто значок кликабелен.
Таймкоды: 1:01:46–1:11:41; 1:11:41–1:13:32.
– На первом экране взгляд привлекает сумма 19 долларов благодаря размеру текста, расположению и контрасту.
– Кнопки с похожим контрастом воспринимаются как интерактивные; подпись-глагол уточняет, какое действие произойдёт.
– Навигационная панель показывает текущий раздел более контрастным выделением, чем остальные.
– Неактивная кнопка выглядит приглушённой; активная — контрастной, например со светлым фоном и тёмным текстом.
– На экране с графиком свечение и выделение элементов усиливают заметность данных, важных для решения о покупке или продаже.
- Основное целевое действие – покупка – выделено сильнее, чем дополнительные действия: настройка уведомлений, добавление в избранное и выбор периода. Цвет дополняет эту структуру: фирменные оттенки поддерживают визуальный стиль, а красный и зелёный кодируют снижение и рост цены. При этом цвет бренда криптовалюты помогает идентифицировать актив, не подменяя фирменную палитру самого приложения. Нужно соблюдать осторожность при перекрашивании логотипов и фирменных знаков: если значок биткоина сделать цветом основного бренда Revolut, можно потерять узнаваемость актива, сместить акценты и создать ложное впечатление, будто значок кликабелен.
Таймкоды: 1:01:46–1:11:41; 1:11:41–1:13:32.
Accessibility – требования и рекомендации, помогающие людям с различными особенностями зрения, моторных функций и другими ограничениями пользоваться устройствами. В лекции в качестве примера упомянута экранная читалка в iOS и Android: она озвучивает содержимое экрана и позволяет управлять телефоном с помощью жестов. Для проверки контраста в Figma был показан плагин Contrast.
WCAG – требования к контрастности, описанные как уровни доступности; - APCA – алгоритм, который, по объяснению лектора, лучше отражает человеческое восприятие контраста и показывает пригодность цвета для разных типов текста. В демонстрации плагин показал требование контраста 4,5:1 для обычного текста. Приведённый цвет имел контраст 4,3:1, поэтому не проходил это требование. Для крупного текста размером больше 24 px результат оценивался отдельно; в примере использовался текст размером 32 px. APCA дополнительно указывал, для каких элементов цвет подходит: например, для заголовков, коротких надписей или нетекстовых элементов, но не для длинного контента.
Практические выводы:
- проверять нужно не только цвет текста, но и конкретный фон, на котором он расположен;
- визуально сомнительные сочетания стоит тестировать плагином;
- если продукт проходит формальную сертификацию доступности, спикер рекомендует ориентироваться на соответствующие требования WCAG; в остальных случаях — также использовать APCA как дополнительную проверку; - цвет нельзя использовать как единственный способ передать значимую информацию: важны также контраст, подписи, структура и состояние элемента.
Таймкод: 1:42:42–1:46:05.
WCAG – требования к контрастности, описанные как уровни доступности; - APCA – алгоритм, который, по объяснению лектора, лучше отражает человеческое восприятие контраста и показывает пригодность цвета для разных типов текста. В демонстрации плагин показал требование контраста 4,5:1 для обычного текста. Приведённый цвет имел контраст 4,3:1, поэтому не проходил это требование. Для крупного текста размером больше 24 px результат оценивался отдельно; в примере использовался текст размером 32 px. APCA дополнительно указывал, для каких элементов цвет подходит: например, для заголовков, коротких надписей или нетекстовых элементов, но не для длинного контента.
Практические выводы:
- проверять нужно не только цвет текста, но и конкретный фон, на котором он расположен;
- визуально сомнительные сочетания стоит тестировать плагином;
- если продукт проходит формальную сертификацию доступности, спикер рекомендует ориентироваться на соответствующие требования WCAG; в остальных случаях — также использовать APCA как дополнительную проверку; - цвет нельзя использовать как единственный способ передать значимую информацию: важны также контраст, подписи, структура и состояние элемента.
Таймкод: 1:42:42–1:46:05.
Примеры цветовых решений в интерфейсе
В Duolingo яркие, сильно насыщенные цвета создают весёлое и игривое настроение. В Airbnb интерфейс более сдержанный: используется один основной акцентный цвет и его оттенки, а большая часть остальных элементов нейтральна. При этом основное действие получает фирменный акцент. На этапе поиска кнопка `Next` может быть контрастной, но чёрной; после заполнения параметров появляется акцентная кнопка `Search`, обозначающая целевое действие. Во время загрузки применяются скелетоны, а цветовая палитра остаётся преимущественно нейтральной.
Таймкоды: 1:47:49–1:49:08.
Таймкоды: 1:47:49–1:49:08.
В Headspace используются яркие цвета и сочетания, которые создают солнечное, позитивное настроение. На экранах с разными задачами могут применяться разные схемы сочетаний, но основное действие всё равно должно быть визуально различимо. Цвет состояния также помогает понять, доступно ли действие: приглушённая кнопка может сигнализировать, что она пока неактивна.
В лекционном примере чек-ин становился доступным через 13 дней. Цветом графика и выбранного показателя обозначались связанные данные.
Таймкоды: 1:49:08–1:52:49.
В лекционном примере чек-ин становился доступным через 13 дней. Цветом графика и выбранного показателя обозначались связанные данные.
Таймкоды: 1:49:08–1:52:49.
На главных экранах приложения может быть больше визуальных акцентов и эмоциональных цветов.
Однако при переходе к конкретной задаче — например, выбору товара и его покупке — интерфейс целесообразно сделать спокойнее, чтобы пользователь сосредоточился на контенте и действиях.
Таймкоды: 1:52:49–1:54:24.
Однако при переходе к конкретной задаче — например, выбору товара и его покупке — интерфейс целесообразно сделать спокойнее, чтобы пользователь сосредоточился на контенте и действиях.
Таймкоды: 1:52:49–1:54:24.
В Apple Fitness большинство элементов рабочего экрана нейтральны: используются тёмный фон, серые и белые кнопки и показатели. Отдельные цвета закреплены за типами данных: например, пройденное расстояние обозначается синим, а время – жёлтым. Ключевой принцип: если цвет уже закреплён за типом данных или активности, его не следует использовать для другого значения, например для ошибки. Иначе пользователь может перепутать категории.
Таймкоды: 1:54:24–1:57:35.
Таймкоды: 1:54:24–1:57:35.
При проектировании тёмной темы нужно отдельно проверять контраст и гармонию оттенков: простой перенос цветов из светлой темы может дать слишком яркое или неравномерное сочетание. Для градиентов спикер рекомендует использовать OKLCH, поскольку при работе с HSL, особенно при переходах между холодным и тёплым оттенками, между цветами может появиться визуально «грязный» промежуточный тон.
Таймкоды: 1:37:00–1:40:56; 1:54:24–1:56:05.
Таймкоды: 1:37:00–1:40:56; 1:54:24–1:56:05.
Для определения подходящих цветов можно сначала составить карту ассоциаций и настроения продукта: записать основные, дополнительные и менее приоритетные ассоциации, затем собрать визуальный коллаж и извлечь из него возможные цвета.
Выбор палитры следует разделять:
- нейтральные цвета интерфейса; -
основной фирменный цвет и акценты;
- функциональные цвета для ошибок, предупреждений, успеха и отключённых элементов; - цвета для отдельных типов пользовательских данных. Цвета, выбранные по ассоциациям, необходимо дополнительно проверять на контрастность и применимость к конкретным ролям.
Таймкоды: 2:00:51–2:02:28.
Выбор палитры следует разделять:
- нейтральные цвета интерфейса; -
основной фирменный цвет и акценты;
- функциональные цвета для ошибок, предупреждений, успеха и отключённых элементов; - цвета для отдельных типов пользовательских данных. Цвета, выбранные по ассоциациям, необходимо дополнительно проверять на контрастность и применимость к конкретным ролям.
Таймкоды: 2:00:51–2:02:28.
- Adobe Color – генератор палитр и подбор цветов по изображению;
- Coolors – генератор цветовых палитр;
- Инструмент Кирилла Литина для генерации палитр, в том числе с использованием перцептивной модели; упомянута возможность экспорта JSON; - Плагин Contrast для проверки доступности в Figma;
- Apple Human Interface Guidelines и библиотека компонентов iOS;
- Гайдлайны для Android и веба.
- Coolors – генератор цветовых палитр;
- Инструмент Кирилла Литина для генерации палитр, в том числе с использованием перцептивной модели; упомянута возможность экспорта JSON; - Плагин Contrast для проверки доступности в Figma;
- Apple Human Interface Guidelines и библиотека компонентов iOS;
- Гайдлайны для Android и веба.
КАК ТЕБЕ КОНСПЕКТ?
Расскажи, чего не хватило. От похлавы мы тоже не откажемся :)
ПРЕДЫДУЩАЯ
ЛЕКЦИЯ 9. АФФИНИТИ-ДИАГРАММА
