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

Zaprojektuj aplikację tak, aby dostosowywała się do wszystkich rozmiarów wyświetlanych elementów i stanów urządzenia.

Interfejs użytkownika

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

Aplikacja ma elastyczne i adaptacyjne układy dostosowane do wszystkich rozmiarów ekranu. Wszystkie układy są elastyczne (patrz Migrowanie interfejsu do elastycznych układów). Wdrożenie układów adaptacyjnych zależy od klas rozmiaru okna.

Interfejs aplikacji może zawierać:

  • Najnowocześniejsze paski nawigacyjne, które na większych ekranach rozwijają się w pełne panele nawigacyjne
  • 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.

Twórz układy wielopanelowe (w odpowiednich przypadkach), aby wykorzystać dużą przestrzeń na ekranie. Zobacz Układy kanoniczne.

Osadzanie aktywności umożliwia aplikacjom opartym na aktywności 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 stanach urządzeń, np.:

  • Na dużych ekranach panele dolne nie zajmują całej szerokości. (Zastosuj maksymalną szerokość, aby uniknąć rozciągania). Zobacz sekcję Zachowanie w Arkuszach: u dołu.
  • Przyciski nie zajmują całej szerokości na dużych ekranach. Więcej informacji znajdziesz w sekcji Zachowanie w Przyciski.
  • Pola tekstowe nie rozciągają się na całą szerokość na dużych ekranach. Więcej informacji znajdziesz w sekcji Zachowanie w artykule Pola tekstowe.
  • 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 wybranego elementu. Więcej informacji znajdziesz w temacie „Menu kontekstowe” w sekcji Menu.
  • Szyny nawigacyjne zastępują paski nawigacyjne, co zapewnia większą ergonomię na dużych ekranach. Zobacz Kolumna nawigacji.
  • Menu nawigacyjne zostało zastąpione rozwijanymi paskami nawigacyjnymi. Zobacz Panel nawigacji.
  • Okna dialogowe są aktualizowane do najnowszego komponentu Material Design. Zobacz okna.
  • Obrazy są wyświetlane w odpowiedniej rozdzielczości i nie są rozciągnięte ani przycięte.
Touch_Targets T-Touch_Targets Docelowe elementy dotykowe mają co najmniej 48 dp. Zapoznaj się z wytycznymi Material Design dotyczącymi układu i typografii.
Drawable_Focus T-Drawable_Focus W przypadku interaktywnych elementów rysowalnych niestandardowo tworzony jest stan aktywny. Niestandardowy obiekt rysowalny to dowolny wizualny element interfejsu, który nie jest dostarczany przez platformę Androida. Jeśli użytkownicy mogą wchodzić w interakcję z niestandardowym obiektem rysowalnym, musi on być możliwy do zaznaczenia, gdy urządzenie nie jest w trybie dotykowym, a wskazanie stanu aktywnego musi być widoczne.

Klawiatura, mysz i trackpad

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation Główne ścieżki zadań w aplikacji obsługują nawigację za pomocą klawiatury, w tym klawisza Tab i klawiszy strzałek. Więcej informacji znajdziesz w artykule Tworzenie bardziej dostępnych aplikacji.
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 zgodność wejść.
Keyboard_Media_Playback T-Keyboard_Media_Playback Klawiatury można używać do sterowania odtwarzaniem multimediów. Na przykład spacja włącza i wstrzymuje odtwarzanie.
Keyboard_Send T-Keyboard_Send Klawisz Enter na klawiaturze pełni funkcję wysyłania w aplikacjach do komunikacji.
Context_Menus T-Context_Menus Menu kontekstowe są dostępne po kliknięciu prawym przyciskiem myszy lub trackpada (drugi przycisk myszy lub drugie kliknię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 zsunięcia i rozsunięcia palców na trackpadzie.
Hover_States T-Hover_States Elementy interfejsu, które można kliknąć, mają stany najechania (w odpowiednich przypadkach), aby wskazywać użytkownikom myszy i touchpadów, że są interaktywne.

Testy

Aby mieć pewność, że aplikacja jest zoptymalizowana i działa prawidłowo w przypadku wszystkich konfiguracji wyświetlania, przeprowadź te testy.

Interfejs użytkownika

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Uruchamiaj 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ę w trybie wielu okien na urządzeniach.

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 funkcjonalności.

W przypadku aplikacji korzystających z osadzania aktywności sprawdź, czy aktywności są wyświetlane obok siebie na dużych ekranach i jedna pod drugą na małych ekranach.
T-Touch_Targets Touch_Targets Sprawdź, czy elementy docelowe dotyku zachowują spójny, dostępny rozmiar i pozycję oraz czy nie są ukryte ani zasłonięte przez inne elementy interfejsu na wszystkich ekranach i we wszystkich konfiguracjach. Więcej informacji o ułatwieniach dostępu znajdziesz w sekcji Accessibility Scanner.
T-Drawable_Focus Drawable_Focus Na każdym ekranie aplikacji, który zawiera interaktywny obiekt rysowalny niestandardowo, sprawdź, czy można go zaznaczyć za pomocą klawiatury zewnętrznej, pada kierunkowego lub innego urządzenia, które umożliwia zaznaczanie elementów interfejsu. Sprawdź, czy widoczny jest wizualny wskaźnik stanu aktywnego. Więcej informacji znajdziesz w artykule Tryb dotykowy.

Klawiatura, mysz i trackpad

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Poruszaj się po komponentach aplikacji, które można zaznaczyć, za pomocą klawisza Tab i klawiszy strzałek na zewnętrznej klawiaturze.
T-Keyboard_Shortcuts Skróty klawiszowe Używaj skrótów klawiszowych na klawiaturze zewnętrznej, aby wykonywać działania związane z wybieraniem, wycinaniem, kopiowaniem, wklejaniem, cofaniem i ponawianiem.
T-Keyboard_Media_Playback Keyboard_Media_Playback Używaj klawiatury zewnętrznej, aby rozpoczynać, zatrzymywać, wstrzymywać, przewijać do tyłu i do przodu odtwarzanie multimediów.
T-Keyboard_Send Keyboard_Send Aby wysłać lub przesłać dane, naciśnij klawisz Enter na klawiaturze zewnętrznej.
T-Context_Menus Context_Menus Aby uzyskać dostęp do menu kontekstowego elementów interaktywnych, użyj dodatkowego przycisku myszy lub funkcji dodatkowego kliknięcia na trackpadzie.
T-Content_Zoom Content_Zoom Aby powiększać i pomniejszać treści, używaj kółka przewijania myszy (w połączeniu z klawiszem Control lub Ctrl) oraz gestów szczypania na trackpadzie.
T-Hover_States Hover_States Najedź kursorem myszy lub trackpada na elementy interfejsu, które można kliknąć, aby aktywować stan najechany.