Близость и воздух: отступы вместо рамок

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

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

Нужно знать заранее: Урок 8.1

Объяснение

Зачем это нужно: Самая частая причина «страница выглядит как черновик» — не цвет и не шрифт, а расстояния. Когда все промежутки одинаковые, экран превращается в ровную сетку без смысла: непонятно, где заканчивается одна мысль и начинается другая. Лечится это не рамками, а воздухом.

Как это работает: Отступ — это расстояние. Он сообщает связи между элементами раньше, чем человек прочитает текст. Работает простое правило: внутри группы расстояние меньше, между группами — больше. Заголовок и его текст стоят близко (8–12 px), а следующий блок отодвинут (32–40 px). Тогда глазу не нужны линии: он сам видит, где граница.

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

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

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