Темные темы

Содержание

Тёмные темы в дизайне интерфейсов: правила создания и 8 полезных советов

Темные темы

Тёмная тема — относительно новое явление в графическом дизайне, которое обрело популярность несколько лет назад. Apple добавила поддержку в iOS, Google обновила Android, социальная сеть интегрировала новое оформление в официальное приложение.

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

Light vs dark

Разработчики приложений и дизайнеры опрометчиво считают, что разработка тёмного оформления скроет недостатки и увеличит лояльность целевой аудитории. На самом деле у него есть чёткие задачи. Первая — снижение нагрузки на глаза в ночное время.

Вторая — возможность взглянуть на продукт по-новому. Не надо обновлять внешний вид в погоне за трендами. Они меняются очень быстро. Сегодня был популярен Metro, завтра Flat, послезавтра — Material.

Используйте фишки каждого направления с пользой для юзеров.

Преимущества тёмной темы:

  1. Легче воспринимать информацию при слабом освещении.
  2. Снижение нагрузки на глаза.
  3. Увеличение автономности смартфона за счёт оптимизации энергопотребления.

Создать идеальный веб-сайт или приложение с поддержкой dark theme непросто. Без знания нюансов плюсы превращаются в минусы. Некоторые дизайнеры берут исходный макет, меняют цвета и передают проект программистам. В результате пользователи страдают от недостатков юзабилити.

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

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

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

Как сообщает социальная сеть, юзеры постоянно просили добавить новый шаблон. После выпуска обновления 20% аудитории выбрали его в качестве основного стиля.

Тёмный фон обеспечивает комфортное восприятие информации в тёмное время суток. Google подтверждает, что такой подход увеличивает автономность девайсов с AMOLED-экранами.

Один из аргументов в пользу тёмной темы — она нравится целевой аудитории. Люди хотят взглянуть на знакомую игру или новостное приложение с другой стороны.

Это сработает только если дизайнеры обновили внешний вид без масштабного изменения структуры.

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

Факторы, влияющие на выбор:

  1. Читабельность. Критерий отвечает за удобство восприятия информации с экрана девайса. Если у пользователей возникнут проблемы, они могут уйти к конкурентам.
  2. Доступность. Способность подразумевает одинаковый доступ для всех сегментов целевой аудитории. Аналитические исследования подтверждают, что цветовая схема влияет на пользователей по-разному в зависимости от возраста, предыдущего опыта и других параметров.
  3. Отзывчивость. Контент должен отображаться в полном объёме на всех устройствах: от компьютеров до планшетов. Если тёмная тема снижает информативность и это критично для людей — работа проделана напрасно.

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

Второй критерий — потребности целевой аудитории. Дизайнер должен понять суть услуги и «боли» пользователей. Пожилым нравятся светлые интерфейсы. Для них они более интуитивные и удобные. Подростки и молодые люди больше следят за трендами. Они любят пробовать новое и с радостью переходят на тёмный UI.

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

Постарайтесь найти компромисс. Можно сделать тёмное оформление и добавить светлые элементы. Контраст подчеркнет важную информацию и сгладит переходы. Ниже размещён пример такой схемы.

Приложение Watering Tracker следит за домашними растениями и отправляет уведомления, когда их надо поливать. Дизайнеры использовали подложку с тёмным фоном. Особенно круто она смотрится на графиках. Эта область выглядит информативно и стильно. Специалисты умело расставили акценты. Гармоничная типографика и продуманная структура обеспечивают визуальную иерархию макета.

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

8 советов по работе с тёмной темой

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

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

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

Тёмно-серые области уменьшают нагрузку на глаза и дают широкий диапазон цветов. Создатели концепции Material Design советуют использовать оттенок с HEX-кодом #121212.

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

Забудьте о насыщенных цветах

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

Лёгкие варианты помогают создать идеальный контраст. Менее насыщенные оттенки улучшают читабельность и уменьшают «вибрацию».

Проверьте контраст

Дизайнеру надо убедиться, что контент остаётся удобным для восприятия в dark theme. Фон должен быть достаточно тёмным для отображения светлого текста. В этом вопросе важно найти золотую середину. Если сместить ползунок цветовой палитры слишком сильно, юзабилити может ухудшиться.

Согласно концепции Material Design уровень контраста между текстом и бэкграундом должен начинаться от значения 15,8:1. Для тестирования интерфейса используйте специальный набор инструментов.

