7 pomocnych wskazówek dotyczących projektowania ciemnego interfejsu użytkownika

Ciemne interfejsy użytkownika zyskały popularność, a wiele aplikacji oferuje teraz opcję przełączania między trybem jasnym i ciemnym. Jednak wdrożenie ciemnego interfejsu użytkownika może być trudnym zadaniem, które wymaga szczególnej uwagi na używane kolory, czcionki, obrazy i odstępy.

Wszelkie błędy w tych elementach mogą skutkować złym doświadczeniem użytkownika. Poniższe wskazówki powinny ci pomóc podczas projektowania pierwszego ciemnego interfejsu użytkownika.

1. Nie używaj czystej czerni

Podczas projektowania ciemnego interfejsu użytkownika unikaj używania czysto czarnego tła. Lepiej jest użyć ciemnego odcienia szarości. Na przykład, Motyw projektowania materiałów Google poleca kolor #121212.

Czarne tło w połączeniu z białym tekstem może mieć zbyt duży kontrast i powodować zmęczenie oczu. Zamiast tego ciemniejsze odcienie szarości mogą łatwo pokazywać cienie, głębię i wysokość.

2. Zapewnij kontrast tekstu Spełnij wytyczne WCAG 2.0

Wybierz kombinację kolorów, która zapewnia odpowiedni poziom kontrastu, aby tekst był czytelny. Wytyczne WCAG 2.0 stanowią, że tekst lub obrazy tekstu muszą mieć współczynnik kontrastu co najmniej 4,5:1, a duży tekst (co najmniej 18 punktów lub 14 punktów pogrubienia) musi mieć współczynnik kontrastu co najmniej 3:1.

Istnieje kilka narzędzi do sprawdzania kontrastu kolorów, w tym FALA Rozszerzenie Chrome, które sprawdza również dostępność kolorów.

3. Wybierz odpowiedni styl czcionki

Należy również wziąć pod uwagę style czcionek tekstu, w tym rozmiar, grubość i wysokość linii. Jeśli szukasz opcji czcionek, nie zapomnij, że są wiele witryn oferujących bezpłatne czcionki. Jeśli chodzi o rozmiar czcionki, użyj wartości, które są wystarczające, aby tekst był wyraźny i widoczny na ciemnym tle.

Rozważ następujące style strony internetowej:

ciało {
rodzina czcionek: "KurierNowy", jednoprzestrzeń;
rozmiar czcionki: 12piks;
grubość czcionki: 200;
Wysokość linii: 1; 
kolor: #333333;
}

Rodzina czcionek jest trudna do odczytania, rozmiar czcionki jest za mały, a grubość czcionki jest za mała. Te style utrudniają czytanie strony, jak widać na poniższym zrzucie ekranu.

Poniżej znajduje się kilka odpowiednich stylów, których możesz użyć zamiast tego.

ciało {
rodzina czcionek: "Arial", bezszeryfowe;
rozmiar czcionki: 16piks; 
grubość czcionki: 400; 
Wysokość linii: 1.5; 
kolor: #FFFFFF;
kolor tła: #121212; 
}

A oto wynikowa strona:

4. Unikaj nasyconych kolorów akcentujących

Nasycone kolory mogą być zbyt jasne i rozmyte na ciemnym tle. Zamiast tego użyj kolorów, które są mniej intensywne i stonowane. W ten sposób tworzysz interfejs użytkownika z widocznym tekstem.

Aby zademonstrować, rozważ te dwa style przycisków:

/* Nasycony niebieski */
.btn-nasycony-niebieski {
kolor tła: #121212;
kolor: #0e0bf6;
}
/* Stłumiony niebieski */
.btn-wyciszony-niebieski {
kolor tła: #121212; 
kolor: #4c5ab3;
}

Nasycony kolor niebieski może być zbyt jasny i trudny do odczytania na ciemnym tle, podczas gdy stonowany kolor niebieski zapewnia dobry kontrast i jest łatwiejszy do odczytania.

Narzędzie jak do pokolorowania jest pomocny przy generowaniu kombinacji kolorów zgodnych z wytycznymi dotyczącymi ułatwień dostępu.

5. Użyj ujemnej przestrzeni, aby zapobiec tworzeniu ciężkiego interfejsu użytkownika

Ciemna paleta kolorów może sprawić, że interfejs użytkownika będzie wydawał się ciężki dla użytkowników. Przy prawidłowym użyciu ujemna spacja może pomóc wyróżnić ważne elementy interfejsu użytkownika i ułatwić skanowanie tekstu. Wystarczające odstępy mogą również sprawić, że projekt będzie czystszy i bardziej nowoczesny.

Weź na przykład, Strona docelowa Apple. Odstępy między elementami sprawiają, że strona wygląda bardzo nowocześnie i ciekawie wizualnie, pozwalając na wyeksponowanie ważnych elementów.

6. Użyj różnych odcieni kolorów, aby dodać głębi interfejsowi

Podczas projektowania lekkich interfejsów użytkownika można użyć cieni, aby dodać elementom głębi i wysokości. Jednak z powodu ciemnego tła cienie są czasami trudne do zauważenia w ciemnych interfejsach użytkownika.

Możesz uzyskać głębię w ciemnym interfejsie użytkownika, używając wielu odcieni ciemnych kolorów. Na przykład, zamiast tylko jednego ciemnego tła, możesz dodać jaśniejsze odcienie tego samego koloru do różnych elementów, takich jak przyciski i moduły.

7. Upewnij się, że Twoje obrazy pasują do ciemnego interfejsu użytkownika

Nie musisz używać tych samych obrazów w trybie jasnym i ciemnym. Możesz użyć trybu ciemnego Zapytania o media CSS aby przełączać obrazy pasujące do ciemnego interfejsu użytkownika za każdym razem, gdy użytkownik przełącza się w tryb ciemny.

Na przykład, aby zastosować określony wzór tła do sekcji strony w trybie ciemnym, możesz użyć nazwy klasy .bgpattern i dodać następujący kod do swojego arkusza stylów.

@głoska bezdźwięczna (preferuje schemat kolorów: ciemny) {
/* Zastosuj ten styl tylko w trybie ciemnym */
.bgwzór {
zdjęcie w tle: adres URL("/ciemnyjpg");
 }
}

To zapytanie o media gwarantuje, że obraz tła, do którego się odnosi, jest wyświetlany tylko wtedy, gdy preferowany przez użytkownika schemat kolorów jest ciemny.

Kiedy używać ciemnego interfejsu użytkownika

Ciemne projekty interfejsu użytkownika to świetny sposób na nadanie nowoczesnej estetyki Twojej stronie internetowej lub aplikacji. Mogą również zminimalizować zmęczenie oczu i wydłużyć żywotność baterii. Jednak ciemne interfejsy użytkownika nie są odpowiednie dla każdej aplikacji i zawsze należy wziąć pod uwagę markę i bazę użytkowników.

Ogólnie rzecz biorąc, ciemne interfejsy użytkownika najlepiej nadają się dla marek, dla których priorytetem jest luksus, prestiż, minimalizm lub tajemnica. Mogą być również doskonałym wyborem dla kokpitów menedżerskich i narzędzi do wizualizacji.