UI-дизайн | Применение контраста и сходства

Что такое контраст в контексте визуального дизайна? Зачем и как применять его в дизайне? Как работать со сходством в контексте визуального дизайна?Ответы на эти частозадаваемые вопросы вы найдёте в этой статье.

Оригинал статьи

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

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

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

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

Применение контраста и сходства может быть сделано с использованием примитивных элементов в композиции.

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

Основными примитивами, которые с большей вероятностью будут воспроизводиться для контраста и сходства, являются:

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

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

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

Изображение «Квадрат с человеческим лицом в нём» привлекает к себе первостепенное внимание, во-первых, из-за использования правильного черно-белого цветового контраста: дизайнер использовал белый для фона и чёрный — для элемента. А во-вторых, из-за пространства вокруг чёрных элементов в центре оставшаяся общая информация размещается либо справа, вверху, либо внизу, справа.

На основе анализа этого изображения мы можем ответить на три вопроса, связанных с контрастом в дизайне, а именно:

1)Что такое контраст в контексте визуального дизайна?

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

2)Почему вы должны применять контраст в дизайне?

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

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

3)Как применить контраст в вашем дизайне?

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

Глаза зрителя теперь будут в таком иерархическом порядке:

1) Центральные чёрные элементы, 2) Верхний правый текст, 3) Нижний правый текст.

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

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

Давайте рассмотрим несколько примеров UI-дизайна на веб-сайте, чтобы понять, как дизайнеры применяют контраст и сходство.

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

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

Здесь, в отличие от отдельных разделов, с правой стороны есть текст «Логин» и кнопка «бесплатно присоединиться». Если вы заметите только эту область, вы увидите, что кнопка отличается высокой контрастностью по сравнению с текстом «Логин» и дизайнер хочет, чтобы зритель увидел её первой. Это сделано для привлечения новых посетителей.

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

Есть поговорка: «Ничто так не привлекает внимания, как красный цвет». На этом веб-сайте, когда вы нажимаете на меню появляется красный круг и соответствующий список. Этот круг привлекает всё внимание в композиции из-за его примитивных особенностей, таких как красный цвет большая форма. Цветовой контраст с фоновым чёрным цветом и размерный контраст со всеми другими элементами притягивают внимание пользователя.

Что касается сходства, список в круге имеет тот же шрифт, его размер и ведущий цвет.

В визуальном дизайне очень важно соблюдать золотую середину между контрастом и сходством, потому что они не могут существовать друг без друга.

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