{"id":4111,"title":"\u041a\u043e\u043d\u043a\u0443\u0440\u0441: 1 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439","url":"\/redirect?component=advertising&id=4111&url=https:\/\/vc.ru\/promo\/257455-konkurs-dlya-razrabotchikov-s-prizovym-fondom-v-1-mln-rubley&hash=09fdce1da8605e1f5eb2b2aacbabb68d2796e6e436b92ac6cf8255b39ccae26a","isPaidAndBannersEnabled":false}
Дизайн
Glory Mlory

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

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

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

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

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

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

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

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

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

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

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

Цвет

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

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

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

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

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

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

Форма

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

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

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

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

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

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

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

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

Размер

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

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

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

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

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

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

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

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

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

{ "author_name": "Glory Mlory", "author_type": "self", "tags": [], "comments": 3, "likes": 20, "favorites": 154, "is_advertisement": false, "subsite_label": "design", "id": 163021, "is_wide": false, "is_ugc": true, "date": "Wed, 30 Sep 2020 22:28:18 +0300", "is_special": false }
0
3 комментария
Популярные
По порядку
0

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

Ответить
0

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

Ответить
0

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

Ответить
Читать все 3 комментария
Робототехника и облачные мощности: почему роботам нужны облака

Настроить автопилот квадрокоптера и запрограммировать коллаборативного робота проще с виртуальными серверами.

В Австралии испытали летающий гоночный электромобиль для будущих соревнований в стиле «Формулы-1» Статьи редакции

Мультикоптер Alauda Airspeeder Mk3 пока летает в беспилотном режиме, но в случае успеха место за штурвалом займёт человек.

Летающий электромобиль Alauda Airspeeder Mk3 Скриншот видеопрезентации
Москва вошла в тройку рейтинга экосистем для стартапов среди европейских городов
Занять столь высокое место в рейтинге столице позволили городские программы развития технологического сервиса.

Таким образом, столица улучшила свою позицию на один пункт по сравнению с предыдущим годом. Обогнать Москву удалось лишь Лондону. Замыкает тройку лидеров – Париж.

Лето с HONOR: скидки до 60 000 рублей на ноутбуки и не только

HONOR объявляет о специальных летних скидках на ноутбуки и другую продукцию бренда. С 18 июня пользователи смогут приобрести устройства HONOR с выгодой до 60 000 рублей. Подробнее об условиях акции вы можете узнать на официальном сайте интернет-магазина HONOR и в официальных монобрендовых магазинах HONOR в Москве и других городах России.

Дороги будущего: когда в России оцифруют строительство инфраструктуры и как это изменит индустрию

Использование данных и больших данных помогает различным отраслям работать более эффективно. Строительство — не исключение. Юлия Штрек, CFO группы компаний «Автобан», рассказывает о том, как использование цифровых технологий и информационное моделирование поможет развитию строительства дорог в России.

Россия возобновит авиасообщение с курортами Турции с 22 июня Статьи редакции

С 28 июня возобновляются полёты в Италию, Болгарию, США и ещё пять стран.

Дизайн-джем #33: AR-фильтры для Massive Attack и Уилла Смита от Эдуарда Михайлова, 3D-реконструкции МРТ от Magic Leap

И другие впечатляющие проекты из мира дополненной реальности в дайджесте от Futura by red_mad_robot.

В обложке использованы фрагменты из работ моушн-дизайнера Эдуарда Михайлова
Власти Китая попросили одного из богатейших бизнесменов страны «залечь на дно» после поста со стихотворением — Bloomberg Статьи редакции

Это уже второй случай из-за публичных выступлений — в 2020 году на два месяца «ушёл в тень» основатель Alibaba Джек Ма.

Облачные игры стали доступны клиентам Yota
Сотрудник «Сбербанка» авторизовался в моём аккаунте — это было сделано без моего согласия

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

Что такое пассивное инвестирование. Рассказывает персональный брокер

Как правильно вкладывать деньги на годы или даже десятилетия, и как Уоррен Баффет выиграл пари

Комментарии
null