Tier 2 – Adaptiv optimiert

Optimierte Apps unterstützen alle Bildschirmtypen und Gerätestatus, einschließlich Statusübergängen.

Darstellung der drei Qualitätsstufen als vertikal gestapelte Ebenen, wobei die mittlere Stufe hervorgehoben ist.

Richtlinien

Entwickeln Sie Ihre App so, dass sie sich an alle Displaygrößen und Gerätestatus anpasst.

Benutzeroberfläche

Richtlinien-ID Test-IDs Beschreibung
Responsive_adaptive_layouts T-Layout_Flow

Die App bietet responsive und adaptive Layouts für alle Bildschirmgrößen. Alle Layouts sind responsiv (siehe Benutzeroberfläche zu responsiven Layouts migrieren). Die Implementierung adaptiver Layouts wird durch Fenstergrößenklassen bestimmt.

Die App-UI kann Folgendes enthalten:

  • Innovative Navigationsleisten, die sich bei größeren Fenstergrößen zu vollständigen Navigationsbereichen erweitern lassen
  • Rasterlayouts, bei denen die Anzahl der Spalten an die Fenstergröße angepasst wird
  • Textspalten auf großen Bildschirmen
  • Bereiche am rechten Rand, die auf Desktop-Bildschirmen standardmäßig geöffnet und auf kleineren Bildschirmen geschlossen sind

Erstelle Layouts mit mehreren Bereichen (sofern sinnvoll), um den Platz auf großen Bildschirmen optimal zu nutzen. Siehe Kanonische Layouts.

Verwenden Sie für Jetpack Compose-Apps adaptive Layouts (z. B. ListDetailPaneScaffold), um Benutzeroberflächen mit mehreren Bereichen zu erstellen. Bei älteren aktivitätsbasierten Apps ermöglicht die Einbettung von Aktivitäten mehrspaltige Layouts, indem Aktivitäten nebeneinander angezeigt werden.
UI_Secondary_Elements T-Layout_Flow

Modale Fenster, Kontextmenüs und andere sekundäre Elemente sind auf allen Bildschirmtypen und in allen Gerätestatus richtig formatiert, zum Beispiel:

  • Ansichten am unteren Rand werden auf großen Bildschirmen nicht in voller Breite angezeigt. (Wenden Sie eine maximale Breite an, um ein Strecken zu vermeiden.) Weitere Informationen finden Sie unter Responsives Layout in Ansichten am unteren Rand.
  • Schaltflächen werden auf großen Bildschirmen nicht in voller Breite angezeigt. Weitere Informationen findest du unter Adaptives Design im Abschnitt Schaltflächen.
  • Textfelder und -boxen werden auf großen Bildschirmen nicht auf die volle Breite gestreckt. Siehe Adaptives Design unter Textfelder.
  • Kleine Bearbeitungsmenüs oder Modale decken nicht den gesamten Bildschirm ab und erhalten den Kontext für den Nutzer so weit wie möglich aufrecht. Weitere Informationen finden Sie unter Speisekarten.
  • Kontextmenüs werden neben dem vom Nutzer ausgewählten Element angezeigt. Weitere Informationen finden Sie im Abschnitt „Kontextmenüs“ unter Menüs.
  • Navigationsleisten werden durch Navigationsleisten ersetzt, um die Ergonomie auf großen Bildschirmen zu verbessern. Weitere Informationen finden Sie unter Navigationsstreifen.
  • Navigationsleisten werden zu maximierten Navigationsleisten aktualisiert. Weitere Informationen finden Sie unter Navigationsleiste.
  • Dialogfelder werden auf die neueste Material-Komponente aktualisiert. Weitere Informationen finden Sie unter Dialogfelder.
  • Bilder werden in einer geeigneten Auflösung angezeigt und sind nicht gestreckt oder zugeschnitten.
