Визуальная иерархия в дизайне: как управлять вниманием

Коротко о главном

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

Главное правило: решите, что на экране важнее всего, сделайте это визуально самым сильным, а остальное — тише. Иерархия создаётся не только выделением главного, но и приглушением второстепенного.

Пять инструментов иерархии

1. Размер. Крупные элементы замечают первыми. Заголовок, заметно больше основного текста, сразу показывает структуру. Используйте ограниченную шкалу размеров (например, 4–6 значений), а не множество почти одинаковых.

2. Контраст и насыщенность начертания. Тёмный текст на светлом фоне, жирный против обычного, залитый против контурного. Второстепенный текст мягким серым уходит на второй план, не исчезая. Сохраняйте достаточный контраст для чтения: требования доступности, например WCAG, задают минимальные коэффициенты контраста для текста.

3. Цвет. Насыщенный акцентный цвет притягивает взгляд, поэтому оставьте его для одного: главного действия или ключевого статуса. Если акцентом окрашены ссылки, иконки, бейджи и фоны, он перестаёт работать.

4. Отступы и группировка. Элементы, стоящие рядом, воспринимаются как связанные (принцип близости). Больше воздуха вокруг элемента — больше внимания к нему. Крупные отступы между группами и плотные внутри делают экран читаемым без лишних линий и рамок.

5. Положение. Взгляд обычно начинает сверху и, в языках с письмом слева направо, слева. Важное размещают выше и на естественных путях сканирования. Распространённые схемы — F-паттерн для текстовых страниц и Z-паттерн для простых посадочных экранов.

До и после: разбираем загромождённый экран

Представьте карточку тарифа подписки.

До:

ТАРИФ PRO | НОВИНКА! | ВЫГОДНО | -20%
Всё, что нужно вашей команде
$29/мес   оплата за год   НДС включён
[Попробовать] [Сравнить] [Связаться] [Подробнее]
Функция 1  Функция 2  Функция 3  Функция 4  Функция 5  Функция 6

Проблемы: четыре метки соревнуются с названием тарифа, цена и условия одного размера, четыре кнопки выглядят равнозначно, функции — плотная строка без группировки. Взгляду не за что зацепиться.

После:

Pro
$29 / месяц
оплата за год, НДС включён

[   Попробовать бесплатно   ]
   Сравнить тарифы

  - Функция 1
  - Функция 2
  - Функция 3
  + ещё 3

Что изменилось:

• Лишние метки убраны. Заголовком осталось только название тарифа.
• Цена стала самым крупным элементом, условия переехали под неё мелким серым текстом.
• Одна главная кнопка в акцентном цвете; «Сравнить тарифы» стало тихой текстовой ссылкой; «Связаться» и «Подробнее» перенесены в другое место страницы.
• Функции превратились в короткий список с отступом сверху: три главные видны, остальные скрыты.
• Отступы сгруппировали контент в три блока: название и цена, действие, детали.

Содержание почти то же, изменилась только иерархия.

Чек-лист для любого экрана

• Можете ли вы назвать один главный элемент экрана?
• Есть ли на виде только одна главная кнопка?
• Не больше ли нескольких размеров и начертаний текста?
• Используется ли акцентный цвет экономно?
• Сгруппированы ли связанные элементы отступами, а не только рамками?
• Проходит ли экран тест прищура: если расфокусировать взгляд, выделяются ли главные блоки?

Частые ошибки

• Делать всё жирным или крупным, «потому что это важно».
• Показывать важность только цветом — это не работает для людей с нарушениями цветовосприятия и при плохом освещении.
• Одинаковые отступы везде, из-за чего группы сливаются.
• Разделять контент рамками, линиями и тенями вместо воздуха.