Omówienie widżetów aplikacji

Widżety to podstawowy aspekt dostosowywania ekranu głównego. Pomyśl o tym, jako „szybki podgląd”, najważniejszych danych i funkcji aplikacji bezpośrednio z ekranu głównego użytkownika. Użytkownicy mogą przenosić widżety między panelami na ekranie głównym i w razie potrzeby zmienić ich rozmiar, ilość informacji w widżecie zgodnie z ich preferencjami.

W tej dokumentacji opisujemy różne typy widżetów, które można tworzyć, oraz zasady projektowania. Tworzenie widżetu aplikacji za pomocą Widoku zdalnego Interfejsy API i układy XML znajdziesz w artykule Tworzenie prostego widżetu. Do jak utworzyć widżet za pomocą interfejsów API stylu Kotlin i Compose, zapoznaj się z artykułem Jetpack Glance

Typy widżetów

Planując widżet, zastanów się, jaki rodzaj widżetu chcesz utworzyć. Widgety zwykle należą do jednej z tych kategorii:

Widżety informacji

Przykładowy widżet pogody, w którym przeważnie Tokio wyświetla się
            zachmurzenie, 14 stopni, a przewidywana temperatura zaczyna się od
            16:00–19:00
Rysunek 1. Widżet z informacjami z aplikacji pogodowej.

Widżety informacyjne zwykle wyświetlają kluczowe informacje i śledzą że informacje zmieniają się z czasem. Przykładowe widżety informacji to pogoda widżety, widżety zegara lub widżety do śledzenia wyników sportowych. Kliknięcie widżetu z informacjami zwykle powoduje uruchomienie powiązanej aplikacji i wyświetlenie szczegółowych informacji o widżecie.

Widżety kolekcji

Widżety kolekcji specjalizują się w wyświetlaniu wielu elementów tego samego typu, np. kolekcję zdjęć z aplikacji do galerii, kolekcję artykułów z aplikacji z wiadomościami albo z kolekcji e-maili lub wiadomości z aplikacji do komunikacji. Widżety kolekcji można przewijać w pionie.

Widżety kolekcji zwykle służą do:

  • przeglądać kolekcję.
  • Otwarcie elementu kolekcji w widoku szczegółów w powiązanym .
  • interakcje z elementami, np. oznaczanie ich jako gotowych – z obsługą tych elementów: złożone przyciski w Androidzie 12 (poziom interfejsu API 31).

Sterowanie widżetami

Widżet aplikacji
o nazwie „Jasna lista”, wyświetlono przełączniki
            z etykietą „Sypialnia”, „Kuchnia” i „Salon”, z dwoma pierwszymi
            przełącz przełączniki na wyłączenie
Rysunek 4. Przykład widżetu sterującego.

Głównym przeznaczeniem widżetu sterującego jest wyświetlanie często używanych funkcji, aby użytkownik mógł je wywołać na ekranie głównym bez konieczności otwierania . Można je traktować jak piloty do aplikacji. Oto przykład widżet sterowania to widżet do sterowania domem, który pozwala użytkownikom włączyć światło w domu włącz lub wyłącz.

Interakcja z widżetem może spowodować otwarcie powiązanego widoku szczegółowego w aplikacji. Zależy to od tego, czy funkcja widżetu wygeneruje jakieś dane, na przykład w przypadku widżetu wyszukiwania.

Hybrydowe widżety

Ogólna aplikacja muzyczna z przyciskami „nie”, „wstecz”, „odtwórz/wstrzymaj”, „przewiń do przodu” i „lubię”. Wykonawca i
            utwory są oznaczone jako „Wykonawca”. i „Przykładowa muzyka”, .
Rysunek 5. Przykład widżetu aplikacji muzycznej.

Chociaż niektóre widżety reprezentują jeden z typów w poprzednim – informacje, zbieranie i elementy sterujące – wiele widżetów hybrydy, które łączą elementy różnego rodzaju. Na przykład odtwarzacz muzyki jest widżetem sterującym, ale pokazuje użytkownikowi również ścieżkę takich jak widżet informacji.

Planując widżet, zaprojektuj go wokół jednego z typów podstawowych i dodaj do niego elementy. inne w razie potrzeby.

Integrowanie widżetów z Asystentem Google

