Poziom 2 – optymalizacja adaptacyjna

Zoptymalizowane aplikacje w pełni obsługują wszystkie typy ekranów i stany urządzeń, w tym przejścia między stanami.

Ilustracja 3 poziomów jakości w postaci warstw ułożonych pionowo, z wyróżnionym środkowym poziomem.

Wskazówki

Zadbaj o to, aby Twoja aplikacja dostosowywała się do wszystkich rozmiarów wyświetlacza i stanów urządzenia.

Interfejs użytkownika

Identyfikator wskazówki Identyfikatory testów Opis
Responsive_adaptive_layouts T-Layout_Flow

Aplikacja ma elastyczne i adaptacyjne układy zaprojektowane pod kątem wszystkich rozmiarów ekranu. Wszystkie układy są elastyczne (zobacz Migrowanie interfejsu do układów elastycznych). Implementacja układów adaptacyjnych jest określana przez klasy rozmiarów okien.

Interfejs aplikacji może zawierać:

  • nowoczesne paski nawigacyjne, które rozwijają się do pełnych paneli nawigacyjnych przy większych rozmiarach okien;
  • układy siatki, które skalują liczbę kolumn, aby dostosować się do zmian rozmiaru okna;
  • kolumny tekstu na dużych ekranach;
  • panele na końcu, które są domyślnie otwarte na ekranach komputerów, a zamknięte na mniejszych ekranach.

W razie potrzeby twórz układy wielopanelowe, aby wykorzystać przestrzeń na dużym ekranie. Zobacz Układy kanoniczne.

W przypadku aplikacji Jetpack Compose używaj układów adaptacyjnych (np. ListDetailPaneScaffold), aby tworzyć interfejsy wielopanelowe. W przypadku starszych aplikacji opartych na aktywności osadzanie aktywności umożliwia tworzenie układów wielopanelowych przez wyświetlanie aktywności obok siebie.

UI_Secondary_Elements T-Layout_Flow

Okna modalne, menu kontekstowe i inne elementy dodatkowe są prawidłowo sformatowane na wszystkich typach ekranów i w stanach urządzeń, np.:

  • arkusze dolne nie zajmują całej szerokości na dużych ekranach. (Aby uniknąć rozciągania, zastosuj maksymalną szerokość). Zobacz Zachowanie w Arkuszach: dół.
  • przyciski nie zajmują całej szerokości na dużych ekranach. Zobacz Zachowanie w przyciskach.
  • pola tekstowe i pola nie rozciągają się na całą szerokość na dużych ekranach. Zobacz Zachowanie w polach tekstowych.
  • małe menu edycji lub okna modalne nie zajmują całego ekranu i w jak największym stopniu zachowują kontekst dla użytkownika. Zobacz Menu.
  • menu kontekstowe pojawiają się obok elementu wybranego przez użytkownika. Zobacz temat „Menu kontekstowe” w sekcji Menu.
  • paski nawigacyjne zastępują paski menu, aby zapewnić lepszą ergonomię na dużych ekranach. Zobacz Pasek nawigacyjny.
  • panele nawigacji są aktualizowane do rozwiniętych pasków nawigacyjnych. Zobacz Panel nawigacji.
  • okna dialogowe są aktualizowane do najnowszego komponentu Material. Zobacz Okna dialogowe.
  • obrazy są wyświetlane w odpowiedniej rozdzielczości i nie są rozciągane ani przycinane.
Touch_Targets T-Touch_Targets Docelowe elementy dotykowe mają co najmniej 48 dp. Zobacz wskazówki dotyczące układu i typografii Material Design.
Drawable_Focus T-Drawable_Focus Dla niestandardowych elementów rysowalnych, które są interaktywne, tworzony jest stan zaznaczenia. Niestandardowy element rysowalny to dowolny wizualny element interfejsu, który nie jest dostarczany przez platformę Android. Jeśli użytkownicy mogą wchodzić w interakcję z niestandardowym elementem rysowalnym, element ten musi być możliwy do zaznaczenia, gdy urządzenie nie jest w trybie dotykowym, a wizualne wskazanie stanu zaznaczenia musi być widoczne.

Klawiatura, mysz i trackpad

Identyfikator wskazówki Identyfikatory testów Opis
Keyboard_Navigation T-Keyboard_Navigation Główne ścieżki zadań w aplikacji obsługują nawigację za pomocą klawiatury, w tym nawigację za pomocą klawisza Tab i strzałek. Zobacz Tworzenie aplikacji z ułatwieniami dostępu.
Keyboard_Shortcuts T-Keyboard_Shortcuts Aplikacja obsługuje skróty klawiszowe do często używanych działań, takich jak zaznaczanie, wycinanie, kopiowanie, wklejanie, cofanie i ponawianie. Zobacz Klawiatura, mysz i trackpad.
Keyboard_Media_Playback T-Keyboard_Media_Playback Klawiatury można używać do sterowania odtwarzaniem multimediów. Na przykład spacja odtwarza i wstrzymuje multimedia.
Keyboard_Send T-Keyboard_Send Klawisz Enter na klawiaturze pełni funkcję wysyłania w aplikacjach do komunikacji.
Keyboard_Exit T-Keyboard_Exit Klawisz Esc na klawiaturze pełni funkcję wyjścia, która kończy lub cofa działanie, np.:
  • zamyka okna modalne, okna dialogowe, wyskakujące okienka i menu;
  • usuwa tekst wyszukiwania lub usuwa zaznaczenie wyszukiwania;
  • anuluje zaznaczenie klawiatury;
  • wychodzi z trybu pełnoekranowego wideo, PiP, trybu pełnoekranowego lub pokazu slajdów;
  • zamyka elementy sterujące na ekranie, takie jak paski postępu lub menu;
  • anuluje minutniki „Następny” / autoodtwarzania;
  • usuwa zaznaczenie wszystkich wybranych elementów;
  • przerywa zmianę nazwy lub edycję bez zapisywania;
  • wychodzi z narzędzi do przycinania i przekształcania oraz odrzuca zmiany.
