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

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

Но начнем с теории.
Правило близости гласит – элементы, которые визуально расположены ближе друг к другу считываются одной смысловой группой. Другими словами, если мы хотим показать, что элементы друг с другом связаны по смыслу, то их стоит расположить ближе друг к другу.

Отсюда вытекает частный случай из принципа близости – правило внутреннего внешнего – расстояние (отступы) между элементами внутри смысловой группы должны быть меньше, чем отступы между группами.

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

Каждое слово эта группа букв, в которую заложен смысл. В нашем примере мы имеем 3 группы:
- ресторан
- быстрого
- питания

По правилу внутреннего и внешнего отступы внутри группы (т.е. расстояние между буквами) должны быть меньше, чем отступы между группами (т.е. расстояние между словами)

Поэтому при работе с типографикой не стоит делать межбуквенное пространство слишком большим, можно потерять визуальную группировку и текст будет читать сложнее.

Абзацы
Аналогичная ситуация с абзацами текста.
Каждый абзац – это группа строк, поэтому отступы между строками должны быть меньше, чем отступы между абзацами.

Текстовый блок
Как правило к описательному тексту мы добавляем заголовок и вот тут уже появляется более масштабная группа. Давайте попробуем разобраться тут с правилом близости.
Заголовок – 1 группа, ключевой смысл – это краткое изложение сути текста.
Описательный текст – 2 группа, подробный рассказ о компании. Правило неизменно, поэтому отступы между абзацами должны быть меньше, чем отступ между заголовком и группой абзацев.

Карточки

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

Рассмотрим каждую карточку в отдельности.
Отступы между графическим элементом и текстом, а также между заголовки и описательным текстом – это внутренние отступы и их значение меньше, чем отступы от этой группы элементов до верхнего и нижнего края белой подложки.

Теперь масштабируем. Теперь те отступы, что были внешними становятся внутренними, т.к. теперь мы рассматриваем несколько карточек и роль внешнего расстояния играют отступы между карточками.

Попробуем перевернуть, расположив карточки горизонтально.

Формы

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

Все элементы разделим на 2 части:

• информационные (заголовок и подзаголовок)
• интерактивные (поля ввода и кнопка с дисклеймером).

Разберем сначала интерактивную часть. Она состоит из полей ввода кнопки и дисклеймера к кнопке. А теперь разделим на группы:

• Первая группа состоит и полей ввода: имя, номер телефона и e-mail, т.к. эти элементы служат для ввода данных. Они выглядят единообразно и механика элементов одинаковая.
• Вторая группа – это кнопка и текст-дисклеймер к ней. Эта группа служит для подтверждения и отправки данных, которую пользователь внес в поля ввода.

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

Аналогично отступ от кнопки до текста-дисклеймера должен быть так же меньше, чем отступы между группой полей ввода и кнопкой «Отправить».

Теперь рассмотрим информационную часть. Отступ между заголовком и текстом должен быть меньше, чем отступ от группы заголовок+текст и интерактивной частью.

Т.к. в нашем примере у формы еще есть белая подложка, то давайте рассмотрим еще масштабнее. Теперь мы объединим информационную и интерактивную часть в одну группу «Форма». И получим по правилу внутреннего и внешнего, что отступ между текстом и полем ввода «имя» должно быть меньше, чем отступ от группы «Форма» до верхнего и нижнего края подложки.