3 принципа гештальта в UI-дизайне

The DevPixel Blog опубликовал на Medium эксплейнер о том, как принципы гештальта помогают UI-дизайнерам управлять вниманием пользователей. Bubble перевел заметку и подобрал несколько курсов, которые еще больше расскажут о UX/UI дизайне.

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

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

По теме
Веб-дизайн с нуля: что почитать новичку и где учиться
Веб-дизайн с нуля: что почитать новичку и где учиться

Принцип симметрии и асимметрии

Симметричная композиция предполагает размещение элементов так, когда ни один из них не отвлекает пользователя. В асимметричной композиции элементы расположены так, чтобы человек обратил внимание на конкретный объект.

Примеры симметричной композиции справа, и ассимитричной слева. Источник: uxpro.cc

Как это применяют в дизайне

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

Сайт Maersk — пример идеальной симметрии. Человеческое лицо — симметричный элемент в центре. Другие объекты находятся на одинаковой высоте относительно друг друга, а основной текст выравнивается по центру. 

Скриншот страницы сайта Maersk. Источник: блог по UI-дизайну на sympli.io.

Еще один пример — сайт Gucci. Он показывает, что элементы вдоль центральной оси не обязательно должны быть идентичными, чтобы создать симметрию.

Скриншот сайта Gucci. Источник: ux360.design.

А вот компания Cytora использовала асимметричную структуру для своего веб-сайта. Из-за отсутствия баланса по центральной оси взгляд притягивает левая часть сайта, что делает ее лучшим местом для размещения важной информации для пользователя: логотип, слоган и call to action находятся именно там.

Скриншот сайта Cytora. Источник: speckyboy.com

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

Скриншот сайта Key Solutions. Источник: блог по веб-дизайну на shopify.in.

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

Скриншот Pinterest. Источник: in.pinterest.com.
По теме
Что такое UX/UI-дизайн и как быстро освоить профессию
Что такое UX/UI-дизайн и как быстро освоить профессию

Принцип непрерывности

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

Прямая и кривая линии из точек. Источник: toptal.com.

А вот пример, как это выглядит на сайте:

Принцип непрерывности на макете веб-сайта. Источник: the DevPixel Blog на Medium.

Как это применяют в дизайне

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

Скриншот сайта Nike. Источник: smashingmagazine.com.
По теме
5 правил Мюллера-Брокманна, которые пригодятся веб-дизайнеру
5 правил Мюллера-Брокманна которые пригодятся веб-дизайнеру

Принцип соотношения фигуры и фона

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

Пример принципа соотношения фигуры и фона. Источник: toptal.com.

А вот, как это выглядит на сайте:

Принцип соотношения фигуры и фона на макете веб-сайта. Источник: the DevPixel Blog на Medium.

Как это применяют в UX-дизайне

При разработке страницы или макета для экрана нужно установить взаимосвязь между передним и задним планом, чтобы не сбить пользователя с толку. Он должен понимать, на чем фокусировать внимание. Например, Molson Canadian использует прямоугольники, чтобы отделить фокус от фона.

Скриншот страницы сайта Molson Canadian. Источник: uxplanet.org.

Где этому научиться

article widget img
«‎‎Главная ошибка собеса — подгонять ответы»‎. Рекрутеры рассказали о найме в IT
Откуда берутся IT-рекрутеры, с какими трудностями они сталкиваются в попытках закрыть позиции и какие ошибки сами совершают на интервью — полезно знать перед тем, как искать работу.
Телеграм-канал про Образо­вание, карьеру и жизнь в IT
Телеграм-канал про Образо­вание, карьеру и жизнь в IT

Читайте по теме

Дизайн
Дизайн
8

Дизайн

Как применять дизайнерский подход к работе и жизни
nerd head nerd letter

Мир содрогнулся, когда узнал, что читают разработчики по ночам...

Ничего криминального — только полезная еженедельная рассылка от Bubble. Тренды в айти, лайфхаки и советы экспертов.

Подписывайся!

Ты — котик! Проверяй почту
Нам нужен настоящий адрес эл. почты
Спецпредложения
Курсы со скидками для пользователей Bubble
Выбрать курс
Освоить за выходные
Экспресс-курсы программирования
Выбрать курс
Баг пофиксил
Курсы для QA-инженеров
Выбрать курс
Звездочка к резюме
Курсы по карьерному росту
Выбрать курс
Подписывайся на Bubble в соцсетях
Подписывайся на BUBBLE в социальных сетях
Телеграм-канал про Образование, карьеру и жизнь в IT
Только полезный контент и ничего лишнего.