Идват мрачни времена

Или какво да имате предвид, когато разработвате тъмен режим за приложение или уебсайт

2018 г. показа, че тъмните режими са на път. Сега, когато сме в средата на 2019 г., можем да кажем с увереност: те са тук и са навсякъде.

Пример за стар зелено-черен монитор

Нека започнем с факта, че тъмният режим изобщо не е нова концепция. Използван е доста дълго време. И едно време, всъщност дълго време, това беше единственото нещо, което използваха: мониторите бяха от сорта „зелено върху черно“, но само защото луминисцентното покритие вътре излъчваше зеленикав блясък, когато беше изложено на радиация .

Но дори след въвеждането на цветни монитори, тъмният режим продължи да съществува. защо е така

Има две основни причини днес всеки втори човек да бърза да добави тъмна тема към приложението си. Първо: компютрите са навсякъде. Накъдето и да погледнем, има някакъв екран. Използваме мобилните си устройства от сутрин до късно през нощта. Наличието на тъмен режим намалява напрежението на очите, когато сте в леглото, преди да си легнете за „последен път“, превъртайки социалната си емисия. мрежи. (Ако сте като мен, „последен път“ може да означава 3-часово превъртане R/EngineeringPorn. Тъмен режим? Да моля! )

Друга причина са новите технологии за производство на дисплеи. Водещите модели на големи компании - Apple, Google, Samsung, Huawei - всички са оборудвани с OLED екрани, които за разлика от LCD дисплеите не изискват подсветка. И това е наистина добра новина за вашата батерия. Представете си, че гледате изображение на черен квадрат на телефона си; с LCD подсветката ще освети целия екран, въпреки че по-голямата част от него е черна. Но когато гледате същото изображение на OLED дисплей, пикселите, които съставляват черния квадрат, просто се изключват. Това означава, че те изобщо не консумират енергия.

Тези типове дисплеи правят тъмните режими много по-интересни. Използвайки тъмен интерфейс, можете значително да удължите живота на батерията на вашето устройство. Вижте фактите и цифрите от срещата на върха за Android Dev през ноември миналата година, за да се убедите сами. Тъмните режими, разбира се, вървят ръка за ръка с промените в потребителския интерфейс, така че нека освежим знанията си!

Тъмни режими 101

Първо: „тъмно“ не е същото като „черно“. Не се опитвайте да замените бял фон с черен, тъй като това ще направи невъзможно използването на сенки. Дизайн като този ще бъде супер плосък (в лош смисъл).

Важно е да имате предвид основните принципи на засенчване/осветяване. Обектите, които са по-издигнати, трябва да имат по-светла сянка, симулирайки реално осветление и засенчване. Това улеснява разграничаването на различните компоненти и тяхната йерархия.

Два еднакви сиви квадрата със сянка, единият на 100% черен фон, другият на #121212. Когато обектът се издигне, той придобива по-светъл нюанс на сивото.

В тъмна тема все още можете да работите с обичайния си основен цвят, стига контрастът да е наред. Нека обясним с пример.

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

Когато един и същ цвят се използва по различни начини, например в текст, ще има проблеми. Опитайте да използвате (много) по-малко наситен нюанс на основния цвят или потърсете други начини за включване на маркови цветове в интерфейса.

Отляво: Червено върху черно изглежда зле. Правилно: намалете наситеността и всичко изглежда добре. — прибл. превод

Същото важи и за всички други силни цветове, които може да сте използвали, като цветове за предупреждение или грешка. Google използва наслагване на 40% бял слой върху цвета на грешката по подразбиране в своите Насоки за материален дизайн при превключване към тъмен режим. Това е доста добра отправна точка, тъй като ще подобри нивата на контраст, за да отговарят на стандартите AA. Разбира се, винаги можете да промените настройките, както сметнете за добре, но не забравяйте да проверите нивата на контраста. Между другото, полезен инструмент за тази цел е плъгинът Sketch - рязък, което показва колко точно контраст има между 2 слоя.