Touch_Targets T-Touch_Targets Berührungszielbereiche sind mindestens 48 dp groß. Weitere Informationen finden Sie in den Material Design-Richtlinien zu Zielgrößen.
Drawable_Focus T-Drawable_Focus Für interaktive benutzerdefinierte Drawables wird ein fokussierter Status erstellt. Ein benutzerdefiniertes Drawable ist ein visuelles UI-Element, das nicht vom Android-Framework bereitgestellt wird. Wenn Nutzer mit einem benutzerdefinierten Drawable interagieren können, muss das Drawable fokussierbar sein, wenn sich das Gerät nicht im Touch-Modus befindet. Außerdem muss eine visuelle Anzeige des fokussierten Zustands vorhanden sein.

Tastatur, Maus und Trackpad

Richtlinien-ID Test-IDs Beschreibung
Keyboard_Navigation T-Keyboard_Navigation Die wichtigsten Aufgabenabläufe in der App unterstützen die Tastaturnavigation, einschließlich der Navigation mit der Tabulatortaste und den Pfeiltasten. Weitere Informationen finden Sie unter Barrierefreiere Apps entwickeln.
Tastenkombinationen T-Keyboard_Shortcuts Die App unterstützt Tastenkombinationen für häufig verwendete Aktionen wie Auswählen, Ausschneiden, Kopieren, Einfügen, Rückgängigmachen und Wiederholen. Weitere Informationen finden Sie unter Tastatur, Maus und Touchpad.
Keyboard_Media_Playback T-Keyboard_Media_Playback Die Tastatur kann zur Steuerung der Medienwiedergabe verwendet werden, z. B. die Leertaste zum Abspielen und Pausieren von Medien.
Keyboard_Send T-Keyboard_Send Die Eingabetaste der Tastatur führt in Kommunikations-Apps die Funktion Senden aus.
Keyboard_Exit T-Keyboard_Exit Die Esc-Taste auf der Tastatur führt eine Beenden-Funktion aus, die eine Aktion beendet oder rückgängig macht, z. B.:
  • Schließt Modale, Dialogfelder, Pop-ups und Menüs
  • Löscht den Suchtext oder entfernt den Suchfokus
  • Hebt den Tastaturfokus auf
  • Beendet Videovollbild, PiP, Vollbildmodus oder Diashows
  • Schließt Steuerelemente auf dem Bildschirm, z. B. Fortschrittsanzeigen oder Menüs
  • Bricht die Timer für „Nächstes Video“ und Autoplay ab
  • Auswahl aller ausgewählten Elemente aufheben
  • Bricht das Umbenennen/Bearbeiten ab, ohne zu speichern
  • Beendet die Zuschneide-/Transformationstools und verwirft die Änderungen
Context_Menus T-Context_Menus Kontextmenüs sind über den typischen Rechtsklick (sekundäre Maustaste oder sekundäres Tippen) mit der Maus oder dem Trackpad zugänglich.
Content_Zoom T-Content_Zoom App-Inhalte können mit dem Maus-Scrollrad (in Verbindung mit der Strg-Taste) und Trackpad-Gesten zum Auseinander- und Zusammenziehen gezoomt werden.
Hover_States T-Hover_States Interaktive UI-Elemente haben Mouseover-Effekte (sofern angemessen), um Maus- und Trackpad-Nutzern die Interaktivität anzuzeigen.

Tests

Führe die folgenden Tests durch, um sicherzustellen, dass deine App für alle Displaykonfigurationen optimiert ist und darauf reagiert.

Benutzeroberfläche

Test-ID Richtlinien-IDs Beschreibung
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Führen Sie die App auf Geräten mit unterschiedlichen Bildschirmgrößen aus, darunter Smartphones, faltbare Smartphones, kleine und große Tablets sowie Desktop-Geräte. Führe die App auf den Geräten im Mehrfenstermodus aus.

