Заголовок ближе к своему описанию, подпись - к своему полю, цена - к периоду оплаты.
Расстояние создает смысл
Глаз воспринимает близкие элементы как одну группу. Поэтому отступ - не пустое место, а невидимая пунктуация: он либо связывает, либо разделяет.
Следующая карточка или тема отделяется заметнее, чем элементы внутри текущей.
Повторяющиеся карточки и поля используют одну логику расстояний.
Быстрая проверка: расстояние внутри смысловой группы должно быть заметно меньше, чем расстояние до следующей группы.
W3C рекомендует использовать свободное пространство и близость, чтобы связи между элементами были понятнее.1 USWDS формулирует тот же принцип прямо: меньше пространства группирует, больше - разделяет.2
Сравните FAQ
Текст одинаковый. Изменены только вертикальные расстояния.
Вариант А: ответы «прилипли» не туда
Нужен ли опыт?
Нет, курс начинается с основ.
Сколько длится урок?
Около 15 минут вместе с практикой.
Сбой: ответ дальше от своего вопроса, чем от следующего.
Вариант Б: каждая пара читается вместе
Нужен ли опыт?
Нет, курс начинается с основ.
Сколько длится урок?
Около 15 минут вместе с практикой.
Логика: маленький промежуток внутри пары, большой - между парами.
Выберите форму без путаницы
В какой версии подпись Email однозначно относится к нижнему полю?
Мини-лаборатория
Смотрите только на расстояния: к какому прямоугольнику ближе подпись Email - к верхнему или нижнему? После выбора сравните измерения внутри и между парами.
Назовите точную правку
В тарифе период оплаты визуально оторван от цены, а кнопка оказалась ближе к периоду. Что попросить у агента?
Популярный
Практика
Все уроки и итоговый проект
9 900 ₽
в месяц
Какая правка лучше?
Не ловите каждый пиксель
Для начала достаточно ограниченной шкалы. Значения могут быть другими, важна повторяемая разница между близко, обычно и далеко.
4-8 pxвнутри компактной пары
12-16 pxвнутри компонента
24-32 pxмежду группами
48-64 pxмежду секциями
Дайте задачу агенту
Попросите проверить только смысловые группы. Так агент не будет одновременно менять цвет, шрифты и структуру.
Проведи аудит только по близости и группировке.
1. Назови смысловые группы на странице.
2. Найди место, где расстояние связывает не те элементы или разрывает связанные.
3. Сравни внутренний отступ группы с отступом до следующей группы.
4. Предложи одну локальную правку без изменения текста, цвета и шрифтов.
5. Критерий: связанные элементы должны восприниматься одной группой без рамок и дополнительных цветов.Урок освоен, если вы можете
Ваш преподаватель - агент
Покажите агенту скриншот и попросите: «Не предлагай исправление. Сначала перечисли, какие группы ты видишь только по расстояниям». Сравните его чтение со своим.