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

Саннин

Участник

00:01, 23.07.2023 №1

+ 14

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 используется всего один уровень осветления — цвет «Навигации по сайту» относительно фона слева.

Каге

+ 549

Общительный

00:06, 23.07.2023 №2

+ 1

Каге

+ 1784

Общительный

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

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

Каге

+ 461

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

12:30, 23.07.2023 №7

0

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

Саннин

Участник

13:30, 23.07.2023 №8

+ 5

Orator

14:16, 23.07.2023

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

Каге

+ 429

Общительный

21:24, 23.07.2023 №9

+ 4

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

Каге

+ 1554

Общительный

17:06, 24.07.2023 №10

-1

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

Саннин

Участник

19:35, 24.07.2023 №11

+ 1

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

Каге

Общительный

13:35, 06.09.2024 №12

0

Отличная тема.

Каге

Почтенная персона

15:18, 06.09.2024 №13

0

Vanilogoga Xatake

15:18, 06.09.2024

Нашёлся шарящий человек, лайк

Джонин

+ 5

Новичок

20:53, 07.09.2024 №14

0

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

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

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

Изгой

Участник

22:03, 07.09.2024 №15

0

Таксист-онанист, правильно, из покон веков наши предки на своих iPad-ах включали светлую тему. Но это может быть также из-за того, что ночи у них были темные, из-за отсутствия ламп. Их Тесла придумал только в 18 веке

Джонин

+ 5

Новичок

00:15, 08.09.2024 №16

0

Ахидо, ахах, я тебя обожаю
но я имел в виду что книги с древних времен писались черным по белому и сейчас для глаза легче читать в светлой теме черными буквами по белому фону а не наоборот.
Понял о чем я??
эту хуйню в тиктоке увидил года 2 назад, до сих пор помню блять

Ахидо (07.09.2024, 22:03) писал:. Их Тесла придумал только в 18 веке

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

Изгой

Участник

04:46, 08.09.2024 №17

0

Ахидо

04:47, 08.09.2024

Таксист-онанист , ,
Я понимаю, о чем ты, но тут вопрос встает. А что было, до того, как китайцы придумали из опилок варить бумагу? Глиняные таблички, кора деревьев, дощечки, на навозной куче.. Возможно ты с тиктоком правы, на счёт пользы и вреда.

Судья

Custodes

09:33, 08.09.2024 №18

0

Sherriff

09:35, 08.09.2024

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

Джонин

+ 5

Новичок

16:21, 08.09.2024 №19

+ 1

Sherriff (08.09.2024, 09:33) писал:еб*нутые

найс зацензурил

Sherriff (08.09.2024, 09:33) писал:идите продышитесь картофельным паром

Это пережиток совка, от картофельного пара можно обжешь себе легкие и лицо, и оно мало эффективно.

Sherriff (08.09.2024, 09:33) писал:Че за ху*ню вы несете

не несем а доносим информацию в массы(каловые)

король демонов третье поколени (08.09.2024, 10:07) писал:Согласен с тобой

а ты вообще не подпёздывай

Изгой

Участник

17:18, 08.09.2024 №20

+ 3

Sherriff, а ну выйди и зайди нормально