UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Фундаментальные принципы дизайна темной темы
Редакція
Редакція

Опубліковано

Фундаментальные принципы дизайна темной темы

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

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

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

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

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

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

Темный интерфейс vs. Светлый интерфейс

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

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

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

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

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

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

И есть сценарии, когда не рекомендуется добавлять темную тему:

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

Темная тема дашборда десктопного приложения (Ramotion)

Контраст в темном дизайне интерфейса

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

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

На сайте Brittany Chiang темно-серый сочетается с синими оттенками для создания приятной темной цветовой палитры интерфейса

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

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

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

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

Недостаточный контраст между текстом и фоном в темной теме слева

Сосредоточение внимания: цвет

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

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

Приложение Jabra Sound + ограничивает темную цветовую палитру интерфейса двумя акцентными цветами

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

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

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

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

Apple Human Interface Guidelines

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

Использование негативного пространства

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

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

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

Минималистичная темная тема (Denys Tyrynskyi)

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

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

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

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

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

На странице AirPods Pro на сайте Apple используется крупный шрифт и сильный контраст для достижения максимального эффекта

Передача глубины: возвышение (Elevation)

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

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

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

Глубину темных интерфейсов можно изобразить, сделав поверхности светлее по мере приближения к предполагаемому источнику света (Material Design)

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

Примеры хорошо реализованных темных тем

Ниже представлено несколько отличных примеров темной темы, отражающих изложенные в этой статье принципы:

Сайт Atom Finance

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

Темная тема сайта электронной коммерции от Daniel Klopper.

Темная тема сайта электронной коммерции от Darion Mitchell.

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

Дашборд от Ruben Fernandez для IBM.

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

Мобильные приложения с правильной темной темой: Wego, Spotify и Apple (Android и iOS)

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

Вывод

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

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

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


Перевод статьи medium.com

Найстарші коментарі (0)