Оптимизация визуального дизайна согласно гештальт-принципам сходства и близости (часть 1)

Posted on by riasevastopol

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

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

Эксперты в области интерактивных технологий и визуального дизайна используют их на регулярной базе для связей и отличий между элементами. Познание того, как трудятся эти правила и как их возможно применять в дизайне, оказывает помощь создавать лендинги, характеризующиеся большей вовлеченностью пользователей.

В данной статье будут рассмотрены близости и принципы сходства. В качестве примеров приводятся настоящие феномены зрительного восприятия мира, которым вы сможете применяеться в вашей работе.Оптимизация визуального дизайна согласно гештальт-принципам сходства и близости (часть 1) Готовы улучшить собственный дизайн?

Тогда просматривайте потом.

  • применение принципов и Визуальное восприятие гештальта в веб-дизайне

Сходство (Similarity)

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

Применение цвета для определения взаимоотношений в группе

Принцип сходства особенно связан с цветом. Обратите внимание, как в представленном ниже примере фигуры различной формы, но одного цвета воздействуют на определение неспециализированного показателя группы либо выделение родственной связи:

Ни одна другая черта неимеетвозможности превзойти цвет, в то время, когда дело доходит до определения взаимоотношений между объектами

Применение размера для определения взаимоотношений в группе

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

Размер выделяет более большие квадраты, придавая им особенную значимость если сравнивать с остальными фигурами

Применение формы для определения взаимоотношений

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

Колонки похожих по форме фигур воспринимаются легче, чем последовательности фигур различной формы

Применение ориентации для определения взаимоотношений в группе

Ориентация, либо положение в пространстве, кроме этого возможно использована для группирования по принципу сходства. Развернув кое-какие квадраты на 45 градусов, мы приобретаем отдельную группу фигур, принимаемых как связанные между собой объекты. У зрителя кроме того может появиться чувство, что они движутся совместно в одном и том же направлении по сравнению с другими окружающими их фигурами.

Тут кроме этого затрагивается еще один гештальт-принцип — принцип неспециализированной судьбы (common fate), либо синхронность.

Сходство в ориентации формирует подобие

Еще мало о цвете

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

Это быть может, но тяжелее если сравнивать с цветными последовательностями, не так ли?

Достаточно тяжело не видеть перемежающиеся белые и красные последовательности

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

Цвет более приоритетен для определения взаимоотношений, чем размер

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

Использование принципа сходства на практике

Мы можем применять принцип сходства в дизайне для передачи групповых и ассоциативных связей, показывая, какие конкретно элементы соотносятся между собой, а какие конкретно нет. Так, два блока статей на новостном портале Salon сгруппированы по показателю неспециализированного размера. Мы четко принимаем две отдельные группы: с главными новостями (Top Stories) слева и самые читаемыми (Most Read) — справа.

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

Внимание читателей направлено на главные новости сайта Salon посредством сходства в размере превью статей этого блока

Наоборот, отсутствие различия в размере товаров на сайте Amazon.com не придает особенной важности ни одному из блоков. Сходство достигается за счет применения предметов формы и одинакового размера, что разрешает нам принимать последовательности однотипных товаров:

В то время, когда все изображения имеют однообразный размер, любой блок товаров имеет равное значение

Применение однообразного цвета

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

Однообразный цвет оказывает помощь нам осознать функционал и назначение элементов

  • Правила дизайна: композиционное равновесие, асимметрия и симметрия

Близость (Proximity)

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

Представленный ниже пример с кругами показывает, как принцип близости возможно использован чтобы оказать помощь нам принимать объекты как связанные между собой. Как мы видим, круги хаотично распределены в пространстве, не демонстрируя никакой связи между собой, и любая фигура воспринимается как отдельный объект:

Между этими фигурами не отмечается никакой связи

Но стоит переместить круги ближе, как они начинают обретать определенные отношения, и уже не воспринимаются как отдельные объекты:

Фигуры демонстрируют сообщение, если они расположены близко друг к другу

Безлюдное пространство

Безлюдное пространство (White Space) — это нужный инструмент для близости. В случае если забрать те же круги и добавить безлюдное пространство, мы будем принимать их по-второму: на рисунке ниже слева мы видим колонки, а справа — последовательности. Наряду с этим мы разделяем левую и правую части рисунка на две независимые группы.

Применяйте безлюдное пространство в собственном дизайне, дабы усилить разделение по группам, и чтобы отделить одни элементы от вторых.

Додавая безлюдное пространство, мы изменяем восприятие групп фигур

Сила принципа близости

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

Близость, наконец, одолела силу цвета!

Использование принципа близости на практике

При организации информации в дизайне возможно применять принцип близости для взаимоотношений между элементами и тем самым содействовать лучшему усвоению информации. К примеру, группирование изображений из Apple Store в близи друг от друга придает им неспециализированную сообщение. Мы принимаем их как объединенные одной темой и ожидаем, что контент будет соответствовать данной связи:

Изображения, сгруппированные совместно, воспринимаются как связанные между собой

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

В случае если убрать центральную колонку, появляются две отдельные группы

Комбинируя сходство и близость

Для более сильных взаимоотношений между элементами, группирование по близости возможно дополнено организацией по принципу сходства. Как видно из примера с сайта Amazon.com, группирование по правилам сходства и близости в размере заставляет нас принимать две группы объектов по отдельности, наряду с этим особенное значение получает левая несколько:

Группирование на базе сходства и принципов близости формирует более сильные отношения между элементами

иерархия и Близость

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

Поиск информации делается легче, в то время, когда все опции сгруппированы под заголовками

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

Без заголовков поиск информации затрудняется

  • Организация контента на веб-ресурсе: плоская иерархия vs глубокая иерархия

Заключение

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

В следующей статье будет показано, как еще два гештальт-принципа — фигура и замыкание-фон — задействуют вспомогательное пространство и основное (positive and negative space) для несложных, но весьма замечательных взаимоотношений в веб-дизайне.

Высоких вам конверсий!

По данным: smashingmagazine.comimage source Christian Beirle Gonzalez

Случайные статьи:

Ресурсы ограничений в гештальт-терапии | Сергей Чесноков


Подборка похожих статей:

riasevastopol

More Posts