Пространство и ритм отступов

Пустое место — не «потерянное» место. Это инструмент, который делает важное заметным, а сложное — простым.

«Пространство в дизайне так же важно, как ноты в музыке — паузы делают мелодию».

Негативное пространство (whitespace, «воздух») — это незаполненные участки между элементами. Новички боятся пустоты и стремятся занять каждый пиксель. Профессионалы намеренно оставляют воздух: он группирует, разделяет, выделяет и снижает ощущение перегруза.

Что делает воздух

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

  БЛИЗОСТЬ ЧЕРЕЗ ПРОСТРАНСТВО

  Заголовок А
  текст А, текст А          <- мало воздуха = группа

  Заголовок Б
  текст Б, текст Б          <- большой отступ = новый блок

  Отступ говорит, что к чему относится

Шкала отступов

Чтобы воздух был ритмичным, отступы берут не случайные, а из шкалы. Популярна 8-point grid: все размеры кратны 8 (8, 16, 24, 32, 48, 64). Тогда отступы согласованы, и макет дышит ровно. Случайные 13, 17, 21 пикселя создают незаметный, но ощутимый разнобой.

  ШКАЛА ОТСТУПОВ (кратно 8)

  4  ▪
  8  ▪▪
  16 ▪▪▪▪
  24 ▪▪▪▪▪▪
  32 ▪▪▪▪▪▪▪▪
  Берём из шкалы, а не «на глаз»

Как делают ПЛОХО

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

Как делают ХОРОШО

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

Чек-лист

• Я не боюсь пустого места и использую его осознанно.
• Отступ внутри группы меньше, чем между группами.
• Размеры отступов берутся из шкалы (например, кратно 8).
• Связанные элементы стоят ближе, чем несвязанные.

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

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

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

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

Итог

Воздух — активный инструмент, а не пустота. Ритмичные отступы группируют смысл и придают интерфейсу спокойную дороговизну.

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