Здравствуйте! В прошлом уроке мы создали системную цветовую палитру, разделив цвета на функциональные группы: нейтральные, брендовые и акцентные. Мы научились генерировать цветовые шкалы и организовать их в Figma как стили. Это был важный шаг от интуитивного выбора цвета к построению масштабируемой системы.
Сегодня мы подробно разберем четвертую, критически важную категорию — семантические цвета. Наша цель — научиться применять семантические цвета (success, error, warning, info) в интерфейсе. Если брендовые цвета формируют «личность» продукта, то семантические — это его «голос». С их помощью система общается с пользователем: сообщает об успехе, предупреждает об ошибках и направляет его действия. Мы научимся использовать этот язык цвета осознанно и, что самое главное, доступно для всех пользователей.
Часть 1: Язык цвета в интерфейсе
В основе семантических цветов лежит идея общепринятых ассоциаций, которые понятны большинству людей без дополнительных объяснений. Ваш опыт в графическом дизайне и искусстве дает вам тонкое понимание психологии цвета; в продуктовом дизайне мы формализуем эти знания в конкретный набор правил для коммуникации с пользователем.
Основных «сообщений» четыре:
- Success (Успех): Положительный результат, завершение задачи. Обычно используется зеленый цвет.
- Error / Danger (Ошибка / Опасность): Критическая ошибка, сбой, необратимое или опасное действие. Стандартный цвет — красный.
- Warning (Предупреждение): Уведомление, требующее внимания, чтобы избежать ошибки. Обычно это желтый или оранжевый цвет.
- Information (Информация): Нейтральное сообщение о процессе, статусе или дополнительная информация. Часто используется синий цвет.
Давайте посмотрим, как эти принципы определены в реальных дизайн-системах.
Прочтите раздел «Status color palette» в гайдлайне дизайн-системы Carbon от IBM. Здесь кратко и четко описаны основные семантические цвета и их значения.
Найдите подзаголовок Status color palette. Изучите описание для красного, оранжевого/желтого, зеленого и синего цветов. Обратите внимание, как они также используют серый и фиолетовый для более специфических статусов.
Дизайн-система Atlassian (продукты Jira, Trello) использует ту же логику, называя это «ролями» цвета.
Overview - Color - Atlassian Design
Изучите раздел «Color roles» в гайдлайне Atlassian. Это отличный пример того, как семантические цвета интегрированы в общую систему токенов.
В начале документа найдите раздел Color roles. Изучите таблицу, где описаны роли information, success, warning и danger. Посмотрите на визуальные примеры кнопок — это поможет закрепить ассоциации.
Часть 2: Доступность — больше, чем просто цвет
Использовать красный для ошибки и зеленый для успеха кажется очевидным. Но здесь кроется одна из самых частых ошибок начинающих дизайнеров: полагаться только на цвет.
Представьте, что пользователь с дальтонизмом (например, с дейтеранопией) не различает красный и зеленый цвета. Для него уведомления об ошибке и успехе могут выглядеть одинаково. Именно поэтому стандарты доступности веб-контента (WCAG) требуют, чтобы информация, передаваемая цветом, дублировалась другим визуальным средством.
Это могут быть:
- Иконки: Галочка для успеха, крестик или восклицательный знак для ошибки.
- Текст: Четкое сообщение «Платеж прошел успешно» или «Неверный пароль».
- Форма или паттерн: Иногда для графиков используют разные штриховки.
Теперь давайте вернемся к гайдлайну Carbon и прочтем ключевое правило доступности, связанное с цветом.
Найдите раздел "Accessibility" и внимательно прочтите первый абзац под заголовком Relying only on color is insufficient. Это фундаментальный принцип, который вы должны применять во всех своих проектах.
Overview - Color - Atlassian Design
Пример из дизайн-системы Atlassian. Для уведомления типа warning (предупреждение) используется не только желтый фон, но и специальный инверсный цвет текста (color.text.warning.inverse), чтобы обеспечить достаточный контраст и читаемость по стандартам WCAG.
Как видите, недостаточно просто выбрать семантический цвет. Нужно убедиться, что текст и иконки на этом цветном фоне легко читаются. Это подводит нас к следующей теме, которую мы подробно разберем на следующем уроке, — проверке цветового контраста.
Часть 3: Практика в Figma: семантические переменные (Variables)
Теперь перенесем теорию в практику. Чтобы системно управлять семантическими цветами, в Figma (и в дизайн-системах в целом) используют семантические переменные (или токены).
Идея проста: вместо того чтобы каждый раз применять к элементу конкретный HEX-код (например, #D92D20), вы применяете переменную с осмысленным названием, например color-feedback-error-bold. А уже эта переменная ссылается на нужный оттенок из вашей базовой палитры (Red-600).
Преимущества такого подхода:
- Масштабируемость: Если вы решите изменить оттенок красного для ошибок во всем приложении, вам достаточно изменить его в одном месте — в базовой палитре.
- Поддержка тем: Для переключения на темную тему вы просто говорите, что переменная
color-feedback-error-boldтеперь должна ссылаться не наRed-600, а наRed-400(более светлый оттенок). - Понятность: Названия переменных (
background-positive,text-negative) несут смысл и помогают другим дизайнерам и разработчикам правильно использовать цвета.
Давайте посмотрим короткое видео, где отлично объясняется эта концепция.
Figma Design System: 03 Semantic Color Variables
В этом видео автор объясняет разницу между примитивными (primitive) и семантическими (semantic) цветами и показывает структуру их именования.
Посмотрите фрагмент с объяснением концепции. Сосредоточьтесь на схеме Primitive -> Semantic -> Component и таблице с правилами именования (Group, Role, Appearance, State). Это поможет вам понять логику построения системы.
А теперь посмотрим, как создать набор семантических переменных для фонов (backgrounds) прямо в Figma.
Figma Design System 2025 - Colour Tokens [ Ep 1] | Figma Variables Colors
В этом видео показан полный цикл создания цветовой системы. Мы сосредоточимся на фрагменте, посвященном именно семантическим цветам для фонов.
Посмотрите фрагмент с созданием семантических цветов. Обратите внимание на следующие шаги: Создание новой группы semantic внутри background. Определение ролей: success, warning, error, info. Создание вариаций: subtle (легкий фон) и bold (насыщенный фон). Привязка семантических переменных к примитивным цветам из палитры (например, semantic/success/subtle привязывается к Green-10).
Теперь ваша очередь. Откройте ваш файл Figma, где вы работали над палитрой в прошлом уроке. Создайте небольшой набор семантических переменных для фонов (Backgrounds), текстов (Text) и границ (Borders), используя цвета из вашей палитры.
Например:
background/success/subtle-> Светло-зеленыйtext/success/default-> Темно-зеленыйborder/error/default-> Красныйtext/error/default-> Темно-красный
Это упражнение поможет вам закрепить материал и подготовит основу для вашей будущей дизайн-системы.
Заключение
Сегодня мы погрузились в мир семантических цветов и научились говорить с пользователем на универсальном языке интерфейса. Вы узнали, что цвет — это не только эстетика, но и мощный инструмент коммуникации, который требует ответственного и системного подхода.
Ключевые выводы:
- Четыре всадника семантики: Зеленый (успех), красный (ошибка), желтый (предупреждение) и синий (информация) — это основа обратной связи в интерфейсе.
- Доступность превыше всего: Никогда не полагайтесь только на цвет для передачи важной информации. Всегда дублируйте его иконкой или текстом.
- Системный подход в Figma: Используйте семантические переменные (токены), чтобы создать гибкую, масштабируемую и понятную цветовую систему. Это отделяет профессиональный дизайн продукта от простого рисования макетов.
Ваш сильный визуальный бэкграунд — это фундамент. Добавив к нему принципы функционального и доступного дизайна, вы сможете создавать продукты, которые не только красивы, но и по-настоящему удобны для всех пользователей.
Что дальше?
Мы уже затронули тему доступности, но она заслуживает отдельного, более глубокого изучения. В следующем уроке мы полностью сфокусируемся на ней и научимся проверять и обеспечивать достаточный цветовой контраст по стандартам доступности (WCAG). Мы разберем конкретные инструменты и плагины, которые помогут вам сделать ваши дизайны читаемыми и удобными для людей с нарушениями зрения.