Почему люди так любят темную тему для смартфона
Все чаще и чаще мы слышим вопросы о том, когда в том или ином приложении появится темная тема. На фоне этого статьи о ее появлении собирают большое количество просмотров, которое подтверждает интерес людей к данной теме. Одно время даже гулял мем про темную тему, который то ли высмеивал интерес публики к ней, то ли наоборот подтверждал, что она нужна. Вопрос в том, почему ТТ, как ее сокращенно называют, так глубоко проникла в умы пользователей по всему миру, словно коронавирус, от которого все уже успели немного подустать. Если вы тоже задавались вопросом, когда что-то получит тему, или хотели бы, чтобы разговоров о ней было поменьше, нам есть, что обсудить.
Многие хотят, чтобы так.
В чем секрет популярности темной темы
Найти точного ответа на этот вопрос у меня не получилось. Я очень хотел найти мнения психологов, маркетологов, дизайнеров, да кого угодно, хоть НЛПшников, будь они неладны, но внятного мнения так и не увидел. Пришлось ходить по форумам, комментариям и нашему Telegram-чату и собирать мнения простых людей. В итоге, вот до чего я дошел в своем поиске.
Темная тема на OLED дисплее
В первую очередь, все говорят, что темная тема хороша на OLED-экранах, которых в последнее время становится все больше. Тут я могу только полностью согласиться. Это действительно смотрится эффектно. Особенно в полной темноте, когда буквы на экране буквально парят в воздухе. В остальных случаях разница не настолько заметна. Просто ты лучше видишь, что у тебя четкий черный цвет.
Настроили бы смартфон так? Или белый фон лучше?
Темная тема бережет глаза
Считается, что экран с темной темой не просто хорошо выглядит, но и бережет глаза, если пользоваться им в темноте. Как раз из-за того, что в глаза не бьет белый поток света, как из прожектора. Тут немного спорно, так как многие все равно утверждают, что их глаза даже при использовании темной темы устают от экрана в темноте. Кроме этого пока никто не смог нормально опровергнуть информацию о том, что OLED-экраны в принципе вреднее для глаз, чем IPS из-за бОльшего мерцания.
Пока меньшим из зол для глаз при использовании смартфона в темноте является выбор ночного режима с приглушенным синим спектром на IPS-экране. А еще лучше просто не пользоваться в экранами в темноте. Даже телевизор и компьютер сильно портят зрение, когда бьют из темноты ярким встречным потоком. Когда в помещении светло, глаз сам адаптируется к яркому освещения и не так сильно напрягается. С этим можно спорить, но со временем действительно начинаешь это чувствовать. Если кто-то говорит, что у него такого нет, надо просто немного подождать — появится.
Темная тема выглядит стильно
Кроме описанных выше преимуществ по мнению пользователей, есть еще одно. Оно заключается в том, что темная тема выделяет его владельца на фоне остальных. Хотя в последнее время ситуация немного изменилась, но многим все равно нравится, как выглядит черная картинка на экране смартфона. Есть в этом что-то современное и прорывное. Так думают многие.
В целом это действительно выглядит стильно.
Темная тема более информативная
Столкнулся я и с мнением, что темная тема, если она хорошо прорисована, является более информативной. Сторонники этого мнения утверждают, что это эволюционное развитие интерфейса, которое позволяет считывать информацию быстрее и правильнее. Возможно, в этом что-то есть, но на счет развития не очень согласен. Темная тема у меня была еще на КПК HP iPaq 4700 около пятнадцати лет назад. Тогда никто не говорил, что это тренд будущего. Просто люди читали книги с темной подложкой, если им это нравилось. Сейчас мало что изменилось, кроме трендов и увлечений.
С другой стороны, нет ничего плохого в том, что дизайнеры пробуют и придумывают что-то, что нравится людям. Хотя, я больше склонен к тому, чтобы дизайнеры сами предлагали инновации, а не слушали толпу, которая зачастую сама не знает, что хочет. В итоге может получиться, как в анекдоте про глухонемого деда, который поймал золотую рыбку и теперь у него есть гитара, грудь и лыжные палки.
Так может получиться, когда дизайнеры и разработчики идут на поводу у пользователей.
Когда появится темная тема для всех приложений?
Проблема распространения темной темы в том, что недостаточно просто сделать белый фон черным, а черные буквы белыми. Для полной адаптации надо проделать большую работу. Потребуется не только работа дизайнера, но и программиста. Они должны будут придумать и реализовать новый дизайн и работу элементов. Все должно быть видно и в некоторых случаях приложения придется буквально написать заново.
Не игнорируйте наш новостной канал в Telegram. Там очень много всего интересного.
Многие крупные продукты уже сделали это, но некоторые полулюбительские приложения точно еще долго будут адаптироваться или просто выпускать интерфейс, от которого будет рябить в глазах и болеть голова. Я лично встречал такие примеры. При этом, если приложения еще как-то позволяют адаптироваться, то некоторые сайты, которые поддерживают темную тему, это настоящая боль. Даже мой не особо требовательный дизайнер внутри стучит отверткой по батарее и просит выключить это уродство.
Темная тема не всегда смотрится хорошо.
Есть примеры приложений, которые хорошо работают с темной темой, но адаптированы как-то не полностью. Например, приложения YouTube и Яндекс.Карты на iOS при запуске выдают заставку белого цвета и только потом открывают темный интерфейс. Такой колорит мне вообще непонятен.
Какими будут интерфейсы будущего
Ни для кого не секрет, что все идет к повсеместному внедрению AR в нашу жизнь. В чем-то это действительно будет удобно, например, при использовании очков для получения дополнительной информации, но где-то проще будет пользоваться по старинке. В любом случае, в то, что со временем интерфейсы станут прозрачными, в целом верится.
Проблема в том, что даже при прозрачном интерфейсе надо будет делать подложку под буквы для того, чтобы они лучше читались. Вот и вопрос, какой она будет. Мне кажется, что, скорее всего, она будет полупрозрачной, а ее оттенок будет адаптивным и станет подстраиваться под окружающие объекты. Если подложки не будет, то в некоторых случаях считывание информации будет тем еще челенджем.
Давайте обсудим в комментариях, как вы относитесь к темной теме. Важно мнение каждого человека. Чем их будет больше, тем лучше. Очень хочется хотя бы в паре слов узнать мнения за и против темной темы. А пока поучаствуйте в опросе ниже.
Темный режим. Факторы создания темных сайтов и приложений
Темный режим — один из самых главных тенденций в дизайне, и бренды мирового класса, такие как Instagram, Google, WhatsApp, Twitter и Apple, уже во всю используют эту фичу в своих интерфейсах. Давайте посмотрим, что делают эти ведущие бренды и как вы можете использовать пользовательский интерфейс в темном режиме в своих собственных проектах. Вы узнаете о плюсах и минусах темного режима и основных рекомендациях по проектированию для темного режима.
Что такое темный режим?
Темный режим — это пользовательский интерфейс, который использует темный цвет — обычно черный или оттенок серого — в качестве основного цвета фона. Это изменение стандартного белого интерфейса, который дизайнеры использовали в течение десятилетий. В ответ на увеличение экранного времени разработчики обнаружили, что темные интерфейсы помогают справиться с усталостью глаз, особенно в условиях слабого освещения или в ночное время. Меньшее напряжение глаз означало меньше головных болей и лучший опыт работы.
Плюсы использования темного режима
Мало того, что темный режим легок для глаз (если все сделано правильно), так еще он экономит заряд батареи. Сейчас мы сравним практическое применение темного режима со светлым.Уменьшает нагрузку на глаза
Уменьшает нагрузку на глаза
Все, кто работает онлайн, сталкиваются с такой проблемой. Синдром компьютерного зрения включает боль в глазах, помутнение зрения, двоение в глазах, головные боли, боль в шее / спине и многое другое. Когда дело доходит до работы с данными, темный режим может помочь уменьшить нагрузку на зрение. Разработчики давно поняли эту тему и стали работать с кодом только в тёмном интерфейсе.
Увеличивает видимость при слабом освещении
Наверняка, вы знаете как неприятно посреди ночи включить белый экран, однако при использовании темного экрана ваши глаза больше адаптируются к свету. Тот же принцип работает с людьми, работающими перед экраном компьютера поздно ночью или рано утром. Темный режим уменьшает этот яркий свет и облегчает просмотр контента в условиях недостаточной освещенности.
Экономит заряд батареи
Некоторые цифровые гаджеты с OLED-экранами могут отключать черные пиксели, когда они не используются. Темный режим использует увеличенное количество черных пикселей, что вынуждает устройство использовать меньше энергии.
Добавляет акценты
Пользовательский интерфейс в темном режиме может повысить фокус, направляя концентрацию на контентные области вашего интерфейса, позволяя контенту выделиться, а фон исчезнет.
Минусы использования темного режима
Как и все, темный режим имеет свои недостатки. Давайте познакомимся с причинами, по которым темная тема может не помочь вашим целем.
Уменьшает эмоциональную связь
Яркие цвета могут создавать яркие эмоции. Если это то, что ищут ваши зрители, то затемнение цветов может создать для них умственный барьер. Им будет труднее установить эмоциональную связь с темной темой.
Мало контрастные цвета могут быть трудно читаемыми
Если вы не получаете правильные цвета и контрасты при разработке веб-сайта или приложения с темной темой, это может затруднить чтение текста, поэтому помните об этом при создании приложения или веб-дизайна в темном режиме .
Как использовать темный режим в дизайне
Темный дизайн моды может работать где угодно. От мобильных приложений до умных часов и телевизионных интерфейсов — эта тенденция дизайна может продвинуть ваш бренд вперед. Вот несколько советов по разработке веб-сайта или интерфейса темной темы:
Выделите свою отрасль
Темный режим интерфейса также полезен для улучшения конкретных отраслей. Например, бренды, ориентированные на ночную жизнь и развлечения, идеально подходят для темного режима, потому что их содержание высокой энергии часто сочетается с темным фоном в реальной жизни.
Генерация эмоций
Пытаетесь создать определенный эмоциональный отклик? Плохая видимость создает любопытство и усиливает эмоциональное напряжение, темный режим может быть идеальным средством для вашего бренда.
Символ статуса
Если вы хотите создать ощущение статуса, темный интерфейс может быть эффективным инструментом. Более темные цвета вызывают эмоции, связанные с роскошью и достатком. Если вы хотите привлечь внимание к тонкому мастерству, рассмотрите темный интерфейс.
Революция темной темы только начинается. Означает, что это идеальное время, чтобы освоить темноту и проявить творческий подход.
Темная тема — просто тренд или реальный инструмент для повышения вовлеченности пользователей
���� Это блог студии Heads and Hands
Мы разрабатываем цифровые экосистемы и супераппы. Рассказываем про пользовательский опыт и помогаем бизнесу стать лидером рынка.
���� Вступайте, чтобы быть в курсе
���� Заглядывайте к нам в Telegram
В 2022 году темную тему поддерживают все соцсети и мессенджеры — WhatsApp, ВКонтакте, Telegram и другие. Ее добавляют в свои интерфейсы стриминговые сервисы, маркетплейсы и банки.
Несмотря на растущую популярность темную тему все еще воспринимают неоднозначно. Компании уверены — такой режим снимает напряжение с глаз, экономит заряд аккумулятора и помогает пользователям сконцентрироваться на работе. Ученые не согласны — восприятие текста на темном фоне ухудшается, пользователям сложнее его читать.
В статье разберем плюсы и минусы темной темы и узнаем, стоит ли тратить деньги на ее разработку.
В отличие от жидкокристаллических экранов OLED-дисплеи на смартфонах полностью выключают пиксели на месте черного цвета. Например, если на странице черный фон и светлый текст, то OLED-дисплей подсвечивает пиксели только для текста. Так он снижает расход батареи: аккумулятору не нужно расходовать энергию на подсветку и он дольше держит заряд.
Например. Google сравнил энергопотребление iPhone 7 с ЖК-экраном и Pixel с OLED-дисплеем. На смартфонах открыли Google Maps в темном режиме и оценили, сколько энергии расходуют устройства.
Pixel с OLED-дисплеем в темном режиме расходовал энергии почти в три раза меньше, чем в светлом. А iPhone 7 расходовал 230 мА в обоих режимах. Таким образом включенный темный режим на OLED-дисплеях позволил сэкономить 63% заряда.
Темная тема помогает сосредоточиться при работе с текстом. Нужный контент выделяется, а элементы интерфейса затемняются и не мешают — считают в Apple.
Цвета интерфейса в темном режиме нужно заменять на менее насыщенные, так текст и изображения не будут резать глаз — рекомендует Google в гайдах Material Design.
С темным экраном легче работать в условиях низкой освещенности — данные Google. Например, большинству разработчиков удобнее писать код на темном фоне. Если включить темную тему ночью, то свет от монитора будет не таким ярким и глаза меньше устают.
Томас Штайнер, DevRel-инженер в Google, спросил разработчиков, как часто они используют темную тему. Большинство из них ответили, что им удобнее работать именно с темным интерфейсом.
На белом фоне пользователь лучше понимает текст и быстрее находит ошибки — эксперимент Сюзанны Майр из немецкого Университета Пассау. Она проверила, влияет ли цвет фона текста на когнитивные способности.
Текст на темном фоне сложнее читать из-за того, что он слишком яркий и глаза больше напрягаются — данные немецких ученых.
Например, людям с астигматизмом труднее воспринимать белый текст на черном фоне — доказали в Ванкувере. Зрачок расширяется и текст кажется человеку размытым. Пользователь вынужден напрягать зрение и пристальнее вглядываться в экран.
Но, несмотря на доводы ученых, часть пользователей все равно считают темный режим удобнее светлого и используют его. А разработчики сайтов, приложений и операционных систем добавляют функцию переключения на темный интерфейс.
Четкого ответа нет. Бренды скрывают или не знают число пользователей, предпочитающих темную тему светлой. А исследований, связывающих влияние темного режима на вовлеченность пользователей, пока нет. Тем не менее некоторые компании доказали, что он повышает метрики приложения.
Исследователи из бизнес-школы шведского университета Умео проверили, как темный режим влияет на визуальную привлекательность постов в Facebook*.
Ученые опросили 157 человек в возрасте от 17 до 27 лет. 90 респондентов хоть раз пользовались соцсетью в темном режиме. 22 человека ответили, что он визуально приятнее и снижает нагрузку на глаза. У 56 человек темный интерфейс был включен постоянно. И они проводили на Facebook* в среднем на час больше, чем пользователи, предпочитающие светлую тему.
Бразильская медиакомпания Terra в декабре 2021 года заметила, что показатель отказов на десктопе выше, чем в мобильном приложении.
В приложении на Android показатель отказов со светлым и темным режимом был одинаковым — по 26% . А вот на десктопе отказов было почти в два раза больше: 13% среди пользователей, использующих светлый режим и 24% — темный.
Terra в тестовом режиме добавила темную тему на сайт и в приложение. И сравнила вовлеченность пользователей при работе со светлой и темной темами.
На Android показатели отказов остались прежними. Но количество страниц и сеансов удвоилось с 2,5 до 5, когда пользователи познакомились с темной темой.
На десктопе обе метрики улучшились при показе темной темы: показатель отказов снизился с 27% до 11%, а количество страниц за сеанс увеличилось почти втрое — с 3,7 до 10.
В целом темная тема помогла снизить показатель отказов на 60%, а количество страниц за сеанс увеличилось на 170%. Terra сочла эксперимент удачным и добавила темный режим на сайт.
В 2018 году соцсеть добавила темную тему в приложение на iOS. На Android функция появилась лишь год спустя. VK превратил релиз темного интерфейса на Android во флешмоб. Пользователь должен был прокомментировать записи друзей или сообществ фразой «темная тема». После этого он видел на странице уведомление об активации темного режима. За первые сутки функцию активировали 1,5 млн пользователей.
В 2022 году пользователь супераппа VK включает темную тему в разделе «Настройки»: выбирает «Внешний вид» — «Темы» — «Темная».
VK считает, что пониженный контраст и темный фон помогают пользоваться приложением при слабой освещенности. Чтобы снизить контраст между фоном и текстом VK сделал цвет фона на один тон светлее черного, а текст сделал серым.
VK сузил спектр серых оттенков в темной теме. Сделал шапку и кнопки монохромными. Акцентные элементы оставил синими, но снизил насыщенность. Все это уменьшает нагрузку на глаза.
В результате каждый пятый пользователь начал использовать темную тему.
В октябре 2020 года Тинькофф добавил темную тему в суперапп. Пользователь выбирает тему фона в разделе «Еще» — «Приложение» — «Оформление» — «Всегда темная тема».
Банк разработал темную тему после обращений клиентов. Дизайнеры Тинькофф сделали основной фон приложения черным, а виджеты немного осветлили. Пользователь видит темно-серые виджеты на черном фоне и не слепнет от яркости. Их цвет соответствует гайдам Material Design и снижает нагрузку на глаза.
Тинькофф превратил белый текст в светло-серый как и VK. А цвет иконок в темной теме заменил на менее насыщенный.
Темная тема была в топе запросов не только от физлиц, но и от бизнес-клиентов — рассказали в Тинькофф. Поэтому в декабре 2021 года банк внедрил ее в приложение Тинькофф Бизнеса.
Большинство пользователей синхронизируют тему с установленной на телефоне — сообщили нам в Тинькофф Банке. При этом приложение не отслеживает, какая тема выбрана на смартфоне у пользователя.
Пользователи Ozon тоже могут переключаться между светлой и темной темами. Для этого нужно перейти в раздел «Мой Ozon» на нижней панели и выбрать «Цвета приложения» — «Темная тема».
Разработчики сделали темно-серый фон и черные блоки в каталоге. Белый текст заменили на нейтральный серый, чтобы он не светился на темном экране. Но цвет иконок оставили прежним — в результате экран кажется перегруженным.
С одной стороны темная тема увеличивает стоимость фронтенд-разработки в среднем в полтора раза. Но с другой, помогает завоевать лояльность пользователей за счет кастомизации и повысить некоторые важные для доходов метрики.
* Facebook признана экстремистской организацией и запрещена в РФ.
Спасибо за внимание!
Тёмная тема — это тема. Я всегда в теме.
Люблю темную тему, но не потому что она важная, и экономит заряд (всё это бредни фантазёров, лично проверил на pixel 3), а потому что темная тема не раздражает глаза. Приятней смотреть в экран, особенно ночью!
Сидишь такой, работаешь, а потом какая-то фигня на белом фоне. Прощай глаза��
Для баз тоже использую выделения цветом, чтобы понимать в какой ты среде ��
Спасибо, статья интересная. Отдельное спасибо за сноски на исследования.
Сам тёмную тему нигде не использую, хотя занимаюсь веб-разработкой. Раза 2-3 пытаются войти в тренд тёмной темы в редакторе кода, но не смог, разражали яркие буквы на тёмном фоне. На смартфоне в Telegram пробовал, но не зашло. Возможно, конечно, просто непривычно.
Сложно для меня, темная тема
Не представляю себе как можно разрабатывать на светлом фоне.
Несколько раз пытался перейти на темную тему — глаза от нее больше устают. Разработчик, использую светлую.
А когда все яркое, то это блаженно сказывается на глазках.
Results:
A positive polarity advantage was observed in proofreading performance. Importantly, the positive polarity advantage linearly increased with decreasing character size.
Conclusion:
The findings are in line with the assumption that the typically higher luminance of positive polarity displays leads to an improved perception of detail.
Хз, укладывается в то, что главное для разбора деталей это констраст и удобный размер.
Темная тема это стильно, а остальное как-то похуй. Если UI нечитабельное говно, то никакая светлая тема его не спасет.
Especially with small font sizes, negative polarity displays should be avoided.
Опять же чушь какая-то. Если детали разбираются хуже, то это не значит, что зрению наносится урон или существенно замедляется чтение или что-либо еще. Например, глаза привыкли к элементам UI и уже не разбирают что там конкретно в деталях. А текст для чтения всегда делают по типографическим канонам, который позволяет делать белым по черному, так как главное там размерность и контрастирование фона и текста, чтобы ускорять разбор символов. Опять же, какие детали в тексте можно разглядывать. На счет слабовидящих, возможно, что актуально. Но это СТИЛЬ в темной теме, а не СПЕЦИАЛЬНЫЕ ВОЗМОЖНОСТИ для удобства чтения в темноте. Для удобства чтения есть динамическая яркость экрана. Кароче, я ебал-дремал высрали тут.
Темная тема или Dark Mode: очередной тренд или важная необходимость
Темная тема – один из трендов, который сейчас набирает большую популярность. Многие известные сайты и приложения добавляют возможность использования темной темы в своем интерфейсе. После таких гигантов, как Apple, Android и Google, темную тему начали добавлять социальные сети (Instagram, VK, Facebook, Twitter), а также многие мессенджеры (What’s App, Viber, Telegram).
Хотим сразу отметить, что темная тема нравится далеко не всем. В первую очередь это связано с восприятием информации, в частности текста. Многим сложно различать светлые буквы на темном фоне. Но почему же тогда все большее количество различных сервисов переходят на «темную сторону»?
Преимущества темной темы
Вот несколько причин, почему темная тема стала настолько востребована:
1. Повышение восприятия информации
Некоторым пользователям проще воспринимать светлый текст на темном фоне. По большому счету это связано с повышенной контрастностью и уменьшением негативного пространства за счет темных оттенков. Но нет никаких доказательств, что темная тема лучше влияет на восприятие текста. По результатам многочисленных исследований, всегда выигрывает, наоборот, светлая тема.
Единственное, что можно отметить: темная тема действительно снижает нагрузку на глаза в ночное время. В неосвещенном либо слабоосвещенном помещении контраст с темным фоном почти незаметен. Глаз человека становится менее чувствителен к свету, нет резкого перехода между цветами. За счет этого и снижается напряжение с глаз.
2. Экономия заряда батареи
Это, конечно, явный плюс темной темы. Из-за того, что экран излучает меньше света, энергопотребление вашего смартфона снижается. Компания Google проводила по этому поводу исследование, которое показало, что, например, темный режим в приложении YouTube позволяет сэкономить от 15 до 63% времени автономного использования устройства. Согласитесь, иногда и 10% заряда очень важны.
3. Лаконичный дизайн
Большинству пользователей просто нравится визуал темной темы. Темные цвета передают значение премиум-контента: они делают интерфейс более стильным, привносят нотку роскоши и богатства.
Также зачастую пользователь просто хочет взглянуть на продукт по-новому. Здесь уже дело вкуса. Возможно, интерфейс проявит себя с другой стороны, и темная тема поможет выявить некоторые плюсы и минусы.
Что лучше: светлая тема или темная тема
Изначально все интерфейсы были только со светлым оформлением. Все мы, читая книгу, привыкли видеть там черные буквы на белом фоне. Такое восприятие информации является обычным для нашего взгляда.
Конечно, интерфейс со светлой темой должен обязательно присутствовать на сайте или в приложении. Если по умолчанию стоит темная тема, необходима возможность переключения на светлую тему, т.к. ранее мы говорили о том, что не каждому пользователю нравится смотреть на темный экран.
Темную тему очень сложно реализовать. Недостаточно просто сменить белый цвет на черный или наоборот. Совсем не каждый интерфейс подходит для темной темы. Есть некоторые элементы, которые не сочетаются с темным дизайном. Также всегда нужно учитывать ЦА, тематику, фирменные цвета и т.д.
Не стоит добавлять темную тему в случае, если:
- В качестве основного контента выступает текст
- Используется большая цветовая палитра
- Сайт/приложение имеет большое количество элементов
Темную тему можно применять, когда:
- Дизайн выполнен в стиле минимализм
- Предполагается использование сайта/приложения в ночное время
Все описанное выше, конечно, относительно, и нужно смотреть на каждый проект индивидуально. Главное – не стоит забывать, что удобство использования важнее всего. Если вы разработаете темную тему, но пользователь не будет в ней так же хорошо ориентироваться, как в светлой, считайте, что ваша работа была проделана зря.
Больше статей на схожую тематику:
Что необходимо учитывать при разработке темной темы
Давайте разберемся, каким основным принципам нужно следовать, чтобы грамотно разработать темную тему для веб-ресурса.
1. Соблюдение темного контраста
При разработке темной темы не стоит брать за основу чисто черный цвет #000000. Его рекомендуется выбирать для текста. Фоны и подложки лучше делать темного-серого цвета, немного уходящего в синий. Рекомендуемый оттенок #121212.
Также необходимо соблюдать глубину при подборе темных оттенков. Особенно это касается мобильных приложений. Такой интерфейс содержит много однотипных элементов. При неправильном цветовом ранжировании их относительно друг друга, вы рискуете сбить пользователя с толку. В данном случае сильно пострадает визуальное восприятие. Условно скажем, чем дальше расположение элемента от пользователя, тем темнее он должен быть. В светлой теме такой эффект создается с помощью теней, но в темной теме их использование невозможно.
Интерфейс Dashboard UI/UX Design имеет фон темнее, чем меню слева, строка поиска и области с различными показателями
Пример интерфейса Dashboard Design, выполненного в темных серо-синих цветах
2. Баланс ярких цветов
При выборе акцентных цветов для темной темы старайтесь избегать слишком насыщенных, ярких цветов. Они создают резкий контраст с темным фоном, за счет чего ухудшается цветовое восприятие. Основные элементы интерфейса (кнопки, иконки, виджеты и т. д.) должны быть хорошо различимы.
Для подбора цветов можно использовать такие приложения, как Color Tool и Coolors. С их помощью вы без труда подберете нужный цвет, который будет сочетаться с различными оттенками темного цвета. Также есть возможность заранее посмотреть, как будет выглядеть примерный интерфейс приложения.
Дизайн темной темы My Wallet с яркими элементами
В качестве акцентов для Motime Resolution App используются иллюстрации и элементы с градиентом
3. Читабельность текста
Цвет шрифта также не стоит выбирать чисто белый #ffffff. Безусловно, его можно применить для основного текста. Но здесь тоже существует система ранжирования: без разграничения текстовых цветов так же, как и для элементов, пользователю сложно будет воспринимать информацию.
Например, для дополнительного описания, неактивного текста можно использовать прозрачность либо оттенки светло-серого цвета. Важные заголовки стоит выделять акцентными цветами. Но главное – не переборщить. Не забываем, что текст обязательно должен хорошо читаться.
На платформе Charles C. D. дополнительные текстовые блоки имеют непрозрачность
Обилие текста на Trading Platform разграничивается фигурами и линиями, также применяется непрозрачность
В разработке темной темы можно ориентироваться на различные гайдлайны. Такие есть у Apple – Human interface Guidelines, Google – Material Design Dark Theme и Microsoft – Designing for Dark Mode.
4. Корректное отображение элементов
После подбора всех элементов для темной темы необходимо проверить правильное их отображение. Сайт или приложение всегда нужно тестировать с различных устройств, т.к. некоторые экраны могут передавать один и тот же цвет по-разному. Поэтому очень важно проверить, правильно адаптирован ваш сайт под мобильные или нет. О том, как это сделать, читайте тут.
На данном этапе есть возможность изменить выбранные цвета. Это обезопасит вас от риска, что вся работа была проделана зря. И не стоит забывать о возможности выбора светлой темы – благодаря статистике вы узнаете, какой процент пользователей применяет в настройках темную тему, а кому по нраву нововведение.
Интерфейс GASENERGY для мобильного приложения отличается от версии для десктопа. Это необходимо для правильного отображения всех элементов.
Сайт Mira Chernova выполнен в минималистическом стиле. Различия между десктопной и мобильной версии не слишком заметны, но все же они есть.
Примеры сайтов с темной темой
Ниже мы сделали подборку сайтов, которые имеют темный дизайн. Мы не хотели показаться банальными, поэтому выбрали ресурсы, которые выделяются среди остальных. Каждый имеет свою уникальную изюминку. Вдохновляйтесь =)
1. The Fabricant
Сайт имеет интересную задумку – возможность путешествовать в пространстве. С помощью стрелочек-указателей мы можем перемещаться в любом направлении, а не просто скролить сайт вниз, как обычно. Сам дизайн напоминает космическую локацию, которая хорошо ассоциируется с тематикой сайта.
2. Dogstudio
Бесспорно, этот сайт разрабатывали любители собак. Несмотря на то, что на сайте используются темные цвета и 3D элементы, все кажется милым, уютным и необычным.
3. L’atelier
Скроллинг помогает нам взаимодействовать с сайтом, за счет чего воспринимать информацию гораздо интереснее. Это отличное решение, позволяющее привлечь пользователя к просмотру объемного контента. Плюс несложная анимация не отвлекает от визуального восприятия.
4. Lestudiodigital
В качестве основного элемента на сайте выступает текст и фотографии. Данные компоненты хорошо подходят для портфолио дизайн-студий – здесь нет ничего лишнего. Ненавязчивая анимация не отвлекает от контента – посетитель фокусирует свое внимание на выполненных работах.
В другой в нашей статье, вы можете посмотреть еще больше примеров сайтов-визиток.
5. AirPods Pro
Это сайт-визитка определенного товара. По мере прокрутки страницы пользователь знакомится с продуктом. Проработанная модель наушников помогает очень точно его визуализировать, а дополнительная анимация дает понять, как все устроено внутри.
Нравится статья? Тогда смотрите наши курсы!
6. Путешествие в темноте
Интерактивный проект, созданный для людей со слабым зрением. По мере скроллинга на сайте меняется изображение, а также запись голосового рассказа. Кроме того, на сайте присутствует функция управления голосом.
7. Wired
Основным элементом на сайте выступает движущаяся модель робота, что выделяет его среди других. Но, признаемся, такая анимация влияет на скорость загрузки. В разделе каталога темный фон выглядит достаточно выигрышно, т.к. товары на его фоне смотрятся по-контрастному круто.
8. CRRTT
При прокрутке сайта мы также можем наблюдать анимацию фигур и типографики. Красный на черном выглядит лаконично и контрастно, что позволяет сосредоточиться на основной информации.
9. Goengine
Ваш курсор является подвижной точкой, что обеспечивает взаимодействие с сайтом. При его наведении меняется текст, иконки, кнопки обводки и т.д. Все просто и со вкусом.
10. Andrew Leguay
Еще один пример сайта-визитки для портфолио. Сайт состоит из обилия анимированной типографики и фотографий. При малейшем наведении курсора или прокрутке большинство элементов оживают.
Примеры роста кликов, конверсий, заказов и прибыли:
Вывод
На первый взгляд разработка темной темы не является слишком сложной задачей. Многие ее воспринимают как тренд и стремятся внедрить на свой ресурс без веских причин. В первую очередь необходимо провести тщательный анализ вашего продукта. После этого – выдвинуть действительно значимые аргументы для добавления темной темы.
Dark Mode больше подходит для приложений. Как правило, они имеют минималистичный дизайн и небольшое количество цветов. На сайтах реализовать темную тему сложнее, ведь на это влияет обилие контента: красочные изображения, сочетание нескольких цветов, использование различных шрифтов и т. д.
Перейти на «темную сторону» – смелое решение. Если решились на такой шаг, надеемся, вы нашли веские причины для этого.
Если вам необходимо создать темную тему для вашего сайта, мы придем вам на помощь! Оставьте заявку на нашем сайте – наши специалисты свяжутся с вами и помогут в решении данного вопроса.