Что объединяет людей с нарушенным зрением, любителей посидеть в телефоне после полуночи и поклонников готики? Любовь к тёмной теме (но это неточно). В статье рассмотрим 5 главных принципов создания качественного «ночного режима». Переходите на тёмную сторону вместе с нами.
Тёмная тема — дизайнерский тренд, который прочно вошёл в жизнь многих пользователей мобильных устройств и ПК. Apple представили dark mode на MacOS в 2018, пользователям Android она стала доступна в 2019. Сразу же после этого тёмная тема появилась и на устройствах с iOS.
Главное преимущество тёмной темы — меньшее раздражение глаз человека, который пользуется устройством при слабом освещении (и вообще). По большей части это актуально для пользователей, которые скроллят ленту в ночное время в попытках уснуть.
Но иногда случаются такие казусы
Так же тёмную тему часто используют пользователи с проблемным зрением или чувствительными глазами.
Ещё одно достоинство тёмной темы — снижение расхода батареи. Повербанк такой режим не заменит, однако позволит увеличить время работы устройства до 30% (эксперимент) от изначальной ёмкости аккумулятора.
Оставшаяся часть пользователей предпочитает этот режим из эстетических соображений.
Тёмная сторона тёмной темы
Основная проблема этого мода — сложность его создания. По крайней мере, если речь идёт о качественном dark mode. Нельзя просто инвертировать цвета, т. к. это даст противоположный эффект — глаза начнут уставать и болеть практически сразу у большинства людей.
К тому же, подобные действия могут исказить визуальную часть контента до неузнаваемости, сделать интерфейс сложновоспринимаемым, неудобным для пользователя.
Чтобы этого не произошло, необходимо соблюдать 5 правил Тьмы (с подпунктами). Познайте мощь тёмной темы!
И присоединитесь к ней
1. Затемните отдалённые поверхности.
Рекомендация крайне логична. Необходимо выстроить модель, где светотень будет ложиться так, как было бы при расположении источника света наверху. Это стандартное для большинства людей положение светильника (комната, офис, аудитория, солнце, в конце концов (условно)). Зрение человека адаптировано к такой системе, поэтому тёмную тему нужно выстраивать в соответствии с ней.
Для этого глубина тона фоновых элементов должна подчиняться следующей иерархии: чем выше слой (ближе к человеку), тем светлее его оттенок. Чем ниже слой (дальше от человека) — тем он темнее. Всё просто.
По той же причине не рекомендуют инвертировать цвета интерфейса. Это нарушает правило отдалённости оттенков. Самые близкие к пользователю слои становятся наиболее тёмными, и наоборот. Подобное выглядит неестественно, тяжело воспринимается пользователем и, вообще, нарушает гармонию форм дизайна (а также небесных сфер, поэтому не надо так).
Если вы не хотите тратить на разработку тёмного мода много финансов и времени, интвертируйте цвет основной фона светлой темы. Теперь это будет основной тон для тёмной. Затем сделайте полученный результат светлее для близких слоёв и темнее для дальних.
Чем больше оттенков вы сделаете и чем плавнее будет переход между ними, тем легче тёмная тема будет переноситься пользователем. Ведь человек тяжело воспринимает слишком контрастные изображения.
Подумайте об этом
2. Сделайте переключение между темами легче.
Для этого необходимо понять (эмпирически), насколько контрастными выглядят элементы во время переключения на тёмную тему со светлой, и наоборот.
Если ваш текст в светлой теме тёмного цвета с непрозрачностью 70%, сделайте белый текст для dark mode с непрозрачностью 75%. Это позволит людям проще адаптироваться к измененим, особенно при плохом освещении.
Выше приведены примерные цифры, Вы можете пробовать разные значения в рамках разумного (не слишком контрастно, но и не так, чтобы всё сливалось). Сделайте настройку своего приложения индивидуально, это позволит создать максимально качественную тёмную тему.
Тёмная тема должна быть такой же читабельной, как основная.
3. Уменьшите крупные яркие блоки.
Большие блоки ярких цветов — отличное решение для светлой темы. Подобное решение помогает выделить важные элементы или создать приятный глазу необычный дизайн. Однако конструкции такого типа губительны для тёмных тем.
В лучшем случае они будут отвлекать от важных элементов. В худшем — превратят интерфейс в геометрическое безумие.
Не надо так
4. Не используйте чистый чёрный (и белый) цвет.
Читать их тяжелее, чем очень тёмно- и светло-серый. Особенно когда они наложены друг на друга.
4.1. Помните об особенностях человека.
Истинно чёрных объектов в окружающем нас пространстве не существует. Самый тёмный объект не дотягивает до полноценно чёрного на 0,005%. В связи с этим человеческое зрение воспринимает как полноценно чёрный цвет только одно — темноту.
Кто мы такие, чтобы спорить с природой (по крайней мере, в вопросах дизайна)? Используйте оттенки, которые будут хотя бы немного светлее, чем #000000. И тогда всё будет в порядке.
Пользователи уходят
4.2. Помните об особенностях устройств.
Чёрное смазывание — это визуальная деформация, которая возникает при прокрутке или перенесении светлого объекта на фоне полностью чёрного цвета. Проблема присуща только экранам OLED, где истинно чёрные пиксели отключены в принципе. Из-за этого и возникают помехи — необходимо больше времени для прогрузки.
Решается просто. Использованием (очень) тёмно-серого вместо чёрного. Например #010101 вместо #000000.
4.3. Помните о светотени.
Ещё одна причина не использовать полностью чёрный цвет — потеря возможности создавать светотень для передачи глубины. Объекты с ней выглядят аккуратнее, привлекательнее и современнее. Прислушайтесь и попробуйте сравнить два варианта. Результат вас впечатлит.
Порадуйте истинных любителей тёмной темы хотя бы в смартфонах
4.4. Так а что с белым-то?
Полностью белый цвет тоже не надо использовать. Но тут всё проще — он создаст слишком высокий контраст, из-за чего глаза человека быстро устанут и начнут сильно болеть. Это усугубляется у людей, больных астигматизмом.
Если коротко, астигматизм — нарушение сферичности преломляющей силы глаза. А если просто — отсутствие единой фокусной точки. Практически 50% людей страдают астигматизмом, учитывайте этот факт.
В случае пользователя-астигматика во время переключения на тёмную тему радужная оболочка глаза открывается сильнее, чтобы впустить больше света, а деформация линзы при этом делает фокус размытым.
5. Адаптируйте цветные элементы под тёмную тему.
Если вы оставляете тёмную тему цветной, необходимо изменить оттенок всех не серых элементов. Для начала уменьшите яркость, чтобы они не отвлекали от текста. А затем увеличьте насыщенность их оттенков, чтобы все нужные элементы выделялись на тёмном фоне, как это было задумано.
Чётких рекомендаций по уменьшению яркости и углублению цвета нет. Как и во всех остальных пунктах, необходимо пробовать и подбирать решение индивидуально.
Полезные ссылки:
- дизайнеры о тёмной теме (eng): https://material.io/design/color/dark-theme.html
- тёмная тема в iOS (eng): https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
- колористика, в том числе тёмная тема, в Windows (eng): https://docs.microsoft.com/en-us/windows/uwp/design/style/color
- статья «Красота стоит жертв. Во сколько вам обойдётся дизайн мобильного приложения?»: https://infoshell.ru/blog/krasota-stoit-zhertv-vo-skolko-vam-oboydetsa-dizajn-mobilnogo-prilozhenija/
- статья «Антитренды веб-бизнеса, или сотрите это немедленно»: https://infoshell.ru/blog/antitrendy-web-biznesa/
