Правило близости

Фундаментальное правило восприятия, которое не всегда осознают даже опытные дизайнеры. Если понимаешь эту концепцию и видишь косяки в отступах, ты уже сделал огромный шаг от джуна к мидлу.

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

Я узнал о правиле близости из книги Артёма Горбунова «Типографика и вёрстка», где оно называется правилом внутреннего и внешнего. Хорошая книга, хоть и очень платная.

Моя формулировка:

Восприятие человека группирует друг к другу близкие объекты и отделяет далёкие. Размер объектов и отступы между ними определяют их иерархию.

Сегодня сконцентрируем внимание на отступах.

Допустим, у нас есть 3 одинаковых объекта. Изначально между ними равные отступы, а значит, все взаимосвязи равны и ни один из них не тянется к соседям.

Если мы хотим передать, чтобы один объект стоял особняком, а два других воспринимались как группа, мы можем сделать это при помощи отступов:

Теперь поменялись акценты. Круг 1 стремится как можно левее, а круги 2 и 3 стали тянуться друг к другу и образовали группу.

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

Как это применить на практике

Простейший пример — оформление заголовков и абзацев текста, которые тоже можно воспринимать как объекты. По фактуре текста сразу можно понять, знает ли редактор о правиле близости. Если верстаем три блока текста с заголовками и абзацами, текст первого не должен прилипать к заголовку второго.

Когда прилипает:

Синий
Использует две катаны. Лидер и мастер оружия.
Красный
Использует пару саев. Сильный, агрессивный и угрюмый.
Оранжевый
Использует нунчаки. Балагур и любитель пиццы.

Всё очень плохо. Строки создают ритм. Строка Красный одинаково близко и от верхней, и от нижней строки. Понять, к чему она относится можно только через смысл, что увеличивает когнитивную нагрузку на читателя. Это подпись или заголовок?

Чтобы их отделить, используем отступы перед заголовками:

Синий
Использует две катаны. Лидер и мастер оружия.
Красный
Использует пару саев. Сильный, агрессивный и угрюмый.
Оранжевый
Использует нунчаки. Балагур и любитель пиццы.

Стало лучше. Если ты читаешь эту статью через Instant View в Телеграме, строки слиплись. На Medium такой проблемы нет.

Заголовки — магнит для читателя

Эту фразу сказал Максим Ильяхов. Заголовки важно выделять, чтобы можно было быстро сканировать текст, не читая. Чтобы усилить выделение заголовков, мы можем сделать их болдом:

Синий
Использует две катаны. Лидер и мастер оружия.
Красный
Использует пару саев. Сильный, агрессивный и угрюмый.
Оранжевый
Использует нунчаки. Балагур и любитель пиццы.

Теперь совсем хорошо.

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

Пример, в котором забыли о правиле близости

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

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

Чтобы исправить это, нужно сделать отступ до следующего поста больше:

Кстати, Людвиг Быстроновский боролся с этим при помощи пустого стикера из своего набора, однако такой отступ в треть экрана мне кажется явно избыточным.

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

Я веду /designer — телеграм-канал и паблик о дизайне интерфейсов, инструментах и дизайнерах.