Дизайн в темному режимі

Назад до Записи
Дизайн в темних тонах

Дизайн в темному режимі

Подбайте про тьмяне освітлення, розслабте очі і заощаджуйте енергію. Темний режим - одна з найбільш популярних тенденцій в дизайні, і такі бренди світового рівня, як WhatsApp, Instagram, Google, Facebook і Apple, вже сіли на поїзд дизайну темного режиму.

Ілюстрація дизайну додатки темної теми
 

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

Друкований маркетинговий матеріал

Що таке темний режим?
-

Темний режим - це призначений для користувача інтерфейс (UI) при слабкому освітленні, в якому в якості основного кольору фону використовується темний колір - зазвичай чорний або відтінок сірого. Це повна протилежність стандартному білому інтерфейсу користувача, який дизайнери використовували десятиліттями. У відповідь на те, що у нас збільшилася час використання екрану, розробники виявили, що інтерфейси темних тим допомагають знизити навантаження на очі, особливо в умовах низької освітленості або в нічний час. Менше навантаження на очі означала менше головного болю і кращий досвід роботи.

Дизайн додатка Instagram в темному режимі
Інтерфейс темного режиму Instagram
Дизайн додатка в темному режимі Google Fit

Інтерфейс темного режиму Google Fit

WhatsApp на робочому столі дизайн програми в темному режимі

WhatsApp в інтерфейсі темного режиму робочого столу через додаток What's App

Але в темному режимі насправді немає нічого нового.

Розробка плакатів. 5 правил

Пам'ятайте зелений комп'ютерний код, сиплються дощем на чорному тлі в «Матриці»? Це був натяк на оригінальний темний режим: монохромні монітори старої школи перших комп'ютерів.

Ранній домашній комп'ютер з зеленим текстом на чорному
Ранні домашні комп'ютери з зеленим текстом на чорному були темним режимом OG.

Цей класичний темний вигляд вийшов з моди в 80-х на користь чорного тексту на білому тлі, що імітує чорнило на папері.

Протягом майже трьох десятиліть це було нормою, поки темний режим не повернувся в Windows Phone 7 в 2010 році. Після того, як Google підтвердив, що темний режим економить заряд батареї, в 2018 році вони додали цю функцію в свою ОС Android. Рік по тому Apple Потім був темний режим на iOS і iPadOS.

Темний режим і світлий режим в дизайні додатків для iOS 13
Темний режим в iOS 13 

Плюси використання темного режиму

Темний режим не тільки приємний для очей (якщо все зроблено правильно), але і економить заряд батареї і навіть може бути більш здоровим. Давайте подивимося на практичні переваги темного режиму в порівнянні зі світлим.

Знижує навантаження на очі

Ви не повинні відчувати свої очі. Але будь-який, хто аналізує дані на екрані протягом тривалого часу, знає, що через деякий час ви починаєте це робити. Синдром комп'ютерного зору (CVS) включає біль в очах, нечіткість зору, двоїння в очах, головні болі, болі в шиї / спині і багато іншого. Коли справа доходить до діаграм і графіків, темний режим може допомогти буквально зменшити біль.

Дизайн додатка в темному режимі
цей зелений логотип відмінно поєднується з цим дизайном додатки з темної темою.  

Збільшує видимість при слабкому освітленні

Якщо ви спите, і хтось увімкне яскраве світло, у вас заболить голова. За таким же принципом працюють люди, що працюють перед екраном комп'ютера пізно ввечері або рано вранці. Темний режим зменшує цей яскраве світло і спрощує перегляд контенту в умовах низької освітленості.

Економить заряд батареї

Деякі цифрові гаджети з екранами OLED можуть відключати чорні пікселі, коли вони не використовуються. У темному режимі використовується збільшена кількість чорних пікселів, що змушує пристрій споживати менше енергії.

Читайте також:  Платні медіа

Дає емоційний заряд

Багато користувачів призначеного для користувача інтерфейсу в темному режимі вибирають його з міркувань економії енергії та здоров'я, а не з естетичних міркувань. Темний режим нагадує їм, що вони роблять щось більш здорове, що викликає гарне почуття - на зразок того, що виникає, коли ви завантажуєте свою багаторазову сумку для покупок або пляшку з водою.

запобігає СДВ

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

Мінуси використання темного режиму

Як і всі, у темного режиму є свої недоліки. Давайте познайомимося з причинами, за якими темна тема може бути недоліком для ваших цілей.

Може знизити емоційний зв'язок

Яскраві кольори здатні викликати яскраві емоції. Якщо це те, що шукають ваші глядачі, то затемнення квітів може створити для них ментальний бар'єр. Їм буде важче встановити емоційний зв'язок з темною темою. якщо ваш бренд носить мотиваційний, надихаючий або духовний характер, призначений для користувача інтерфейс в темному режимі може стати азартною грою. Якщо яскраві кольори можуть викликати яскраві емоції, Все може бути навпаки. Отже, хто ваша аудиторія? Не спалюйте їх, якщо вони шукають ліфт.

стискає простір

