Визуальная иерархия учебной страницы

В первом уроке вы отделили задачи чтения от общего впечатления о странице. Теперь необходимо сделать эти задачи видимыми в композиции. Визуальная иерархия показывает, что относится к названию материала, что объясняет его назначение и где начинается собственно урок. Она действует ещё до того, как человек внимательно прочитает текст.

Продолжим работать с готовым reading-lab/index.html и базовым стилем. В этом уроке содержание и порядок элементов сохраняются. Вы добавите один файл lesson-02.css после base.css и получите выразимую композицию без новой разметки, новых иллюстраций и дополнительных декоративных блоков.

Основная область и поддерживающие элементы

В исходнике есть название, вводный абзац, метаданные, хлебные крошки и оглавление. Название отвечает на вопрос о теме. Введение объясняет будущий результат. Метаданные уточняют условия чтения. Хлебные крошки показывают место в библиотеке, а оглавление — внутреннее устройство статьи. Различия этих задач должны отражаться в размерах, расстояниях и плотности элементов.

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

В нашем макете над названием стоит короткая строка lab-kicker с обозначением учебного проекта. Она даёт контекст, но не содержит главную мысль урока. Поэтому её можно сделать компактной. Название остаётся самым заметным текстом, а введение получает промежуточный масштаб. Служебная строка оказывается рядом, но не выглядит вторым вводным абзацем.

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

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

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

Положение заголовка и вводного текста

Создайте lesson-02.css. Ниже полный файл дополнения; подключите его после базового CSS:

.reading-lab .lab-heading { max-width: 52rem; margin-block: 1rem 2.5rem; }
.reading-lab .lab-kicker { margin: 0 0 .75rem; font-size: .875rem; }
.reading-lab .lab-heading h1 {
  margin: 0; font-size: 2.25rem; line-height: 1.15; letter-spacing: -.02em;
}
.reading-lab .lab-lead { margin: 1.25rem 0; font-size: 1.25rem; line-height: 1.55; }
.reading-lab .lab-breadcrumbs { font-size: .875rem; }
.reading-lab .lab-related { padding-block-start: 1rem; }

Ожидаемый эффект — название и введение образуют одну группу, отделённую от первого раздела статьи. У заголовка нет собственного большого нижнего поля: расстояние до введения задаёт сам вводный абзац. Так расстояния проще объяснить и менять. Ограничение ширины шапки предупреждает слишком длинную строку названия на большом экране, но ещё не решает сетку всей страницы.

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

Размер 2.25rem не объявляется универсальным стандартом. Он выбран как исходная ступень для нашего названия. Вообразите, что оно заменено на «Создание статического учебного сайта из Markdown с сохранением прежних адресов». Несколько строк допустимы; важно, чтобы их расстояние и связь с введением оставались понятными. Обработка длинного названия не должна зависеть от ручного переноса после определённого слова.

Группировка через расстояние

Рассмотрим метаданные. В полном HTML это список определений: уровень и статус имеют явные подписи и значения. Их можно собрать в компактный ряд. Дополните тот же файл следующим фрагментом; это расширение, не новая самостоятельная база:

.reading-lab .lab-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .875rem; }
.reading-lab .lab-meta div { margin: 0; }
.reading-lab .lab-meta dt, .reading-lab .lab-meta dd { display: inline; }
.reading-lab .lab-meta dt::after { content: ": "; }

Предполагается, что подпись и значение читаются как одна короткая запись, а две записи разделены более заметным промежутком. flex-wrap разрешает перенос целых групп при нехватке места. Мы не задаём фиксированную высоту и не обрезаем длинное значение: человек может увеличить текст, а редактор — уточнить уровень подготовки.

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

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

Иерархия внутри длинного текста

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

Для первого приближения добавьте ещё два правила в конец дополнения:

.reading-lab .lab-prose h2 { font-size: 1.5rem; }
.reading-lab .lab-prose h3 { font-size: 1.125rem; }

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

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

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