Типы контраста в UI-дизайне

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

Все в мире существует и воспринимается в сравнении с чем-то другим, поэтому неудивительно, что контраст является одной из основ искусства и дизайна. Именно эту тему мы обсудим в статье.

Что такое контраст

В целом, понятие “контраст” используется для описания объектов, которые сильно отличаются друг от друга. Если речь идет о визуальном восприятии, контраст обычно связан с разницей в цвете или освещении, которая позволяет четко разграничивать элементы.

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

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

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

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

Дизайн лендинга для приложения Pass-On — пример правильного использования контраста цвета и размера для создания четкой визуальной иерархии страниц.

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

Типы контраста в UI-дизайне

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

• Цвет: Этот вид контраста — один из самых привычных и заметных для человеческого глаза. Он работает, если цвета существенно отличаются друг от друга, например, в комплементарной, раздельно-комплементарной или триадной цветовой схеме (вы можете узнать о них больше в нашей статье, посвященной теории цвета). Чаще всего такой контраст применяется, чтобы сделать максимально заметными CTA-кнопки и другие важнейшие элементы навигации и сразу привлечь к ним внимание пользователей сайта или приложения.
• Размер: Тип контраста, основанный на том, чтобы сделать важный элемент заметно больше других.
• Форма: В этом случае для привлечения внимания пользователей форма одного элемента должна отличаться от формы остальных.
• Расположение: Дизайнеры меняют положение одного из элементов таким образом, чтобы он выглядел отличным от других, например, добавляют отступ перед новым абзацем текста.
• Текстура: Используются текстуры, которые явно отличаются друг от друга.
• Направление (ориентация): Неожиданным образом меняется позиционирование элемента, что привлекает внимание пользователей.

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

Первое, что приходит в голову, когда мы слышим слово “контраст” — это сочетание черного и белого. При отсутствии других оттенков монохромное изображение использует контраст в качестве основного средства выразительности.

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

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

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

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

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

Контраст в типографике

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

Канадский дизайнер Карл Дэйр определил 7 основных типов типографского контраста:

1. Контраст размера: Увеличение базового размера шрифта при сохранении его формы и начертания. Самый распространенный пример: сделать заголовок заметно больше основного текста.
2. Контраст начертаний: Жирный шрифт выделяется на фоне более тонких шрифтов того же стиля. Это помогает привлечь внимание пользователей к определенным фрагментам текста и показать, какие из них являются наиболее важными.
3. Контраст форм: В данном случае под формой понимается разница между заглавной буквой и ее строчным эквивалентом, обычным начертанием и курсивной версией, узким и широким шрифтом, рукописными и стандартными шрифтами. Карл Дэйр предупреждает, что не стоит использовать курсив и рукописные шрифты вместе, так как они похожи и скорее будут конфликтовать, чем создавать контраст.
4. Контраст структур: Структурой называют формы букв разных видов шрифтов, например, монолинейного без засечек и высококонтрастного современного шрифта, или курсива в сравнении с готическим шрифтом.
5. Контраст текстур: Речь идет о том, как строки текста выглядят вместе, что частично зависит от формы букв, а также от того, как они расположены.
6. Контраст цветов: Дэйр утверждает, что любые цвета менее выразительны, чем сочетание черного и белого. Важно тщательно продумать, какой элемент необходимо выделить, а также обратить внимание на тональные значения используемых цветов.
7. Контраст направления: Состоит в противопоставлении вертикальных и горизонтальных строк и углов между ними. Кроме того, Дэйр указывает, что стоит оценить размеры текстовых блоков, к примеру, можно получить контраст, комбинируя широкий фрагмент с длинными строками и высокий с короткими.

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

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

Доступность контраста

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

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

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

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

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

Темное на светлом или светлое на темном?

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

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

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

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

Читабельность: Способность пользователей без затруднений прочитать текст. Эта характеристика особенно важна, если приложение или сайт включают большой объем текстового контента.

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

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

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

Каждая страница светлого и воздушного сайта Lumen Museum доступна и легко воспринимается, вся информация упорядочена, а фотографии впечатляют.

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

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

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

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

Разные типы контраста делают интерфейс приложения Habit Builder не только красивым, но и простым в использовании.

О чем важно помнить

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

Позаботьтесь о высоком уровне контраста, если размещаете текст поверх изображения

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

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

Помните о рекомендуемом коэффициенте контрастности — минимум 4,5 : 1 (или 3 : 1 для крупного текста, что соответствует размеру шрифта 18pt или 14pt, если речь о жирном начертании). Попробуйте этот инструмент для проверки контраста чтобы узнать, будет ли работать та или иная цветовая комбинация.

Блог, посвященный географии, в дизайне которого используются полноэкранные фоновые фотографии.

Слишком высокий уровень контраста утомляет пользователей

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

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

Много контраста = отсутствие контраста

В книге “Эмоциональный веб-дизайн” Аарон Уолтер поделился ценным соображением относительно контраста в пользовательских интерфейсах: “Если увеличивать число высококонтрастных элементов на странице, пропорционально возрастает время, необходимое для выполнения задачи, изучения системы и запоминания маршрутов. Добавление объектов заставляет человеческий мозг работать на пределе возможностей.

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

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

Не забывайте о негативном пространстве

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

Почему важен контраст?

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

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

Давайте закончим рассмотрение контраста и его роли в пользовательских интерфейсах полезным видео от Nielsen Norman Group.

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