Иерархия и группировка: как структурировать контент на сайте

Это расстояние, которое отделяет элемент или смысловую группу от других элементов и границ родительского блока.

Это расстояние между связанными элементами внутри одной смысловой группы.

Это принцип, согласно которому расположенные ближе друг к другу элементы визуально воспринимаются как связанные.

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

Это несколько связанных смысловых единиц, которые благодаря содержанию и расположению воспринимаются как единый информационный блок.

Это система визуального распределения заголовков и текста по степени важности, при которой наиболее значимая информация получает больший визуальный приоритет.

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

Структура контента строится одновременно на нескольких принципах: отступах, близости элементов, визуальной иерархии и контрасте. Эти правила работают не изолированно, а дополняют друг друга.

Если правильно настроить только размеры заголовков, но случайно расставить расстояния, структура всё равно будет восприниматься плохо. То же произойдёт, если аккуратно настроить отступы, но сделать заголовок визуально слабее основного текста.

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

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

Условно систему можно представить так: A1 > A2 > A3 > A4

где:

• A1 — расстояние от границы блока до контента;
• A2 — расстояние между заголовком и подзаголовком;
• A3 — расстояние между подзаголовком и основным текстом;
• A4 — расстояние между абзацами.

На следующем уровне расстояние между абзацами уже становится внешним относительно интерлиньяжа, поэтому расстояние между строками должно быть ещё меньше.

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

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

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

При этом ориентироваться следует прежде всего на основной контент, особенно на текст. Декоративная графика или изображение могут выходить за условные границы и не всегда подходят в качестве точки отсчёта для вертикальных расстояний.

Расстояние между элементами влияет не только на количество воздуха, но и на смысловое восприятие.

Если два последовательных абзаца расположены достаточно близко, пользователь понимает, что перед ним единый текст, просто разделённый для удобства чтения. Если один из абзацев сильно отодвинуть, он начнёт восприниматься как самостоятельный фрагмент или даже начало другого блока.

Поэтому отступ нельзя увеличивать только ради свободного пространства. Он должен показывать реальную степень связи между элементами.

Правило близости можно сравнить с группой людей. Если два человека стоят рядом, а третий заметно дальше, первые два визуально воспринимаются как группа. Если одного человека переместить ближе к третьему, группировка изменится.

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

Такой принцип работает на разных уровнях:

• заголовок и описание образуют одну группу;
• несколько тезисов образуют группу преимуществ;
• несколько преимуществ вместе с заголовком образуют блок;
• несколько блоков формируют страницу.

Поэтому один и тот же элемент может одновременно быть самостоятельной смысловой единицей и частью более крупной структуры.

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

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

Поэтому при настройке расстояний важно постоянно задавать себе вопрос: какие элементы пользователь должен воспринимать как одно целое?

Правило «внешний отступ больше внутреннего» является хорошей отправной точкой, но применять его нужно с учётом содержания.

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

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

В типичном блоке можно выделить несколько уровней:

1. заголовок;
2. подзаголовок;
3. наборный текст.

Заголовок должен первым привлекать внимание и быстро объяснять, о чём будет блок. Подзаголовок дополняет основную мысль и стимулирует перейти к более подробному тексту. Наборный текст раскрывает информацию.

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

Поэтому визуальная значимость должна соответствовать информационной.

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

Материал можно упростить для восприятия:

• разбить на короткие абзацы;
• выделить отдельные тезисы;
• добавить подзаголовки;
• использовать списки;
• разбить информацию на небольшие смысловые порции.

Пользователю гораздо проще просматривать несколько компактных фрагментов, чем заранее видеть большое полотно текста. Такое деление также позволяет быстрее сканировать страницу по диагонали и находить нужную информацию.

Если в исходном тексте нет подзаголовка или промежуточного заголовка, но внутри абзаца можно выделить самостоятельную важную мысль, её можно вынести отдельно.

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

Например, подзаголовок можно:

• увеличить относительно наборного текста;
• сделать более жирным;
• одновременно изменить размер и начертание.

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

Для разделения уровней типографики необязательно использовать множество разных гарнитур. Контраст можно сформировать внутри одной системы, например:

• заголовок — крупный и Bold;
• подзаголовок — меньше, но тоже достаточно заметный;
• наборный текст — меньшего размера и Regular.

Если стилистика проекта требует более тонкой и лёгкой типографики, необязательно использовать жирные начертания. В таком случае разницу можно усилить за счёт размера.

Главное, чтобы пользователь видел разницу между категориями информации.

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

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

Важно соблюдать меру. Если выделять каждую вторую фразу, все акценты начинают конкурировать между собой и превращаются в визуальный шум.

Курсив для таких задач обычно работает слабее, поскольку отличие может быть недостаточно заметным. Его лучше оставлять для тех ситуаций, где он действительно выполняет отдельную функцию.

После настройки макета полезно пройти по странице и последовательно проверить каждый уровень:

• главный заголовок заметнее остальных;
• заголовки блоков поддерживают один уровень;
• подзаголовки визуально слабее основных заголовков;
• наборный текст не спорит с ними;
• связанные элементы расположены ближе друг к другу;
• расстояния между отдельными группами больше;
• верхний и нижний отступы блока сбалансированы;
• внутри карточек работает та же система;
• смысловые группы считываются даже без декоративных разделителей.

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

Правила близости, группировки, отступов, иерархии и контраста постоянно взаимодействуют друг с другом. Именно благодаря им разрозненные элементы постепенно складываются в понятную структуру.

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

После нескольких проектов эти принципы начинают применяться практически автоматически. Контент становится чище, легче считывается, а пользователю проще последовательно двигаться по странице и воспринимать информацию.

Перейти к следующему уроку