Немесе қолданба немесе веб-сайт үшін қараңғы режимді жасау кезінде нені есте сақтау керек
2018 жыл қараңғы режимдердің жолда екенін көрсетті. Енді 2019 жылдың жартысы аяқталды, біз сенімді түрде айта аламыз: олар осында және олар барлық жерде.
Қараңғы режим мүлдем жаңа ұғым емес екенін бастайық. Ол ұзақ уақыт бойы қолданылып келеді. Бір кездері, шын мәнінде, ұзақ уақыт бойы олар пайдаланатын жалғыз нәрсе болды: мониторлар «қараға жасыл» сортты болды, бірақ оның ішіндегі люминесцентті жабын сәулеленуге ұшыраған кезде жасыл түсті жарқыл шығаратындықтан ғана. .
Бірақ түсті мониторлар енгізілгеннен кейін де қараңғы режим барын жалғастырды. Неліктен бұлай?
Бүгінгі күні әрбір екінші адамның қолданбасына қараңғы тақырыпты қосуға асығуының екі негізгі себебі бар. Біріншіден: компьютерлер барлық жерде. Біз қайда қарасақ та қандай да бір экран бар. Мобильді құрылғыларды таңертеңнен кешке дейін пайдаланамыз. Қараңғы режимнің болуы төсекке жатар алдында әлеуметтік арнаны «соңғы рет» айналдырған кезде көздің шаршауын азайтады. желілер. (Егер сіз мен сияқты болсаңыз, «соңғы рет» 3 сағаттық айналдыруды білдіруі мүмкін . Қараңғы режим? Иә, өтінемін! )
Тағы бір себебі дисплей өндірісінің жаңа технологиялары. Ірі компаниялардың флагмандық үлгілері - Apple, Google, Samsung, Huawei - барлығы OLED экрандарымен жабдықталған, олар СКД дисплейлерінен айырмашылығы, артқы жарықтандыруды қажет етпейді. Бұл сіздің батареяңыз үшін өте жақсы жаңалық. Сіз телефонда қара шаршының суретін көріп жатырсыз деп елестетіңіз; СКД дисплейі бар болса, артқы жарық экранның көп бөлігі қара болса да, бүкіл экранды жарықтандырады. Бірақ OLED дисплейінде бірдей кескінді көргенде, қара шаршыны құрайтын пикселдер жай ғана өшіріледі. Бұл олар энергияны мүлдем тұтынбайды дегенді білдіреді.
Бұл дисплей түрлері қараңғы режимдерді әлдеқайда қызықты етеді. Қараңғы интерфейсті пайдалану арқылы құрылғының батареясының қызмет ету мерзімін едәуір ұзартуға болады. . Қараңғы режимдер, әрине, UI өзгерістерімен қатар жүреді, сондықтан білімімізді толықтырайық!
Қараңғы режимдер 101
Біріншіден: «қараңғы» «қарамен» бірдей емес. Ақ фонды қарамен ауыстыруға тырыспаңыз, себебі бұл көлеңкелерді пайдалану мүмкін емес. Мұндай дизайн өте тегіс болады (жаман түрде).
Көлеңкелеу/жарықтандырудың негізгі принциптерін есте сақтау маңызды. Неғұрлым биік нысандар көлеңкеде жеңілірек болуы керек, бұл шынайы жарықтандыру мен көлеңкелеуді ұқсатады. Бұл әртүрлі құрамдас бөліктер мен олардың иерархиясын ажыратуды жеңілдетеді.
Көлеңкесі бар екі бірдей сұр шаршы, біреуі 100% қара фонда, екіншісі #121212. Нысан көтерілген сайын ол сұр түстің ашық реңкіне айналады.
Қараңғы тақырыпта контраст жақсы болғанша әдеттегі негізгі түспен жұмыс істей аласыз. Мысалмен түсіндірейік.
Бұл интерфейсте негізгі әрекет төменгі жолақтағы үлкен көк түйме болып табылады. Жарық немесе күңгірт режим арасында ауысқанда контраст тұрғысынан ешқандай проблема жоқ, түйме әлі де көздің жауын алады, белгіше анық және жалпы бәрі жақсы.
Бір түсті әртүрлі тәсілдермен қолданғанда, мысалы, мәтінде, проблемалар туындайды. Негізгі түстің (әлдеқайда) қанық емес реңкін пайдаланып көріңіз немесе бренд түстерін интерфейске енгізудің басқа жолдарын іздеңіз.
Сол жақта: қарадағы қызыл нашар көрінеді. Оң жақ: қанықтылықты азайтыңыз және бәрі жақсы көрінеді. — шамамен. аударма
Бұл ескерту немесе қате түстері сияқты сіз пайдаланған кез келген басқа күшті түстерге қатысты. Google әдепкі қате түсінің үстіне 40% ақ қабат қабатын пайдаланады қараңғы режимге ауысқанда. Бұл өте жақсы бастапқы нүкте, өйткені ол AA стандарттарына сәйкес келетін контраст деңгейлерін жақсартады. Сіз, әрине, әрқашан параметрлерді өзіңіз қалағандай өзгерте аласыз, бірақ контраст деңгейлерін тексеріңіз. Айтпақшы, осы мақсат үшін пайдалы құрал - Sketch плагині - , бұл 2 қабат арасында қаншалықты контраст бар екенін көрсетеді.
Мәтін ше?
Мұнда бәрі қарапайым: ештеңе 100% қара және 100% ақ және керісінше болмауы керек. Ақ барлық толқын ұзындығының жарық толқындарын көрсетеді, қара жұтады. 100% ақ мәтінді 100% қара фонда орналастырсаңыз, әріптер жарықты көрсетеді, жағылады және азырақ оқылады, бұл оқуға теріс әсер етеді.
Бұл сөздерге толығымен назар аудару үшін тым көп жарықты көрсететін 100% ақ фонға да қатысты. Ақ түсті аздап жұмсартып көріңіз, фон үшін ашық сұр түсті және қара фонда мәтінді пайдаланыңыз. Бұл көздің шаршауын азайтады, алдын алады
Қараңғы режим осында және өшпейді
Экранның алдында өткізетін уақытымыз үнемі өсіп келеді және әрбір жаңа күн, біз оянған сәттен бастап ұйықтап кеткенге дейін өмірімізде жаңа экрандар пайда болады. Бұл өте жаңа құбылыс, кешке қарай экран уақытының бұл артуына біздің көзіміз әлі үйренбеген. Бұл жерде қараңғы режим ойнайды. Бұл мүмкіндікті macOS және Material Design жүйесінде (және, ең алдымен, iOS жүйесінде) енгізу арқылы ол ерте ме, кеш пе, мобильді және жұмыс үстелі сияқты барлық қолданбаларда әдепкі болады деп сенеміз. Және бұған дайын болған дұрыс!
Қараңғы режимді қолданбаудың жалғыз себебі - қолданбаның тек күндізгі жарықта қолданылатынына 100% сенімді болған кезде. Алайда бұл жиі бола бермейді.
Қараңғы режимді енгізу кезінде жоғарыда айтылған негізгі қағидалардан басқа ерекше назар аударуды қажет ететін бірнеше нәрсені атап өткен жөн.
Қол жетімділік тұрғысынан қараңғы режим ең қолайлы емес, өйткені контраст әдетте төменірек, бұл өз кезегінде оқуды мүлде жақсартпайды.
Бірақ сіз төсекке дайындалып жатқаныңызды елестетіп көріңіз, сіз шынымен ұйықтағыңыз келеді, бірақ ұйықтар алдында сіз біреуге бір түнді күте алмайтын өте маңызды хабарлама жіберуіңіз керек екенін есте сақтаңыз. Сіз телефонды алып, оны қосыңыз және AAAAAAH... iMessage-тің ашық фоны сізді тағы 3 сағат бойы сергек ұстайды, ал қараңғы фондағы ашық мәтін осы секундта ең қолжетімді болып саналмайды ыңғайлылықты миллионға ұлғайту. Мұның бәрі пайдаланушының қазіргі кездегі жағдайына байланысты.
Сондықтан біз сенеміз автоматты қараңғы режим сондай тамаша идея. Кешке қосылып, таңертең өшеді. Пайдаланушыға бұл туралы ойлаудың қажеті жоқ, бұл өте ыңғайлы. Twitter өзінің қараңғы режим параметрлерімен тамаша жұмыс жасады. Сонымен қатар, оларда батареяны және оған қатысты барлық нәрсені үнемдейтін осы OLED экрандары үшін жай ғана қараңғы режим де, одан да қараңғы режим бар. Мұнда ескеру маңызды: пайдаланушыға қалаған кезде қолмен ауысу мүмкіндігін беріңіз: кері ауысу мүмкіндігінсіз интерфейсті автоматты түрде өзгертуден жаман ештеңе жоқ.
Twitter-де кешке қосылып, таңертең өшетін автоматты қараңғы режим бар.
Сондай-ақ, тақырыпты әзірлеу кезінде кейбір нәрселерді қараңғылау мүмкін емес екенін есте ұстаған жөн.
Pages сияқты мәтіндік редакторды алыңыз. Интерфейсті қараңғы етуге болады, бірақ парақтың өзі әрқашан ақ болып, нақты қағаз парағын ұқсатады.
Қараңғы режим қосылған беттер
Бұл Sketch немесе Illustrator сияқты мазмұн жасау редакторларының барлық түрлеріне қатысты. Интерфейс қараңғы болуы мүмкін болса да, сіз жұмыс істейтін жұмыс тақтасы әдепкі бойынша әрқашан ақ болады.
Қараңғы режимде эскиз жасаңыз және әлі де ашық ақ жұмыс тақтасы бар.
Сондықтан, қолданбаға қарамастан, қараңғы режимдер сіз қолданатын операциялық жүйеге тән болады деп сенеміз, яғни болашаққа дайындалған дұрыс. қараңғы болады.
Қараңғы UI жасау туралы көбірек білгіңіз келсе, нұсқауларды тексеріңіз , бұл мақаланың негізгі ақпарат көзі болды.
Ақпарат көзі: www.habr.com