Home-theater-designers
Тамни кориснички интерфејси су стекли популарност, а многе апликације сада нуде могућност пребацивања између светлог и тамног режима. Међутим, имплементација тамног корисничког интерфејса може бити изазован задатак који захтева пажљиву пажњу на боје, фонтове, слике и размаке који се користе.
Све грешке у овим елементима могу довести до лошег корисничког искуства. Следећи савети би требало да вам помогну када дизајнирате свој први тамни кориснички интерфејс.
МАКЕУСЕОФ ВИДЕО ДАНА ПОМЕРИТЕ ДА БИСТЕ НАСТАВИЛИ СА САДРЖАЈЕМ
1. Немојте користити чисту црну
Када дизајнирате тамни кориснички интерфејс, избегавајте коришћење чисто црне позадине. Боље је користити тамну нијансу сиве. На пример, Гоогле-ова тема материјалног дизајна препоручује боју #121212.
Црна позадина у комбинацији са белим текстом може имати превише контраста и изазвати напрезање очију. Уместо тога, тамније нијансе сиве могу лако приказати сенке, дубину и надморску висину.
2. Осигурајте да контраст текста испуњава ВЦАГ 2.0 смернице
Изаберите комбинацију боја која нуди одговарајући ниво контраста како би текст био читљив. Смернице ВЦАГ 2.0 наводе да текст или слике текста морају имати однос контраста од најмање 4,5:1 са великим текстом (најмање 18 тачака или 14 подебљаних) морају имати однос контраста од најмање 3:1.
Постоји неколико алата за проверу контраста боја, укључујући ТАЛАС Цхроме проширење које такође проверава колико су доступне боје.
3. Изаберите прави стил фонта
Такође морате узети у обзир стилове фонта вашег текста, укључујући величину, тежину и висину реда. Ако тражите опције фонта, не заборавите да постоје мноштво сајтова који нуде бесплатне фонтове . Што се тиче величине фонта, користите вредности које су довољне да обезбедите да је текст јасан и видљив на тамној позадини.
Размотрите следеће стилове за веб страницу:
како обрнути претрагу слика на телефону42Ц4ЦФ376А1491124Е44ЕБ4848Б1А7Е41ЦЦ82348
Породица фонтова је тешка за читање, величина фонта је премала, а тежина фонта је сувише мала. Ови стилови чине страницу тешком за читање као што можете видети на слици испод.
Испод су неки одговарајући стилови које можете користити уместо тога.
Ф05769АА77БДЦД636Е7ДДБАБ9Д86Е384А75Е51Б5И ево резултујуће странице:
4. Избегавајте засићене акцентне боје
Засићене боје могу бити превише светле и мутне на тамној позадини. Уместо тога, користите боје које су мање интензивне и пригушене. На овај начин креирате кориснички интерфејс који има видљив текст.
Да бисте демонстрирали, размотрите ова два стила дугмади:
А9ДЦЦД6957Б8Б9402Ф947Б8ЦД2ДФЦ51ЦДФ430615Засићена плава боја може бити превише светла и тешка за читање на тамној позадини, док пригушена плава боја пружа добар контраст и лакша је за читање.
Алат као цолорабле је од помоћи за генерисање комбинација боја које прате смернице за приступачност.
5. Користите негативан простор да спречите стварање тешког корисничког интерфејса
Палета тамних боја може учинити да кориснички интерфејс изгледа тежак за кориснике. Када се правилно користи, негативни простор може вам помоћи да истакнете важне елементе корисничког интерфејса и олакшате скенирање текста. Довољан размак такође може учинити дизајн чистијим и модернијим.
Узмимо, на пример, Апплеова одредишна страница . Размак између елемената чини да страница изгледа веома модерно и визуелно занимљиво, омогућавајући да се важни елементи истичу.
6. Користите различите нијансе боја да додате дубину корисничком сучељу
Када дизајнирате светлосни кориснички интерфејс, можете користити сенке да додате дубину и надморску висину елементима. Међутим, због тамне позадине, сенке је понекад тешко видети у тамном корисничком интерфејсу.
када је процесор превише врућ
Можете постићи дубину у тамном корисничком интерфејсу коришћењем више нијанси тамних боја. На пример, уместо само једне тамне позадине, можете додати светлије нијансе исте боје различитим елементима као што су дугмад и модали.
7. Уверите се да одговара тамном корисничком интерфејсу
Не морате да користите исте слике за светли и тамни режим. Можете користити тамни режим ЦСС медијски упити да искључите слике које одговарају тамном корисничком интерфејсу кад год корисник пређе на тамни режим.
На пример, да бисте применили одређени образац позадине на делове ваше странице у тамном режиму, можете користити име класе .бгпаттерн и додати следећи код у свој стил.
Е0Б86АЕ0Б6Е4Б40Е3А78398Ц133Ц2ЕБ4ДФ4АБЦ5ЦОвај медијски упит осигурава да се референтна позадинска слика приказује само када је жељена шема боја корисника тамна.
Када користити тамни кориснички интерфејс
Тамни дизајн корисничког интерфејса је одличан начин да дате модерну естетику вашој веб локацији или апликацији. Такође могу да смање напрезање очију и продуже век трајања батерије. Међутим, тамни кориснички интерфејси нису погодни за сваку апликацију и увек треба да узмете у обзир бренд и корисничку базу.
Генерално, тамни кориснички интерфејси су најпогоднији за брендове који дају предност луксузу, престижу, минимализму или мистерији. Такође могу бити одличан избор за контролне табле и алате за визуелизацију.