Тёмная тема: правила качественного интерфейса. Главная проблема Jut.su

Саннин

Участник

00:01, 23.07.2023 №1

+ 13

Shurado

18:54, 24.07.2023

Тренд ночного режима в веб-дизайне появился несколько лет назад, когда Apple в 2018 году добавила поддержку тёмной темы в macOS Mojave. С тех пор Google обновила Android, социальная сеть Вконтакте интегрировала новый дизайн в своё официальное приложение, а наш портал в 2021 году представил собственное видение.

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

Базовые компоненты Material Dark

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

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

Прикрепленная картинка

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

Тёмно-серые области помогают снизить нагрузку на глаза и предоставляют более широкий диапазон цветов. Создатели концепции Material Design рекомендуют использовать оттенок с HEX-кодом #121212 для достижения оптимального эффекта.

Прикрепленная картинка

Цвет элементов интерфейса
Дизайнеры Google сформулировали правило для подбора цветов: чем темнее фон, тем светлее должны быть цвета элементов интерфейса. Каждый цвет разбили на яркостную градацию от 900 до 50 и подобрали наиболее контрастные и приятные глазу оттенки. Если инвертировать весь интерфейс, цвета на нём станут кислотными. Смотреть на подобное неприятно из-за высокого контраста:
Прикрепленная картинка

Главный зеленый просто инвертирован, цвет техник не затронут вовсе

Вот почему тёмная тема — это не инверсия. Изображение: Google

Благодаря правилу градаций цветов у Google получилось адаптировать все системные цвета для тёмной темы. Изображение: Google

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

Контур вместо заливки. Тень наверху от светлой темы без изменений. С рулеткой отдельная проблема

Системные иконки macOS: хорошо выглядят в светлой теме и плохо в тёмной. Изображение: Apple

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

Системные иконки для тёмной темы macOS. Изображение: Apple

О чём нужно помнить при создании тёмной темы и причём здесь Jut.su

Не рисуйте иконки контуром, применяйте заливку.
При использовании инверсии цветов в дизайне следует работать с инструментом осмысленно.
Важно следить за контрастом между фоном и текстом — он должен составлять 7:1, в идеале — 15,8:1. Проверяется на Web Aim. На главной Jut.su коэффициент элементов с аниме равен 5:1
Для создания глубины и иерархии в интерфейсе можно использовать различные уровни осветления — объекты, ближе к пользователю, должны быть светлее. На Jut.su используется всего один уровень осветления — цвет «Навигации по сайту» относительно фона слева.

Каге

Активный участник

00:06, 23.07.2023 №2

+ 1

Каге

+ 1836

Общительный

00:28, 23.07.2023 №3

+ 1

Выдал базу

Анбу

+ 1

Новичок

00:57, 23.07.2023 №4

+ 1

Благодарочка автору. Применю, когда буду делать тёмную тему.

Джонин

Ходімо покрутимо

01:06, 23.07.2023 №5

+ 1

Бесстыдство

01:13, 23.07.2023

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

, нет это не окей — это очко.

Джонин

Новичок

07:23, 23.07.2023 №6

+ 3

Исследования показали, что годнота от Арсения полезна для глаз.

Каге

+ 462

Активный участник

12:30, 23.07.2023 №7

0

это новый формат веб-цветов?

Саннин

Участник

13:30, 23.07.2023 №8

+ 5

Orator

14:16, 23.07.2023

Сайтама220, HTML-цвета после моего разбора остались без изменений во всём мире. Эта статья о принципах реализации тёмной темы и её проблем на нашем портале

Каге

+ 430

Общительный

21:24, 23.07.2023 №9

+ 4

Пролил свет на тёмную тему, а там болото

Каге

Общительный

17:06, 24.07.2023 №10

-1

слишком много информации

Саннин

Участник

19:35, 24.07.2023 №11

+ 1

Bebra64738384, специально для тебя при создании добавил побольше картинок — с подписями!