Хабрахабр

[Перевод] Тёмные времена наступают

Или о чем следует помнить при разработке тёмного режима приложения или сайта

Теперь, когда мы уже на полпути в 2019, мы можем с уверенностью сказать: они здесь, и они везде. 2018 год показал: тёмные режимы на подходе.

Пример старого монитора «зеленым-по-чёрному»

Его используют уже достаточно давно. Начнем с того, что тёмный режим — это совсем не новая концепция. А когда-то на самом деле давно только его и использовали: мониторы были вида «зеленым-по-чёрному», но только потому, что люминесцентное покрытие внутри излучало зеленоватое свечение при воздействии на него излучения.

Почему же так? Но даже после внедрения цветных мониторов тёмный режим продолжал жить.

Есть два основных мотива, объясняющих, почему сегодня каждый второй спешит добавить тёмную тему в своё приложение. Прежде всего: компьютеры повсюду. Куда бы мы ни посмотрели, везде какой-то экран. Мы используем наши мобильные устройства с утра и до поздней ночи. Наличие тёмного режима снижает нагрузку на глаза, когда вы в постели перед сном «последний раз» листаете ленту соц. сети. (Если вы похожи на меня, то «последний раз» может означать 3-часовую прокрутку R/EngineeringPorn. Тёмный режим? Да уж, будьте добры! )

Флагманские модели крупных компаний — Apple, Google, Samsung, Huawei — все оснащены OLED-экранами, которые, в отличие от LCD дисплеев, не требуют подсветки. Ещё одна причина — новые технологии производства дисплеев. Представьте, что вы просматриваете изображение чёрного квадрата на своём телефоне; с ЖК-дисплеем подсветка будет освещать весь экран, хотя большая его часть чёрная. И это действительно хорошая новость для вашей батареи. А, значит, вообще не потребляют энергию. Но при просмотре того же изображения на OLED-дисплее пиксели, из которых чёрный квадрат состоит, просто отключаются.

Используя тёмный интерфейс, вы можете значительно продлить срок службы батареи вашего устройства. Эти типы дисплеев делают тёмные режимы во много раз интереснее. Тёмные режимы, конечно же, идут рука об руку с изменениями UI так что давайте освежим наши знания! Ознакомьтесь с фактами и цифрами с саммита Android Dev в ноябре прошлого года, чтобы убедиться в этом самим.

Тёмные режимы 101

Не пытайтесь заменить белый фон на чёрный, так как это сделает невозможным использование теней. Прежде всего: «тёмный» не равен «чёрному». Подобный дизайн будет супер плоским (в плохом смысле).

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

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

Поясним на примере. В тёмной теме всё ещё можно работать с вашим обычным основным цветом, если контраст в порядке.

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

Попробуйте использовать (гораздо) менее насыщенный оттенок основного цвета или ищите другие способы включения цветов бренда в интерфейс. Когда один и тот же цвет используется по-разному, например в тексте — будут проблемы.

Справа: уменьшим насыщенность — и всё становится хорошо. Слева: красное на чёрном выглядит плохо. перев. — прим.

Google использует наложение белого слоя в 40% поверх цвета дефолтной ошибки в своих гайдлайнах по Material Design при переключении в тёмный режим. То же самое касается и всех других насыщенных цветов, которые вы могли использовать, как например, цвета предупреждения или ошибки. Вы, конечно, всегда можете менять настройки по своему усмотрению, но не забудьте проверять уровни контрастности. Это довольно хорошая отправная точка, так как это улучшит уровни контрастности до соответствия стандартам АА. Кстати, полезным инструментом для этой цели является плагин для Sketch — Stark, который точно показывает сколько контраста между 2 слоями.

Как насчет текста?

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

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

Темный режим здесь и не собирается уходить

Это довольно новое явление, наши глаза ещё не привыкли к такому росту времени у экрана поздно вечером. Количество времени, которое мы проводим у экранов растёт постоянно, и каждый новый день, новые экраны появляются в нашей жизни, с момента пробуждения и пока мы не заснём. После введения этой функции в macOS и Material Design (и, скорее всего, в iOS) мы считаем, что рано или поздно она станет дефолтной во всех приложениях, как мобильных, так и десктопных. Тут-то тёмный режим и вступает в дело. И лучше быть к этому готовым!

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

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

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

Источник

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

Он включается вечером и выключается утром. Вот почему мы считаем автоматический темный режим такой крутой идеей. Twitter провёл отличную работу с настройками тёмного режима. Пользователю даже не нужно думать об этом, что очень удобно. Тут важно заметить: дайте пользователю возможность переключаться вручную, когда он этого захочет: нет ничего хуже автоматического изменения интерфейса без возможности его переключиться обратно. Кроме того, у них есть как просто тёмный режим, так и ещё более тёмный режим для всех этих OLED-экранов, экономии батареи и всего с этим связанного.

В Twitter есть автоматический тёмный режим, который включается вечером и выключается утром.

Так же при разработке темы, стоит иметь в виду, что некоторые вещи тёмными просто не сделать.

Можно сделать интерфейс тёмным, но сам лист всегда будет белым, имитируя реальный лист бумаги. Возьмите текстовый редактор, к примеру, Pages.

Pages со включенным тёмным режимом

Хотя интерфейс можно сделать тёмным, монтажная панель, с которой вы работаете, всегда будет белой по умолчанию. То же самое касается всех видов редакторов для создания контента, типа Sketch или Illustrator.

Sketch в тёмном режиме и по-прежнему яркая белая монтажная панель.

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

Если вы хотите узнать больше о разработке тёмных интерфейсов, обязательно ознакомьтесь с гайдлайнами Material Design, это был наш основной источник информации для этой статьи.

Теги
Показать больше

Похожие статьи

Добавить комментарий

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

Кнопка «Наверх»
Закрыть