Кімнати з темними стінами можуть викликати клаустрофобію. На пристрої темний режим може працювати точно так же. Якщо ви намагаєтеся створити відчуття простору, темний інтерфейс може зробити простір менше.

Кольори з низьким контрастом можуть бути складним для розуміння

Якщо ви не правильно розумієте кольору і контрасти при розробці веб-сайту або програми з темної темою, це може утруднити читання тексту, тому майте це на увазі при створенні дизайну електронної пошти, Додатки або веб-сайту в темному режимі.

Як використовувати темний режим в дизайні
-

Дизайн темного режиму може працювати де завгодно. Від мобільних додатків до розумних годин і телевізійних інтерфейсів - ця тенденція в дизайні може просунути ваш бренд вперед. Зробіть це правильно, і темний режим може працювати як гангстери. Зробіть це неправильно, і ваш дизайн може негайно вимкнути користувачів. Ось кілька основних порад під час розроблення темного веб-сайту або інтерфейсу програми:

Коли використовувати темний режим

Підберіть кольори вашого бренду

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

Дизайн додатка в темному режимі
Дизайн додатка в темному режимі  

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

Виділіть свою галузь

Інтерфейс темного режиму також корисний для поліпшення конкретних галузей. наприклад, бренди, Орієнтовані на нічне життя і розваги, ідеально підходять для темного режиму, тому що їх високоенергетичний контент часто поєднується з темним тлом в реальному житті.

Стань мінімалістичним

Якщо естетика вашого дизайну вже мінімалістично з обмеженим вмістом, ваші умови підходять для темного режиму. У ситуації, коли текст є основним вмістом, темний інтерфейс може утруднити читаність. Зазвичай темний режим підсилює візуальний безлад, роблячи захаращений екран ще більш хаотичним.

Читайте також:  Стікери та етикетки.

викликати емоції

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

темна тема веб-дизайну
Темний веб-дизайн  

символ статусу

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

Темна тема Дизайн сайту для бренду розкішних годинників
Елегантний, високоякісний дизайн веб-сайту на темну тему  

Кращі практики для дизайну темного режиму
-

Є певні процеси, які повинні працювати правильно при створенні користувальницького інтерфейсу темного режиму. Зрештою, ви ж хочете, щоб ваш продукт був офігенний, вірно? Давайте відзначимо все прапорці в нашому контрольному списку кращих практик темного режиму:

1. Не йдіть занадто темно

Книжкові видавці не використовують чисто білий папір, тому що контраст з чорним чорнилом занадто різкий. Це змушує жмуритися і може викликати головний біль. Те ж саме і з цифровими пристроями. Тримайтеся подалі від чистого чорного. Складно дивитися на висококонтрасний екран. Хороші кольору темного режиму - це відтінки сірого в поєднанні з ненасиченими квітами.

Дизайн мобільного цифрового журналу в додатку Dark Mode
Темний дизайн додатки  

2. Майте правильний контраст

Фон в темному режимі повинен бути досить темним, щоб з'явився білий текст. Пропозиція від Google Material Design - використовувати рівень контрастності тексту і фону не менше 15,8: 1.

3. обесцветьте кольору.

Тримайтеся подалі від повністю насичених кольорів на темному тлі. На темних поверхнях відтінки часто здаються «вібруючими». Замість цього використовуйте ненасичені кольори, такі як пастельні і приглушені кольори - відтінки з додаванням сірого і білого.

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

 

4. Використовуйте правильні кольору "на"

Що за колір? Той, який відображається поверх елементів і ключових поверхонь. Для написів зазвичай використовуються «включені» кольору. Колір призначеного для користувача інтерфейсу темного режиму за замовчуванням - чистий білий (#FFFFFF). Не використовуйте це. #FFFFFF здається вібруючим при перегляді на темному тлі. Вибирайте світло-сірий колір.

5. Не просто перевертайте

Якщо ви перемикаєтеся в темний режим з стандартного режиму, ймовірно, в вихідної теми є цінні візуальні підказки. Не просто інвертуйте кольору, щоб отримати темну тему. Можливо, ви перетворюєте кольору, мають психологічну мета, В безглузді приглушені кольори. вибирайте колір усвідомлено.

6. Пориньте глибше

Чим вище шар, тим він повинен бути світліше. Це створить візуальну ієрархію в темному режимі, яка йде від найбільш часто використовуваних елементів на вашому дисплеї до найменш використовуваним.

Візуальна ієрархія темного режиму
Більш світлі кольори зверху створюють візуальну ієрархію.  

7. Випробуйте і запропонуйте свободу

Протестуйте як темну, так і світлу версії вашого дизайну. Експериментуйте з кожним стилем і внесіть відповідні зміни на основі відгуків користувачів. Зрештою, переваги людей можуть бути непередбачуваними, тому не навішувати собі на плечі користувачів. Дозвольте їм перемкнути свій дисплей зі світлого режиму в темний. Це дає користувачам можливість контролювати свій досвід і дозволяє їм почувати себе більш індивідуальними.

Ваш помічник в в бізнесі рекламно-поліграфічна компанія "АБЕТКА"

(050) 462-02-45

Поділитися цим записом

Додати коментар

Назад до Записи
Русский Українська