Особенности проектирования темной темы

Дизайн
24.04.2020
197

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

Определение

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

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

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

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

Энергосбережение и экологичность

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

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

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

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

Компоненты

Компоненты, которые стоит учитывать при проектировании интерфейса:

  • Оттенок- спектр проявления.
  • Насыщенность- интенсивность проявления.
  • Яркость- соотношение черного и белого.

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

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

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

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

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

Тени

Twitter применил в своем продукте цветовой спектр синего. При этом фирменный вид и колористика сохранены, и не вызывают дискомфорт при просмотре. Для обозначения разделов был применен спектр синего диапазона, выделенные насыщенными тонкими линиями для лучшего понимания.

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

Итоги

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

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

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна, и учиться Вам теперь станет в удовольствие!

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку