![](https://bbbl.dev/storage/images/18/37/45/65/derived/b62d0055a09386075f374c87b502bfd8.jpg)
The DevPixel Blog опубликовал на Medium эксплейнер о том, как принципы гештальта помогают UI-дизайнерам управлять вниманием пользователей. Bubble перевел заметку и подобрал несколько курсов, которые еще больше расскажут о UX/UI дизайне.
В изобразительном искусстве и психологии цель принципов гештальта состоит в том, чтобы найти общие элементы и ввести структурный порядок в хаотичную и шумную среду человеческого окружения. Феномен гештальта можно описать фразой «целое отличается от суммы частей».
Законы гештальта помогают быстро и легко передавать информацию через интерфейс. Хороший дизайн через визуальные средства направляет пользователя к тому, что его больше всего заинтересует — скидкам, выгодным предложениям, новинкам.
Принцип симметрии и асимметрии
Симметричная композиция предполагает размещение элементов так, когда ни один из них не отвлекает пользователя. В асимметричной композиции элементы расположены так, чтобы человек обратил внимание на конкретный объект.
![](https://bbbl.dev/storage/images/40/61/49/56/derived/f1eaa7953f5036f620038455cf90032c.jpg)
Как это применяют в дизайне
В дизайне интерфейса композиция элементов и компонентов на экране помогает создать эффективное взаимодействие между пользователем и экраном. С помощью симметрии и асимметрии можно создать баланс, динамику или выделить необходимую информацию.
Сайт Maersk — пример идеальной симметрии. Человеческое лицо — симметричный элемент в центре. Другие объекты находятся на одинаковой высоте относительно друг друга, а основной текст выравнивается по центру.
![](https://bbbl.dev/storage/images/87/57/81/67/derived/ecea3ad2a46f78a1551b8c5caf9dcccd.jpg)
Еще один пример — сайт Gucci. Он показывает, что элементы вдоль центральной оси не обязательно должны быть идентичными, чтобы создать симметрию.
![](https://bbbl.dev/storage/images/37/48/35/03/derived/2785b346175cd897f02a94f02e84407b.jpg)
А вот компания Cytora использовала асимметричную структуру для своего веб-сайта. Из-за отсутствия баланса по центральной оси взгляд притягивает левая часть сайта, что делает ее лучшим местом для размещения важной информации для пользователя: логотип, слоган и call to action находятся именно там.
![](https://bbbl.dev/storage/images/13/81/82/85/derived/91386813b8f0c804492da98c5c9da908.jpg)
Через асимметрию можно показать и движение, как сделали Key Solutions. Текст в правой части экрана и изображение бегужей в ту же сторону женщины создают эмоциональное ощущение и призывают к действию.
![](https://bbbl.dev/storage/images/19/70/34/67/derived/dde9be002aede4d06f539f92c3181aea.jpg)
Можно использовать все вместе. На Pinterest в центре отображается кнока входа в систему, на экране есть шесть столбцов одинаковой ширины, но они расположены на разных горизонтальных осях — это создает динамику.
![](https://bbbl.dev/storage/images/55/36/79/70/derived/651c80b0761813f2b5671c9fd9a839fa.jpg)
Принцип непрерывности
Этот принцип объясняет, как человеческий разум подсознательно следует визуальным линиям или элементам, сгруппированным вместе в установленном направлении. Мозг заполняет пробелы: последовательность точек кажется нам линией, а элементы прямой и кривой линий воспринимаются связанными.
![](https://bbbl.dev/storage/images/68/51/40/85/derived/092f58fc395c78963e468e61c59845aa.jpg)
А вот пример, как это выглядит на сайте:
![](https://bbbl.dev/storage/images/40/74/29/20/derived/517061d33821ccfc0506af9a5abdbba1.jpg)
Как это применяют в дизайне
Принцип непрерывности помогает выстроить иерархию и позволяет дизайнерам направлять пользователя к конкретным целям. Его часто используют в дизайне интернет-магазинов. Например, на сайте Nike изображения ведут пользователя справа налево, связывая продукты с конкретными категорями.
![](https://bbbl.dev/storage/images/12/57/69/95/derived/4796baadaaebd52e3caeeb538a875b98.jpg)
Принцип соотношения фигуры и фона
Человеческий глаз, как правило, различает два разных цвета на иллюстрации как передний план и фон. Обычно передний план — это объект большого размера, выделенный другим цветом, на котором пользователь фокусируется в первую очередь. Все остальное — фон.
![](https://bbbl.dev/storage/images/12/14/63/01/derived/687f2b8cfb16df1edfa2f2ff671c1ff5.jpg)
А вот, как это выглядит на сайте:
![](https://bbbl.dev/storage/images/30/35/57/42/derived/bb7d7136c4af31f2374c2133f2c313a8.jpg)
Как это применяют в UX-дизайне
При разработке страницы или макета для экрана нужно установить взаимосвязь между передним и задним планом, чтобы не сбить пользователя с толку. Он должен понимать, на чем фокусировать внимание. Например, Molson Canadian использует прямоугольники, чтобы отделить фокус от фона.
![](https://bbbl.dev/storage/images/21/09/73/45/derived/ca8f1c186d254fcba92c84d674534924.jpg)
Где этому научиться
- Специализация «UI/UX дизайн» на Coursera
- Специализация «Проектирование пользовательских интерфейсов» на Coursera
- Курс «Визуальные элементы дизайна пользовательского интерфейса» на Coursera
- Проект с консультациями «Дизайн пользовательского интерфейса (UI) Story Map в Miro» на Coursera
- Курс «User Research and Design» на Coursera