Визуальный дизайн: сетка, типографика, цвет и контраст

Сетка и шаг 8

Интерфейс выглядит аккуратным, когда в нём есть порядок. Его создаёт сетка:

• колонки — экран делят на колонки: на телефоне обычно 4, на компьютере 12. Элементы выравнивают по ним;
• поля — отступы от краёв экрана, на телефоне чаще всего 16;
• шаг — все размеры и отступы кратны одному числу, обычно 8: 8, 16, 24, 32, 48. Для мелочей допускают 4.

Когда отступы выбраны из одной шкалы, экран выглядит упорядоченно, даже если человек не может объяснить почему. А разработчики могут повторить размеры точно.

В Figma сетку включают в настройках фрейма: Layout guide → Columns.

Типографика

Текст — главное в интерфейсе. Правила простые:

• один шрифт с несколькими начертаниями обычно лучше трёх разных. Для интерфейсов хорошо подходят Inter, Roboto, Golos Text, PT Sans. Системные шрифты — SF Pro на iPhone и Roboto на Android — тоже отличный выбор;
• иерархия — главное видно сразу. Её создают размером, жирностью и цветом: заголовок 24 жирный, основной текст 16 обычный, подписи 13 серые;
• основной текст на телефоне — не меньше 16: мелкий текст тяжело читать;
• межстрочный интервал — примерно в 1,4–1,5 раза больше размера шрифта для обычного текста.

Удобно заранее завести шкалу стилей: «Заголовок», «Подзаголовок», «Текст», «Подпись», «Кнопка» — и пользоваться только ими. В Figma это Text styles.

Цвет

Новички часто раскрашивают всё. Работает обратное правило: цвета мало, и у каждого своя роль.

• Основной фон и текст — нейтральные: белый, светло-серый, тёмно-серый.
• Акцентный цвет — один, для главных действий: кнопка «Оплатить», активная вкладка, ссылки. У «Зерна» это тёплый кофейный.
• Служебные цвета — зелёный для успеха, красный для ошибок, жёлтый для предупреждений.

Для пропорций есть ориентир 60-30-10: 60% — основной нейтральный цвет, 30% — дополнительный, 10% — акцент. Если акцентом выделено всё, он перестаёт работать: глаз не понимает, куда смотреть.

Цвета тоже сохраняют как стили (Color styles или переменные), чтобы потом поменять оттенок во всём макете за раз.

Контраст

Светло-серый текст на белом смотрится изящно, но читается плохо, особенно на солнце и людьми со слабым зрением. Стандарт доступности WCAG требует контраст:

• не меньше 4,5:1 для обычного текста;
• не меньше 3:1 для крупного текста, иконок и границ полей.

Контраст проверяют плагинами Figma или онлайн-калькуляторами: указываете цвет текста и фона и видите соотношение. И ещё одно правило: не передавайте смысл только цветом. Ошибку в поле показывают не только красной рамкой, но и текстом «Неверный номер карты» — иначе её не увидят люди, которые не различают красный.