Motyw to zestaw stylów lub atrybutów, takich jak kolor, typ i kształt, które mogą wpływać na wygląd i sposób działania urządzenia mobilnego lub urządzenia z dużym ekranem, w aplikacji.
Wnioski
- Aby zapewnić użytkownikom bardziej spersonalizowane i łatwo dostępne działanie, upewnij się, że Twoja aplikacja korzysta z preferencji systemowych, takich jak jasny lub ciemny motyw, dynamiczny kontrast.
- Utwórz motyw niestandardowy, który będzie używany jako motyw zastępczy, gdy opcja dynamiczny będzie niedostępna.
- Podczas korzystania z różnych motywów weź pod uwagę ustawienia wpisywania tekstu.
- Zawsze sprawdzaj kontrast tekstu i powierzchni, aby zapewnić czytelność.
Rodzaje motywów
Motywy są oparte na systemie lub aplikacji. Motywy systemowe mogą mieć wpływ na całą witrynę użytkownika interfejsu urządzenia i udostępniać odpowiednie opcje w ustawieniach urządzenia, wpływa tylko na aplikację, w której został zaimplementowany.
Aby aplikacja mogła się wyświetlać, musi wdrożyć dowolny z tych motywów, ale muszą mieć zastosowanie motywy aplikacji. tylko w aplikacji, a nie w innym miejscu na urządzeniu. Możesz też zastąpić niektóre w ustawieniach motywu systemowego.
Motywy systemowe
Motywy systemowe obowiązują na całym urządzeniu z Androidem, w tym w poszczególnych aplikacjach w zależności od ustawień użytkownika. Motywy systemowe obejmują jasne i ciemne motywy, przez użytkowników, jak i od producenta.
Jasne i ciemne motywy
Jasny motyw (tryb dzienny) składa się z jasnego trybu wyświetlacza o wyższym luminancja i powierzchnie oparte na wysokich tonach. Natomiast ciemny motyw lub trybie nocnym, przesuwa elementy interfejsu w celu zmniejszenia luminancji. Powierzchnie są utworzone w ciemnym kolorze szarości lub niskich wartości tonalnych.
Ciemny motyw ma wiele zalet: zwiększa czytelność ekranu w słonecznie lub przy słabym świetle w warunkach oświetleniowych, zmniejszając zmęczenie oczu przez niższą jasność baterii. Ta funkcja jest często najczęściej pojawiającą się wśród użytkowników funkcja aplikacji.
Stosując jasne i ciemne motywy, weź pod uwagę te kwestie:
- Możesz dostosować schemat kolorów, aby zwiększyć wyrazistość. Jeśli używasz Material Theme Builder tworzy schemat, automatycznie tworzy ciemny motyw oszustw. Więcej informacji o dostosowywaniu materiału i systemie kolorów do tworzenia motyw marki.
- Użytkownicy mogą ustawić jasny lub ciemny motyw w ustawieniach wyświetlacza na poziomie systemu „Zawsze włączone”, „Zawsze wyłączone” lub automatyczne zależnie od pory dnia. Zalecamy zgodnie z preferencjami użytkownika w systemie, ale warto też tworzyć w aplikacji elementy sterujące, aby zapewnić użytkownikom bardziej szczegółowe modyfikacje
- Treści internetowe w komponentach WebView mogą też mieć styl jasny, ciemny lub domyślny. Przeczytane jak ciemny motyw jest obsługiwany w komponentach WebView.
- Jeśli użytkownicy ją włączyli, Android może wymusić włączenie ciemnego motywu. Możesz też utworzyć niestandardowy ciemny motyw zapewniający większą kontrolę.
- Jeśli użytkownik nie włączył innych motywów lub ustawień, możesz: „blokowanie” do jasnego motywu. Nie zalecamy jednak tego, co może być niezgodne z potrzebami użytkownika w zakresie ułatwień dostępu i personalizacji.
Motywy wygenerowane przez użytkowników
Motywy użytkowników są obsługiwane przez dynamiczny kolor, są dostępne w Material You od Androida 12. Po włączeniu dynamiczne Kolor pobiera niestandardowe kolory z tapety użytkownika, które mają zostać zastosowane do jego aplikacji i interfejsie systemu. Ta paleta kolorów jest używana jako punkt początkowy do generowania jasnych i ciemnych schematów kolorów.
Ustawienia czcionki można też zmienić w ustawieniach urządzenia, aby dostosować preferencji i potrzeb związanych z ułatwieniami dostępu. Te ustawienia mogą powinny trafiać do aplikacji, więc używaj skalowalnych wartości pikseli dla czcionek.
Motywy producenta
Producenci urządzeń mogą udostępniać dodatkowe zastrzeżone możliwości tworzenia motywów co może mieć wpływ na interfejs systemowy i ustawienia wyświetlania.
Motywy aplikacji
Wartość bazowa
Komponenty Material w bibliotece Material Design stanowią motyw podstawowy, korzysta ze schematu kolorów fioletowych i czcionki Roboto. Każda aplikacja, która nie ma zdefiniowanego motywu przywraca te atrybuty bazowe.
Niestandardowy (marka)
Motywy niestandardowe pozwalają lepiej dopasować wygląd aplikacji do jej wyglądu i stylu lub na działanie kreacji zastępczej, gdy określone motywy systemowe są niedostępne. Jest to przydatne niezależnie od tego, czy pracujesz z pełnym niestandardowym systemem projektowania, przewodnik po marce lub kilka z Twoich ulubionych kolorów.
Aplikacja może mieć też wiele schematów niestandardowych, niezależnie od tego, czy użytkownik może mieć pełne schematy do wyboru, inspirowanych treściami lub elementów podmarkowych.
Treść
Aby wyróżnić niektóre treści, interfejs użytkownika może użyć dynamicznych kolorów, aby dziedziczyć kolory z tych treści. Kolor treści dobrze sprawdza się w przypadku jednego głównego źródła treści, pamiętaj, aby zachować ostrożność w przypadku widoków z wieloma źródłami treści.
Motyw dotyczy zwykle całej aplikacji, ale można go też stosować w wybranych krajach. i innych tematach. Unikaj zbyt wielu motywów i kombinacji, zachowując z hierarchią: źródło motywu podstawowego (dynamiczne lub niestandardowe), dotyczy większości interfejsu użytkownika.
Materiał
Material Design zapewnia bazowy motyw i systemy tematyczne (kolor, typ, kształt). Motywy materiału można również rozszerzyć, aby uzyskać dodatkowe do motywu.
Marka
Jeśli systemy motywów Material Design nie są zgodne z oczekiwanym wyglądem i stylem w swojej aplikacji, możesz zastosować w pełni niestandardowy motyw. Pamiętaj, aby przetestować niestandardowe dla kontrastu i czytelności.
Zobacz, jak wdrożyć system niestandardowy w funkcji Compose
Atrybuty motywu
Atrybuty motywu są zgodne z popularnymi stylami wizualnymi używanymi w projektowaniu UI, wywołują różne aspekty estetyki. Te właściwości w aplikacji są często powiązane z atrybutem Material systemów motywów, aby umożliwiać ich dostosowywanie.
Kolor
Używaj kolorów, aby wyrażać styl i określać znaczenie. Ustawianie kolorów aplikacji może mieć kluczowe znaczenie dla personalizacji, określenia celu semantycznego i określania tożsamości marki.
Schemat kolorów w motywie to grupa odcieni przypisanych do określonych ról które są mapowane na komponenty. Dowiedz się więcej o kolorach na Androidzie UI i system kolorów Material 3.
Typ
Czcionka systemowa Androida to Roboto (dostępna bezpłatnie dla wszystkich aplikacji), ale mogą dostosować typ. Weź pod uwagę czytelność wybranych czcionek, do których chcesz dopasować swoje role. Więcej informacji o typach stosowania
Kształt
Dostosowanie kształtu rogów kontenera poza domyślne wartości podstawowe pomaga określić charakter aplikacji. Możesz na przykład użyć zaokrąglonych rogów, aby Nadaj filmowi bardziej miękki i przyjemny charakter. Możesz też użyć kanciastego cięcia, aby uzyskać bardziej poważny efekt. Sprawdź tokeny kształtów i style komponentów Material Design.
Ikony
Ikony Material Design możesz wykorzystać w aplikacji w 5 stylach: Kontur, ostry, zaokrąglony, dwukolorowy. Używaj tego samego stylu ikon w całym aby zachować spójny i dopracowany wygląd.
Inne atrybuty motywu
Kolory, czcionka i kształt składają się na główne systemy motywów Material, nie ograniczają się do koncepcji, na których opiera się Material. Dostępne opcje modyfikować istniejące systemy i wprowadzać zupełnie nowe – z nowymi klasami i aby dostosować inne koncepcje do motywów. Konieczne może być też wykonanie tych czynności: rozszerzać lub zastąpić istniejące systemy tak, aby korzystały z atrybutów niestandardowych poza tymi, Na przykład można dodać system gradientów lub odstępów wymiarów.
Stosowanie motywu w aplikacji
Motyw, styl i zajęcia
Zarówno motywy, jak i style mogą mieć wiele atrybutów projektu. Styl może być są niezależne od motywu i odnoszą się do wyglądu pojedynczego elementu (albo widoku), podczas gdy motyw możesz ustawić dla wielu elementów, a nawet dla całego . Styl to wybór stylistyczny do wielokrotnego użytku, analogiczny do stylu lub tokena oprogramowania do projektowania. np. styl Body Large jest stylem, a Jasny i Ciemny to motywy.
Wdrażanie motywu w funkcji tworzenia wiadomości
Motyw zwykle składa się z kilku systemów grupujących wspólne elementy wizualne i koncepcje behawioralne, które modelujesz za pomocą klas z wartościami tematycznymi.
Więcej informacji o korzystaniu z Jetpack znajdziesz w sekcji Material Design 3 w Compose. Compose, aby utworzyć implementację motywu Material Design 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Wdrażanie motywu w Zdjęciach
Motywy to zbiór zasobów z nazwami semantycznymi, których można używać w całej aplikacji. Motywy mają taką samą składnię stylu.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Komponenty WebView
Treści internetowe w komponencie WebView mogą też mieć styl jasny, ciemny lub domyślny. Dowiedz się, jak to zrobić dostępny jest ciemny motyw w komponentach WebView.
Dostosowywanie motywu Material
Możesz użyć wtyczki Material Theme Builder Figma, aby: dostosować motyw Material Design. Stworzenie z nim motywu ułatwia wdrożenie układanie plików z wygenerowanymi jasnymi i ciemnymi schematami kolorów, , aby jeszcze bardziej go dostosować, aktualizując wyeksportowany plik motywu poprzez dokładne wartości.
