Принцип сходства в визуальном дизайне

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

Принцип сходства в визуальном дизайне

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

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

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

Благодаря принципу сходства, сетка, составленная из разных фигур, воспринимается как четыре колонки (нежели чем три ряда или одна большая группа фигур). Каждый тип фигуры формирует одну группу.
Благодаря принципу сходства, сетка, составленная из разных фигур, воспринимается как четыре колонки (нежели чем три ряда или одна большая группа фигур). Каждый тип фигуры формирует одну группу.

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

Принципы гештальта могут и должны быть использованы дизайнерами при создании удобного пользовательского интерфейса.

Обозначение связи с помощью общих характеристик

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

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

Цвет

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

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

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

Принцип сходства в визуальном дизайне

Tribute.co: И для иконки загрузки, и для кнопки «Record or Upload video» используется один и тот же красный цвет, что визуально объединяет эти элементы в одну группу. В таком интерфейсе пользователи могут предположить, что иконка и кнопка функционируют одинаково, однако здесь иконка несёт лишь декоративный характер и не является кликабельной.

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

Кнопка «Submit» имеет такой же цвет как и кнопки «Cancel» и «Add Attachment», тем самым сливаясь со второстепенными по значению функциями.
Кнопка «Submit» имеет такой же цвет как и кнопки «Cancel» и «Add Attachment», тем самым сливаясь со второстепенными по значению функциями.

Форма

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

Принцип сходства в визуальном дизайне

Ссылки на подкатегории на Asos.com оформлены в виде прямоугольников с закруглёнными углами, чтобы усилить их восприятие как группы и передать их сходную функциональность. Прямоугольная форма фильтров ниже, напротив, сигнализирует о том, что эта группа имеет другую функциональность.

Когда элементы имеют схожую форму, мы можем предположить, что они одинаковы и упустить из виду такие детали как сопроводительный текст или небольшие различия в форме. Это может быть проблематично, особенно если элементы подразумеваются как разные. К примеру, в приложении Makr, некоторые иконки в панели навигации «Products» выглядят очень схожими, в то время как некоторые и вовсе одинаковые. Такая визуальная схожесть может ошибочно показать, что категории связаны между собой (если только это не сделано намеренно). Существует тонкая грань между созданием визуального соответствия между иконками и обозначения слишком сильной связи между несвязанными элементами.

Избегайте использования одинаковых или схожих по форме иконок для разных категорий. В навигации приложения Makr используются одинаковые иконки для кнопок «Save the Dates» и «RSVPs», а также очень похожая иконка для «Thank You Cards».
Избегайте использования одинаковых или схожих по форме иконок для разных категорий. В навигации приложения Makr используются одинаковые иконки для кнопок «Save the Dates» и «RSVPs», а также очень похожая иконка для «Thank You Cards».

Аналогичным образом, когда указатели (тэги) имеют уникальную форму, пользователи могут находить определённые элементы гораздо оперативнее. Если же указатели выглядят слишком похожими, то просмотр и обнаружение различий занимает больше времени. К примеру, на главной странице Etsy некоторые продукты помечены тэгами «Free shipping» или «Bestseller». К счастью, два тэга различаются цветами, а тэг «Bestseller» содержит маленькую иконку, которая визуально отличает два тэга.

Etsy.com: Тэги «Free shipping» и «Bestseller» помещены в закругленные прямоугольники разных цветов. Тэг «Bestseller» также содержит специальную иконку. Эти особенности позволяют легко различать два тэга.
Etsy.com: Тэги «Free shipping» и «Bestseller» помещены в закругленные прямоугольники разных цветов. Тэг «Bestseller» также содержит специальную иконку. Эти особенности позволяют легко различать два тэга.

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

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

Размер

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

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

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

Например, на странице со списками товаров каждый отдельный список имеет одинаковый размер (и форму). Такой последовательный визуальный стиль говорит пользователю о том, что все элементы в этой области являются товарами; одинаковый размер отделяет их от других элементов пользовательского интерфейса. Когда в списке появляется элемент другого размера, он выделяется как не относящийся к товарной группе. Например, на сайте Anthropologie.com промо-акции коллекций товаров имеют прямоугольные формы, которые в два раза больше карточек отдельных товаров.

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

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

Принцип сходства в визуальном дизайне

Другие характеристики

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

Больше интересных материалов ищите в нашем блоге и телеграм-канале.

2121
3 комментария

Еще это почитать можно:

Ответить

И 100 главных принципов дизайна:

Ответить

Еще 98 останется узнать :)

Ответить