Лекция №5: Визуальный язык (UI): Цвет и Типографика

Курс: Веб-дизайн и проектирование интерфейсов
Аудитория: 2 курс, технические специальности
Связь с практикой: База для Лабораторной работы №4 (Design System)

1. Типографика: Инженерный подход к рендерингу текста

В современных веб-приложениях и SaaS-платформах 90-95% полезной площади интерфейса занимает текст. Типографика в UI/UX — это дисциплина об управлении вниманием пользователя и снижении когнитивной нагрузки при парсинге визуальной информации. Если вы настроите параметры типографики математически верно, интерфейс будет выглядеть профессионально даже без графики.

1.1. Классификация гарнитур (Font Families) для инженеров

Забудьте про декоративные шрифты со сложными завитками. Интерфейсные шрифты делятся на три утилитарные категории:

Примеры: Times New Roman, Georgia
Засечки помогают глазу «цепляться» за строку при чтении длинных массивов текста на бумаге. В веб-интерфейсах (особенно в админках) используются редко, так как на мониторах с низким DPI (пиксельной плотностью) мелкие засечки превращаются в «мыло» (anti-aliasing artifacts). Это традиционный, «книжный» стиль.

Примеры: Roboto, Inter, San Francisco
Абсолютный индустриальный стандарт для интерфейсов. У них простые геометрические формы, они отлично масштабируются и читаются с экранов любого разрешения. Современный, «цифровой», чистый стиль.

Примеры: Fira Code, JetBrains Mono
Шрифты, где каждая буква (от ‘i’ до ‘W’) занимает строго одинаковую ширину в пикселях.
Где применять: Незаменимы для вывода фрагментов кода, логов сервера, табличных данных с цифрами (например, списки транзакций, где важно, чтобы разряды чисел выстраивались в ровные колонки).

1.2. Типографическая шкала (Modular Scale)

Размеры шрифтов в интерфейсе никогда не задаются случайными числами. Они должны выстраиваться в математическую прогрессию, подобно частотам музыкальных нот или архитектурным пропорциям (золотое сечение).

Вы выбираете базовый размер (Base size) и множитель (Ratio, например 1.25 — Major Third).

• Body (База): 16px (Стандартный размер текста в браузере по умолчанию).
• H3 (Подзаголовок): 16 * 1.25 = 20px.
• H2 (Заголовок раздела): 20 * 1.25 = 25px.
• H1 (Главный заголовок): 25 * 1.25 = ~31px (округляем до 32px для кратности 8).

1.3. Макро- и Микро-типографика: Управление пространством

Читать сплошной текст физиологически тяжело. Глаз человека читает не плавным скольжением, а скачками (саккадами) с короткими остановками (фиксациями). Ваша задача как проектировщика — создать комфортные «направляющие» для глаза.

A. Интерлиньяж (Line Height) Это расстояние между базовыми линиями соседних строк. Грубейшая ошибка новичка — оставлять Line Height в значении Auto, отдавая его на откуп шрифтовому движку. Интерлиньяж должен рассчитываться по формулам:

• Для основного текста (Body): Глазу нужен “воздух”, чтобы при переходе на новую строку не сбиться. Стандарт: 140% - 160% от размера шрифта (в CSS это line-height: 1.5;).
• Для заголовков (H1-H3): Заголовки крупные, и если к ним применить множитель 1.5, строки развалятся на отдельные куски. Заголовки должны быть плотными едиными блоками: 110% - 120% (line-height: 1.1;).

B. Длина строки (Line Length / Measure) Edge case: Представьте текстовый блок, растянутый на всю ширину 27-дюймового монитора. К концу строки глазу придется проделать огромный путь назад влево, чтобы найти начало следующей. Пользователь неизбежно промахнется мимо нужной строки.

• Инженерный стандарт: Оптимальная длина строки — от 45 до 75 символов (включая пробелы). В CSS это часто задается как max-width: 65ch; (ch = ширина символа ‘0’). Если экран шире — ограничивайте контейнер с текстом, а не растягивайте его.

