Или на что трябва да обърнете внимание при разработке на тъмен режим на приложението или сайта
2018 година показа: тъмните режими идват. Сега, когато вече сме наполовина през 2019, можем уверено да кажем: те са тук и те са навсякъде.
Първо, тъмен режим не е изцяло нова концепция. Той се използва от доста време. А преди, всъщност, с него единствено се работеше: мониторите бяха "зелено-на-черно", но само защото флуоресцентното покритие вътре излъчваше зеленикаво свечение при въздействието на излъчването.
Но дори и след въвеждането на цветни монитори, тъмен режим продължи да съществува. Защо ли?
Има две основни причини, които обясняват защо днес всеки втори бърза да добави тъма тема в приложението си. Първо: компютри навсякъде. Където и да погледнем, навсякъде има някакъв екран. Използваме мобилните си устройства от сутрин до късна нощ. Наличието на тъмен режим намалява натоварването на очите, когато лежите в леглото, преди сън, „последен път“ прелиствате лентата в социалната мрежа. (Ако сте като мен, то „последен път“ може да означава 3-часово превъртане. . Тъмен режим? Истински, моля!
Още една причина — новите технологии на производството на дисплеи. Водещите модели на големите компании — Apple, Google, Samsung, Huawei — всички са оборудвани с OLED екрани, които, за разлика от LCD дисплеите, не изискват подсветка. И това е наистина добра новина за батерията ви. Представете си, че разглеждате изображение на черен квадрат на телефона си; с LCD дисплея подсветката ще осветява целия екран, въпреки че голямата му част е черна. Но при разглеждането на същото изображение на OLED дисплея, пикселите, които съставят черния квадрат, просто се изключват. А това означава, че изобщо не консумират енергия.
Тези типове дисплеи правят тъмните режими много по-интересни. Използвайки тъмен интерфейс, можете значително да удължите живота на батерията на устройството си. . Тъмните режими, разбира се, вървят ръка за ръка с промени в потребителския интерфейс, така че нека освежим знанията си!
Тъмни режими 101
Първо: «тъмен» не е равен на «черен». Не се опитвайте да заменяте белия фон с черен, тъй като това ще направи използването на сенки невъзможно. Такъв дизайн ще бъде супер плосък (в отрицателния смисъл).
Важно е да имате предвид основните принципи на затъмняване/освещаване. Обектите, които са по-повдигнати, трябва да са по-светли в сянка, имитирайки реално осветление и затъмняване. Така ще бъде по-лесно да различавате различните компоненти и тяхната йерархия.
Два идентично сиви квадрата с сянка, единият на 100% черен фон, другият на #121212. При повдигане обектът придобива по-светъл нюанс на сивото.
В тъмна тема все още можете да работите с обичайния си основен цвят, ако контрастът е в ред. Нека обясним с пример.
В този интерфейс основното действие е голям син бутон в долната лента. Тук няма проблем с контраста при превключване между светъл или тъмен режим, бутонът все още привлича вниманието, иконата е ясна, като цяло всичко е перфектно.
Когато един и същ цвят се използва по различен начин, например в текста — ще възникнат проблеми. Опитайте се да използвате (много) по-малко наситен нюанс на основния цвят или търсете други начини за интегриране на цветовете на бранда в интерфейса.
Вляво: червено на черен фон изглежда зле. Вдясно: намаляме наситеността — и всичко става добре. — бележка на преводача.
Същото важи и за всички останали наситени цветове, които може да сте използвали, като например цветовете на предупреждения или грешки. Google използва бел слой с 40% покритие над цвета на стандартната грешка в своите при превключване в тъмен режим. Това е доста добра отправна точка, тъй като ще подобри нивата на контрастност до съответствие с AA стандартите. Разбира се, винаги можете да променяте настройките по свое усмотрение, но не забравяйте да проверявате нивата на контрастност. Между другото, полезен инструмент за тази цел е плъгинът за Sketch — , който точно показва колко контраст има между 2 слоя.
Какво ще кажете за текста?
Тук всичко е просто: нищо не трябва да бъде 100% черно на 100% бяло и обратно. Бялото отразява светлинни вълни от всички дължини, черното - поглъща. Ако поставите 100% бял текст на 100% черен фон, буквите ще отразяват светлината, ще се размазват и ще ставата по-малко удобни за възприемане, което отрицателно ще се отрази на четимостта.
Същото важи и за 100% бял фон, който отразява твърде много светлина, за да се съсредоточите изцяло върху думите. Опитайте да омекотите белия цвят малко, използвайте светло-сиви фонове и текстове на черни фонове. Това ще намали натоварването на очите, предотвратявайки
Тъмен режим тук и няма да си тръгне.
Броят на времето, което прекарваме пред екраните, постоянно нараства, и всеки нов ден нови екрани влизат в живота ни, от момента на събуждането до момента, в който заспим. Това е доста ново явление; очите ни все още не са свикнали с такова увеличение на времето пред екрана късно вечер. Тук тъмният режим нахлува на сцената. След въвеждането на тази функция в macOS и Material Design (и вероятно в iOS), смятаме, че рано или късно той ще стане стандартен във всички приложения, както мобилни, така и десктоп.
Единствената причина да не се внедрява тъмен режим е, когато сте абсолютно на 100% сигурни, че приложението ви се използва изключително при ярка дневна светлина. Такова нещо, обаче, се случва рядко.
Струва си да споменем няколко неща, които изискват специално внимание при внедряване на тъмен режим, освен основните принципи, обобщени по-рано.
От гледна точка на достъпността, тъмният режим не е най-удобният, тъй като контрастът е по-нисък, което от своя страна изобщо не подобрява четимостта.
Но си представете, че се готвите за сън, много искате да спите, но точно преди да заспите си спомняте, че трябва да изпратите на някого супер важно съобщение, което не може да чака дори една нощ. Вземате телефона си, включвате го и АААААА… светлият фон на вашия iMessage няма да ви позволи да заспите още 3 часа. Докато светлият текст на тъмен фон не е най-достъпният, наличието на тъмен режим точно в този момент щеше да увеличи удобството с милион. Всичко зависи от ситуацията, в която се намира потребителят в момента.
Ето защо смятаме автоматичен тъмен режим тази страхотна идея. Той се активира вечер и се деактивира сутрин. Потребителят дори не трябва да мисли за това, което е много удобно. Twitter свърши отлична работа с настройките на тъмния режим. Освен това те имат както просто тъмен режим, така и по-тъмен режим за всички тези OLED екрани, икономия на батерия и всичко свързано с това. Важно е да се отбележи: дайте възможност на потребителя да превключва ръчно, когато желае: няма нищо по-лошо от автоматично променящия се интерфейс без възможност за връщане обратно.
В Twitter има автоматичен тъмен режим, който се активира вечер и се деактивира сутрин.
Също така при разработката на темата, е важно да се има предвид, че някои неща просто не могат да бъдат направени тъмни.
Например, вземете текстов редактор, като Pages. Можете да направите интерфейса тъмен, но самият лист винаги ще бъде бял, имитирайки истински лист хартия.
Pages с включен тъмен режим
Същото важи и за всички видове редактори за създаване на съдържание, като Sketch или Illustrator. Въпреки че интерфейсът може да бъде направен тъмен, монтажната панела, с която работите, винаги ще бъде бяла по подразбиране.
Sketch в тъмен режим и все пак ярка бяла монтажна панела.
Следователно независимо от приложението, считаме, че тъмните режими ще станат нативни за операционната система, която използвате, така че е добре да се подготвите предварително за бъдещето, то ще бъде тъмно.
Ако искате да научите повече за разработването на тъмни интерфейси, не забравяйте да се запознаете с указанията на , това беше нашият основен източник на информация за тази статия.
Източник: habr.com
