Визуальная иерархия и композиция

Иерархия — это ответ на вопрос «куда посмотреть первым?». Если на странице важно всё, значит — не важно ничего.

«Хороший дизайн очевиден. Великий дизайн прозрачен». — Джоэл Спольски

Глаз пользователя не сканирует страницу равномерно. Он прыгает по «маякам»: крупное, яркое, контрастное, окружённое пустотой. Задача дизайнера — расставить эти маяки так, чтобы взгляд шёл по нужному маршруту: заголовок → подзаголовок → главная кнопка.

Инструменты иерархии

У вас всего несколько рычагов, и они работают в комбинации:

Глаз на текстовых страницах обычно идёт по F-паттерну, а на лендингах с крупными блоками — по Z-паттерну:

  F-паттерн (тексты)        Z-паттерн (лендинги)
  ===================       =====================
  ##########------          логотип ----> меню
  ##########------               \
  ####------------                \
  ####------------                 \
  ##--------------          герой <------ картинка
  ##--------------               \
  ##--------------                v
                            заголовок --> [КНОПКА]

Закон близости: элементы рядом воспринимаются как группа. Отступ между группами должен быть больше, чем внутри группы — иначе подпись «прилипнет» не к той картинке.

Разбор глубже: внимание как ограниченный ресурс

Внимание пользователя — самый дефицитный ресурс на странице. Когнитивная наука говорит, что человек удерживает в фокусе очень немного объектов одновременно. Если интерфейс предъявляет десять равнозначных элементов, мозг тратит силы на выбор «куда смотреть» — и часто выбирает «закрыть вкладку». Иерархия снимает эту нагрузку: она заранее решает за пользователя, что важнее, и ведёт его по маршруту без усилий.

Важно понимать, что рычаги иерархии работают относительно, а не абсолютно. Заголовок в 24px кажется крупным рядом с текстом 14px и мелким рядом с баннером 64px. Контраст «тёмное на светлом» выделяет элемент, только если вокруг достаточно светлого. Поэтому иерархию проектируют не для отдельного элемента, а для всей композиции сразу — это система соотношений. Самый частый сбой новичка: он усиливает один элемент (делает крупнее, ярче), но не ослабляет остальные — и в итоге «кричит» вся страница, а иерархии по-прежнему нет.

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

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

Как делают ПЛОХО

Делают все заголовки одного размера, выделяют жирным половину текста, ставят три кнопки одинаковой яркости. Глазу не за что зацепиться — пользователь теряется и уходит.

Как делают ХОРОШО

Одна главная мысль на экран, один акцентный цвет на действие, явные ступени размера между уровнями. Внутри группы отступы маленькие, между группами — большие. Иерархия читается даже на размытом скриншоте (тест «прищурься»).

Чек-лист

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

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