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

Начнём с того, что тёмные темы не являются абсолютно новой концепцией. Довольно давно тёмные темы были единственным вариантом, потому что экраны были чёрными, а контент на них зелёным. Но даже после появления цветных экранов «тьма» никуда не делась. В чём дело?


Скроллим днями напролёт

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

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

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


Тёмные темы 101

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

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

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

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

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

То же самое относится ко всем другим насыщенным цветам, которые вы можете использовать. К примеру, цвета предупреждений или ошибок. Google использует дополнительный белый слой с прозрачностью 40% поверх основного цвета для стейтов ошибок в своих «Рекомендациях по материалам» при переходе в темный режим. Это улучшит уровень контрастности, чтобы соответствовать высоким стандартам. Конечно, вы всегда можете настроить цвета по-своему, но обязательно проверьте уровень контрастности. Полезным инструментом для этого является плагин Stark для Sketch, который поможет определить уровень контрастности между двумя слоями.


Что насчет текста?

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

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

Тёмные темы в тренде, и надолго

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

Единственная причина, по которой с внедрением тёмной темы можно повременить — если вы точно знаете, что приложение будет использоваться только при ярком солнечном свете (что довольно необычно).

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

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

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

Ещё одна вещь, которую нужно держать в уме при разработке приложения — некоторые элементы просто нельзя сделать тёмными. Зайдите в текстовый редактор, например Pages на Mac. Вы можете сделать интерфейс тёмным, но ваш лист всегда будет белым, напоминая реальный лист бумаги.

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

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

При опросе пользователей большинства сайтов люди говорили: «Я просто хочу найти номер телефона» или «Я просто хочу получить адрес электронной почты». Или «Я просто хочу найти местоположение магазина».


Потратьте больше времени на дизайн контактной информации

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

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


Может быть, вам не нужно больше?

Для малого бизнеса вывод ещё прозаичнее: вам не нужен мега-сайт с огромным количеством страниц. Вам просто нужно разместить контактную информацию на главной странице. И тем самым вы решите главную проблему своих клиентов.

Многие владельцы малого бизнеса говорят, что редактирование сайта для них — нетривиальная задача, или что поддерживать сайт в актуальном состоянии занимает слишком много времени. А может быть вам просто удалить всё, кроме контактной информации?!

Уф, ну что, вот и отмаялись с коротким маем, куда надо было впихнуть невпихуемый ворох задач. Пора в лето — по-настоящему июньских выходных вам! :)