Темная тема: 8 советов по дизайну


29.12.2021 Время чтения - 5 минут 835

Вступление

Что такое темная тема в первую очередь?

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

Обычно темный режим добавляют в интерфейс в виде переключателя. Он подается как дополнение к стандартной (или светлой) теме.

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

Темная тема: плюсы

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

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

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

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

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

Итак, вот лучшие практики для создания хорошей темной темы.

Планируйте использование цвета

Избегайте или ограничивайте использование белого на чистом черном цвете. Можете использовать чистый черный (#000) для фона, но убедитесь, что текст немного приглушен. Достаточно, чтобы глаза не кровоточили из-за сумасшедшего контраста.

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

Планируйте использование цвета

«Забрендируйте» свой темный цвет

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

Комбинируйте с цветным текстом, чтобы сделать ее еще более особенной. ✨

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

Brand your dark color

Уменьшите насыщенность цвета

Избегайте очень насыщенных цветов в темном режиме.

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

Reduce color saturation

Передавайте глубину правильно

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

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

Communicate depth

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

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

Вот наши любимые инструменты для любой программы на ваш вкус:

  • Stark (плагин для Figma, Sketch и XD);
  • Contrast (плагин для Figma);
  • A11y (плагин для Figma).
Ensure your dark mode contrast

Сначала проектируйте светлый режим

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

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

Есть много плагинов, которые могут в этом помочь. Вот наши любимые:

Design light mode first

Используйте базовые цвета для создания темной темы

Используйте набор базовых или «нейтральных» цветов с одинаковыми значениями прозрачности с самого начала проекта.

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

Use base colors to design dark mode

Не злоупотребляйте темной темой

Для большинства задач темная тема – хороший выбор. Тем не менее, яркий светлый фон тоже может отлично передать ваши идеи. Да, темный режим действительно помогает сосредоточиться на задаче, но ничто не сравнится с этой вспышкой в ​​2 часа ночи при серфинге на eBay или Amazon.

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

Совет: Если вы создаете продукт для использования на Mac/Windows, хорошо адаптируйте вашу тему для автоматической синхронизации с текущей темой пользователя. Это помогает пользователям чувствовать себя как дома и производит хорошее первое впечатление.

Не злоупотребляйте темным режимом

Заключение

Следуйте перечисленным советам при планировании темной темы вашего дизайна.

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

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

Полезные ресурсы