7 корисних савета за дизајнирање тамног корисничког сучеља

Тамни кориснички интерфејси су стекли популарност, а многе апликације сада нуде могућност пребацивања између светлог и тамног режима. Међутим, имплементација тамног корисничког интерфејса може бити изазован задатак који захтева пажљиву пажњу на боје, фонтове, слике и размаке који се користе.

Све грешке у овим елементима могу довести до лошег корисничког искуства. Следећи савети би требало да вам помогну када дизајнирате свој први тамни кориснички интерфејс.

1. Не користите чисту црну

Када дизајнирате тамни кориснички интерфејс, избегавајте коришћење чисто црне позадине. Боље је користити тамну нијансу сиве. На пример, Гоогле-ова тема материјалног дизајна препоручује боју #121212.

Црна позадина у комбинацији са белим текстом може имати превише контраста и изазвати напрезање очију. Уместо тога, тамније нијансе сиве могу лако приказати сенке, дубину и надморску висину.

2. Обезбедите контраст текста у складу са смерницама ВЦАГ 2.0

Изаберите комбинацију боја која нуди одговарајући ниво контраста како би текст био читљив. Смернице ВЦАГ 2.0 наводе да текст или слике текста морају имати однос контраста од најмање 4,5:1 са великим текстом (најмање 18 тачака или 14 подебљаних) морају имати однос контраста од најмање 3:1.

Постоји неколико алата за проверу контраста боја, укључујући ТАЛАС Цхроме проширење које такође проверава колико су доступне боје.

3. Изаберите прави стил фонта

Такође морате узети у обзир стилове фонта вашег текста, укључујући величину, тежину и висину реда. Ако тражите опције фонта, не заборавите да постоје мноштво сајтова који нуде бесплатне фонтове. Што се тиче величине фонта, користите вредности које су довољне да обезбедите да је текст јасан и видљив на тамној позадини.

Размотрите следеће стилове за веб страницу:

тело {
породица фонтова: "КурирНова", моноспаце;
фонт-сизе: 12пк;
фонт-веигхт: 200;
Висина линија: 1; 
боја: #333333;
}

Породица фонтова је тешка за читање, величина фонта је премала, а тежина фонта је сувише мала. Ови стилови чине страницу тешком за читање као што можете видети на слици испод.

Испод су неки одговарајући стилови које можете користити уместо тога.

тело {
породица фонтова: "Ариал", Санс Сериф;
фонт-сизе: 16пк; 
фонт-веигхт: 400; 
Висина линија: 1.5; 
боја: #ФФФФФФ;
боја позадине: #121212; 
}

И ево резултујуће странице:

4. Избегавајте засићене акцентне боје

Засићене боје могу бити превише светле и мутне на тамној позадини. Уместо тога, користите боје које су мање интензивне и пригушене. На овај начин креирате кориснички интерфејс који има видљив текст.

Да бисте демонстрирали, размотрите ова два стила дугмади:

/* Засићено плаво */
.бтн-засићено-плаво {
боја позадине: #121212;
боја: #0е0бф6;
}
/* Пригушено плаво */
.бтн-мутед-блуе {
боја позадине: #121212; 
боја: #4ц5аб3;
}

Засићена плава боја може бити превише светла и тешка за читање на тамној позадини, док пригушена плава боја пружа добар контраст и лакша је за читање.

Алат као цолорабле је од помоћи за генерисање комбинација боја које прате смернице за приступачност.

5. Користите негативан простор да спречите стварање тешког корисничког интерфејса

Палета тамних боја може учинити да кориснички интерфејс изгледа тежак за кориснике. Када се правилно користи, негативни простор може вам помоћи да истакнете важне елементе корисничког интерфејса и олакшате скенирање текста. Довољан размак такође може учинити дизајн чистијим и модернијим.

Узмимо, на пример, Апплеова одредишна страница. Размак између елемената чини да страница изгледа веома модерно и визуелно занимљиво, омогућавајући да се важни елементи истичу.

6. Користите различите нијансе боја да додате дубину корисничком сучељу

Када дизајнирате светлосни кориснички интерфејс, можете користити сенке да додате дубину и надморску висину елементима. Међутим, због тамне позадине, сенке је понекад тешко видети у тамном корисничком интерфејсу.

Можете постићи дубину у тамном корисничком интерфејсу коришћењем више нијанси тамних боја. На пример, уместо само једне тамне позадине, можете додати светлије нијансе исте боје различитим елементима као што су дугмад и модали.

7. Уверите се да ваше слике одговарају тамном корисничком интерфејсу

Не морате да користите исте слике за светли и тамни режим. Можете користити тамни режим ЦСС медијски упити да искључите слике које одговарају тамном корисничком интерфејсу кад год корисник пређе на тамни режим.

На пример, да бисте применили одређени образац позадине на делове ваше странице у тамном режиму, можете користити име класе .бгпаттерн и додати следећи код у свој стил.

@медиа (преферс-цолор-сцхеме: тамно) {
/* Примени овај стил само у тамном режиму */
.бгпаттерн {
позадинска слика: урл("/мрачно.јпг");
 }
}

Овај медијски упит осигурава да се референтна позадинска слика приказује само када је жељена шема боја корисника тамна.

Када користити тамни кориснички интерфејс

Тамни дизајн корисничког интерфејса је одличан начин да дате модерну естетику вашој веб локацији или апликацији. Такође могу да смање напрезање очију и продуже век трајања батерије. Међутим, тамни кориснички интерфејси нису погодни за сваку апликацију и увек треба да узмете у обзир бренд и корисничку базу.

Генерално, тамни кориснички интерфејси су најпогоднији за брендове који дају предност луксузу, престижу, минимализму или мистерији. Такође могу бити одличан избор за контролне табле и алате за визуелизацију.