Asystent Google może wyświetlać dowolny rodzaj widżetu w odpowiedzi na prośbę użytkownika poleceń głosowych. Widżety można skonfigurować tak, aby spełniały Działania, które umożliwiają użytkownikom otrzymywać szybkie odpowiedzi i interaktywne aplikacje na platformach Asystenta, takich jak Android i Android Automatycznie. Więcej informacji o realizacji widżetów przez Asystenta znajdziesz w artykule Integrowanie akcji w aplikacji z Androidem widżety.

Ograniczenia widżetów

Widżety są nazywane „miniaplikacjami”, istnieją pewne ograniczenia które warto wiedzieć przed zaprojektowaniem widżetu.

Gesty

Widżety znajdują się na ekranie głównym, więc muszą współistnieć nawigacji w witrynie. Ogranicza to obsługę gestów niż w aplikacji pełnoekranowej. Aplikacje mogą umożliwiać użytkownikom przechodzić między ekranami w poziomie, ten gest jest już wykonywany na ekranie głównym do przechodzenia między ekranami głównymi.

Jedyne gesty dostępne w przypadku widżetów to dotyk i przesuwanie w pionie.

Żywioły

Ze względu na ograniczenia gestów dostępnych w przypadku widżetów niektóre elementy składowe interfejsu użytkownika korzystające z gestów z ograniczonym dostępem nie są dostępne w przypadku widżetów. Pełną listę obsługiwanych elementów konstrukcyjnych oraz więcej informacji o ograniczeniach układu znajdziesz w artykułach Tworzenie układu widżetuZapewnienie elastycznych układów widżetów.

Wytyczne dotyczące projektu

Zawartość widżetu

Widżety to świetny sposób na przyciągnięcie użytkowników do aplikacji za pomocą „reklamy” nowych i interesujące treści dostępne w aplikacji.

Podobnie jak w przypadku zwiastunów na pierwszej stronie gazety, widżety łączą się koncentracja na informacjach o aplikacji i zapewnia dostęp do bardziej szczegółowych informacji w aplikacji. Można powiedzieć, że widżet to „przekąska” podczas gdy jest „posiłkiem”. Jak sprawdzić, czy w aplikacji wyświetla się więcej szczegółów niż wyświetlany w widżecie.

Widżet powinien zawierać same informacje, linki nawigacyjne do często używanych obszarów aplikacji. Dzięki temu użytkownicy mogą ukończyć szybciej wykonywać zadania i rozszerzać funkcjonalny zasięg aplikacji na urządzenia domowe. ekranu.

Linki nawigacyjne w widżetach to:

  • Funkcje generatywne: to funkcje, które umożliwiają użytkownikowi tworzenie nowych treści w aplikacji, na przykład tworząc nowy dokument lub wiadomość.

  • Otwieranie aplikacji na najwyższym poziomie: zazwyczaj kliknij element informacyjny. przenosi użytkownika na ekran szczegółów niższego poziomu. Zapewnianie dostępu do najwyższy poziom aplikacji zapewnia większą elastyczność nawigacji i który pozwala zastąpić specjalny skrót do aplikacji, za pomocą którego użytkownicy przechodzą do aplikację na ekranie głównym. Użycie ikony aplikacji do wyświetlania tej funkcji może też wyraźnie identyfikować widżet, jeśli wyświetlane dane są niejednoznaczne.

Zmienianie rozmiaru widżetu

Standardowy widżet zegara Google
Rysunek 6. Standardowy widżet Zegar Google.

Dotykanie i przytrzymując widżet z możliwością zmiany rozmiaru, i uwalniając go, i w trybie zmiany rozmiaru. Użytkownicy mogą przeciągać elementy w rogach widżetu lub w rogach widżetu, aby preferowanego rozmiaru.

Zmiana rozmiaru umożliwia użytkownikom dostosowanie wysokości i szerokości widżetu w ograniczeń siatki miejsc na ekranie głównym. Możesz zdecydować, czy widżet, którego rozmiar można dowolnie zmieniać lub ograniczać do poziomu lub pionu. zmian. Nie musisz obsługiwać zmiany rozmiaru, jeśli widżet jest z założenia dostępny. o stałym rozmiarze.

Umożliwienie użytkownikom zmiany rozmiaru widżetów ma ważne zalety:

  • Mogą dostosować ilość informacji, które mają być wyświetlane w każdym widżecie.
  • Mogą lepiej wpływać na układ widżetów i skrótów na ekranie głównym panele informacyjne.

