Designempfehlungen

Android unterstützt Sie bei der Entwicklung einer App, die auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen und Formfaktoren gut funktioniert. Dank dieser breiten Kompatibilität können Sie eine einzelne App entwickeln, die Sie auf allen Zielgeräten bereitstellen können.

Damit Nutzer auf jedem Bildschirmformat die bestmögliche Erfahrung haben, müssen Sie Ihre Layouts und andere UI-Komponenten für verschiedene Größen optimieren. Wenn Sie Ihre Benutzeroberfläche für ChromeOS optimieren, können Sie den zusätzlichen Bildschirmplatz optimal nutzen, um neue Funktionen anzubieten, neue Inhalte zu präsentieren oder die Nutzerfreundlichkeit zu verbessern und so die Nutzerbindung zu erhöhen.

Layouts für größere Bildschirme

Wenn Sie Ihre App für Smartphones entwickelt haben und das Design für ChromeOS und andere Formfaktoren mit großem Bildschirm verbessern möchten, beginnen Sie mit kleinen Anpassungen an Layouts, Schriftarten und Abständen. Bei 7‑Zoll-Tablets oder Spielen mit einem großen Canvas sind diese Anpassungen möglicherweise ausreichend.

Bei größeren Displays können Sie Teile Ihrer Benutzeroberfläche neu gestalten, um eine „gestreckte“ Benutzeroberfläche durch eine effiziente Benutzeroberfläche mit mehreren Bereichen, eine einfachere Navigation und zusätzliche Inhalte zu ersetzen. Das Material Design-Team bietet mit den Material Studies Beispiele dafür, wie das aussehen kann. Sehen Sie sich beispielsweise an, wie sich Antworten an verschiedene Bildschirmgrößen anpasst.

Antwort-App auf verschiedenen Bildschirmgrößen

Hier sind einige Vorschläge:

  • Stellen Sie benutzerdefinierte Layouts für diese größeren Bildschirme bereit. Dazu können Sie die kürzeste Abmessung des Bildschirms oder die minimal verfügbare Breite und Höhe verwenden.
  • Stellen Sie sich vor, wie Ihre UX und Layouts in einer Umgebung funktionieren, die primär im Querformat verwendet wird, z. B. ChromeOS. Passen Sie Ihre Layouts so an, dass sie in diesen Ausrichtungen je nach Fenstergröße gut aussehen und funktionieren. Alternativ können Sie mit dem Ressourcen-Qualifier „land“ spezifische Querformat-Layouts bereitstellen. Weitere Informationen zum dynamischen Anpassen der Fenstergröße und zu anderen Aspekten für große Bildschirme
  • Untere Navigationsleisten lassen sich nicht gut skalieren, wenn Ihre App in die Breite gezogen wird. Erwägen Sie, die Navigation in ein Menü auf der linken Seite zu verschieben, wo sie besser zugänglich ist und mehr Optionen angezeigt werden können. Das Beispiel für die Antwort veranschaulicht dies gut.
  • Passen Sie mindestens Dimensionen wie Schriftgrößen, Ränder und Abstände für größere Bildschirme an, um die Nutzung des Platzes und die Lesbarkeit der Inhalte zu verbessern. Überlegen Sie, wie die Dinge aussehen, wenn Nutzer etwas weiter vom Gerät entfernt sind, z. B. bei einem ChromeOS-Gerät oder in anderen Desktopumgebungen.
  • Passen Sie die Positionierung von UI-Steuerelementen so an, dass sie für Nutzer zugänglich sind, wenn sie eine Maus verwenden oder ein Tablet halten, z. B. an den Seiten und nicht in der Mitte.
  • Der Abstand von UI-Elementen sollte auf ChromeOS-Geräten und anderen Geräten mit großen Bildschirmen in der Regel größer sein als auf Smartphones. Ränder und Spalten sollten sich an verschiedene Bildschirmgrößen anpassen.
  • Sorgen Sie für ausreichend Abstand zwischen Textinhalten und Bildschirmrändern. Verwende einen Mindestabstand von 16 dp um Inhalte in der Nähe von Bildschirmrändern.

Achten Sie insbesondere darauf, dass Ihre Layouts nicht „gestreckt“ auf dem Bildschirm angezeigt werden:

  • Textzeilen sollten nicht zu lang sein. Optimieren Sie sie für maximal 100 Zeichen pro Zeile. Die besten Ergebnisse erzielen Sie mit 50 bis 75 Zeichen.
  • Listen und Menüs sollten nicht die gesamte Bildschirmbreite einnehmen.
  • Mit Padding können Sie die Breite von Elementen auf dem Bildschirm anpassen oder für Geräte mit größeren Bildschirmen zu einer Benutzeroberfläche mit mehreren Bereichen wechseln (siehe nächster Abschnitt).

Zusätzliche Bildschirmfläche nutzen

ChromeOS-Geräte bieten Ihrer App deutlich mehr Bildschirmfläche. Nutzen Sie diese zusätzliche Fläche bei der Gestaltung der Benutzeroberfläche Ihrer App für größere Bildschirme optimal.

