Расстояние в дизайне. Часть 1

В начале 20 века психологи Макс Вертхаймер, Курт Коффка и Вольфганг Келер исследовали, как люди визуально воспринимают мир. Основываясь на результатах, они определили гештальт принципы — набор правил, объясняющих, как люди интерпретируют мир вокруг себя. Близость — один из принципов гештальта. Современный дизайн во многом основан на этом принципе.

Как люди решают, являются ли те или иные элементы частью большей группы или нет? Они смотрят на предметы, и если предметы расположены близко друг к другу, они видят их как единое целое. На изображении, скорее всего, вы увидите две группы элементов, а не восемнадцать отдельных объектов. Все объекты одинаковы, и единственное, что их отличает — это белое пространство, которое их разделяет.

Пробел разделяет круги на две отдельные группы.

Люди следуют одному и тому же подходу, когда взаимодействуют как с физическими, так и с цифровыми продуктами. Например, когда мы изучаем веб-страницу с разных дисплеев, мы обычно видим элементы как набор объектов, а не отдельные части. Такое восприятие предлагает UI дизайнерам прекрасную возможность. Становится возможным сгруппировать вместе объекты, которые имеют схожие функции или свойства.

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

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

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

Страница смотрится более организованно. Дайте пользователю визуальные подсказки. Группируя элементы вместе, становится понятно, что эти элементы связаны между собой. Негативное пространство или пространство вокруг и между элементами — это инструмент, который можно использовать для этого. Добавление или уменьшение пространства между элементами может либо объединить, либо разделить их.