Tier 2 – Adaptiv optimiert

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

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 hat responsive und adaptive Layouts, die für alle Bildschirmgrößen entwickelt wurden. Alle Layouts sind responsiv (siehe UI zu responsiven Layouts migrieren). Die Implementierung adaptiver Layouts wird durch Fenstergrößenklassen bestimmt.

Die App-UI kann Folgendes umfassen:

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

Erstellen Sie gegebenenfalls Layouts mit mehreren Bereichen, um den Platz auf großen Bildschirmen optimal zu nutzen. Weitere Informationen finden Sie unter Kanonische Layouts.

Verwenden Sie für Jetpack Compose-Apps adaptive Layouts (z. B. ListDetailPaneScaffold), um mehrteilige UIs zu erstellen. Bei älteren aktivitätsbasierten Apps ermöglicht die Aktivitätseinbettung Layouts mit mehreren Bereichen, 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, z. B.:

  • Bottom Sheets sind auf großen Bildschirmen nicht über die gesamte Breite verfügbar. Wenden Sie eine maximale Breite an, um ein Strecken zu vermeiden. Weitere Informationen finden Sie unter Verhalten in Google Sheets: unten.
  • Schaltflächen sind auf großen Bildschirmen nicht über die gesamte Breite verfügbar. Weitere Informationen finden Sie unter Verhalten in Schaltflächen.
  • Textfelder und ‑boxen werden auf großen Bildschirmen nicht über die gesamte Breite gestreckt. Weitere Informationen finden Sie unter Verhalten in Textfeldern.
  • Kleine Bearbeitungsmenüs oder modale Fenster decken nicht den gesamten Bildschirm ab und behalten den Kontext für den Nutzer so weit wie möglich bei. Weitere Informationen finden Sie unter Menüs.
  • Kontextmenüs werden neben dem vom Nutzer ausgewählten Element angezeigt. Weitere Informationen finden Sie im Thema „Kontextmenüs“ unter Menüs.
  • Navigationsleisten ersetzen Navigationsleisten, um die Ergonomie auf großen Bildschirmen zu verbessern. Weitere Informationen finden Sie unter Navigationsleiste.
  • Navigationsleisten werden zu erweiterten Navigationsleisten aktualisiert. Weitere Informationen finden Sie unter Navigationsleiste.
  • Dialogfelder werden auf die neueste Material-Komponente aktualisiert. Weitere Informationen finden Sie unter Dialogfelder.
  • Bilder werden mit der richtigen Auflösung angezeigt und nicht gestreckt oder zugeschnitten.
Touch_Targets T-Touch_Targets Berührungszielbereiche sind mindestens 48 dp groß. Weitere Informationen finden Sie in den Richtlinien für Material Design Layout und Typografie.
Drawable_Focus T-Drawable_Focus Für benutzerdefinierte Drawables, die interaktiv sind, wird ein Fokusstatus 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 Touchmodus befindet. Außerdem muss der Fokusstatus visuell angezeigt werden.

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 Apps mit mehr Barrierefreiheit entwickeln.
Keyboard_Shortcuts 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 Trackpad.
Keyboard_Media_Playback T-Keyboard_Media_Playback Die Medienwiedergabe kann über die Tastatur gesteuert werden. Mit der Leertaste können Sie beispielsweise Medien abspielen und pausieren.
Keyboard_Send T-Keyboard_Send Mit der Eingabetaste der Tastatur wird in Kommunikations-Apps die Funktion Senden ausgeführt.
Keyboard_Exit T-Keyboard_Exit Mit der Esc-Taste der Tastatur wird die Funktion Beenden ausgeführt, mit der eine Aktion beendet oder rückgängig gemacht wird. Beispiele:
  • Modale Fenster, Dialogfelder, Pop-ups und Menüs werden geschlossen.
  • Suchtext wird gelöscht oder der Suchfokus wird entfernt.
  • Der Tastaturfokus wird abgebrochen.
  • Videovollbild, BiB, Vollbildmodus oder Diashows werden beendet.
  • Steuerelemente auf dem Bildschirm wie Fortschrittsbalken oder Menüs werden geschlossen.
  • Timer für „Als Nächstes“/Autoplay werden abgebrochen.
  • Die Auswahl aller ausgewählten Elemente wird aufgehoben.
  • Das Umbenennen/Bearbeiten wird ohne Speichern abgebrochen.
  • Die Tools zum Zuschneiden/Transformieren werden beendet und Änderungen werden verworfen.
