Темный режим становится не только тенденцией, но и обычным предпочтением пользователей. Пока мы работали над множеством других важных улучшений (в июле в нашем журнале изменений есть семь обновлений!), Мы решили сделать темный режим доступным для WorkOS.
Разработка версии вашего приложения для темного режима приходит со своими проблемами. В этом посте мы поделимся некоторыми уроками, которые мы извлекли при внедрении темного режима в WorkOS. Если вы хотите увидеть конечный результат, вы можете попробовать WorkOS в темном режиме здесь.
Содержание статьи
1. Измерьте коэффициент контрастности
Самая большая проблема любой темной темы — это соответствие требованиям доступности, чтобы пользователи с любым диапазоном зрения могли получить доступ к информации.
К счастью, вы можете математически определить, достаточно ли контрастируют два цвета, соблюдая правила доступа к веб-контенту (WCAG). Чтобы получить проходной балл (AA), коэффициент контрастности должен быть не менее 4,5: 1.
Давайте возьмем значок среды WorkOS в качестве примера. При использовании белого текста на цветном фоне добиться хорошей контрастности очень сложно. Использование темного текста на мягком фоне намного легче читать.
Применяя эти изменения, мы извлекли еще один урок: добавление темной темы может улучшить светлую тему.
2. Держитесь подальше от чистого черного
Одним из первых шагов, которые мы сделали, когда мы отправились в путешествие в темный режим, было инвертировать все цвета. Все, что было чисто белым (он же #FFF), стало чисто черным (он же # 000).
Проблема в том, что белый имеет 100% яркость цвета, а черный — 0% яркости, создавая максимально возможный контраст. Такое несоответствие создает интенсивные уровни света, которые чрезмерно стимулируют глаза.
Вы заметили, как книжные издатели не используют чистую белую бумагу, потому что контраст с черными чернилами слишком резкий? Книги, напечатанные на кремовой бумаге, не вызывают утомления глаз. Вот почему издатели используют эту технику сотни лет.
То же самое и с цифровыми устройствами. Хорошие приложения в темном режиме используют оттенки серого вместо чистого черного. Нашим решением было придумать разные оттенки серого как для светлого, так и для темного режима.
3. Переоцените свою цветовую палитру
Вам часто придется настраивать цвета в темной теме, чтобы вызвать тот же отклик в светлой теме.
Синий цвет, который мы использовали для ссылок, например, читается на черном иначе, чем на белом. То же самое произошло и со статусными таблетками.
При добавлении темного режима более светлые и ненасыщенные цвета, такие как пастель, более приятны для глаз, чем яркие цвета. Это связано с тем, что насыщенные цвета создают оптические колебания на темном фоне, которые могут вызвать утомление глаз.
Более светлые тона гарантируют, что ваши элементы по-прежнему доступны и имеют надлежащий коэффициент контрастности на темном фоне.
4. Установите визуальную иерархию
Тени — отличный способ создать визуальную иерархию в светлых темах, поскольку они помогают вам выразить возвышение.
Однако тени не работают в темных темах. Даже если ваш фон не на 100% черный, теней все равно будет недостаточно, чтобы различать блоки элементов.
Одно из решений может включать границы, которые помогают осветлить границы контейнера, не отвлекая внимание от того, что важно — содержимого в блоке. Тем не менее, ключом к успешной визуальной иерархии в темном режиме являются цвета высот.
Поднятие элемента ближе к предполагаемому источнику света создает ощущение глубины. Это означает, что чем выше высота поверхности, тем она светлее. Вот почему боковая панель WorkOS светлее, чем остальная часть страницы.
5. Позвольте пользователю выбрать
Одно заблуждение разработчиков относительно светлого / темного режима — автоматическое применение темы на основе пользовательских настроек системы.
Хотя можно с уверенностью предположить, что пользователи могут захотеть, чтобы их приложения следовали этому предпочтению, было бы лучше, если бы у них была возможность переключаться на другую тему вручную.
Есть множество причин, по которым пользователь может хочу переключиться. Может быть, они хотят сделать снимок экрана в светлом режиме, записать демонстрацию экрана в темном режиме или просто предпочтут использовать ваше приложение с той или иной темой.
Независимо от варианта использования, вы должны предоставить им управление
Заключение
Темный режим звучит достаточно прямолинейно, но чтобы сделать его просто правильным и сделать его потрясающим необходимо принять во внимание . Спасибо, что прочитали это, и я надеюсь, что у вас будет возможность реализовать темный режим в программах, над которыми вы работаете!
Для пользователей WorkOS, предпочитаете ли вы яркий экран или хотите почувствовать себя хакером в темном режиме, решать вам, как вы воспользуетесь приложением.
Наслаждайтесь темной стороной ! 🖤
Если вам понравился этот пост, вы можете попробовать WorkOS в темном режиме здесь . Если вы также хотите потратить свое время на создание отличных возможностей для разработчиков, мы нанимаем . Если вы когда-нибудь захотите поговорить об опыте разработчиков (или темном режиме), напишите в Твиттере или напишите мне в DM !
Загрузка...
