Введение
Возможно, вы уже слышали о правиле близости или о правиле внутреннего и внешнего, но только в общих чертах. Или вам не хватало наглядных примеров и разбора неудачных решений. В этой статье мы постарались структурировано изложить основные моменты, которые нужно помнить об этих правилах, чтобы не допускать ошибок при создании интерфейсов.
Гештальт-принципы в дизайне: правило близости
Кто разработал гештальт-принципы
Для начала нужно сказать, что оба правила очень тесно связаны с гештальт-психологией, поскольку основаны на ее принципах.
В начале ХХ века психологи Макс Вертхаймер, Курт Коффка и Вольфганг Келер изучали, каким образом люди извлекают важную информацию из разрозненных стимулов. В первую очередь их интересовали визуальные образы и то, как из них складывается общая картина. На основе своих исследований психологи разработали набор гештальт-принципов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/652e7e961e073942673a0185_Frame%201321317932%20(1).webp)
Основными считаются принципы близости, сходства и завершенности. Сегодня мы поговорим только о первом из них, но вы можете подробнее изучить остальные в нашем переводе статьи Принципы гештальта в дизайне: как психология формирует восприятие пользователей.
Правило близости в жизни и в интерфейсах
Правило близости гласит, что объекты, расположенные близко друг к другу, воспринимаются как одна группа. Такое явление связано с определенными механизмами в мозге, которые защищают его от перегрузки. Они позволяют мозгу не обрабатывать огромное множество объектов по-отдельности, а сначала объединять их в относительно небольшие группы. Это происходит автоматически.
Например, вы сразу видите целый дом, а не отдельно окна, двери, крышу и кирпичи. Мозг автоматически определяет, что все это — признаки дома, и объединяет их в общую картину.
Приведем еще один наглядный пример. В первую очередь вы увидите две группы элементов, а не 18 отдельных кругов:
В этом примере все объекты одинаковые. Однако, даже если они будут отличаться по размеру, цвету или форме, их близость друг к другу будет помогать нам выделять группы. Это еще один момент, который вам нужно знать о принципе близости: он преобладает над другими гештальт-принципами.
Правило близости работает и с тем, как мы воспринимаем интерфейсы. При изучении экрана мы видим объекты как набор групп, а не как отдельные части. Соответственно, большое расстояние между объектами интерфейса говорит об отсутствии связи между ними.
Кроме того, небольшое расстояние между элементами указывает на их общие функции и свойства. Это нужно иметь в виду, чтобы спроектировать эффективный дизайн.
Например, если у изображения есть подпись, она должна располагаться очень близко к нему. Так пользователь не перепутает, к какой картинке относится заголовок.
Использование правила близости и примеры
Рассмотрим, как чаще всего используется правило близости.
Группировка
Группировка элементов и правило близости всегда работают вместе. Они помогают систематизировать данные, тем самым упрощая восприятие информации для пользователей. Сгруппированные по смыслу элементы необходимо располагать рядом.
Например, можно объединить всю контактную информацию: адрес, номера телефонов, электронную почту и т. д. По такому принципу строятся меню, хедеры и футеры сайтов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/652e7f02ee3f5b2b5baadc50_Frame%201321318069.webp)
Еще один пример: с помощью группировки и правила близости можно сделать формы для заполнения более удобными. Для этого обратите внимание на заголовки полей, сами поля и формат ввода:
Негативное пространство
Группировка и правило близости не могут существовать без негативного или белого пространства. Именно оно отделяет группы объектов друг от друга.
Кроме того, негативное пространство позволяет управлять вниманием пользователя: чем его больше вокруг какого-то объекта, тем этот объект заметнее. Примеры дизайнов с использованием данного приема, есть в нашем небольшом видео.
Визуальная иерархия
Визуальная иерархия — это такая организация контента на сайте, которая показывает взаимосвязь элементов, а также главенство некоторых из них. Она необходима в удобном и интуитивно понятном интерфейсе, и ее нельзя добиться без соблюдения правила близости и без использования группировки и негативного пространства.
Например, пункты в футере можно сгруппировать в категории, и они будут разделены негативным пространством: визуальная иерархия достигнута.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/652e7fa117d134a849dbe4e0_Frame%201321317936.webp)
Читаемость
Правило близости можно использовать и для повышения читаемости страницы. Например, следите за тем, чтобы заголовки, подзаголовки и иллюстрации соответствовали текстам и находились рядом с ними. Тогда пользователь быстрее сориентируется и поймет, какие части текста ему полезны и интересны.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/652e807b076abf9508a05aee_Frame%201321317937.webp)
Правило близости также поможет организовать контент в карточке или на странице товара. Если страница содержит в себе общие данные о товаре (цвет, размер, материал и т. п.), эти строки должны располагаться рядом. Развернутое описание товара занимает больше места и помещается на расстоянии от общей информации. Так, пользователь сможет легко отличить эти два текстовых блока.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/652e813b4a6cfcc988ecd138_Frame%201321317937%20(1).webp)
Польза (зачем использовать правило близости?)
Теперь можно кратко подытожить, чем полезно правило близости для ваших работ:
Правило внутреннего и внешнего
Правило близости основано на том, как расстояние между элементами влияет на их восприятие. Однако, чтобы говорить о расстояниях более конкретно, нужно изучить правило внутреннего и внешнего.
В чем суть?
Правило внутреннего и внешнего заключается в том, что внутренние промежутки всегда должны быть меньше внешних. Это актуально для букв, слов, абзацев, карточек, блоков сайта и целых страниц сайтов.
Далее разберем примеры того, как правило внутреннего и внешнего используется в интерфейсах.
Использование в типографике, списках, карточках и блоках
Типографика
Начнем с отдельного слова. Его внутреннее расстояние — это промежутки между букв, а внешнее расстояние — это пробелы до других слов. Чтобы буквы складывались в одно слово, но при этом слова не склеивались друг с другом, внутреннее расстояние (между буквами) должно быть меньше, чем внешнее (между словами).
Когда мы видим строки, состоящие из слов, то считаем расстояние между словами внутренним, а между строками (также называется интерлиньяж) — внешним. Соответственно, интерлиньяж должен быть больше, чем расстояние между словами.
Дальше идет абзац. По правилу, расстояние между абзацами должно быть больше, чем интерлиньяж. Потому что в данном случае расстояние между абзацами является внешним, а между строками — внутренним.
Если у текста есть заголовок, то расстояние между ним и первым абзацем будет внешним, то есть большим, чем расстояние между двумя абзацами.
Списки
- Внутри текста каждого пункта сохраняются те правила, которые мы рассказали выше.
- Что касается расстояния между пунктами, то здесь оно является внешним, поэтому должно быть больше, чем расстояние между строками текста.
- Если есть заголовок, то он должен находиться на еще большем расстоянии, чем пункты списка.
Карточки
- Текст, фото и кнопка призыва к действию (CTA) должны считываться как разные группы, то есть расстояние между ними — внешнее.
- В то же время оформление текста и заголовка должно соответствовать всем правилам, которые мы уже рассмотрели.
- Как правило, у карточки есть подложка. Расстояние от контента (текст, фото, кнопка) до границ подложки будет внешним, то есть самым большим.
Блоки
- Если смотреть на интерфейс в целом, то отступы внутри смысловых блоков будут внутренними, а между блоками — внешними, самыми большими.
- Расстояния между всеми блоками должны быть равны.
- Заголовки блоков должны быть ближе к своим блокам, а не к предыдущим.
- Если у блока есть подложка, то внутри него работает такая же логика, как с карточками.
Типичные ошибки
Ошибки в организации карточек:
Ошибки в организации списков:
Ошибки в организации полей ввода и кнопок:
Ошибки в проектировании хедера:
Заключение
Правило близости основано на том, что человеческий мозг автоматически группирует расположенные рядом объекты. Так он облегчает их восприятие и экономит свои ресурсы. Удобный для пользователя интерфейс должен следовать правилу близости с помощью приема группировки, использования негативного пространства, создания визуальной иерархии и обеспечения хорошей читаемости текстов. Еще больше примеров вы сможете найти в нашем переводе статьи Принцип близости в визуальном дизайне.
Правило внутреннего и внешнего по сути является частным случаем правила близости. Оно позволяет более точно определить подходящие расстояния для отдельных частей дизайна.
Несоблюдение этих двух правил приведет к тому, что пользователь может запутаться в вашем интерфейсе. Поиск нужной информации и взаимодействие с элементами будут вызывать у него стресс и нежелание возвращаться на сайт.