Context_Menus T-Context_Menus Kontextmenüs sind über den typischen Rechtsklick mit der Maus und dem Trackpad (sekundäre Maustaste oder sekundäres Tippen) zugänglich.
Content_Zoom T-Content_Zoom App-Inhalte können mit dem Mausrad (in Verbindung mit dem Drücken der Strg-Taste) und Trackpad-Gesten zum Auseinander- und Zusammenziehen gezoomt werden.
Hover_States T-Hover_States Interaktive UI-Elemente haben gegebenenfalls Mouseover-Effekte, um Maus- und Trackpad-Nutzern anzuzeigen, dass die Elemente interaktiv sind.

Tests

Führen Sie die folgenden Tests aus, um sicherzustellen, dass Ihre App für alle Displaykonfigurationen optimiert und responsiv ist.

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, z. B. auf Smartphones, faltbaren Smartphones, kleinen und großen Tablets sowie Desktop-Geräten. Führen Sie die App auf den Geräten im Multifenstermodus aus.

Prüfen Sie, ob das App-Layout auf unterschiedliche Bildschirm- und Fenstergrößen reagiert und sich daran anpasst. Prüfen Sie, ob die App Navigationsleisten erweitert und verkleinert, die Anzahl der Spalten in Rasterlayouts skaliert, Text in Spalten einfügt usw. Prüfen Sie, ob UI-Elemente sowohl ästhetisch als auch funktional formatiert sind.

Testen Sie bei älteren Apps, die Aktivitätseinbettung verwenden, 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 für alle Displaygrößen und ‑konfigurationen eine konsistente, zugängliche Größe und Position haben und nicht durch andere UI-Elemente verdeckt oder verdeckt werden. Informationen zur Barrierefreiheit finden Sie unter dem 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 fokussiert werden kann, mit dem UI-Elemente fokussiert werden können. Prüfen Sie, ob der fokussierte Zustand visuell angezeigt wird. Weitere Informationen finden Sie in der Dokumentation zum Fokus in Compose.

Tastatur, Maus und Trackpad

Test-ID Richtlinien-IDs Beschreibung
T-Keyboard_Navigation T-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 Verwenden Sie eine externe Tastatur, um die Medienwiedergabe zu starten, zu beenden, zu pausieren, zurückzuspulen und vorzuspulen.
T-Keyboard_Send Keyboard_Send Verwenden Sie die Eingabetaste einer externen Tastatur, um Daten zu senden oder zu übermitteln.
T-Keyboard_Exit Keyboard_Exit

Verwenden Sie die Esc-Taste einer externen Tastatur, um die Funktion Beenden auszuführen. Prüfen Sie, ob die Taste Folgendes ausführt (falls zutreffend):

  • Modale Fenster, Dialogfelder, Pop-ups und Menüs werden geschlossen.
  • Suchtext wird gelöscht oder der Suchfokus wird entfernt.
  • Der Tastaturfokus wird abgebrochen.
  • Videovollbild, BiB, Vollbildmodus oder Diashows werden beendet.
  • Steuerelemente auf dem Bildschirm werden geschlossen.
  • Timer für „Als Nächstes“/Autoplay werden abgebrochen.
  • Die Auswahl aller ausgewählten Elemente wird aufgehoben.
  • Das Umbenennen/Bearbeiten wird ohne Speichern abgebrochen.
  • Die Tools zum Zuschneiden/Transformieren werden beendet und Änderungen werden verworfen.
T-Context_Menus Context_Menus Verwenden Sie die sekundäre Maustaste oder die sekundäre Tippfunktion des Trackpads, um auf das Kontextmenü interaktiver Elemente zuzugreifen.
T-Content_Zoom Content_Zoom Verwenden Sie das Mausrad (in Verbindung mit der Strg-Taste) und Trackpad-Gesten zum Auseinander- und Zusammenziehen, um Inhalte zu zoomen.
T-Hover_States Hover_States Bewegen Sie den Maus- oder Trackpad-Cursor über interaktive UI-Elemente, um den Mouseover-Effekt des Elements zu aktivieren.