Best Practices für das Entwerfen von Apps

Für vertikale Layouts optimieren

Vereinfachen Sie das Design Ihrer App mit vertikalen Layouts, mit denen Nutzer Inhalte in nur einer Richtung scrollen können.

Ausführen

Das Ziel dieser App besteht darin, Nutzer von Punkt A nach Punkt B zu bringen.

Das sollten Sie nicht tun

Verwenden Sie nicht sowohl vertikales als auch horizontales Scrollen, da dies die Nutzung Ihrer App verwirrend machen kann.

Uhrzeit anzeigen

Zeigen Sie die Uhrzeit (Overlay) oben an, damit Nutzer sie immer an derselben Stelle sehen.

Ausführen

Die Uhrzeit sollte oben im Overlay angezeigt werden, damit Nutzer sie immer an derselben Stelle sehen.

Das sollten Sie nicht tun

Zeigen Sie die Zeit in einem temporären Dialogfeld, einem Bestätigungs-Overlay oder einer Auswahl an, wenn ein Nutzer einen Bestätigungsbildschirm beispielsweise nur sehr kurz sieht.

Barrierefreie Inline-Einstiegspunkte

Achten Sie darauf, dass alle Aktionen inline angezeigt werden, und verwenden Sie klare Symbole und Labels für Barrierefreiheit. Dazu gehören auch Einstiegspunkte zu Einstellungen und Präferenzen.

Ausführen

Verwenden Sie nach Möglichkeit sowohl Symbole als auch Labels.

Das sollten Sie nicht tun

Verwenden Sie nur Symbole, um Nutzer zu einer Aktion aufzufordern.

Labels zur Orientierung der Nutzer verwenden

Bei längeren Dialogen sollten Sie die Nutzer mithilfe von Labels dabei unterstützen, sich zu orientieren, während sie durch den Inhalt scrollen.

Ausführen

Verwenden Sie Abschnittsübergänge, Labels und andere Hinweise, um Inhalte zu organisieren und Nutzern die Orientierung zu erleichtern, wenn sie durch längere Ansichten mit gemischten Inhalten scrollen.

Das sollten Sie nicht tun

Fügen Sie ein Label für Dialogfelder hinzu, die einen einzelnen Inhaltstyp enthalten.

Primäre Aktionen hervorheben

Stellen Sie Nutzern die wichtigsten Aktionen in Ihrer App oben im Overlay zur Verfügung, damit sie sie leicht ausführen können.

Ausführen

Heben Sie eindeutige primäre Aktionen hervor.

Das sollten Sie nicht tun

Die primäre Aktion auf einer sehr langen Seite unten platzieren.

Scrollleiste auf scrollbaren Bildschirmen anzeigen

Verwenden Sie den Bildlauf-Indikator nur auf Bildschirmen, die gescrollt werden können, um falsche Interaktionserwartungen zu vermeiden. Denken Sie auch daran, auf scrollbaren Bildschirmen den Scroll-Indikator hinzuzufügen, um anzugeben, an welcher Stelle des Bildschirms Sie sich gerade befinden.

Ausführen

Der Bildlaufindikator wird angezeigt, wenn die gesamte Ansicht gescrollt wird.

Das sollten Sie nicht tun

Scrollbalken in Ansichten ohne Scrollfunktion anzeigen oder Scrollbalken in Ansichten mit Scrollfunktion ausblenden

Responsives Design für größere Bildschirme

Achten Sie darauf, dass die verwendeten Komponenten die verfügbare Breite ausfüllen, und berücksichtigen Sie die Höhe bei Layouts ohne Scrollen.

Alle Compose-Komponenten sind responsiv, aber jede Anpassung, die Ihr Design verbessert und auf größeren Displays einen Mehrwert bietet, wird empfohlen.

Ausführen

Achten Sie darauf, dass die Inhalte die verfügbare Breite und Höhe ausfüllen und dass sich Vollbildelemente (Fortschrittsanzeige, Zeittext usw.) in Layouts ohne Scrollen responsiv anpassen.

Das sollten Sie nicht tun

Komponenten mit einer festen Breite verwenden, die den Bildschirm nicht responsiv ausfüllen, oder das Verhalten von Inhalten nicht so anpassen, dass sie den verfügbaren Platz ausfüllen

Responsive (prozentuale) Ränder verwenden

Wir empfehlen, prozentuale Ränder zu verwenden, damit sich die Größe der Ränder an die wachsende Kurve des Displays anpasst.

Ausführen

Verwenden Sie zusätzliche prozentuale Ränder, damit Inhalte oben und unten nicht abgeschnitten werden.

Das sollten Sie nicht tun

Komponenten sollten nicht einfach skaliert werden, um den verfügbaren Platz ohne zusätzliche Ränder auszufüllen.