Tier 2 – Adaptiv optimiert

Optimierte Apps unterstützen alle Bildschirmtypen und Gerätezustände vollständig, 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

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 enthalten:

  • Navigationsleisten am linken Rand, 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
  • Bereiche am rechten Rand, die bei Desktop-Bildschirmgrößen standardmäßig geöffnet sind und bei kleineren Bildschirmen geschlossen sind

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

Durch das Einbetten von Aktivitäten können aktivitätsbasierte Apps Layouts mit mehreren Bereichen erstellen, 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ä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 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 unter Kontextmenüs in 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 fokussierter Zustand 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 Touchpad

Keyboard_Navigation T-Keyboard_Navigation Die Hauptaufgaben in der App unterstützen die Tastaturnavigation, einschließlich der Navigation mit der Tabulatortaste und den Pfeiltasten. Weitere Informationen finden Sie unter Barrierefreie Apps 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ängig machen und Wiederholen. Weitere Informationen finden Sie unter Eingabekompatibilität.
Keyboard_Media_Playback T-Keyboard_Media_Playback Die Tastatur kann zur Steuerung der Medienwiedergabe verwendet 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.
Context_Menus T-Context_Menus Kontextmenüs sind über die typische Rechtsklick-Funktion der Maus und des Touchpads (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 mit Pinch-Gesten auf dem Touchpad gezoomt werden.
Hover_States T-Hover_States Aktionsfähige UI-Elemente haben (falls zutreffend) Hover-Zustände, um Nutzern von Maus und Touchpad 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

T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Führen Sie die App auf Geräten mit einer Vielzahl von 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 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 umfließt usw. Prüfen Sie, ob UI-Elemente sowohl ästhetisch als auch funktional formatiert sind.

Testen Sie bei Apps, die das Einbetten von Aktivitäten verwenden, 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ührungszielbereiche 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 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 eine visuelle Anzeige des fokussierten Zustands vorhanden ist. Weitere Informationen finden Sie unter Touch-Modus.

Tastatur, Maus und Touchpad

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ängig machen 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-Context_Menus Context_Menus Verwenden Sie die sekundäre Maustaste oder die sekundäre Tippfunktion des Touchpads, um auf das Kontextmenü interaktiver Elemente zuzugreifen.
T-Content_Zoom Content_Zoom Verwenden Sie das Mausrad (in Verbindung mit der Strg-Taste) und Pinch-Gesten auf dem Touchpad, um Inhalte zu vergrößern und zu verkleinern.
T-Hover_States Hover_States Bewegen Sie den Mauszeiger oder den Touchpad-Cursor auf aktionsfähige UI-Elemente, um den Hover-Zustand des Elements zu aktivieren.