In den Beispielen Antworten und Rally wird die größere Bildschirmgröße unterschiedlich genutzt. Bei „Antworten“ wird mehr Platz für ein übersichtlicheres Design geschaffen, während bei „Rally“ mehr Daten angezeigt werden, um das Scrollen und Tippen zu reduzieren.

Rally-App auf verschiedenen Bildschirmgrößen

Sehen Sie sich zuerst an, was für den Nutzer möglicherweise verborgen ist, und überlegen Sie, wie Sie es sichtbar machen können. So können beispielsweise mehr Informationen zu einem Element angezeigt werden, Menüs sichtbar gemacht werden, die möglicherweise hinter einem Rechtsklick oder einem langen Drücken verborgen sind, oder andere oder detailliertere Navigationsoptionen angezeigt werden, da Sie jetzt einen größeren Navigationsbereich auf der linken Seite haben. Das sind große Usability-Vorteile, die die Nutzerfreundlichkeit Ihrer App verbessern und ihr ein desktopähnliches Erscheinungsbild verleihen können, ohne dass die aktuelle Nutzerfreundlichkeit komplett neu gestaltet werden muss.

Hier sind einige Empfehlungen für Ihre App:

  • Ihre Marke gibt die Richtung vor, in die Sie sich bei der Gestaltung für diese verschiedenen Bildschirmgrößen bewegen sollten. Welche Informationen priorisiert und dem Nutzer angezeigt werden, hängt von den vorhandenen User Journeys und den am häufigsten verwendeten Funktionen ab. Material Studies können Ihnen als Inspiration dienen. Dort sehen Sie, wie die einzelnen Produkte auf einem größeren Bildschirm unterschiedlich dargestellt werden.
  • Überlegen Sie, wie sich das Design Ihrer App mit einem reaktionsfähigen Rastersystem verhalten soll und wie sich Inhalte, Navigation und Optionen bei größeren Bildschirmen verschieben sollen.
  • Legen Sie fest, für welche Bildschirmgrößen Sie ein anderes Layout verwenden möchten, und geben Sie die verschiedenen Layouts in den entsprechenden Fenstergrößen-Buckets (z. B. „large“/„xlarge“) oder minimalen Fensterbreiten (z. B. „sw600dp“/„sw720“) an. Denken Sie daran, dass sich der Gesamtkontext, in dem sich der Nutzer befand, nicht ändern sollte, wenn Sie diese Layouts aufrufen. Außerdem sollten Sie versuchen, den gesamten Nutzerstatus beim Wechsel zwischen Layouts beizubehalten (Scrollposition, geschriebener Text usw.).

Assets für Bildschirme mit höherer Dichte und größere Bildschirme verwenden

Damit Ihre App optimal aussieht, sollten Sie Symbole und andere Bitmap-Assets für jede Dichte im Bereich bereitstellen, der von ChromeOS unterstützt wird. Sie sollten Ihre Symbole für die App-Leiste, Benachrichtigungen und den Launcher gemäß den Richtlinien für Symbole gestalten und in Vektorformaten bereitstellen, damit sie auf den verschiedenen Bildschirmen, auf denen Ihre App angezeigt wird, gut skaliert werden können.

Weitere Informationen zu VectorDrawables und Vektor-Assets unter Android finden Sie in diesem Blogpost von Nick Butcher.

Schriftgrößen und Berührungszielbereiche anpassen

Damit Ihre App auf ChromeOS und Bildschirmen mit höherer Pixeldichte verwendet werden kann, müssen Sie die Schriftgrößen und Berührungsziele in Ihrer Benutzeroberfläche für alle Bildschirmkonfigurationen anpassen, die Sie unterstützen möchten. Sie können Schriftgrößen über formatierbare Attribute oder Dimensionsressourcen anpassen. Touch-Ziele lassen sich wie bereits beschrieben über Layouts und Bitmap-Drawables anpassen.

Hier einige Überlegungen:

  • Text sollte auf größeren Bildschirmen und bei höheren Dichten nicht zu groß oder zu klein sein. Achten Sie darauf, dass die Größe der Labels für die entsprechenden UI-Elemente angemessen ist und dass es in Labels, Titeln und anderen Elementen keine unpassenden Zeilenumbrüche gibt.
  • Die empfohlene Größe für Touch-Ziele für Elemente auf dem Bildschirm beträgt 48 dp. Möglicherweise sind einige Anpassungen in der Benutzeroberfläche für größere Bildschirme erforderlich. Weitere Informationen zu Abstandsverfahren Diese Empfehlungen entsprechen auch den Mindestrichtlinien zur Barrierefreiheit.
  • Vergrößern Sie bei kleineren Symbolen nach Möglichkeit den berührbaren Bereich auf mehr als 48 dp, indem Sie TouchDelegate verwenden oder das Symbol einfach in der transparenten Schaltfläche zentrieren.