Проверьте отображение контента

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

По умолчанию для тёмной темы используется чистый белый цвет с HEX-кодом #FFFFFF. Он очень яркий и эффект «вибрации» явно прослеживается.

В этом вопросе снова приходят на помощь советы материального дизайна по чёткости контента. Для неактивного текста задайте значение непрозрачности 38%. Основные фрагменты должны быть видны на любом фоне — задайте им не менее 87%.

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

Уловите посыл интерфейса

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

Dark theme не всегда является логичным предложением light версии. Иногда дизайнеры изначально делают UI в тёмных тонах, чтобы передать эмоции проекта через нестандартные идеи.

Обеспечьте свободу выбора

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

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

Экспериментируйте с затемнением

Здесь снова на помощь приходят главные принципы Material Design. Объекты внутри интерфейса надо рассматривать с точки зрения физики. То есть считать их «живыми», способными двигаться и взаимодействовать друг с другом. Пользователь вступает в контакт с виртуальным организмом и управляет им.

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

Следите за яркими блоками

Если тёмная тема разрабатывается на основе существующего концепта, будьте внимательны с переносом яркого бэкграунда. В dark mode цветные блоки смещают фокус пользователя.

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

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

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

Тёмные темы — не просто временный тренд в дизайне интерфейсов. Они помогают целевой аудитории открыть продукт с новой стороны или быстро погрузиться в незнакомое пространство. Разработать идеальный UI без опыта непросто. Надо знать нюансы, найти «боли» целевой аудитории и потратить время на тестирование.

Воспользуйтесь шпаргалкой, чтобы создать идеальную тёмную тему и вдохновить пользователей:

  1. Затемните отдалённые области.
  2. Проверьте контраст.
  3. Избегайте чистого белого и чёрного.
  4. Управляйте глубиной.

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

Источник: https://idbi.ru/blogs/blog/temnye-temy-v-veb-dizayne

Так ли полезны темные темы как о них говорят?

Темные темы

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

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

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

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

Потребляют ли устройства меньше энергии с темной темой?

Ответ на это вопрос весьма простой – да, но только если в вашем устройстве используется матрица типа OLED или AMOLED. Обычные LCD или другие дисплеи практически не способны улучшить автономность вашего устройства.

Так выглядят пиксели у LCD и AMOLED дисплеев

В экранах AMOLED ток проходит через органические соединения чтобы подсветить отдельные пиксели.

