Узнайте, как контраст работает в дизайне, какие типы контраста можно найти в пользовательских интерфейсах и почему это важно для положительного пользовательского опыта.
Было бы невозможно определить свет, если бы не было тьмы. Было бы трудно ощутить освежающее наслаждение от холодной воды, если бы не было тепла. Было бы трудно наслаждаться звуками, если бы между ними не было тишины. Было бы сложно читать слова, если бы между ними не было пустых пробелов. Мы не могли бы почувствовать себя взрослыми, если бы не было детей. Все в мире существует и воспринимается в контрасте с чем-то другим, поэтому неудивительно, что это одна из основ искусства и дизайна. И это тема для обсуждения в нашей сегодняшней статье.
Что такое контраст
В общих чертах слово «контраст» используется для описания объектов, разительно отличающихся друг от друга. Говоря о визуальном восприятии, контраст в основном связан с разницей в цвете или освещении, которая позволяет четко различать объект.
Почему важен контраст? Потому что человеческий глаз естественным образом улавливает контраст. Максимально возможный контраст изображения называется коэффициентом контрастности или динамическим диапазоном. Более того, для людей с плохим зрением, нарушениями зрения, такими как дальтонизм, контраст становится основной характеристикой объектов, которые они видят, и позволяет им различать их.
В академическом искусстве контраст имеет дело с расположением противоположных элементов и эффектов, таких как светлые и темные цвета, большие и маленькие формы, грубые или гладкие текстуры. В этом случае контраст может использоваться не только для привлечения внимания, но и для создания настроения и атмосферы, создания разнообразия, визуального интереса и драматизма в произведении искусства.
В дизайне контраст — один из ключевых факторов, влияющих на возможность сканирования и визуальная иерархия веб-страницы или мобильного экрана. Это позволяет дизайнеру представить макет таким образом, чтобы информировать пользователей, какие точки взаимодействия являются жизненно важными, а какие второстепенными. Контраст эффективно привлекает внимание пользователя и привлекает его к определенным элементам, поэтому он играет большую роль в поддержке интуитивной навигации и удобства использования цифрового продукта.
Дизайн целевой страницы для приложения Pass-On показывает пример эффективного контраста цвета и размера, создающего прочную визуальную иерархию для страниц.
На сайте бренда эко-бутылок используются контрастные цвета фона для разделения различных логических разделов веб-страницы.
Типы контраста в дизайне пользовательского интерфейса
Контрастность может быть основана на различных функциях элементов пользовательского интерфейса, в том числе:
- цвет : этот тип — один из самых естественных и заметных для человеческого глаза; он работает, когда цвета резко отличаются друг от друга, например, в сочетании с дополнительными, дополнительными или триадными схемами (подробнее о них можно узнать в нашемобзор теории цвета). Этот тип контраста наиболее широко используется для созданияКнопки CTA и другие важные элементы навигации мгновенно отображается в макете веб-страницы или на экране приложения, которое поддерживает четкую и интуитивно понятную навигацию.
- размер : этот тип контраста основан на том, чтобы сделать элемент, который должен сначала привлечь внимание, заметно больше, чем другие
- форма : здесь внимание пользователей привлекается тем, что форма одного элемента отличается от других.
- position : в этом типе дизайнеры изменяют положение одного элемента в строке таким образом, делая его другим, как, например, новый абзац фрагмента текста начинается с отступа.
- текстура : здесь разница построена за счет использования текстур, которые четко отличаются друг от друга
- direction ( ориентация ): здесь вы изменяете физическое расположение элемента, заставляя его использовать другие или неожиданные направления, таким образом привлекая внимание пользователей с необычностью.
В своей статье Контраст и смыслЭнди Рутледж поместил типы контрастов, которые дизайнеры часто используют, в простую, но информативную схему, показанную ниже, визуализируя каждый тип.
Первое, что часто приходит в голову о контрасте, — это что-то черное и белое. При отсутствии оттенков и множественности цветов монохромное изображение использует контраст как главный усилитель выразительного потенциала. То же самое и с пользовательскими интерфейсами. Более того, по сравнению с произведениями искусства или фотографии контраст не только влияет на эстетизм, но также оказывает значительное влияние на удобство использования и навигацию по макету. Таким образом, хорошо продуманное использование контраста — мощный способ сделать веб-сайты и приложения удобными и простыми в использовании.
На экранах оформления заказа приложения Exotic Fruit цветовой контраст помогает мгновенно определить кнопку с призывом к действию, а также помогает отличить активные временные интервалы от неактивных.
На веб-сайте судоходной компании с ограниченной цветовой палитрой и модной 3D-графикой используются яркие цветовые акценты, что делает дизайн более динамичным и привлекает внимание пользователей.
Конечно, это не значит, что только черно-белый интерфейс наиболее эффективен. Было бы неразумно так сильно ограничиваться, когда пользователи по всему миру представляют такое разнообразие желаний и потребностей. Однако «черно-белое» тестирование очень полезно. Дизайнеры должны помнить, что красочные интерфейсы могут по-разному выглядеть на разных экранах и разрешениях. Более того, низкая контрастность может затруднить использование интерфейса для людей с дальтонизмом.
Цветовое колесо помогает дизайнерам найти цветовые комбинации с оптимальным уровнем контрастности
Типографский контраст
Другой специфический тип контраста — типографский контраст, основанный на различии отличительных черт шрифтов, используемых для текстовой части дизайна.
Канадский дизайнер типографики Карл Дэйр определены 7 основных типов типографского контраста:
- Контраст размера : это физическое увеличение основного узора, созданного формой, и веса шрифта, используемого для текста. Самый распространенный случай — сделать заголовок или заголовок заметно больше текста.
- Контраст веса : жирный шрифт выделяется среди более светлого шрифта того же стиля. Это помогает привлечь внимание к определенным частям текста и позволяет пользователю узнать об их важности.
- Контраст формы : форма здесь означает различие между заглавной буквой и ее эквивалентом в нижнем регистре, или латинской буквой и ее курсивным вариантом, сокращенными и расширенными версиями, типами шрифтов, которые гармонируют со стандартными типами — все вышеперечисленное может использоваться для драматического изменение формы. Однако Карл Дэйр предостерегает от одновременного использования шрифтов и курсива, поскольку они оба являются версиями рукописных писем; они скорее конфликтуют, чем противопоставляются.
- Контраст структуры: структура означает разные формы букв разных типов гарнитур, например, монолинии без засечек и высококонтрастные современные, или курсив по сравнению с черным шрифтом.
- Контраст текстуры: речь идет о том, как линии шрифта выглядят вместе как единое целое, что частично зависит от самих буквенных форм, а частично от того, как они расположены.
- Контраст цвета: здесь Дэйр упоминает, что второй цвет обычно менее выразителен, чем основной черный на белом (или белый на черном), поэтому важно тщательно продумать, какой элемент необходимо выделить, и обратить внимание на тональные значения. используемых цветов.
- Контраст направления : этот тип представляет собой противоположность вертикали и горизонтали и углов между ними. Кроме того, Дэйр указывает, что текстовые блоки также имеют свои вертикальные или горизонтальные аспекты, и смешивание широких блоков длинных строк с высокими столбцами коротких строк может дать контраст.
Кроме того, есть и другие, менее популярные типы контраста, например, так называемый контраст путем изоляции , когда одно слово или фраза помещается вдали от других элементов, таким образом выделяясь из толпы, а также контраст по ритму (промежутки пространства) — части, где он нарушен, задают контраст и привлекают внимание.
Концепция блога Art Institute демонстрирует различные типы типографского контраста как впечатляющую особенность дизайнерского подхода.
Доступность контраста
Читая все вышесказанное, легко предположить, что практическое правило здесь — чем выше контраст, тем лучше дизайн. Однако это неправда: как и любой другой аспект дизайна, слишком много не значит лучше. В то время как низкая контрастность затрудняет восприятие и чтение контента, слишком высокая контрастность вызывает напряжение глаз, значительно затрудняя взаимодействие. Итак, снова пора найти золотую среду.
Согласно Рекомендации по обеспечению доступности веб-контента 2.0, визуальное представление текста и изображений текста должно соответствовать коэффициенту контрастности не менее 7: 1 , за исключением следующих случаев:
Крупный текст: крупномасштабный текст и изображения крупного текста имеют коэффициент контрастности не менее 4,5: 1;
Случайное: текст или изображения текста, которые являются частью неактивного компонента пользовательского интерфейса, являются чистым украшением, никому не видны или являются частью изображения, содержащего другой значимый визуальный контент, не требуют контрастности.
Логотипы: текст, являющийся частью логотипа или названия бренда, не требует минимальной контрастности.
В концепции веб-сайта балетной труппы используется цветовой контраст, чтобы отличать текстовые части страниц от графических, а также расставлять яркие акценты, например, чтобы кнопка CTA в заголовке веб-сайта сразу была замечена. Кроме того, типографский контраст, основанный на разнице в размере и шрифтах, делает различные текстовые элементы четко различимыми и легко просматриваемыми.
На веб-сайте ShipDaddy используется контрастная цветовая палитра для удобной и доступной навигации и возможности сканирования. Более того, он использует другой уровень визуального контраста, сочетая реальный фон с анимированным мультяшным талисманом бренда, что во многом способствует тому, чтобы сайт выглядел оригинально и атмосферно.
Темный на светлом или Свет на темном?
Один из первых вопросов, на который обычно приходится отвечать дизайнерам с точки зрения цвета и контраста, — это какой общая цветовая схема на выбор: темный на светлом или светлый на темном? С этой точки зрения следует учитывать несколько важных аспектов.
Четкость : этот аспект должен включать способность пользователя четко видеть и различать все необходимые детали на экране или странице. Цветовая схема и комбинации должны поддерживать простую и интуитивно понятную навигацию и эффективно выделять наиболее функциональные элементы макета. Когда этот аспект не рассматривается и не тестируется должным образом, это может привести к тому, что продукты будут создавать полный беспорядок на экране, в котором пользователи не видят того, что им действительно нужно. Один из способов проверить это — широко используемый «эффект размытия», когда вы смотрите на экран или страницу в размытом режиме и проверяете, все ли жизненно важное легко и быстро наблюдается.
На целевой странице службы каршеринга Vertt используется светлый фон, позволяющий активировать силу цветов, чтобы сделать различные элементы навигации и информационные разделы четкими и отделенными друг от друга.
Читаемость : способность пользователей легко читать текст. Этот аспект особенно важен, если приложение или веб-сайт являются текстовыми: плохочитаемостьУровень может привести к тому, что пользователи упустят ключевые данные или почувствуют необъяснимое напряжение при использовании продукта, поскольку им приходится постоянно бороться с копией, что требует значительных усилий для чтения. Отсутствие удобочитаемости может быть серьезной причиной, по которой пользователи не удерживаются даже с привлекательными продуктами.
Доступность : способность продукта охватить как можно больше людей. Это означает, что решение «использовать или не использовать» должно в основном основываться на потребностях и желаниях пользователей, но не на их физических способностях. Проблема цветовой гаммы является одним из основных факторов, влияющих на этот аспект. Дизайнер должен продумать пользователей разного возраста, с особыми потребностями, ограниченными возможностями, которые также могут определять выбор цвета фона и элементов макета.
Легкий и воздушный веб-сайт Lumen Museum направлен на то, чтобы каждая страница была доступной и легко просматриваемой, информация была упорядочена, а фотоконтент впечатляющим.
Отзывчивость : способность продукта гибко трансформировать макет в соответствии с устройствами, на которых он используется. Это может иметь решающее значение для удобства использования. То, что выглядит стильно, привлекательно и четко на профессиональном дисплее с высоким разрешением, может превратиться в грязное пятно на маленьком экране с низким разрешением. Цветовая гамма и уровень контрастности, безусловно, в первую очередь влияют на этот вопрос.
Дизайн веб-сайта, посвященного влиятельным женщинам в истории, демонстрирует бережное отношение к различным типам контрастов, чтобы сделать его привлекательным и легким для восприятия на разных устройствах.
Среда : выбор подходящей цветовой схемы и типа фона для потенциальных сред, в которых пользователи будут использовать его регулярно и часто. В условиях постоянного использования при естественном освещении темный фон может буквально создавать эффект отражения, особенно на глянцевых экранах, характерных для планшетов и смартфонов. Напротив, при регулярном использовании в плохо освещенной среде темный фон может отвлекать свет от экрана, что отрицательно влияет на навигацию и удобочитаемость. Итак, вопрос сочетания цветов, контраста и оттенков здесь привлекает большое внимание.
Различные типы контраста делают интерфейс приложения Habit Builder не только красивым, но и простым в использовании.
Пункты для рассмотрения
Вот еще пара вещей, которые следует учитывать в аспекте контраста, применяемого к дизайну веб-страницы или экрана приложения.
Позаботьтесь о высокой контрастности в случае наложения текста на изображение.
Фон изображенийпредставляют собой устойчивую тенденцию в веб-дизайне и мобильном дизайне из-за большой способности изображений выполнять несколько функций. Такой подход делает экраны визуально и эмоционально привлекательными, а также информативными, поскольку таким образом изображение мгновенно привлекает внимание пользователей. Кроме того, он поддерживает ощущение целостности всех элементов макета. Однако требуется много навыков и усилий, чтобы найти правильный контраст и интегрировать навигацию итекстовое содержаниеправильно, чтобы страница не превратилась в неразборчивый беспорядок, что часто случается при слишком низкой контрастности. Помните о рекомендуемыхконтрастность не менее 4,5: 1(или 3: 1 для крупных символов, определяемых как шрифт из 18 пунктов или полужирный шрифт из 14 пунктов). ПопробуйтеИнструмент «Коэффициент контрастности» чтобы проверить, как работают разные цветовые комбинации.
Блог о географии с применением полноэкранных фоновых фотографий
Слишком высокая контрастность утомляет и беспокоит
С другой стороны, важно помнить, что чрезмерная контрастность тоже не имеет смысла и даже может нанести вред некоторым аспектам дизайна пользовательского опыта. То, что эффективно работает в качестве акцента для моментального привлечения внимания к кнопке или указателя направления, может вызвать реальные проблемы на страницах, которые предназначены для длительного чтения и должны заботиться о том, чтобы глаза читателей не перенапрягались. Иногда пользователи приложения или посетители веб-сайта не могут даже четко определить, что не так, но слишком резкий контраст заставляет их чувствовать себя напряженными и усталыми и отбивает у них желание использовать цифровой продукт.
Слишком большой контраст означает отсутствие контраста
В его книге Дизайн для эмоций, Ааррон Уолтер поделился очень ценной мыслью о контрасте в пользовательских интерфейсах: «Увеличивая количество высококонтрастных элементов на странице, вы пропорционально увеличиваете время, необходимое для выполнения задачи, изучения системы и запоминания путей. Добавление вещей доводит человеческий мозг до предела. Вы когда-нибудь были на вечеринке, где все кричат, чтобы поговорить с человеком рядом с ними? По мере увеличения громкости все должны говорить громче, чтобы быть услышанными, но это еще больше усложняет разговор. Точно так же работает и дизайн. Если все требует внимания зрителя, ничего не слышно ». Итак, если вы сделаете страницу или экран сложными в этом аспекте и заполните различными элементами, контрастирующими друг с другом, высок риск, что поток взаимодействия станет намного сложнее, станет более раздражающим и менее удобным.
Помните о негативном пространстве
Негативное пространство (также известное как белое пространство) — это область макета, которая остается пустой не только вокруг объектов, но также между ними и внутри них. Негативное пространство — это своего рода передышка для всех объектов на странице или экране, поэтому оно сильно влияет на эффективность различных типов контраста, применяемых в пользовательском интерфейсе.
Почему важен контраст
Подводя итог всему упомянутому и показанному выше, давайте определим несколько ключевых преимуществ контраста как мощного средства хорошего удобного дизайна:
- более сильная визуальная иерархия
- лучше сосредоточиться
- оригинальность
- улучшенная читаемость
- соответствие естественному человеческому восприятию и реакции
Жизнь полна контрастов, какими бы гранями вы ни были. На протяжении всей жизни мы должны научиться принимать это и пытаться наслаждаться жизнью, которая настолько разнообразна и непредсказуема. Повторяя реальность, дизайн также полон контрастов и максимально использует их.