Zaplanuj strategię zmiany rozmiaru widżetu w zależności od jego typu podczas tworzenia. Widżety kolekcji oparte na listach lub siatkach są zwykle proste, bo zmiana rozmiaru widżetu powoduje rozszerzenie lub zwinięcie obszaru przewijania w pionie. Niezależnie od rozmiaru widżetu użytkownik może przewijać wszystkie informacje elementów.

Widżety informacyjne wymagają bardziej praktycznego planowania, ponieważ i przewijana, więc cała zawartość musi mieścić się w określonym rozmiarze. Musisz dynamicznie dostosowywać zawartość i układ widżetu do rozmiaru zdefiniowanego przez użytkownika podczas operacji zmiany rozmiaru.

W poniższym przykładzie użytkownik może zmienić rozmiar widżetu pogody w trzech kroków, wyświetlając bogatsze informacje o pogodzie w bieżącej lokalizacji i widżet może rosnąć.

Przykładowy widżet pogody o najmniejszym rozmiarze siatki 3 x 2 oraz przedstawiający
            nazwa lokalizacji (Tokio), temperatura (14°) i symbol wskazujący
            częściowe zachmurzenie
Rysunek 7. Przykład widżetu pogody w siatce 3 x 2 w rozmiarze „mały”.


Przykładowy widżet pogody w rozmiarze 5 x 2 „średni” , w tym wszystkie
            Interfejs przedstawiający siatkę o wymiarach 3 x 2 oraz etykietę „w większości zachmurzone” oraz
            prognozowana temperatura od 16:00 do 19:00
Rysunek 8. Przykładowy widżet pogody w siatce 5 x 2 „średni” rozmiaru.


Przykładowy widżet pogody w dużym rozmiarze 5 x 4 z uwzględnieniem wszystkich elementów interfejsu
            od siatki 3 x 2 i 5 x 2 oraz prognozy pogody
            od wtorku do piątku
Rysunek 9. Przykładowy widżet pogody na „dużej” siatce 5 x 4 rozmiaru.

Określ, ile informacji o aplikacji ma być wyświetlane w przypadku każdego rozmiaru widżetu. W przypadku mniejszych rozmiarów skup się na najważniejszych informacjach i dodaj kontekst gdy widżet rozwija się w pionie i w poziomie.

Uwagi dotyczące układu

Może to być kuszące układanie widżetów według wymiarów siatkę miejsc docelowych urządzeń, na których tworzysz. To może być przydatny początek ale pamiętaj o następujących kwestiach:

  • Planowanie strategii zmiany rozmiaru widżetów w ramach „zasobników o różnych rozmiarach” zamiast zmiennych wymiarów siatki to najbardziej wiarygodne wyniki.
  • Liczba, rozmiar i odstępy komórek mogą się znacznie różnić w zależności od urządzenia urządzenia. Dlatego tak ważne jest, aby widżet był elastyczny mieszczą więcej lub mniej miejsca, niż się spodziewaliśmy.
  • Gdy użytkownik zmienia rozmiar widżetu, system odpowiada zakresem rozmiarów w pikselach, w którym widżet może się ponownie narysować.
  • Od Androida 12 możesz udostępniać użytkownikom bardziej precyzyjny rozmiar a także elastyczny układ. Obejmuje to:

Konfigurowanie widżetu przez użytkowników

Czasami widżet może być przydatny dopiero po skonfigurowaniu przez użytkownika. Pomyśl o widżecie e-maili, w którym użytkownik musi wybrać folder poczty, zanim będzie można wyświetlić skrzynkę odbiorczą, lub widżecie statycznych zdjęć, w którym użytkownik musi przypisać zdjęcie z galerii, aby je wyświetlić. Widżety Androida wyświetlają gdy użytkownik upuszcza widżet na ekranie głównym.

Lista kontrolna dotycząca projektowania widżetów

  • Skup się na niewielkich fragmentach widocznych w widżecie informacji. Rozwiń do informacji w Twojej aplikacji.
  • Wybierz odpowiedni typ widżetu do swoich potrzeb.
  • Zaplanuj, jak treść widżetu dostosowuje się do różnych rozmiarów.
  • Dopilnuj, aby układ widżetu był niezależny od orientacji i urządzenia. układ może się rozciągać i ściskać.
  • Zastanów się, czy widżet wymaga dodatkowej konfiguracji.