C. Иерархия весов (Font-Weight) Чтобы выделить элемент, не обязательно делать его больше. Часто достаточно изменить «вес» (толщину начертания). В цифровой среде веса обозначаются сотнями:

• 400 (Regular) — для Body текста.
• 500 (Medium) — для кнопок, лейблов, табов.
• 600 (Semi-Bold) или 700 (Bold) — для заголовков. Не используйте на одном экране более 3 разных весов, это создает визуальный шум.

2. Цвет: Математическая модель HSB

Забудьте про цветовой круг Иттена, которым пользуются художники. Для инженера интерфейсов цвет — это не краска, а набор переменных. В программировании и верстке чаще всего используется HEX или RGB, так как это машинные форматы рендеринга пикселей монитора. Но проектировать интерфейс в RGB невозможно (попробуйте в уме смешать красный и зеленый, чтобы получить нужный оттенок желтого).

Поэтому в Figma мы используем цилиндрическую систему координат HSB (Hue, Saturation, Brightness) или её CSS-эквивалент HSL (Hue, Saturation, Lightness).

• Hue (Оттенок): Градус на цветовом круге от 0 до 360. Это ваша базовая переменная цвета. 0 — Красный, 120 — Зеленый, 240 — Синий.
• Saturation (Насыщенность): Вектор от центра цилиндра (0% — абсолютно серый) к его краю (100% — чистый, “кислотный” цвет).
• Brightness (Яркость): Ось Z цилиндра. От 0% (абсолютный черный) до 100% (максимальная светимость).

3. Соотношение сигнал/шум: Правило 60-30-10

Цвет в интерфейсе расходуется как драгоценный ресурс. Если сделать всё ярким, интерфейс начнет «кричать», и пользователь не поймет, куда нажимать. Для контроля визуального шума инженеры используют пропорцию 60-30-10:

1. 60% — Базовый фон (Background): В светлой теме это Brightness 100% и минимальная примесь цвета (Saturation 0-2%), чтобы фон не казался стерильно-больничным белым.
2. 30% — Контентный слой (Secondary): Текст, границы карточек (borders), плашки, неактивные табы. Это оттенки серого (Grayscale, который мы обсуждали в Лекции №4).
3. 10% — Акцентный цвет (Accent / Primary): Главный бренд-цвет с высокой насыщенностью (Saturation > 80%). Применяется исключительно для интерактивных элементов: кнопок (CTA), активных ссылок, чекбоксов, тумблеров.

Инженерное правило: Если пользователь прищурится, глядя на ваш макет, он должен видеть размытый серо-белый фон, на котором четко горят 2-3 цветных пятна. Это и есть целевые действия.

4. Семантика цвета и Системные статусы

Цвет — это визуальный эквивалент HTTP-статусов ответа сервера. Семантические цвета зарезервированы под конкретные системные сообщения, и использовать их для декора — грубейшая ошибка.

• Success (Зеленый / 2xx OK): Транзакция прошла, файл загружен.
• Warning (Желтый/Оранжевый / Form Validation): Предупреждение. Например, пароль слишком простой, или подписка истекает через 3 дня.
• Error (Красный / 4xx, 5xx Errors): Ошибка валидации формы, сбой сервера или деструктивное действие (удаление аккаунта).
• Info (Синий / Neutral): Информационные подсказки, тултипы (Tooltips), обновления системы.

5. Доступность (A11y): Алгоритмы контраста и Дальтонизм

Проектирование цвета подчиняется международному стандарту WCAG (Web Content Accessibility Guidelines). Доступность — это не только забота о людях с нарушениями зрения, это забота о пользователе, который пытается прочитать ваш интерфейс со смартфона на улице под ярким солнцем.

Алгоритм контраста (Contrast Ratio)

Отношение яркости фона к яркости текста измеряется в пропорции.

• Fail (Провал): Соотношение ниже 3:1. Текст сливается с фоном. (Классическая ошибка: белые буквы на желтой или светло-зеленой кнопке).
• Уровень AA (Стандарт): Соотношение минимум 4.5:1 для обычного текста и 3:1 для крупного (заголовки).
• Уровень AAA (Строгий стандарт): Соотношение минимум 7:1. Обязательно для государственных и медицинских порталов.

