Советы по дизайну темных тем для сайтов и приложений

Темные темы стали очень востребованными за последние несколько лет. Apple и Google сделали темную тему неотъемлемой частью пользовательских интерфейсов многих своих проектов — от Youtube до браузера.

Да даже я на этом сайте создал темную тему, которая стала удобным дополнением при переключении из редактора кода в браузер.

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

Избегайте абсолютного черного

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

Безопаснее использовать темно-серый цвет в качестве основного цвета поверхности для компонентов, чем истинно черный (#000000). Темно-серые поверхности снижают напряжение глаз — светлый текст на темно-серой поверхности имеет меньший контраст, чем светлый текст на черной поверхности.

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

Material Design (материальный дизайн) рекомендует #121212 в качестве темного цвета поверхности темы.

Избегайте использования насыщенных цветов

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

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

Соответствие стандартам доступности цветовой контрастности

Убедитесь, что ваш контент остается удобочитаемым в темном режиме.

Темные поверхности темы должны быть достаточно темными, чтобы отображался белый текст. Google Material Design рекомендует использовать уровень контрастности не менее 15,8:1 между текстом и фоном.

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

Используйте «верхние» цвета для текста

Здесь я немного поясню. «Верхние» цвета — это цвета, которые появляются «поверх» всех компонентов и ключевых поверхностей.

Обычно они используются для текста.

Цвет по умолчанию для темной темы — чистый белый #FFFFFF. Но #FFFFFF — яркий цвет, и он визуально «вибрирует» на темном фоне. Вот почему Google Material Design рекомендует использовать более темный светлый цвет:

  1. Текст с высоким акцентом должен иметь непрозрачность 87%.
  2. Текст со средней интенсивностью использует непрозрачность 60%.
  3. Отключенный (disabled) текст использует непрозрачность 38%.
Совет. Светлый текст на темном фоне может выглядеть более жирным, чем темный на светлом. Поэтому, возможно, вы захотите использовать более легкий вес шрифта для темного режима.

Учитывайте эмоциональный аспект вашего дизайна

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

Цвета на самом деле воспринимаются по-разному в зависимости от их фона

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

Темный режим (не всегда) должен быть производным от существующей светлой темы.

Глубина коммуникации

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

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

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

Справка. В темных темах, построенных с использованием Material Design, приподнятые поверхности и компоненты окрашиваются с помощью оверлеев. Чем выше возвышенность поверхности, тем светлее становится эта поверхность.

Чем выше слой, тем более светлая поверхность.

Еще один пример.

Разрешите пользователям переключаться из обычного в темный режим

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

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

Проверьте свой дизайн в светлых и в темных режимах.

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

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вы можете использовать эти HTML теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>