В мире дизайна Dark Mode — это новый черный. Темный режим, также известный как схема Light-On-Dark Color, ночной режим или черный режим, отображает все на темном фоне со световым текстом и значками.
Dark Mode — это не новая концепция, но в последние годы он приобрел большую популярность — настолько, что большинство операционных систем, браузеров, смартфонов и приложений теперь поддерживают Dark Mode.
Краткая история темного режима
Темный режим стал известен в 2018 году, когда Сильвский Бойер Расширенный темный режим до смартфонов с OLED -экранами. Разработчики, геймеры и хакеры быстро приняли темную тему, и они остаются самыми значимыми пользователями.
Согласно 2020 Обзор , 70 процентов разработчиков предпочитают Dark Mode IDE во время кодирования или программирования.
Тем не менее, Dark Mode приобрел популярность даже у пользователей общих устройств. Теперь большинство операционных систем, браузеров, игр и приложений имеют темный режим. Например, некоторые приложения, такие как Discord, полностью перенесены в Dark Mode для пользовательского интерфейса (пользовательский интерфейс).
Так почему темный режим так популярен? Исследования показывают, что приложение с темной палитрой использует почти на 90 процентов меньше энергии чем легкая палитра. Темный режим также помогает цвету выделяться лучше, не будучи слишком ярко. Темный режим снижает общую яркость экрана, что делает его более комфортным, даже при низком окружающем свете.
Согласно Самир Самат , вице -президент по управлению продуктами Google для Android и воспроизведения: «Каждый может относиться к тому, чтобы находиться в комнате, где огни отказаны, и у вас есть этот белый экран, ослепляющий вас». Экран или веб -сайт в темном режиме обычно более визуально привлекателен, чем один в режиме света.
Кроме того, хотя это не окончательно, популярная теория предполагает, что Dark Mode уменьшает излучение синего света с экранов. Согласно Исследование, проведенное Гарвардской медицинской школой В 2018 году воздействие синего света мешает нашей способности производить мелатонин, тем самым влияя на наш сон, если мы используем устройства близко к перед сном.
Все эти факторы способствуют популярности темного режима. Но как мы можем разработать проектирование в темном режиме? Это просто простая инверсия цвета? Давайте более подробно рассмотрим дизайн темного режима.
Ловушки темного режима
Создание темной темы не так просто, как просто инвертировать цвета и настройки оттенков. При разработке темы темного режима для веб -сайта или приложения есть несколько соображений. Прежде чем мы обсудим, как разработать темный режим в приложении, давайте рассмотрим, что не сделать.
Самая большая ловушка темного режима — нечеткий эффект Halation Анкет Если мы читаем яркий текст на темном фоне, наши растущие растущие растущие Из -за этого давление на наши глаза увеличивается, и мы получаем нечеткое зрение.
Dark Mode не полезен для приложений или веб-сайтов, используемых только в дневное время или в хорошо освещенных условиях. Использование темного режима в хорошо освещенных условиях может уменьшить удобство использования и затруднить чтение текста.
Кроме того, если цвета и контраст не соответствуют правильно, цветные оттенки могут вести себя по -разному. Мы также знаем, что цвета влияют на наше настроение, поэтому оно может отложить пользователей, если цвета не хорошо сбалансированы.
Когда пространство белое, он автоматически создает впечатление больше места. Дизайн со многими компонентами, который хорошо выглядит на легком или белом фоне, может чувствовать себя загроможденным на темной теме.
По этим причинам необходимо получить правильный баланс цветов в вашей темной теме.
Проектирование темного режима
Как мы уже видели, разработка пользовательского интерфейса тематической тематики-это игра баланса. Это не просто. Давайте обсудим некоторые вещи, которые вы захотите рассмотреть при разработке интерфейса тематической тематики.
Рассмотрим свой бренд
История вашего бренда и послание, которое вы хотите передать общественности, должны быть важным фактором при принятии решения о том, должно ли ваше веб -приложение иметь темную тему или нет. Например, платформа потоковой передачи фильма является хорошим выбором для темной темы, тогда как банковское приложение может не быть хорошим кандидатом.
Избегайте чистого черного
Чистый черный экран с чистым белым текстом и значками часто приводит к резкому и непривлекательному визуальному интерфейсу. Темно -серый — лучший вариант. Согласно Дизайн материала дизайна , Color #121212 — лучший цвет фона.
Избегайте насыщенных цветов
Насыщенные цвета не очень хорошо работают с темным фоном. Чрезмерно насыщенные цвета затрудняют чтение, и они вибрируют на темном фоне. Дизайн материала Рекомендует цвета в диапазоне от 200 до 50 для темных тем.
Высота построения с полупрозрачным наложением
Согласно документации по дизайну материала, « Чем выше возвышение поверхности (повышение ее ближе к подразумеваемому источнику света), тем легче становится поверхности. «
В темной теме предположим, что источник света сверху. Чем дальше слой, тем темнее его оттенок. Дизайн материала Предлагает высоту здания с использованием полупрозрачного наложения на поверхности компонента.
Мы также должны сохранить тьму теней, чтобы придать более естественный вид. Ниже приведены различные значения наложения:
Используйте разборчивый уровень контраста
У вас должно быть достаточно контраста между текстом и фона, чтобы убедиться, что текст является разборчивым и читаемым. Согласно Дизайн материала , уровень контраста должен быть 15,8: 1. Если вы не поддерживаете хороший контраст в своем дизайне, экран может установить глаза.
Используйте более темные белые для фокусировки
Цвета фокуса показывают, что пользователь выбрал текст или нажал кнопку, чтобы что -то включить. Использование чистого белого для этого приведет к проблеме вибрации или чрезмерно ярким, что снижает читабельность. Лучший способ — использовать «более темные белые». Изменение значений непрозрачности помогает достичь более темных белых.
Обычно принятая схема:
- На или подчеркнутый текст с непрозрачности 87 процентов
- Средний акцент текст на 60 процентов непрозрачности
- Отключенный текст — это 38 процентов непрозрачности
Следующее сравнение помогает нам понять, как они появляются:
Используйте акцентные цвета экономно
Акцентные цвета — это цвета, которые помогают элементам выделяться. Вы должны использовать их экономно, и, как и в случае с основными цветами, они не должны быть тем же ярким оттенком на темной теме. Создание акцентных цветов слишком ярким делает дизайн резким и резким на глазах.
Используйте постоянную цветовую схему для значков
Цветовая палитра значков, масштабируемой векторной графики или иначе должна следовать тем же принципам, что и другая цветовая схема в дизайне. Они должны быть чистыми или чрезмерно насыщенными.
Подумайте о яркости и контрасте изображений
Критическим рассмотрением в темном режиме являются изображения. Яркое изображение на темном фоне может быть непривлекательным. Таким образом, прежде чем добавлять изображения в темный дизайн, лучше уменьшить его яркость и контрастность. В качестве примера, посмотрите на следующую картинку:
Рассмотрим эмоциональное воздействие дизайна
В зависимости от цвета фона цвета в вашем дизайне могут выглядеть разными. Цветовые схемы, которые выглядят приятными и приятными для глаз на легкой поверхности, могут выглядеть угрожающими и раздражающими на темном фоне.
Слишком мало или слишком много цвета, оттенка, яркости и т. Д. Могут полностью изменить сообщение, которое вы пытаетесь передать.
Рассмотрим этот пример из Дизайн материала :
Дизайн с блоками цвета, вероятно, будет отлично выглядеть на белом или легком фоне, но в темном режиме он менее привлекателен. Изображение справа показывает гораздо лучший способ реализации тех же компонентов на темном дизайне.
Прежде чем переключиться на дизайн темной темы, вам нужно будет понять эмоциональное воздействие и сообщение, которое дает дизайн.
Пусть пользователи выберут
Выбор между темным режимом и режимом света всегда должен быть пользователем. Некоторые пользователи могут предпочесть режим света над темным режимом и наоборот. Кроме того, вы захотите убедиться, что ваш дизайн доступен: например, некоторые люди с нарушениями зрения могут иметь лучший опыт в темном режиме.
Кроме того, это ужасная практика пользовательского интерфейса, чтобы забрать контроль от пользователя. Таким образом, ваш дизайн может предложить переключатель или кнопку для переключения между темными и световыми режимами, чтобы пользователи могли выбирать, что они предпочитают. Мы увидим несколько рабочих примеров в следующем разделе.
Вариант темного или светового режима
Есть несколько способов показать или дать пользователям выбор выбора темного режима или режима света. Мы можем применить по умолчанию операционной системы или предоставить кнопку переключения для пользователей для выбора режима. Мы также можем предложить способ сохранить пользовательские предпочтения.
Некоторые операционные системы, такие как Mac OS, просят темные или легкие настройки темы в настройках системы. Таким образом, мы можем установить тему на нашей веб -странице, используя настройки системы. Есть два способа сделать это: использование чистого CSS или JavaScript.
Чистый путь CSS — это предпочитает-полковник или Scheme Media Query. С помощью Media Prefers-Scheme Media Requery мы указываем поведение темы.
Например, аналогично примеру на CSS-Tricks , скажем, у нас есть веб -страница с текстом и ссылкой. Когда настройка операционной системы является «светом», страница отображается следующим образом:
Таблица стилей CSS, которую мы используем для достижения этого:
@media (prefers-color-scheme: light) {
body {
color: #000000;
background: white;
}
body a {
color: #809fff;
}
}
Однако, если мы предположим, что пользователь установил свои системные предпочтения на Dark, это активирует медиа -запрос:
@media (prefers-color-scheme: dark) {
body {
color: #eee;
background: #121212;
}
body a {
color: #809fff;
}
}
И отображает страницу:
Вместо метода Pure CSS мы можем использовать метод javaScript window.matchedMedia () в качестве этого демо иллюстрирует.
Конечно, как упоминалось ранее, мы можем предоставить кнопку переключения на самой веб -странице, чтобы обеспечить больший контроль. Ниже приведен небольшой фрагмент, показывающий, как мы можем переключаться между режимами, используя кнопку. Мы обрабатываем событие прослушивателя кнопок следующим образом:
const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
} else {
document.body.classList.toggle("dark-theme");
}
});
Когда пользователь нажимает кнопку, чтобы переключиться в режим Dark, код применяет CSS темной темпы как:
body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
}
Веб -страница, которая поддерживает как темный, так и легкий режим, выглядит следующим образом:
Весь код доступен на Codepen Анкет
Поддержка в общих рамках для темного режима
Благодаря своей постоянно растущей популярности многие из обычно используемых структур поддерживают здание с темным режимом. Ниже приведены несколько примеров: Материал пользовательского интерфейса
Материал UI
Материал UI Предоставляет удобный для разработчиков, расширяемый и простой темация полезность. Тема позволяет вам настроить все аспекты проектирования вашего проекта, чтобы сделать их темными режимами готовыми и соответствовать потребностям вашего бизнеса.
Vuetify
Vuetify это модный пользовательский интерфейс, которая использует Vue.js. Он поддерживает переключение между световыми и темными режимами спецификации дизайна материала. Vuetify выбирает режим Light по умолчанию, но вы можете легко переключить его в темный режим. Настройка проста в Vuetify.
Туманная
На основе EVA Design System Туманная библиотека является одной из лучших библиотек пользовательского интерфейса для Angular. Nebular обеспечивает встроенные, настраиваемые темы, такие как тема по умолчанию, космическая тема, темная тема и т. Д. Мобильная версия nebular, называемая UI Kitten, также поддерживает темную тему.
Smelte
Smelte находится на вершине Tailwind CSS и следует руководящим принципам дизайна материала. Он поддерживает темный режим и позволяет вам переключаться и настраивать его. Вы можете включить темный режим, просто установив свойство Dark Mode на True для компонентов.
План
Blueprint Библиотека пользовательского интерфейса позволяет вам легко переключаться между темными и легкими режимами. Перемещение в темный режим в Blueprint так же просто, как применение свойства BP3-Dark к элементу контейнера.
Резас
Реба SS CatchFrase: «Все наши компоненты были построены с учетом тематической ситуации». Они обеспечивают обширную поддержку тематической темы и имеют прямую реализацию их тематического API.
Отреагировать нативную бумагу
Библиотека UI Native Paper Native Paper, или просто Бумага , поддерживает темную тему в своей третьей версии.
Бумага, по сути, является библиотекой настраиваемых и готовых к производству нативных компонентов React, которые следуют принципам дизайна материала Google.
Это лишь некоторые из библиотек, которые поддерживают темный режим. Существуют тысячи библиотек пользовательского интерфейса, которые обеспечивают ту же или аналогичную поддержку темного режима. Помимо этих библиотек, есть наборы инструментов пользовательского интерфейса, которые поставляются с темным режимом или темной темой.
Одним из таких заметных примеров является Wijmo UI Toolkit Анкет Wijmo — это инструментарий пользовательского интерфейса с более чем 40 настраиваемыми виджетами, начиная от интерактивных меню и сетей данных до графиков и графиков и поставляется в комплекте с поддержкой темного режима.
Вывод
Большинство людей (или, по крайней мере, заядлых Пользователи Android ) использовали темный режим, и он, скорее всего, останется этим в течение некоторого времени. Но, как мы видели, разработка темной темы для вашего веб -сайта или приложения не является простым. Вы должны рассмотреть много вещей, прежде чем вы сможете внедрить привлекательную темную тему.
Мы также видели, что многие библиотеки пользовательского интерфейса также обеспечивают поддержку для строительства приложений в темном режиме. Использование библиотеки для создания вашего приложения может быть хорошей идеей вместо того, чтобы разработать темный режим с нуля.
Хотя есть проблемы при разработке и планировании, стоит изучить, как ваше приложение может поддерживать темный режим.
Оригинал: «https://dev.to/grapecity/dark-mode-for-developers-1hh1»