Або пра што варта памятаць пры распрацоўцы цёмнага рэжыму прыкладання ці сайта
2018 паказаў: цёмныя рэжымы на падыходзе. Цяпер, калі мы ўжо на паўдарогі ў 2019, мы можам з упэўненасцю сказаць: яны тут, і яны ўсюды.
Пачнем з таго, што цёмны рэжым - гэта зусім не новая канцэпцыя. Яго выкарыстоўваюць ужо дастаткова даўно. А калісьці на самай справе даўно толькі яго і выкарыстоўвалі: маніторы былі выгляду "зялёным-па-чорнаму", але толькі таму, што люмінесцэнтнае пакрыццё ўнутры выпраменьвала зялёнае свячэнне пры ўздзеянні на яго выпраменьвання.
Але нават пасля ўкаранення каляровых манітораў цёмны рэжым працягваў жыць. Чаму ж так?
Ёсць два асноўныя матывы, якія тлумачаць, чаму сёння кожны другі спяшаецца дадаць цёмную тэму ў сваё прыкладанне. Першым чынам: кампутары паўсюль. Куды б мы ні паглядзелі, усюды нейкі экран. Мы выкарыстоўваем нашы мабільныя прылады з раніцы і да позняй ночы. Наяўнасць цёмнага рэжыму зніжае нагрузку на вочы, калі вы ў ложку перад сном "апошні раз" гартаеце стужку соц. сеткі. (Калі вы падобныя на мяне, то "апошні раз" можа азначаць 3-гадзінную пракрутку . Цёмны рэжым? Ды ўжо, будзьце добрыя! )
Яшчэ адна прычына – новыя тэхналогіі вытворчасці дысплеяў. Флагманскія мадэлі буйных кампаній – Apple, Google, Samsung, Huawei – усё абсталяваныя OLED-экранамі, якія, у адрозненне ад LCD дысплеяў, не патрабуюць падсвятлення. І гэта сапраўды добрая навіна для вашай батарэі. Уявіце, што вы праглядаеце выяву чорнага квадрата на сваім тэлефоне; з ВК-дысплеем падсвятленне будзе асвятляць увесь экран, хоць вялікая яго частка чорная. Але пры праглядзе таго ж выявы на OLED-дысплеі пікселі, з якіх чорны квадрат складаецца, проста адключаюцца. А, значыць, увогуле не спажываюць энергію.
Гэтыя тыпы дысплеяў робяць цёмныя рэжымы ў шмат разоў цікавей. Выкарыстоўваючы цёмны інтэрфейс, вы можаце значна падоўжыць тэрмін службы батарэі вашага прылады. . Цёмныя рэжымы, вядома ж, ідуць рука ў руку са зменамі UI так што давайце асьвежым нашы веды!
Цёмныя рэжымы 101
Першым чынам: "цёмны" не роўны "чорнаму". Не спрабуйце замяніць белы фон на чорны, бо гэта зробіць немагчымым выкарыстанне ценяў. Падобны дызайн будзе супер плоскім (у дрэнным сэнсе).
Важна мець на ўвазе базавыя прынцыпы зацянення/асвятленні. Аб'екты, якія больш прыўзняты, павінны быць святлей у цені, імітуючы рэальнае асвятленне і зацяненне. Такім чынам, лягчэй адрозніваць розныя кампаненты і іх іерархію.
Два аднолькава шэрых квадрата з ценем, адзін на 100% чорным фоне, іншы на #121212. Пры ўздыме аб'ект набывае больш светлае адценне шэрага.
У цёмнай тэме ўсё яшчэ можна працаваць з вашым звычайным асноўным колерам, калі кантраст у парадку. Растлумачым на прыкладзе.
У гэтым інтэрфейсе асноўным дзеяннем з'яўляецца вялікая сіняя кнопка ў ніжняй панэлі. Тут няма праблемы з пункту гледжання разнастайнасці пры пераключэнні паміж светлым або цёмным рэжымам, кнопка па-ранейшаму прыцягвае ўвагу, значок выразны, увогуле, усё выдатна.
Калі адзін і той жа колер выкарыстоўваецца па-рознаму, напрыклад у тэксце - будуць праблемы. Паспрабуйце выкарыстоўваць (значна) меней насычанае адценне асноўнага колеру ці шукайце іншыя спосабы ўключэння колераў брэнда ў інтэрфейс.
Злева: чырвонае на чорным выглядае дрэнна. Справа: паменшым насычанасць - і ўсё становіцца добра. - заўв. перав.
Тое ж самае тычыцца і ўсіх іншых насычаных кветак, якія вы маглі выкарыстоўваць, як напрыклад, колеры папярэджання ці памылкі. Google выкарыстоўвае накладанне белага пласта ў 40%-над колеру дэфолтнай памылкі ў сваіх пры пераключэнні ў цёмны рэжым. Гэта даволі добрая адпраўная кропка, бо гэта палепшыць узроўні кантраснасці да адпаведнасці стандартам АА. Вы, вядома, заўсёды можаце мяняць наладкі па сваім меркаванні, але не забудзьцеся правяраць ўзроўні кантраснасці. Дарэчы, карыснай прыладай для гэтай мэты з'яўляецца плягін для Sketch. , які дакладна паказвае колькі кантрасту паміж 2 пластамі.
Як наконт тэксту?
Тут усё проста: нішто не павінна быць 100% чорным на 100% белым і наадварот. Белы адлюстроўвае светлавыя хвалі ўсіх даўжынь, чорны - паглынае. Калі змясціць 100% белы тэкст на 100% чорны фон, літары будуць адлюстроўваць святло, размазвацца і станавіцца менш зручнымі для ўспрымання, што негатыўна паўплывае на чытальнасць.
Тое ж датычыцца і 100% белага фону, які адлюстроўвае занадта шмат святла, каб поўнасцю засяродзіцца на словах. Паспрабуйце крыху змякчыць белы колер, выкарыстоўвайце светла-шэры для фонавым і тэкстаў на чорных фонах. Гэта знізіць нагрузку на вочы, прадухіляючы
Цёмны рэжым тут і не збіраецца сыходзіць
Колькасць часу, які мы праводзім у экранаў расце ўвесь час, і кожны новы дзень, новыя экраны з'яўляюцца ў нашым жыцці, з моманту абуджэння і пакуль мы не заснем. Гэта даволі новая з'ява, нашы вочы яшчэ не абвыклі да такога росту часу ў экрана позна ўвечар. Тут цёмны рэжым і ўступае ў справу. Пасля ўвядзення гэтай функцыі ў macOS і Material Design (і, хутчэй за ўсё, у iOS) мы лічым, што рана ці позна яна стане дэфолтнай ва ўсіх дадатках, як мабільных, так і дэсктопных. І лепей быць да гэтага гатовым!
Адзіная прычына не ўкараняць цёмны рэжым, гэта калі вы абсалютна на ўсе 100% упэўненыя, што ваша прыкладанне выкарыстоўваецца выключна пры яркім дзённым святле. Такое, праўда, бывае нячаста.
Варта згадаць некалькі рэчаў, якія запатрабуюць асаблівай увагі пры рэалізацыі цёмнага рэжыму, апроч асноўных прынцыпаў, падсумаваных раней.
З пункту гледжання даступнасці, цёмны рэжым не з'яўляецца самым зручным, бо кантраст у цэлым ніжэйшы, што ў сваю чаргу зусім не паляпшае чытальнасць.
Але, прадстаўце, што вы рыхтуецеся да сну, вельмі жадаеце спаць, але прама перад тым, як заснуць, вы ўспомнілі, што трэба адправіць камусьці супер важнае паведамленне, якое не можа пачакаць нават адну ноч. Вы бераце свой тэлефон, уключаеце яго і АААААА… светлы фон вашага iMessage не дасць вам заснуць яшчэ гадзіны 3. У той час як светлы тэкст на цёмным фоне не лічыцца максімальна даступным, наяўнасць цёмнага рэжыму прама ў гэтую секунду павялічыла б выгода на мільён. Усё залежыць ад сітуацыі, у якой знаходзіцца карыстач у дадзены момант.
Вось чаму мы лічым аўтаматычны цёмны рэжым такой круты ідэяй. Ён уключаецца ўвечар і выключаецца раніцай. Карыстальніку нават не трэба думаць аб гэтым, што вельмі зручна. Twitter правёў выдатную працу з наладамі цёмнага рэжыму. Акрамя таго, у іх ёсць як проста цёмны рэжым, так і яшчэ больш цёмны рэжым для ўсіх гэтых OLED-экранаў, эканоміі батарэі і за ўсё з гэтым звязанага. Тут важна заўважыць: дайце карыстачу магчымасць перамыкацца ўручную, калі ён гэтага захоча: няма нічога горш аўтаматычнай змены інтэрфейсу без магчымасці яго пераключыцца зваротна.
У Twitter ёсць аўтаматычны цёмны рэжым, які ўключаецца ўвечары і выключаецца раніцай.
Гэтак жа пры распрацоўцы тэмы, варта мець на ўвазе, што некаторыя рэчы цёмнымі проста не зрабіць.
Вазьміце тэкставы рэдактар, да прыкладу, Pages. Можна зрабіць інтэрфейс цёмным, але сам ліст заўсёды будзе белым, імітуючы рэальны ліст паперы.
Pages з уключаным цёмным рэжымам
Тое ж самае тычыцца ўсіх відаў рэдактараў для стварэння кантэнту, тыпу Sketch ці Illustrator. Хоць інтэрфейс можна зрабіць цёмным, мантажная панэль, з якой вы працуеце, заўсёды будзе белай па змаўчанні.
Sketch у цёмным рэжыме і па-ранейшаму яркая белая мантажная панэль.
Таму незалежна ад прыкладання, мы лічым, што цёмныя рэжымы стануць натыўнымі для выкарыстоўваемай вамі аперацыйнай сістэмы, а значыць, лепш загадзя падрыхтавацца да будучыні, яно будзе цёмным.
Калі вы жадаеце пазнаць больш аб распрацоўцы цёмных інтэрфейсаў, абавязкова азнаёмцеся з гайдлайнамі , гэта была наша асноўная крыніца інфармацыі для гэтага артыкула.
Крыніца: habr.com