Тъмни времена настъпват

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

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

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

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

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

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

Още една причина — новите технологии за производство на дисплеи. Флагманските модели на големите компании — Apple, Google, Samsung, Huawei — всички разполагат с OLED екрани, които, за разлика от LCD дисплеите, не изискват подсветка. И това наистина е добра новина за батерията ви. Представете си, че разглеждате изображение на черен квадрат на телефона си; с LCD дисплея подсветката ще осветява целия екран, въпреки че голяма част от него е черна. Но при разглеждане на същото изображение на OLED дисплея, пикселите, от които черният квадрат се състои, просто се изключват. А, следователно, изобщо не консумират енергия.

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

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

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

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

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

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

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

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

Отляво: червеното на черен фон изглежда лошо. Отдясно: намаляваме наситеността — и всичко става добре. — бележка на преводача.

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

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

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

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

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

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

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

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

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

Източник

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

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

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

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

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

Pages с включен тъмен режим

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

Sketch в тъмен режим и все пак ярка бяла монтажна платформа.

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

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

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