Один главный объект: иерархия экрана

Урок 8.1 · Интерфейсы и сайты с нуля · Модуль 8. Интерфейс, который понятно · Бесплатно

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

Нужно знать заранее: Уроки 1.1–1.3, модуль 2

Объяснение

Зачем это нужно: Красивый экран — не тот, где много украшений, а тот, где сразу видно, что здесь главное. Человек не читает страницу: он просматривает её за две-три секунды и решает, остаться или закрыть. Если главное не видно за это время, всё остальное уже неважно — даже если текст хороший.

Как это работает: Иерархия — это порядок важности элементов. На экране должен быть один самый главный объект (обычно заголовок), один-два второстепенных, а всё остальное — фон. Выделяют четырьмя инструментами: размером, весом (насыщенностью шрифта), цветом и отступом. Работает правило: если выделено всё, не выделено ничего.

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

Разбор по шагам: 1. Решите, что на экране главное. Обычно это заголовок, который отвечает на вопрос «что здесь». 2. Сделайте его заметно крупнее остального: разница в два раза читается, разница в 1,2 раза — нет. 3. Второстепенный текст сделайте меньше и светлее, но не бледнее предела читаемости — об этом отдельный урок. 4. Оставьте один акцент. Обычно это кнопка действия. Второй акцент отнимает силу у первого. 5. Добавьте воздух вокруг главного: отступ работает как рамка, только тише.

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

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

Итог: Один главный объект, один акцент, заметная разница в размере и весе. Дальше — воздух между блоками.

<h1>Курс по интерфейсам</h1>
<p class="lead">Семь модулей: от первой кнопки до дизайна, который понятно.</p>
<p class="note">Первый урок открыт без подписки.</p>
<a class="cta" href="#">Начать бесплатно</a>

<style>
  h1 { font-size: 40px; font-weight: 800; margin: 0 0 8px; }
  .lead { font-size: 18px; color: #334155; margin: 0 0 6px; }
  .note { font-size: 14px; color: #64748b; margin: 0 0 20px; }
  .cta {
    display: inline-block; padding: 14px 26px; border-radius: 12px;
    background: #4f46e5; color: #fff; text-decoration: none;
  }
</style>

Уроки модуля 8

• 8.1 Один главный объект: иерархия экрана — вы здесь (бесплатно)
• 8.2 Близость и воздух: отступы вместо рамок (по подписке)
• 8.3 Цвет — это сигнал, а не украшение (по подписке)
• 8.4 Сочетание цветов: почему это читается (по подписке)
• 8.5 Контраст: чтобы видели все (по подписке)
• 8.6 Кнопка, которая ведёт себя как кнопка (по подписке)
• 8.7 Проект: переделать страницу по правилам (по подписке)
• 8.8 Разбор экрана: почему не видно главного (по подписке)