Skuteczne stylowanie widżetów ma kluczowe znaczenie dla uzyskania atrakcyjnych wizualnie i spójnych wrażeń użytkowników. W tej sekcji znajdziesz kluczowe koncepcje i techniki definiowania kolorów i typografii, które pomogą Ci tworzyć najbardziej przydatne i angażujące widżety na Androida.
Kolor
Używaj kolorów, aby wyrażać styl i przekazywać znaczenie. Ustawienie odpowiednich kolorów widżetu ma kluczowe znaczenie dla czytelności, personalizacji i oczywiście wyrażania tożsamości marki aplikacji.
Używaj ról i tokenów kolorów Material, aby spełniać wytyczne dotyczące kontrastu w zakresie ułatwień dostępu i obsługiwać funkcje dynamicznych kolorów, takie jak kolory generowane przez użytkowników oraz motywy ciemne i jasne.
Eksperymentuj z hierarchią wizualną za pomocą ról akcentujących, aby tworzyć żywe kontrasty między elementami, lub wypróbuj bardziej zabawny motyw niestandardowy, który wyraża Twoją markę.
Więcej informacji o rolach kolorów znajdziesz w wytycznych dotyczących kolorów w Material Design.
Kształt
Kształt widżetu określa jego charakter. W przypadku widżetów prostokątnych użyj właściwości system corner radius. Ta właściwość zapewnia spójność na różnych urządzeniach i zapobiega przycinaniu treści widżetu.
Jeśli widżet wyświetla minimalną ilość danych, np. zdjęcie, pogodę lub aktualnie odtwarzany utwór, spróbuj nadać mu wyrazisty kształt, aby wnieść na ekran główny użytkownika ekscytujący powiew energii. Jeśli masz bardziej złożone układy i dane, rozważ użycie wyrazistych kształtów, aby stworzyć hierarchię wizualną, wyróżnić nowe treści lub wezwanie do działania.
Więcej informacji znajdziesz w artykule Implementowanie zaokrąglonych rogów.
Motywy dynamiczne
Od Androida 12 widżet może używać kolorów motywu urządzenia w przypadku przycisków, tła i innych komponentów. Zapewnia to spójność wizualną różnych widżetów, ikon na ekranie głównym i tapet, dzięki czemu użytkownicy Androida mogą korzystać z bardziej spójnych funkcji. Używanie podanych tokenów kolorów pomaga zintegrować widżet z motywami urządzeń udostępnianymi przez różnych producentów i dynamicznymi motywami ustawianymi przez użytkownika.
Jasny i ciemny motyw
Ciemny motyw to wersja interfejsu urządzenia przyciemniona, w której dominują ciemne kolory powierzchni. Użytkownicy coraz częściej przełączają się na ciemny motyw, aby wydłużyć czas pracy baterii i zwiększyć komfort dla oczu. Jeśli widżet nie dostosowuje się do ciemnego motywu, będzie wyglądać nieestetycznie i może zniechęcić użytkowników.
Typografia
Typografia sprawia, że tekst jest czytelny i estetyczny. Używaj różnych rozmiarów i grubości czcionek, aby stworzyć przejrzystą hierarchię, która będzie kierować wzrok użytkownika na najważniejsze elementy. Zwróć uwagę na odstępy między wierszami i literami (kerning), aby zwiększyć czytelność, zwłaszcza w przypadku mniejszych wyświetlaczy tekstu w ograniczonej przestrzeni widżetu.
Hierarchia
Hierarchia jest przekazywana za pomocą różnic w grubości czcionki, rozmiarze, wysokości wiersza i odstępach między literami. Zaktualizowana skala typograficzna porządkuje style tekstu w 5 rolach, których nazwy opisują ich przeznaczenie. 5 stylów tekstu to: wyświetlany, nagłówek, tytuł, podtytuł i tekst główny. Nowe role są niezależne od urządzenia, co ułatwia ich stosowanie w różnych przypadkach użycia.
Chociaż widżety używają czcionek systemowych, możesz dodać wyraziste szczegóły za pomocą dramatycznych skal typograficznych: pogrubić nagłówki, etykiety i dane.
