Визуальная иерархия — это порядок, в котором человек замечает элементы экрана: сначала главное, потом детали. Её задают размер, насыщенность шрифта, контраст, положение на странице и расстояния между элементами. Сетка и единая шкала отступов делают этот порядок предсказуемым, а пустое пространство отделяет одну мысль от другой — без них даже хороший текст выглядит как сплошная стена.
После материала вы сможете
- разложить экран на четыре уровня иерархии и проверить результат тестом прищура
- оставить на экране один главный акцент, осознанно используя размер, насыщенность, контраст, положение и расстояние
- задать шкалу отступов с шагом 8 (4, 8, 16, 24, 32, 48, 64, 96) и выровнять блоки по колоночной сетке 12/8/4
- объяснить, чем F-шаблон отличается от «слоёного пирога» и как подзаголовки меняют способ просмотра
Что знать заранее
Содержание
Что такое визуальная иерархия
Человек не читает экран сверху вниз слово за словом. Он сначала цепляется взглядом за самое заметное, решает, туда ли попал, и только потом переходит к деталям. Nielsen Norman Group описывает визуальную иерархию как способ направить взгляд к самым важным элементам страницы — с помощью цвета и контраста, масштаба и группировки.
Возьмём карточку услуги в салоне. Что человек должен увидеть первым? Название процедуры. Вторым — цену и длительность. Третьим — кнопку «Записаться». Описание и мелкие условия — в последнюю очередь, для тех, кто уже заинтересовался. Если все пять элементов набраны одним размером и цветом, человеку приходится разбирать карточку самому — и многие просто пролистывают дальше.
- 01Уровень 1 — сутьЗаголовок экрана или главный оффер: отвечает на вопрос «куда я попал»
- 02Уровень 2 — опорыПодзаголовки, цены, ключевые цифры: по ним взгляд «прыгает» при просмотре
- 03Уровень 3 — содержаниеОсновной текст, описания, списки — читают те, кто уже заинтересовался
- 04Уровень 4 — служебноеСноски, подписи, юридические условия: доступны, но не спорят с главным
Инструменты иерархии
У дизайнера всего несколько рычагов. Важно не количество, а то, что каждый используется осознанно и с одним смыслом на всём сайте.
Размер
- Как работает
- Крупное замечают первым, поэтому крупным делают главное
- Частая ошибка
- Слишком много крупных заголовков: они спорят друг с другом
Насыщенность
- Как работает
- Полужирное выделяется внутри текста одного размера
- Частая ошибка
- Жирным набран целый абзац — выделение перестаёт работать
Контраст и цвет
- Как работает
- Яркое на спокойном фоне притягивает взгляд
- Частая ошибка
- Акцентный цвет на всём подряд: на кнопках, иконках, плашках
Положение
- Как работает
- Верх экрана и начало строки просматривают раньше остального
- Частая ошибка
- Главное действие спрятано в конце длинной страницы
Расстояние
- Как работает
- Близкие элементы воспринимаются как группа, далёкие — как разные
- Частая ошибка
- Одинаковые отступы везде: непонятно, что к чему относится
Как люди просматривают страницу: F, «слоёный пирог» и Z
Исследования с отслеживанием взгляда (eyetracking) Nielsen Norman Group показывают, что на веб-страницах люди чаще сканируют, чем читают. Среди основных шаблонов просмотра текста NN/g выделяет F-шаблон, точечный, «слоёный пирог» и шаблон вовлечённого чтения.
- F-шаблон: человек читает пару первых строк, потом скользит вниз по левому краю, цепляясь за начала строк. Он возникает, когда в тексте нет подзаголовков и списков, и NN/g считает его плохим и для пользователей, и для бизнеса — пропускается всё, что не в начале строки
- «Слоёный пирог»: взгляд идёт по заголовкам и подзаголовкам, пропуская текст под ними, и останавливается там, где нашёл нужное. Именно на такой просмотр стоит рассчитывать, когда структура страницы ясная
- Точечный шаблон: человек ищет конкретное — цифру, ссылку, слово — и прыгает по выделенным фрагментам
- Z-шаблон — не результат исследования, а распространённое правило компоновки для экранов с небольшим количеством текста, например первого экрана: логотип слева вверху, меню или кнопка справа, затем взгляд уходит по диагонали к главному действию внизу
Текст, который сканируют буквой F
- Сплошные абзацы без подзаголовков
- Важное в середине или в конце предложений
- Ссылки и цифры не выделены
- Одинаковый вес у всех строк
Текст, рассчитанный на «слоёный пирог»
- Подзаголовок у каждой смысловой части
- Ключевое слово в начале абзаца и пункта
- Списки, таблицы и выделенные цифры
- Понятно, что пропустить, а что прочитать
Сетка и колонки
Сетка — это невидимая разметка страницы из колонок, промежутков между ними и полей по краям. По определению NN/g, именно эти три элемента составляют любую сетку, а сама она повышает читаемость и удобство просмотра: у элементов появляется общая точка отсчёта, и взгляду не приходится каждый раз заново искать, где начинается блок.
Чаще всего на сайтах используют колоночную сетку: на широком экране страницу делят, например, на 12 колонок, на планшете — на 8, на телефоне — на 4. Карточки, тексты и картинки занимают целое число колонок, поэтому выравниваются между собой даже на разных экранах. Для каталогов и списков удобна модульная сетка: к колонкам добавляются повторяющиеся ряды.
Шкала отступов: система 8 pt
Когда отступы подбирают «на глаз», на сайте появляются 13, 17, 22 и 25 пикселей — и страница выглядит неряшливо, даже если никто не может объяснить почему. Решение — договориться о шкале: все расстояния берутся только из неё. Распространённая практика — шаг 8 пикселей с половинным шагом 4 для мелких деталей: 4, 8, 16, 24, 32, 48, 64, 96. Число 8 удобно делится пополам и на четыре, поэтому размеры остаются целыми и на экранах с разной плотностью пикселей.
Выберите шаг
Для большинства сайтов и приложений подходит 8 с половинным шагом 4. Главное — один шаг на весь продукт.
Зафиксируйте шкалу
Запишите разрешённые значения в дизайн-систему и в код как именованные переменные, чтобы дизайнер и разработчик пользовались одними и теми же числами.
Внутри группы — меньше, между группами — больше
Подпись прилегает к своему полю на 8, поля формы отстоят друг от друга на 16–24, секции страницы — на 64–96. Разница в шагах и создаёт группировку.
Проверьте на телефоне
На узком экране крупные отступы между секциями обычно уменьшают на шаг-два, но соотношение «внутри меньше, снаружи больше» сохраняют.
Близость и пустое пространство
Принцип близости из гештальт-психологии гласит: то, что стоит рядом, мозг считает связанным. NN/g называет близость одним из самых сильных принципов группировки — она способна перебить даже сходство по цвету и форме. Обратная сторона: элемент, отодвинутый далеко от своей группы, выглядит посторонним и легко теряется.
Отсюда простое правило: расстояние между элементами одной группы должно быть заметно меньше, чем между группами. Цена, которая стоит ближе к соседней карточке, чем к своей, — классическая ошибка интернет-магазинов. Пустое пространство — не «потерянное место», которое хочется чем-то заполнить. Это граница между мыслями: оно даёт главному элементу выделиться и делает страницу спокойнее и дороже на вид.
- При прищуре на экране выделяется одно главное — и это то, что нужно цели страницы
- Текст можно понять, прочитав только заголовки и подзаголовки
- Все отступы взяты из одной шкалы, без случайных значений
- Подпись ближе к своему полю, чем к соседнему
- Блоки выровнены по колонкам сетки на всех размерах экрана
- Вокруг главного действия есть свободное место
Иерархия — это решение о том, что человек увидит, если у него есть всего две секунды. Всё остальное должно ей не мешать.