Автор: Мария Кокухина, эксперт по юзабилити

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

2019 год — наступает мода на темные интерфейсы. Темный интерфейс не является новой концепцией. Данный режим существовал давно. Вспомните старые компьютеры с темным интерфейсом.

Темный интерфейс — это интерфейс при слабом освещении, который отображает темные поверхности.

Чем так полезен темный интерфейс?

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

Еще одна причина — постоянно внедряемые технологии для экрана. Такие крупные компании, как Apple, Google, Samsung, Huawe — предоставляют OLED-экраны. В отличие от ЖК-дисплеев, они не требуют подсветки. Это отличная новость для вашей батареи.

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

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

Особенности темного интерфейса

1. Темный не равен черному

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

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

Рассмотрим два одинаковых серых квадрата с тенью. Один на 100% черном фоне, другой на #121212. При возвышении объект превращается в более светлый оттенок серого.

Таким образом используйте темно-серый цвет, а не черный в вашем интерфейсе. На сером фоне легче видеть тени, а также снижается нагрузка на глаза. Рекомендуемый темный цвет #121212.

2. Ненасыщенные цвета

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

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

Сравните. Что лучше?

Пример №1: Насыщенный цвет.

Пример №2: Ненасыщенный цвет.

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

3. Текст

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

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

Заключение

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

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

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

Так, что подготовьтесь к будущему, оно будет темным.

Понравилась статья? Поделись с друзьями!

Читайте другие полезные статьи

Еженедельный журнал

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