Context_Menus T-Context_Menus Menu kontekstowe są dostępne po kliknięciu prawym przyciskiem myszy lub trackpada (dodatkowy przycisk myszy lub dodatkowe dotknięcie).
Content_Zoom T-Content_Zoom Zawartość aplikacji można powiększać za pomocą kółka przewijania myszy (w połączeniu z naciśnięciem klawisza Control lub Ctrl) oraz gestów uszczypnięcia na trackpadzie.
Hover_States T-Hover_States Elementy interfejsu, z którymi można wchodzić w interakcję, mają stany najechania (w stosownych przypadkach), aby wskazać użytkownikom myszy i trackpada, że elementy są interaktywne.

Testy

Aby mieć pewność, że Twoja aplikacja jest zoptymalizowana i reaguje na wszystkie konfiguracje wyświetlacza, wykonaj te testy.

Interfejs użytkownika

Identyfikator testu Identyfikatory wskazówek Opis
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Uruchom aplikację na urządzeniach o różnych rozmiarach ekranu, w tym na telefonach, telefonach składanych, małych i dużych tabletach oraz komputerach. Uruchom aplikację na urządzeniach w trybie wielu okien.

Sprawdź, czy układ aplikacji reaguje na różne rozmiary ekranu i okna oraz dostosowuje się do nich. Sprawdź, czy aplikacja rozwija i zwija paski nawigacyjne, skaluje liczbę kolumn w układach siatki, przenosi tekst do kolumn itp. Sprawdź, czy elementy interfejsu są sformatowane pod kątem estetyki i funkcji.

W przypadku starszych aplikacji korzystających z osadzania aktywności sprawdź, czy aktywności są wyświetlane obok siebie na dużych ekranach i ułożone w stos na małych ekranach.

T-Touch_Targets Touch_Targets Sprawdź, czy docelowe elementy dotykowe zachowują spójny, dostępny rozmiar i położenie oraz nie są ukryte ani zasłonięte przez inne elementy interfejsu we wszystkich rozmiarach i konfiguracjach wyświetlacza. Więcej informacji o ułatwieniach dostępu znajdziesz w artykule Accessibility Scanner.
T-Drawable_Focus Drawable_Focus Na każdym ekranie aplikacji, który zawiera interaktywny niestandardowy element rysowalny, sprawdź, czy element ten można zaznaczyć za pomocą klawiatury zewnętrznej, pada kierunkowego lub innego urządzenia, które umożliwia zaznaczanie elementów interfejsu. Sprawdź, czy wizualne wskazanie stanu zaznaczenia jest widoczne. Więcej informacji znajdziesz w dokumentacji dotyczącej zaznaczania w Compose.

Klawiatura, mysz i trackpad

Identyfikator testu Identyfikatory wskazówek Opis
T-Keyboard_Navigation T-Keyboard_Navigation Poruszaj się po komponentach aplikacji, które można zaznaczyć, za pomocą klawisza Tab i strzałek na klawiaturze zewnętrznej.
T-Keyboard_Shortcuts Keyboard_Shortcuts Używaj skrótów klawiszowych na klawiaturze zewnętrznej, aby wykonywać działania zaznaczania, wycinania, kopiowania, wklejania, cofania i ponawiania.
T-Keyboard_Media_Playback Keyboard_Media_Playback Używaj klawiatury zewnętrznej, aby uruchamiać, zatrzymywać, wstrzymywać, przewijać do tyłu i do przodu odtwarzanie multimediów.
T-Keyboard_Send Keyboard_Send Używaj klawisza Enter na klawiaturze zewnętrznej, aby wysyłać lub przesyłać dane.
T-Keyboard_Exit Keyboard_Exit

Używaj klawisza Esc na klawiaturze zewnętrznej, aby wykonywać funkcję wyjścia. Sprawdź, czy klawisz wykonuje te czynności (w stosownych przypadkach):

  • zamyka okna modalne, okna dialogowe, wyskakujące okienka i menu;
  • usuwa tekst wyszukiwania lub usuwa zaznaczenie wyszukiwania;
  • anuluje zaznaczenie klawiatury;
  • wychodzi z trybu pełnoekranowego wideo, PiP, trybu pełnoekranowego lub pokazu slajdów;
  • zamyka elementy sterujące na ekranie;
  • anuluje minutniki „Następny” / autoodtwarzania;
  • usuwa zaznaczenie wszystkich wybranych elementów;
  • przerywa zmianę nazwy lub edycję bez zapisywania;
  • wychodzi z narzędzi do przycinania i przekształcania oraz odrzuca zmiany.
T-Context_Menus Context_Menus Używaj dodatkowego przycisku myszy lub dodatkowego dotknięcia trackpada, aby uzyskać dostęp do menu kontekstowego elementów interaktywnych.
T-Content_Zoom Content_Zoom Używaj kółka przewijania myszy (w połączeniu z klawiszem Control lub Ctrl) oraz gestów uszczypnięcia na trackpadzie, aby powiększać i pomniejszać zawartość.
T-Hover_States Hover_States Najedź kursorem myszy lub trackpada na elementy interfejsu, z którymi można wchodzić w interakcję, aby aktywować stan najechania elementu.