Prüfen Sie, ob das App-Layout auf verschiedene Bildschirm- und Fenstergrößen reagiert und sich an diese anpasst. Prüfe, ob die App Navigationsleisten maximiert und minimiert, die Anzahl der Spalten in Rasterlayouts skaliert, Text in Spalten umbricht usw. Achten Sie darauf, ob die UI-Elemente sowohl ästhetisch als auch funktional formatiert sind.

Wenn Sie ältere Apps mit eingebetteten Aktivitäten verwenden, testen Sie, ob Aktivitäten auf großen Bildschirmen nebeneinander und auf kleinen Bildschirmen übereinander angezeigt werden.
T-Touch_Targets Touch_Targets Prüfen Sie, ob Berührungszielbereiche bei allen Displaygrößen und ‑konfigurationen eine einheitliche, barrierefreie Größe und Position haben und nicht durch andere UI-Elemente verdeckt werden. Informationen zur Barrierefreiheit im Internet finden Sie unter Accessibility Scanner.
T-Drawable_Focus Drawable_Focus Prüfen Sie auf jedem App-Bildschirm, der ein interaktives benutzerdefiniertes Drawable enthält, ob das Drawable mit einer externen Tastatur, einem Steuerkreuz oder einem anderen Gerät, mit dem UI-Elemente fokussiert werden können, fokussiert werden kann. Prüfen Sie, ob eine visuelle Anzeige des fokussierten Zustands vorhanden ist. Weitere Informationen finden Sie in der Dokumentation zum Fokus in Compose.

Tastatur, Maus und Trackpad

Test-ID Richtlinien-IDs Beschreibung
T-Keyboard_Navigation Keyboard_Navigation Navigieren Sie mit der Tabulatortaste und den Pfeiltasten einer externen Tastatur durch die fokussierbaren Komponenten der App.
T-Keyboard_Shortcuts Keyboard_Shortcuts Verwenden Sie Tastenkombinationen auf einer externen Tastatur, um Aktionen wie Auswählen, Ausschneiden, Kopieren, Einfügen, Rückgängigmachen und Wiederholen auszuführen.
T-Keyboard_Media_Playback Keyboard_Media_Playback Mit einer externen Tastatur kannst du die Medienwiedergabe starten, beenden, pausieren, zurückspulen und vorspulen.
T-Keyboard_Send Keyboard_Send Verwenden Sie die Eingabetaste einer externen Tastatur, um Daten zu senden oder einzureichen.
T-Keyboard_Exit Keyboard_Exit

Verwenden Sie die Esc-Taste einer externen Tastatur, um eine Beenden-Funktion auszuführen. Prüfen Sie, ob der Schlüssel Folgendes tut (falls zutreffend):

  • Schließt Modale, Dialogfelder, Pop-ups und Menüs
  • Löscht den Suchtext oder entfernt den Suchfokus
  • Hebt den Tastaturfokus auf
  • Beendet Videovollbild, PiP, Vollbildmodus oder Diashows
  • Schließt die Steuerelemente auf dem Bildschirm
  • Bricht die Timer für „Nächstes Video“ und Autoplay ab
  • Auswahl aller ausgewählten Elemente aufheben
  • Bricht das Umbenennen/Bearbeiten ab, ohne zu speichern
  • Beendet die Zuschneide-/Transformationstools und verwirft die Änderungen
T-Context_Menus Context_Menus Verwenden Sie die sekundäre Maustaste oder die sekundäre Tippfunktion des Trackpads, um das Kontextmenü interaktiver Elemente aufzurufen.
T-Content_Zoom Content_Zoom Sie können mit dem Maus-Scrollrad (in Verbindung mit der Strg-Taste) und Trackpad-Gesten zum Auseinander- und Zusammenziehen heran- und herauszoomen.
T-Hover_States Hover_States Bewegen Sie den Maus- oder Trackpad-Cursor auf interaktive UI-Elemente, um den Mouseover-Effekt des Elements zu aktivieren.