Какво ще кажете за текста?

Тук всичко е просто: нищо не трябва да е 100% черно и 100% бяло и обратно. Бялото отразява светлинни вълни с всякаква дължина на вълната, черното абсорбира. Ако поставите 100% бял текст върху 100% черен фон, буквите ще отразяват светлината, ще се размажат и ще станат по-малко четливи, което ще се отрази негативно на четливостта.

Същото важи и за 100% бял фон, който отразява твърде много светлина, за да се фокусира напълно върху думите. Опитайте да смекчите малко белия цвят, използвайте светло сиво за фонове и текст на черен фон. Това ще намали напрежението в очите, предотвратявайки пренапрежението им

Тъмният режим е тук и няма да изчезне

Времето, което прекарваме пред екраните, непрекъснато расте и всеки нов ден нови екрани се появяват в живота ни, от момента, в който се събудим, докато заспим. Това е сравнително ново явление; очите ни все още не са свикнали с това увеличаване на времето пред екрана късно вечер. Тук влиза в действие тъмен режим. С въвеждането на тази функция в macOS и Material Design (и най-вероятно в iOS), вярваме, че рано или късно тя ще стане стандартна във всички приложения, както мобилни, така и десктоп. И е по-добре да сте подготвени за това!

Единствената причина да не прилагате тъмен режим е, когато сте абсолютно 100% сигурни, че вашето приложение се използва изключително на ярка дневна светлина. Това обаче не се случва често.

Струва си да споменем няколко неща, които ще изискват специално внимание при прилагането на тъмен режим, извън основните принципи, обобщени по-рано.

От гледна точка на достъпност тъмният режим не е от най-удобните, тъй като контрастът като цяло е по-слаб, което от своя страна изобщо не подобрява четливостта.

източник

Но представете си, че се приготвяте за лягане, наистина искате да спите, но точно преди да заспите, си спомняте, че трябва да изпратите на някого изключително важно съобщение, което не може да чака дори една нощ. Вземате телефона си, включвате го и ААААААА... светлият фон на вашето iMessage ще ви държи будни още 3 часа. Докато светлият текст на тъмен фон не се счита за най-достъпен, наличието на тъмен режим точно тази секунда би увеличете удобството с милион. Всичко зависи от ситуацията, в която потребителят се намира в момента.

Ето защо ние вярваме автоматичен тъмен режим толкова готина идея. Вечерта се включва и сутринта се изключва. Потребителят дори не трябва да мисли за това, което е много удобно. Twitter свърши страхотна работа с настройките си за тъмен режим. Освен това имат както само тъмен режим, така и още по-тъмен режим за всички тези OLED екрани, спестявайки батерията и всичко свързано с нея. Тук е важно да се отбележи: дайте на потребителя възможност да превключва ръчно, когато пожелае: няма нищо по-лошо от автоматичната промяна на интерфейса без възможност за превключване обратно.

Twitter има автоматичен тъмен режим, който се включва вечер и се изключва сутрин.

Освен това, когато разработвате тема, си струва да имате предвид, че някои неща просто не могат да бъдат направени тъмни.

Вземете текстов редактор като Pages. Можете да направите интерфейса тъмен, но самият лист винаги ще бъде бял, симулирайки истински лист хартия.

Страници с активиран тъмен режим

Същото важи за всички видове редактори за създаване на съдържание, като Sketch или Illustrator. Въпреки че интерфейсът може да бъде направен тъмен, таблото, с което работите, винаги ще бъде бяло по подразбиране.

Скицирайте в тъмен режим и все още имате ярко бяло табло.

Така че независимо от приложението, ние вярваме, че тъмните режими ще станат естествени за операционната система, която използвате, което означава, че е най-добре да се подготвите за бъдещето. ще бъде тъмно. 

Ако искате да научите повече за разработването на тъмни потребителски интерфейси, не забравяйте да разгледате указанията Материал Design, това беше нашият основен източник на информация за тази статия.

Източник: www.habr.com