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

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

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

1. Не используйте чистый черный

При разработке темного пользовательского интерфейса избегайте использования чисто черного фона. Лучше использовать темный оттенок серого. Например, Тема материального дизайна Google рекомендует цвет #121212.

Черный фон в сочетании с белым текстом может быть слишком контрастным и вызывать утомление глаз. Вместо этого более темные оттенки серого могут легко отображать тени, глубину и высоту.

instagram viewer

2. Убедитесь, что контрастность текста соответствует требованиям WCAG 2.0.

Выберите цветовую комбинацию, обеспечивающую надлежащий уровень контраста, чтобы текст был разборчивым. В рекомендациях WCAG 2.0 указано, что текст или изображения текста должны иметь коэффициент контрастности не менее 4,5: 1, а крупный текст (не менее 18 пунктов или 14 пунктов полужирным шрифтом) должен иметь коэффициент контрастности не менее 3: 1.

Существует несколько инструментов для проверки цветового контраста, в том числе ВОЛНА Расширение Chrome, которое также проверяет, насколько доступны цвета.

3. Выберите правильный стиль шрифта

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

Рассмотрим следующие стили для веб-страницы:

тело {
семейство шрифтов: "КурьерНовый", моноширинный;
размер шрифта: 12пикс.;
вес шрифта: 200;
высота линии: 1; 
цвет: #333333;
}

Семейство шрифтов трудно читать, размер шрифта слишком мал, а вес шрифта слишком мал. Эти стили затрудняют чтение страницы, как вы можете видеть на скриншоте ниже.

Ниже приведены некоторые подходящие стили, которые вы могли бы использовать вместо этого.

тело {
семейство шрифтов: "Ариал", без засечек;
размер шрифта: 16пикс.; 
вес шрифта: 400; 
высота линии: 1.5; 
цвет: #FFFFFF;
фоновый цвет: #121212; 
}

И вот результирующая страница:

4. Избегайте насыщенных акцентных цветов

Насыщенные цвета могут быть слишком яркими и размытыми на темном фоне. Вместо этого используйте менее интенсивные и приглушенные цвета. Таким образом вы создаете пользовательский интерфейс с видимым текстом.

Чтобы продемонстрировать, рассмотрим эти два стиля кнопок:

/* Насыщенный синий */
.btn-насыщенно-синий {
фоновый цвет: #121212;
цвет: #0e0bf6;
}
/* Приглушенный синий */
.btn-приглушенный синий {
фоновый цвет: #121212; 
цвет: #4c5ab3;
}

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

Инструмент вроде раскрашиваемый полезен для создания цветовых комбинаций, соответствующих рекомендациям по доступности.

5. Используйте отрицательное пространство, чтобы предотвратить создание тяжелого пользовательского интерфейса

Темная цветовая палитра может сделать пользовательский интерфейс тяжелым для пользователей. При правильном использовании пустое пространство может помочь выделить важные элементы пользовательского интерфейса и упростить просмотр текста. Достаточное расстояние также может сделать дизайн более чистым и современным.

Возьмем, к примеру, Целевая страница Apple. Расстояние между элементами делает страницу очень современной и визуально интересной, позволяя выделять важные элементы.

6. Используйте разные цветовые оттенки, чтобы добавить глубину пользовательскому интерфейсу

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

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

7. Убедитесь, что ваши изображения соответствуют темному интерфейсу

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

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

@СМИ (предпочитает цветовую схему: темный) {
/* Применяем этот стиль только в темном режиме */
.bgpattern {
изображение на заднем плане: URL("/темный.jpg");
 }
}

Этот медиа-запрос гарантирует, что указанное фоновое изображение будет отображаться только в том случае, если цветовая схема, предпочтительная для пользователя, темная.

Когда использовать темный интерфейс

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

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