Styl

Efektywne stylizowanie widżetów jest kluczowe dla zapewnienia użytkownikom atrakcyjności wizualnej i spójności. W tej sekcji omawiamy kluczowe pojęcia i metody definiowania kolorów i typografii, które pozwalają tworzyć najbardziej przydatne i atrakcyjne widżety na Androida.

Kolor

Używaj kolorów, aby wyrazić swój styl i przekazać znaczenie. Ustalenie odpowiednich kolorów widżetów ma kluczowe znaczenie dla czytelności, personalizacji i odzwierciedlenia tożsamości marki aplikacji.

Użyj ról kolorów Material i tokenów, aby spełnić wytyczne dotyczące kontrastu oraz zapewnić obsługę dynamicznych funkcji kolorów, takich jak kolory generowane przez użytkownika oraz ciemne i jasne motywy.

Więcej informacji znajdziesz w wytycznych dotyczących kolorów w interfejsie Material Design.

Motywy dynamiczne

Począwszy od Androida 12 widżet może używać kolorów przycisków, tła i innych komponentów w kolorach motywu urządzenia. Zapewnia to wizualną spójność między różnymi widżetami, ikonami na ekranie głównym i tapetami, zapewniając użytkownikom Androida spójne wrażenia. Użycie dostarczonych tokenów kolorów sprawia, że Twój widżet będzie wyglądał zintegrowany z motywami urządzeń różnych producentów i motywami dynamicznymi ustawionymi przez użytkownika.

Rysunek 1. Obraz widżetu z wywołanymi tokenami kolorów.

Tryb jasny i ciemny

Tryb ciemny to słabo oświetlona wersja interfejsu urządzenia, która wyświetla głównie ciemne kolory powierzchni. Użytkownicy coraz częściej przełączają się w tryb ciemny, aby wydłużyć czas pracy na baterii i zapewnić Ci lepszy komfort oczu. Jeśli widżet nie dostosowuje się do trybu ciemnego, będzie wyglądać w nieodpowiednim miejscu i może frustrować użytkowników.

Rysunek 2. Widżet w trybie jasnym i ciemnym po prawej stronie.

Typografia

Dzięki typografii tekst jest czytelny i piękny. Wykorzystaj rozmiary i wagę czcionek, aby stworzyć przejrzystą hierarchię, która zwróci uwagę użytkownika na najważniejsze elementy. Zwróć uwagę na odstępy między wierszami i literami (kerning), aby poprawić czytelność, zwłaszcza w przypadku mniejszych tekstów wyświetlanych w ograniczonej przestrzeni widżetu.

Hierarchia

Hierarchia odzwierciedla różnice między grubością czcionki, jej rozmiarem, wysokością wierszy i odstępami między literami. Zaktualizowana skala typów dzieli style tekstu na 5 ról, które określają ich przeznaczenie. Dostępnych jest 5 stylów tekstu: displayowy, nagłówek, tytuł, podtytuł i treść. Nowe role są niezależne od urządzenia, co ułatwia ich stosowanie w różnych przypadkach użycia.

Rysunek 3. Widżet przedstawiający korzystanie z różnych skal.