В центре внимания: принципы темного дизайна пользовательского интерфейса

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

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

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

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

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

Темный интерфейс против светлого интерфейса

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

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

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

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

Тем не менее, есть много веских причин для использования темных интерфейсов:

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

И есть сценарии, когда это не рекомендуется:

• При большом объеме текста (чтение на темном фоне затруднено)
• Когда много смешанных типов контента
• Когда дизайн требует широкой цветовой гаммы

Контраст в темном дизайне пользовательского интерфейса

Темная тема — это не черная тема. Лучше всего рассматривать его как тему «слабого освещения». Одной из основных проблем темных интерфейсов является достижение достаточного контраста, чтобы визуальные элементы были разделены, а текст был разборчивым. Большинство дизайнеров считают, что использование черного цвета было бы оптимальным для достижения сильного контраста. Однако лучше не использовать настоящий черный цвет (#000000) для фона или цветов поверхности . Черный цвет лучше использовать для других элементов пользовательского интерфейса и использовать с осторожностью. Например, настоящий черный цвет можно использовать для небольших элементов пользовательского интерфейса или рамок вокруг них.

Темная тема Google Material Design рекомендует использовать темно-серый (#121212) в качестве цвета поверхности темной темы, «чтобы выразить высоту и пространство в среде с более широким диапазоном глубины». Кроме того, многие дизайнеры рекомендуют добавлять к темно-серым оттенкам тонкий темно-синий оттенок при определении цветовой гаммы. Это имеет тенденцию создавать лучший темный тон для цифровых экранов и более приятную темную цветовую палитру пользовательского интерфейса.

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

Особое внимание следует уделить контрасту текста в темных интерфейсах.

Рекомендации по обеспечению доступности веб-контента (WCAG) требуют, чтобы «визуальное представление текста имело коэффициент контрастности не менее 4,5:1 », за исключением крупномасштабного текста, который должен иметь коэффициент контрастности не менее 3:1 . Поэтому дизайнеры должны убедиться, что контент остается удобным для чтения в темном режиме.

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

Фокусировка внимания: цвет

Цвет выделяется в темных интерфейсах. Лучше всего использовать схемы с более светлыми, ненасыщенными акцентными цветами. Избегайте использования насыщенных цветов в темных пользовательских интерфейсах, так как они могут визуально вибрировать на фоне темных поверхностей. Более того, в соответствии с передовой практикой цвета должны соответствовать стандарту WCAG AA не менее 4,5: 1 при использовании с текстом.

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

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

Текст и основные элементы, такие как кнопки и значки, должны соответствовать стандартам разборчивости при отображении на темном фоне. Как показано выше в приложении Jabra Sound+, для текста и значков можно использовать цвета, отличные от белого.

На сайте Google Material Design есть полезный генератор цветовых палитр (в разделе «Инструменты для выбора цветов»), с помощью которого дизайнеры могут создавать и применять цветовые палитры к пользовательскому интерфейсу. Уровень доступности цветовых комбинаций также можно измерить с помощью сопутствующего инструмента «Цвет».

«Используйте сильно контрастные цвета, чтобы улучшить читаемость. На восприятие цвета влияет множество факторов, в том числе размер и вес шрифта, яркость цвета, разрешение экрана и условия освещения». Руководство по человеческому интерфейсу Apple

Меньше значит больше: использование отрицательного пространства

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

Французский композитор Клод Дебюсси однажды сказал: « Музыка — это пространство между нотами ». То же самое относится и к сканируемости — отрицательное пространство между элементами — это то, что заставляет макет работать. Либеральное количество отрицательного пространства вокруг элементов пользовательского интерфейса — это то, что придает им четкость. Он подчеркивает важный контент и обеспечивает необходимую передышку, чтобы дизайн не казался плотным и загроможденным. Без передышки человеческий мозг с меньшей вероятностью будет сканировать интересные места и с большей вероятностью будет блуждать.

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

Слова стиля: типографика

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

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

Рекомендация W3C AAA для текста обычного размера (менее 18 пунктов, если не полужирный) должна иметь коэффициент контрастности не менее 7:1 . Это также относится к другим элементам пользовательского интерфейса: значкам, изображениям текста и текстовым меткам, таким как метки кнопок. Дизайнеры обязаны обеспечить доступность всех цифровых продуктов для всех. Это не только улучшает юзабилити и, следовательно, UX, это закон в большинстве стран.

У дизайнеров есть бесчисленное множество возможностей найти отличные шрифты, которые хорошо работают в темных пользовательских интерфейсах. Google Fonts, Font Library и Adobe Typekit — это лишь некоторые из них, которые предлагают простую интеграцию с приложением или сайтом и широкий выбор вариантов.

Глубина общения: высота

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

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

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

Разработка цвета поверхности каждого уровня требует осторожности. Лучше не иметь более четырех или пяти уровней. Дизайнеры должны учитывать контраст текста, поскольку поверхности поднимаются выше в стеке и становятся светлее. Если цвет фона недостаточно темный, чтобы соответствовать уровню контраста не менее 15,8:1 между белым текстом и поверхностью, текст на самой высокой (и самой светлой) приподнятой поверхности не будет соответствовать стандарту 4,5:1. В некоторых случаях лучше указать цвет текста элемента как настоящий черный (#000000) в системе дизайна, чтобы добиться хорошего контраста на светло-сером фоне.

Вдохновение для темного пользовательского интерфейса

Размышляя над принципами, изложенными выше, вот несколько отличных примеров темного дизайна пользовательского интерфейса:

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

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

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

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

Резюме

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

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

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Темные интерфейсы. Хорошее и плохое. Что можно и чего нельзя делать.
• Принципы дизайна и их важность
• Изучение гештальт-принципов дизайна
• Привлекательность и движение — руководство по принципам моушн-дизайна
• Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия