Сегодня в рубрике «Дизайн-законы» поговорим об основополагающем принципе в дизайне. Правило близости — один из ключевых законов UX-дизайна. Согласно ему элементы, расположенные близко друг к другу, воспринимаются как связанные, а далеко стоящие — как отдельные.
Этот принцип пришёл из гештальт-психологии (а значит подтверждены исследованиями и экспериментами): объекты легче воспринимать в группе, чем каждый по отдельности. Несмотря на кажущуюся простоту и очевидность, это одно из главных правил дизайна, которое помогает подбирать расстояния между элементами, отступы между блоками на сайте, размеры полей, расположение кнопок, размер логотипов и многое другое.
Например, кнопка и подпись к ней должны быть ближе друг к другу, чем к другим элементам. Заголовок и относящийся к нему текст размещают рядом, а перед следующим разделом делают больше отступ. В формах поля ввода и их названия группируют, чтобы было понятно, какая подпись к какому полю относится.
В текстах и вёрстке правило близости также играет очень важную роль. Если между заголовком и абзацем маленький отступ, а перед следующим заголовком — большой, читатель сразу видит структуру.
В Word и других редакторах без тонкой настройки вертикальных отступов согласно правила близости, зачастую подзаголовки повисают между абзацами и читателю сложно понять, к чему относится эта информация — к предыдущему текстовому блоку, или уже у следующему, заголовок это или подзаголовок. Это вызывает некий диссонанс на подсознательном уровне...
Правило близости работает не только в вертикальном пространстве, но и в горизонтальном. Например, элементы в одной строке (например, иконка и текст) должны быть ближе друг к другу, чем к другим блокам.
Правило близости порождает такое важное понятие, как визуальная иерархия, а так же «Правило внутреннего и внешнего» для типографики. В тексте и дизайне всегда есть что‑то главное и второстепенное. Так работает человеческое восприятие: нам интуитивно проще и приятнее воспринимать логичную структуру от далёкого к близкому, от большего к меньшему.