Иерархия: как управлять вниманием пользователя

Люди не читают, а сканируют!

Пользователь не читает твой интерфейс как книгу. Он сканирует: выхватывает заголовки, кнопки, цифры, ищет знакомые паттерны. Если всё на экране одного размера и веса — глаз «буксует», не за что зацепиться.

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

В интерфейсе — то же самое. Твоя задача: сделать так, чтобы пользователь находил нужное интуитивно, без усилий.

Три рычага иерархии: размер, вес, цвет

Как выделить важное? Есть три простых инструмента.

Размер: крупнее = важнее. Заголовок H1 всегда больше основного текста.
Вес: Bold притягивает взгляд сильнее Regular. Но не переборщи: если всё жирное — ничто не выделено.
Цвет: контрастный акцент (например, синяя ссылка на сером фоне) направляет внимание. Но помни про доступность: цвет — не единственный способ выделить, добавляй вес или подчёркивание для слабовидящих.

Комбинируй эти рычаги: крупный + жирный + акцентный = максимальный приоритет. Тестируй макет, прищурившись: что видно первым?

Что такое типографическая шкала

Брать размеры шрифтов «на глаз» — путь к хаосу. Типографическая шкала — это система пропорций, где каждый размер связан с базовым математически.

За базу берём 16px (стандарт для веба). Дальше умножаем на коэффициент: 1.25× (Major Second) или 1.5× (Perfect Fifth).
Получаем: 16px → 20px → 25px → 31px → 39px. Это создаёт ритм: заголовки, подзаголовки, текст, подписи — всё гармонично.

Не нужно изобретать свои числа. Используй готовые калькуляторы (type-scale.com) или плагины в Figma. Шкала — это скелет твоей типографики, на который потом «наращиваешь мясо».

Как настроить Text Styles в Figma

Рисовать каждый заголовок вручную — ошибка. В Figma есть Text Styles: сохраняешь настройки шрифта один раз и применяешь везде.

Как сделать? Выдели текст → панель Design → Text → Style → создай новый (например, «H1 / Desktop / Bold / 32px»). Повтори для H2, Body, Caption. Плюсы: consistency во всём проекте, быстрая правка (изменил стиль — обновилось везде), лёгкий handoff разработчикам.

Совет: называй стили понятно, с префиксами (H1, Body, Label) и указанием платформы (Desktop/Mobile). Это сэкономит часы работы тебе и нервы команде.

Длина строки и «воздух»

Даже идеальная иерархия провалится, если текст неудобно читать.

Длина строки: оптимум — 45–75 символов с пробелами. Короче — глаз дёргается, длиннее — теряется строка.
Интерлиньяж: 120–150% от размера шрифта. Для 16px это 19–24px между строками.
Поля: не прижимай текст к краям экрана, давай «воздух». В мобильном дизайне это критично: палец не должен закрывать контент, а глаз — уставать от тесноты.

Проверяй макет на реальном устройстве: если приходится напрягаться — корректируй. Удобство чтения = больше времени на сайте = выше конверсия.

Адаптив: иерархия на мобильном

То, что работает на десктопе, может сломаться на телефоне. На маленьком экране иерархия должна быть ещё чётче.

Правило: на мобильном уменьшай не только размеры, но и «шаг» между уровнями. Например, если на десктопе H1 = 48px, а H2 = 32px (разница 16px), то на мобильном H1 = 28px, а H2 = 22px (разница 6px).
Так сохраняется контраст, но не тратится место.

Ещё совет: на мобильном чаще используй вес (Bold) вместо размера для выделения — это экономит вертикальное пространство. Проверяй иерархию на разных брейкпоинтах в Figma: переключай фреймы и смотри, не «слиплись» ли уровни.

Давай проведём эксперимент как работает иерархия.

Задание: в этой карточке ты видишь картинку. Как только откроешь карточку – сразу прочитай этот текст вслух.

Или, как сделал я, позови кого-нибудь из находящихся рядом и протестируй их, попросив прочитать вслух текст на картинке.

На следующей карточке будут результаты.