Вступление
Что такое темная тема в первую очередь?
Темная тема – это ночной вариант темы интерфейса, в котором используются тусклые/серые цвета. Они отражают меньше света, но при этом удобны для чтения.
Обычно темный режим добавляют в интерфейс в виде переключателя. Он подается как дополнение к стандартной (или светлой) теме.
Темная тема отлично выделяет контент переднего плана, поэтому быстро стала хитом. Но какие еще у нее есть преимущества, помимо крутого визуала?
Темная тема: плюсы
Для начала это хороший маркетинговый ход. Темная тема выделяет ваш интерфейс среди аналогичных продуктов. А глубокий тяжелый фон может круто дополнить визуальное оформление вашего бренда.
Темный режим как функция помогает снизить нагрузку на глаза. Следовательно, шанс удержать внимание пользователя становится выше. А особенно если в интерфейсе много текста.
Еще один приятный плюс: темная тема экономит энергию телефона. Доказано, что темный режим потребляет в шесть раз меньше энергии, так как испускает меньше света. Как следствие, продлевается время использования приложения.
Небольшая ремарка: потребление энергии в основном зависит от типа вашего телефона, а не от цвета. Поэтому, если вы хотите измерить эффективность экономии заряда батареи в темном режиме, ознакомьтесь с рекомендациями разработчика для конкретных типов телефонов и экранов.
Эксперты по темному режиму говорят, что читать текст на темных поверхностях полезнее. В то же время другие исследования приходят к противоположному выводу. Но на мой взгляд, темная тема – это просто тенденция, которая выглядит элегантно и теоретически может повысить комфорт.
Итак, вот лучшие практики для создания хорошей темной темы.
Планируйте использование цвета
Избегайте или ограничивайте использование белого на чистом черном цвете. Можете использовать чистый черный (#000) для фона, но убедитесь, что текст немного приглушен. Достаточно, чтобы глаза не кровоточили из-за сумасшедшего контраста.
Чистый белый цвет заставляет наши глаза поглощать больше света. В этом случае шрифты могут «растекаться», а текст выглядеть размытым. Особенно на старых моделях мониторов.
«Забрендируйте» свой темный цвет
Чтобы сделать темную тему уникальной, используйте более темную версию основного цвета вашего бренда.
Комбинируйте с цветным текстом, чтобы сделать ее еще более особенной. ✨
Сочетание цвета фона с оттенками этого же цвета для текста – отличный выбор для фирменного темного режима. Можно, конечно, использовать и только градацию черного и белого. Просто убедитесь, что ваш текст не только круто выглядит, но и легко читается.
Уменьшите насыщенность цвета
Избегайте очень насыщенных цветов в темном режиме.
Высокая насыщенность создает эффект визуального «дрожания» на темном фоне. Вместо этого выбирайте низкую насыщенность или слегка приглушенные версии основных цветов.
Передавайте глубину правильно
Используйте шкалу от темных к светлым цветам, чтобы донести глубину. Избегайте добавления теней в темном режиме. Вместо этого, чтобы передавать уровни глубины элементов, используйте свойство границы. Отдаленные элементы должны по-прежнему бросаться в глаза меньше, чем более близкие.
Опять же: избегайте использования теней в темном режиме. Чтобы лучше передать глубину, убедитесь, что объекты, расположенные ближе к пользователю, ярче. Это поможет построить лучшую визуальную иерархию.
Убедитесь, что ваша темная тема контрастирует
Темный режим, как и светлый, должен соответствовать минимальным требованиям стандартов WCAG. Весь текст должен быть разборчивым и достаточно контрастным. Существуют хорошие плагины, чтобы прямо на месте проверить контраст в вашем дизайне.
Вот наши любимые инструменты для любой программы на ваш вкус:
Сначала проектируйте светлый режим
При переводе дизайна из светлой темы в темную сохраняйте все визуальные подсказки. Не игнорируйте и не удаляйте некоторые цвета ради темной темы, чтобы не запутать пользователей.
Вместо этого подготовьте цветовую палитру, которая инвертирует существующие цвета без потери эффективности UI.
Есть много плагинов, которые могут в этом помочь. Вот наши любимые:
- Appearance (плагин для Figma).
- Dark mode magic (плагин для Figma).
- Camilo (плагин для Sketch).
Используйте базовые цвета для создания темной темы
Используйте набор базовых или «нейтральных» цветов с одинаковыми значениями прозрачности с самого начала проекта.
Набор прозрачных цветов может сильно облегчить вам жизнь. Вместо того, чтобы постоянно выбирать разные оттенки серого, можно использовать набор прозрачных цветов.
Не злоупотребляйте темной темой
Для большинства задач темная тема – хороший выбор. Тем не менее, яркий светлый фон тоже может отлично передать ваши идеи. Да, темный режим действительно помогает сосредоточиться на задаче, но ничто не сравнится с этой вспышкой в 2 часа ночи при серфинге на eBay или Amazon.
Светлые темы отлично привлекают внимание. Они выскакивают, будят пользователя и мгновенно переключают его внимание на одну из ключевых точек. Например заголовок, кнопку с призывом к действию или форму.
Совет: Если вы создаете продукт для использования на Mac/Windows, хорошо адаптируйте вашу тему для автоматической синхронизации с текущей темой пользователя. Это помогает пользователям чувствовать себя как дома и производит хорошее первое впечатление.
Заключение
Следуйте перечисленным советам при планировании темной темы вашего дизайна.
Помните, что должна быть веская причина для ее внедрения в существующий и отлично работающий продукт. Учитывайте контент, контекст использования и устройство, на котором будет отображаться дизайн.
Но несмотря ни на что, темный режим может принести пользу вашему продукту. Особенно при использовании телефона ночью, экономии заряда батареи или просмотре мемов в темноте.
Полезные ресурсы
- Material-гайдлайны по темным материалам.
- Darm mode UI inspiration.
- Токены Figma – плагин, который поможет настроить и адаптировать вашу дизайн-систему к нескольким темам.
- Contrast – плагин для проверки контрастности элементов фона и переднего плана.
