Tier 2 – Adaptiv optimiert

Optimierte Apps unterstützen alle Bildschirmtypen und Gerätezustände, einschließlich Zustandsü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ätezustände anpasst.

Benutzeroberfläche

Guideline ID Test IDs Description
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 auf responsive Layouts migrieren). Die Implementierung von adaptiven Layouts wird durch Fenstergrößenklassen bestimmt.

Die App-Benutzeroberfläche kann Folgendes enthalten:

  • Moderne Navigationsleisten, die bei größeren Fenstergrößen zu vollständigen Navigationsbereichen erweitert werden
  • Rasterlayouts, bei denen die Anzahl der Spalten an Änderungen der Fenstergröße angepasst wird
  • Textspalten auf großen Bildschirmen
  • Trailing-Edge-Bereiche, die auf Desktop-Bildschirmgrößen standardmäßig geöffnet sind, auf kleineren Bildschirmen jedoch geschlossen

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

Aktivitätseinbettung ermöglicht es aktivitätsbasierten Apps, Layouts mit mehreren Bereichen zu erstellen, indem Aktivitäten nebeneinander angezeigt werden.
UI_Secondary_Elements T-Layout_Flow

Modale Fenster, Kontextmenüs und andere sekundäre Elemente werden auf allen Bildschirmtypen und in allen Gerätezuständen 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 im Abschnitt Google Sheets: unten.
  • Schaltflächen werden auf großen Bildschirmen nicht in voller Breite angezeigt. Weitere Informationen finden Sie unter Verhalten in Schaltflächen.
  • Textfelder und ‑kästen werden auf großen Bildschirmen nicht auf die volle Breite ausgedehnt. Weitere Informationen finden Sie unter Verhalten im Abschnitt Textfelder.
  • Kleine Bearbeitungsmenüs oder ‑modale Fenster decken nicht den gesamten Bildschirm ab und erhalten den Kontext für den Nutzer so weit wie möglich aufrecht. Weitere Informationen
  • 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 Navigationsspalten ersetzt, um die Ergonomie auf großen Bildschirmen zu verbessern. Weitere Informationen finden Sie unter Navigationsleiste.
  • Die Navigationsleisten wurden zu erweiterten Navigationsleisten aktualisiert. Weitere Informationen finden Sie unter Navigationsleiste.
  • Dialogfelder werden auf die neueste Material-Komponente aktualisiert. Siehe Dialoge.
  • Bilder werden mit der richtigen Auflösung angezeigt und sind weder gestreckt noch zugeschnitten.
Touch-Ziele T-Touch_Targets Berührungszielbereiche sind mindestens 48 dp groß. Weitere Informationen finden Sie in den Material Design-Richtlinien zu Layout und Typografie.
Drawable_Focus T-Drawable_Focus Für benutzerdefinierte Drawables, die interaktiv sind, 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 der fokussierte Zustand visuell erkennbar sein.

Tastatur, Maus und Trackpad

Guideline ID Test IDs Description
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
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ängig“ und „Wiederholen“. Weitere Informationen finden Sie unter Kompatibilität von Eingaben.
Keyboard_Media_Playback T-Keyboard_Media_Playback Mit der Tastatur lässt sich die Medienwiedergabe steuern. Mit der Leertaste können Sie beispielsweise Medien abspielen und pausieren.
Keyboard_Send T-Keyboard_Send Mit der Eingabetaste auf der Tastatur wird in Kommunikations-Apps die Funktion Senden ausgeführt.
Context_Menus T-Context_Menus Kontextmenüs sind über das übliche Verhalten beim Klicken mit der rechten Maustaste oder beim sekundären Tippen auf der Maus oder dem Trackpad zugänglich.
Content_Zoom T-Content_Zoom App-Inhalte können mit dem Mausrad (in Verbindung mit der Strg-Taste) und mit Pinch-Gesten auf dem Trackpad gezoomt werden.
Hover_States T-Hover_States Aktionsfähige UI-Elemente haben (falls zutreffend) Hover-Zustände, um Nutzern von Maus und Trackpad anzuzeigen, dass die Elemente interaktiv sind.

Tests

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

Benutzeroberfläche

Test ID Guideline IDs Description
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 Desktopgeräte. Führen Sie die App auf den Geräten im Mehrfenstermodus aus.

Prüfen Sie, ob das App-Layout auf unterschiedliche Bildschirm- und Fenstergrößen reagiert und sich entsprechend anpasst. Prüfen Sie, ob die App Navigationsleisten ein- und ausblendet, die Anzahl der Spalten in Rasterlayouts skaliert und Text in Spalten umfließt. Prüfe, ob die UI-Elemente sowohl ästhetisch als auch funktional formatiert sind.

Wenn Ihre App Activity Embedding verwendet, testen Sie, ob Aktivitäten auf großen Bildschirmen nebeneinander und auf kleinen Bildschirmen gestapelt angezeigt werden.
T-Touch_Targets Touch_Targets Prüfen Sie, ob die Berührungsziele für alle Displaygrößen und Konfigurationen eine einheitliche, zugängliche Größe und Position haben und nicht durch andere UI-Elemente verdeckt oder verdeckt werden. Informationen zur Barrierefreiheit 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 D-Pad oder einem anderen Gerät, mit dem UI-Elemente fokussiert werden können, fokussiert werden kann. Prüfen Sie, ob der Fokusstatus visuell angezeigt wird. Weitere Informationen finden Sie unter Touch-Modus.

Tastatur, Maus und Trackpad

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Bewegen Sie sich mit der Tabulatortaste und den Pfeiltasten einer externen Tastatur durch die fokussierbaren Komponenten der App.
T-Keyboard_Shortcuts Keyboard_Shortcuts Mit Tastenkombinationen auf einer externen Tastatur können Sie Aktionen wie Auswählen, Ausschneiden, Kopieren, Einfügen, Rückgängigmachen und Wiederholen ausführen.
T-Keyboard_Media_Playback Keyboard_Media_Playback Mit einer externen Tastatur können Sie die Medienwiedergabe starten, stoppen, pausieren, zurückspulen und vorspulen.
T-Keyboard_Send Keyboard_Send Verwenden Sie die Eingabetaste einer externen Tastatur, um Daten zu senden oder einzureichen.
T-Context_Menus Kontextmenüs 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 Control- oder Strg-Taste) und Touchpad-Gesten zum Heran- und Herauszoomen von Inhalten.
T-Hover_States Hover_States Bewegen Sie den Maus- oder Trackpad-Cursor auf interaktive UI-Elemente, um den Hover-Status des Elements zu aktivieren.