Всегда проверяйте макеты плагинами Figma (например, Contrast или Able). Если алгоритм выдает Fail — это технический баг, макет не пройдет контроль качества.

Проектирование с учетом дальтонизма (Color Blindness)

Около 8% мужчин в мире имеют ту или иную форму цветовой слепоты (чаще всего дейтеранопию — неразличение красно-зеленых оттенков).

Жесткое правило инженерии: Никогда не передавайте критически важную информацию только с помощью цвета.

• Неправильно: Если пароль неверный, поле ввода просто становится красным. Дальтоник этого не увидит.
• Правильно: Поле ввода становится красным + рамка становится толще + появляется иконка ⚠️ + выводится четкий текстовый лейбл: “Неверный пароль”. Цвет должен лишь дублировать структурную информацию.

6. Систематизация: От Стилей к Дизайн-токенам (Design Tokens)

В промышленной разработке “хардкодить” цвета — это абсолютный антипаттерн, кратно усложняющий поддержку продукта. В Лабораторной №4 мы обязаны перевести все константы в Стили (Styles).

Представьте архитектурный сбой: вы вручную покрасили 50 экранов в синий #0000FF. Если бизнес потребует сделать цвет «чуть мягче», без системного подхода вам придется прокликивать 1000 элементов. При использовании стилей вы меняете ровно один корневой параметр Primary Color, и весь макет обновляется автоматически. Это прямой аналог использования CSS-переменных (:root { --primary-color: #0055FF; }) в коде.

Инженерный нейминг (Naming Convention): Имя стиля должно описывать его семантическую функцию в системе, а не внешний вид.

• Ошибочный подход: Color / Light Blue. Если в будущем тема сменится на темную, этот синий может стать белым, и переменная сломает логику.
• Инженерный подход: Color / Primary / 500 или Color / System / Error. Использование слэша / в Figma автоматически генерирует строгую древовидную структуру папок.

7. Архитектура Темной темы (Dark Mode)

Проектирование темной темы — это не просто инверсия цветов (когда белый фон становится черным). Это сложная математическая перекалибровка.

Жесткие правила инженерии Dark Mode:

1. Отказ от абсолютного черного: Строго избегаем чистого черного #000000 для фоновых слоев. Он поглощает весь свет и создает слишком режущий контраст. Стандарт индустрии — темно-серый фон (#121212).
2. Десатурация (Приглушение) акцентов: Насыщенные базовые цвета на темном фоне вибрируют и выглядят «ядовито». Программно снижайте Saturation и повышайте Brightness.
3. Ось Z и передача глубины (Elevation): В светлой теме тень показывает высоту. Черная тень на почти черном фоне не видна. Инженерный паттерн: Чем ближе элемент к пользователю по оси Z, тем светлее его заливка. Базовый фон — #121212, карточка на нем — #1E1E1E, всплывающий дропдаун — #2C2C2C.

8. Практический совет: Алгоритм сборки системы

Как спроектировать чистый интерфейс, если вы инженер, и у вас “нет вкуса”? Используйте строгий алгоритм:

1. Зайдите на проверенные генераторы палитр (Coolors.co, Adobe Color).
2. Выберите ровно один функциональный цвет (например, синий). Это будет ваш Акцент (Primary).
3. Остальные цвета в макете сгенерируйте исключительно в оттенках серого (черный текст, белый фон, светло-серые плашки).
4. Вы гарантированно получите профессиональный интерфейс!

---

Проверь себя!

Абсолютным стандартом (Font Family) для проектирования интерфейсов является наличие:

Текстов с засечками (Serif)Декоративных шрифтовМоноширинных шрифтов (Monospace)Шрифтов без засечек (Sans Serif)

Проверить ответ

Что означает Engineering Правило цвета 60-30-10 в UI?

Координаты: 60 Hue, 30 Saturation, 10 BrightnessПропорции фона, контентных блоков и единственного яркого акцентаАлгоритм нахождения трех оттенков на цветовом круге Иттена

Проверить ответ