Поэтому если пиксель должен отражать черный цвет, то к нему просто не поступает ток и он остается выключенным. Стоит отметить, что такое поведение относится только к чисто черному цвету (hex #000000).

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

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

Именно поэтому в Google задумались над применением темных тем, ведь в собственных смартфонах компании используются AMOLED панели. По заявлениям корпорации, применение темной темы позволит сократить энергопотребление до 63%.

На ближайшей конференции Google I/O мы ждем появления новой версии Android с возможностью включения глобальной темной темы.

Темная тема и другие функции в новом AndroidApple WWDC 2019: новые функции в iOS, macOS и watchOS

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

От яркости экрана – да, но от цвета – нет. LCD матрицы состоят из множества слоев для формирования конечного изображения, при этом подсветка таких экранов работает постоянно и подсвечивает все пиксели.

Если ваш дисплей включен, то включены и все светодиоды подсветки вне, зависимости от изображения на экране.

Строение LCD дисплеев

Таким образом разные принципы формирования изображения дают нам четкий ответ – AMOLED/OLED дисплеи получают преимущества от применения темных тем, а LCD – нет.

Помогают ли темные темы вашим глазам?

Здесь все становиться несколько сложнее, потому что темные темы иногда могут помочь ваши глазам, но не всегда

Строение глаза человека

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

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

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

Пример написания текста при использовании разных цветов

Читаемость при использовании темных тем

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

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

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

Плюсы:

· Темные темы могут уменьшить напряжение на глаза в условиях недостаточного освещения.

· Высокий контраст между текстом и фоном могут смягчить напряжение на глаза.

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

Темная тема в текстовом редакторе Atom

Минусы:

· Темные темы могут сильнее раздражать глаза при достаточном освещении, поскольку текст может читаться сложнее.

· 100% контраст между текстом и задним фоном (абсолютно черный текст на чисто белом фоне) обычно сложнее воспринимать, и он может сильнее раздражать глаза.

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

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

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

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

Переходите на темную сторону! У нас есть печенье!

Если вы любите использовать темные темы – просто используйте их. Делайте все что позволит вашим глазам меньше уставать.

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

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

Источник: https://zen.yandex.ru/media/it_news/tak-li-polezny-temnye-temy-kak-o-nih-govoriat-5cd17523ed7a4c00aee42424

4 способа как включить темную тему на Андроид телефоне

Темные темы

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

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

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

На данный момент темное оформление доступно на устройствах с Android Pie. Попытки внедрить ночной режим начались со времен Андроид 7.0, однако это не увенчалось успехом. Современная функция способна автоматически включаться и выключаться в зависимости от времени суток.

Совсем недавно компания Google представила Android Q, в котором также будет присутствовать возможность включить черный фон. Но пока об этом говорить рано, так как обычные телефоны смогут обновиться только к началу 2020 года.

Активация темной темы на смартфоне Андроид

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

В настройках на Андроид 9

Для включения темной темы на Андроид 9 сначала запустим настройки, затем:

  1. Переходим в раздел «Экран».
  2. Листаем вниз и нажимаем «Дополнительно».
  3. На открывшейся странице кликаем по пункту «Тема устройства».
  4. Из предложенного списка выбираем «Темная».
[su_note note_color=»#abdb6c» text_color=»#000000″]После выполнения данных действий оформление экрана изменится. Чтобы вернуть дисплею первоначальный вид, проделайте указания инструкции, где в последнем пункте выберите «Светлая».[/su_note]

Использование сторонних приложений

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

Черная и серая тема

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

Темная тема Ponder

После запуска приложения потребуется установить на смартфон CMLauncher. Именно с данным лаунчером тема будет корректно работать.

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

Но если других вариантов нет, то подобный софт может стать хорошей альтернативой.

Pure Black Launcher Theme

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

Сделать это можно самостоятельно, либо нажав кнопку «Загрузить с GooglePlay» в приложении.

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

Как включить темную тему в приложениях на Андроиде

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

Google Chrome

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

  1. Открываем Chrome на Андроид.
  2. В адресную строку вводим запрос chrome://flags.
  3. Нажимаем кнопку поиска и попадаем на страницу для разработчиков.
  4. Здесь в поиске указываем «Darkmode».
  5. Далее под первым пунктом кликаем «Default», где из открывшегося меню выбираем «Enabled».
  6. Для вступления изменений в силу нужно перезапустить браузер, нажимаем «RelaunchNow».
  7. Затем нажимаем на «три точки», расположенные в правом углу экрана.
  8. Теперь выбираем «Настройки», после «Темы».
  9. Здесь устанавливаем параметр «Темная».

Как видим, получить черный фон в Google Chrome возможно. Также в настройках можно установить параметр «По умолчанию», что позволит браузеру автоматически включать режим во время работы функции энергосбережения.

Яндекс Браузере

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

  1. Через Yandex Browser заходим в Интернет-магазин расширений Chrome. Для этого достаточно ввести одноименный запрос в поисковую строку.
  2. Далее переходим на страницу с расширением «Care your Eyes» и нажимаем кнопку «Установить».
  3. Подтверждаем загрузку дополнения.

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

ВКонтакте

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

  1. Запускаем приложение «ВКонтакте».
  2. Нажимаем на «три полоски», расположенные в правом нижнем углу дисплея.
  3. Кликаем по «шестеренке» вверху экрана.
  4. После переводим ползунок напротив строки «Темная тема».

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

Разработчики Инстаграма пока не внедрили в официальное приложение черный фон. Из-за этого приходится искать альтернативы на просторах Google Play. Сейчас единственной утилитой такого формата является Dark Mode Theme For Instagram. Это сторонняя программа, являющаяся аналогом официального приложения Instagram.

Здесь также можно выкладывать истории, публиковать фотографии и писать комментарии. Предлагаем ознакомиться с кратким руководство по работе с софтом:

  1. Устанавливаем дополнение.
  2. Кликаем «Accept», что означает согласие с политикой конфиденциальности сервиса.
  3. Проходим авторизацию с использованием данных от собственной учетной записи.

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

Первым делом запустим мобильное приложение, затем:

  1. Нажимаем по иконке учетной записи, расположенной в правом верху экрана.
  2. Теперь переходим во вкладку «Настройки».
  3. Здесь выбираем пункт «Общие».
  4. В открывшемся окне переводим ползунок возле строки «Ночной режим».

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

WhatsApp

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

  1. Кликаем на «три точки», расположенные в правом углу дисплея.
  2. Из открывшегося списка выбираем «Настройки».
  3. Теперь переходим во вкладку «Чаты».
  4. Затем заходим в раздел «Обои».
  5. Система предложит перечень вариантов, из которых нужно выбрать «Сплошной цвет».
  6. Далее кликаем по черному фону и нажимаем «Установить».

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

[su_note note_color=»#abdb6c» text_color=»#000000″]Разработчики планируют в скором времени добавить возможность редактирования дизайна самой рабочей области.[/su_note]

Ответы на популярные вопросы

[su_accordion][su_spoiler title=»Как отключить темную тему в представленных выше приложениях?» open=»no» style=»default» icon=»plus» anchor=»» class=»»]Для отключения темного оформления в большинстве случаев достаточно проделать указания инструкции, где в последнем пункте выбрать светлую тему. Что касается Инстаграма, то здесь потребуется удаление сторонней программы.[/su_spoiler] [su_spoiler title=»Какие преимущества в использовании темного оформления?» open=»no» style=»default» icon=»plus» anchor=»» class=»»]Во-первых, ряд исследований доказывает, что текст на странице с черным фоном становится более читаемым. Во-вторых, ночной режим способен снизить нагрузку на глаза в темное время суток. В-третьих, данная функция может снизить потребление энергии аккумулятора телефона.[/su_spoiler][/su_accordion]

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

Источник: https://GuruDroid.net/kak-vklyuchit-temnuyu-temu-na-android.html

Переходим на темную сторону: что такое темная тема и зачем она нужна в приложении

Темные темы

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

Забота о здоровье

Когда мы резко заходим из светлого помещения в темное, то «слепнем» на несколько минут. Это некомфортно, но адаптация проходит быстро. А вот если наоборот, из светлого помещения переходим в темное, то привыкание займет долгое время (20-30 минут).

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

По этому поводу очень точно выразился пользователь Reddit. Дословный перевод: «Ночь темна. Экран яркий. Глаза болят. Ночь темна. Экран темный. Глаза не болят.»

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

Экономия заряда батареи

Компания Google протестировала влияние темной темы на аккумуляторы телефонов и получила следующие результаты:

При яркости в 50 % темная тема в приложении «» экономит заряд на 15 %. При яркости в 100 % экономия заряда батареи составляет аж 60 %!

Без темного режима все белое пространство на дисплее вашего телефона требует больше энергии, что, в свою очередь, разряжает батарею.

Сделаем важную оговорку: темная тема экономит заряд на экранах OLED/amoled, которые используют устройства под управлением Android. Но Apple делает смартфоны на LCD (жидкокристаллический экран). Однако в прошлом году компания анонсировала, что поменяет дисплеи в 2020 году. И действительно, вышел флагманский смартфон iPhone 11 Pro с OLED-экраном.

Красивый дизайн

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

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

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

Android 10

Google долгое время тестировал темную тему в приложении GMail и наконец-то в августе 2019 года включил ее в Android 10. Плюс компания дала сторонним разработчикам инструменты для интеграции их приложений с темной темой.

Темная тема на Android 10

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

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

Также добавили темную тему в приложение. Как утверждают разработчики , они переработали более 2 000 файлов, чтобы подобрать цветовые гаммы. Активировать опцию можно в разделе «Настройки».
Темная тема для ontakte

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

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

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

Темная тема для каталога автомобилей в приложении «ТрансТехСервис»

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

В избр. Сохранено

Источник: https://spark.ru/startup/itbricksoft/blog/65352/perehodim-na-temnuyu-storonu-chto-takoe-temnaya-tema-i-zachem-ona-nuzhna-v-prilozhenii

Как создавать восхитительные тёмные темы — Дизайн на vc.ru

Темные темы

Перевод статьи от Терезы Мэн.

Тёмные темы — последний тренд в дизайне приложений. В macOS она появилась в прошлом году. Android запустил тёмную тему в прошлом месяце.

Когда-то они были редкими, сейчас тёмные темы везде.

Когда всё сделано хорошо, тёмные темы имеют много преимуществ. Они уменьшают напряжение глаз. Их легче читать при слабом освещении. И (в зависимости от экрана) они могут значительно снизить расход батареи.

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

В этой статье расскажем, как создавать тёмные темы, которые будут читабельными, сбалансированными и восхитительными.

Большая часть дизайна пользовательского интерфейса в тёмных темах следует принципу: затемнение удалённых поверхностей. Это имитирует среду, в которой свет излучается сверху, и передаёт знакомую физическую форму.

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

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

В Superhuman наша тёмная тема состоит из пяти оттенков серого. Более близкие поверхности используют более светлые оттенки серого; более отдалённые поверхности используют более тёмные оттенки серого.

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

Например, в нашей светлой теме контактная информация чёрная с непрозрачностью 60%. Но в нашей тёмной теме мы установили контактную информацию на белый с непрозрачностью 65%. Хотя оба коэффициента контрастности превышают стандарт AA, дополнительные 5% предотвращают усталость, особенно в условиях низкой освещённости.

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

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

Например, рассмотрим наш экран «Напомни мне». В нашей светлой теме розовое наложение не отвлекает от ещё более яркого диалога. Но в нашей тёмной теме, то же самое наложение отвлекает наше внимание. Мы полностью удалили оверлей, чтобы быстро и легко сосредоточиться на том, что имеет значение.

В Superhuman мы не используем чистый чёрный или белый в наших тёмных темах. Вот четыре причины сделать то же самое.

Настоящий чёрный не существует в нашей повседневной среде. (самый тёмный объект в мире, материал, название которому ещё надо дать в MIT, всё ещё на 0,005% отклоняется от настоящего чёрного).

Поэтому наше зрение приспособилось воспринимать относительную темноту как настоящий чёрный. Вот почему #000000 может показаться таким резким, особенно при установке на более лёгкие элементы. Это не соответствует тому, что мы обычно видим.

Черное смазывание — это визуальное искажение, возникающее при перетаскивании или прокрутке более светлого содержимого на чисто чёрном фоне.

Этот эффект возникает на экранах OLED, которые всё чаще встречаются. На этих экранах чисто чёрные пиксели отключены. (Таким образом, тёмные темы могут потреблять меньше энергии, чем светлые.)

Однако для этих пикселей медленнее включаться и выключаться, чем для изменения цвета. Эта переменная реакция создаёт эффект размазывания.

Вы можете избежать размывания чёрного, используя тёмно-серый, так как тогда пиксели не будут выключаться. Это даже работает с серым, таким же тёмным, как #010101, — и всё ещё потребляет гораздо меньше энергии, чем светлая тема!

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

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

Если ваш фон не чисто чёрный, вы можете использовать тени с разной прозрачностью и размытием, чтобы передать глубину. Например, рассмотрим уведомление в Superhuman:

Чисто белый текст на чистом чёрном фоне создаёт максимально возможную контрастность: 21: 1. В количественном выражении доступности WCAG это мечта.

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

Людям с астигматизмом (примерно 50% населения) труднее читать белый текст на чёрном, чем чёрный текст на белом.

Частично это связано с уровнями освещённости: при ярком дисплее (на белом фоне) радужная оболочка закрывается немного больше, уменьшая эффект «деформированной» линзы; с тёмным дисплеем (чёрный фон) радужная оболочка открывается, чтобы получить больше света, а деформация линзы создаёт гораздо более размытый фокус на глазу.

В Superhuman мы должны быть особенно осторожны с халязионом, так как наше приложение очень тяжёлое для текста. Мы устанавливаем для белого текста непрозрачность 90%, чтобы тёмный фон сливался. Это уравновешивает контраст и яркость, так что приложение легко читается в самых разных условиях освещения.

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

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

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

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

Ещё больше статей, интервью с дизайнерами и другой полезный контент вы можете найти в моём Telegram-канале: @dezzigners.

Источник: https://vc.ru/design/88380-kak-sozdavat-voshititelnye-temnye-temy

Как включить тёмную тему (фон) на компьютере: в браузере, в окнах Windows, , Word

Темные темы

Доброго дня!

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

Это особенно актуально, если у вас уже не идеальное зрение и вы работаете ночью (когда яркий белый свет от экрана быстро утомляет зрительный орган…).

Кстати! Темные темы экономят заряд батареи. Это особенно актуально, если вы работаете за ноутбуком.

Собственно, в этой заметке я хочу показать, как можно включить темный фон в различных часто-используемых приложениях и окнах Windows. Думаю, тем, кто сталкивается с усталостью глаз — заметка может весьма помочь (по крайней мере попробовать советы из нее, наверное, стоит).

И так…

Источник: https://ocomp.info/vklyuchit-temnuyu-temu.html

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.