Image for post
Image for post

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

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

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

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

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

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

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

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

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

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

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

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

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

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

/designer

Вышла книга про Фигму.

Саша Окунев

Written by

Дизайн-лид в Ozon. Автор проекта /designer.

/designer

/designer

Вышла книга про Фигму. Правильный блог для современного дизайнера интерфейсов.

Саша Окунев

Written by

Дизайн-лид в Ozon. Автор проекта /designer.

/designer

/designer

Вышла книга про Фигму. Правильный блог для современного дизайнера интерфейсов.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store