Design von Anfang an für große Bildschirme optimieren

Android-Geräte sind in verschiedenen Formfaktoren erhältlich – Smartphones, Tablets, faltbare Geräte und ChromeOS-Geräte – mit einer breiten Palette von Bildschirmgrößen. Android unterstützt viele Displaymodi, darunter Multifenster-, Multi-Display-, Freiform- und Bild-in-Bild-Modi. Faltbare Geräte können sich in verschiedenen Zuständen oder Positionen befinden, z. B. als Tablet oder Buch.

Berücksichtigen Sie beim Entwerfen Ihrer App verschiedene Anwendungsfälle. Beispiel:

  • Auf Geräten mit großem Bildschirm haben Nutzer mehr Platz, um auf unterschiedliche Weise mit den Inhalten Ihrer Medien-App zu interagieren.

  • Nutzer können Multitasking betreiben, während sie sich ein Video in einer Multifensterkonfiguration ansehen, oder den größeren Bildschirm nutzen, um nach der Aufnahme eines Bildes komplexere Bearbeitungen vorzunehmen.

  • Nutzer können ein Tablet verwenden, um per Videoanruf in Verbindung zu bleiben und ihre Freunde und Familie besser zu sehen. Deine App kann in einem benutzerdefinierten Wiedergabe-Overlay mehr Kontext zu einem Titel oder einer Szene anzeigen oder mehr Steueroptionen auf dem Bildschirm bieten.

  • Karussells in einer Ansicht zum Stöbern können für mehr Vielfalt und visuellen Reiz sorgen. Mit einem suchbaren Feed neben der Wiedergabe können Sie die Aufmerksamkeit der Nutzer in Ihrer Medien-App aufrechterhalten.

Denken Sie daran, dass der Code Ihrer Medien-App auf einem Standard-Smartphone, einem faltbaren Smartphone, einem Tablet und ChromeOS-Geräten ausgeführt wird. Sie sollten also von Anfang an auf große Bildschirme ausrichten. Weitere Informationen und visuelle Beispiele finden Sie in der Galerie für große Bildschirme.

Medien-App standardmäßig responsiv gestalten

Sorgen Sie für eine reibungslose Nutzererfahrung in Ihrer Medien-App, indem Sie das Layout Ihrer App für Smartphones, Tablets, faltbare Geräte und ChromeOS-Geräte adaptiv gestalten.

Ihre App sollte responsiv sein, um unterschiedliche Bildschirmgrößen, -ausrichtungen und Formfaktoren zu berücksichtigen. Ein responsives Layout ändert sich je nach verfügbarem Bildschirmbereich. Weitere Informationen finden Sie unter Verschiedene Bildschirmgrößen unterstützen.

Design gemäß den Richtlinien

Die grundlegende Qualität von Apps ist die Grundlage aller Android-Apps, unabhängig von Displaygröße, Geräteausrichtung oder anderen gerätespezifischen Aspekten. Ihre App sollte diese grundlegenden Anforderungen erfüllen, bevor Sie mit dem Design für einen großen Bildschirm beginnen. Weitere Informationen zur grundlegenden App-Qualität

Ihre App sollte unabhängig von Formfaktor, Bildschirmgröße, Anzeigemodus oder Haltung des Geräts eine hervorragende Nutzererfahrung bieten. Entwerfen Sie Ihre App daher gemäß den folgenden Tier 1-, Tier 2- und Tier 3-Richtlinien.

Die Richtlinien definieren eine umfassende Reihe von Qualitätsanforderungen für die meisten Arten von Android-Apps.

Stufe 3:

Auf dieser grundlegenden Ebene muss Ihre App weiterhin die Anforderungen an Benutzeroberfläche und Grafik erfüllen. Ihre App ist für große Bildschirme geeignet und Nutzer können wichtige Aufrufabfolgen abschließen, die Nutzerfreundlichkeit ist jedoch nicht optimal.

Das App-Layout ist möglicherweise nicht ideal, aber die App wird im Vollbildmodus oder im Vollfenstermodus im Mehrfenstermodus ausgeführt. Es ist nicht letterboxed und wird nicht im Kompatibilitätsmodus ausgeführt. Die App bietet grundlegende Unterstützung für externe Eingabegeräte wie Tastatur, Maus und Touchpad. Weitere Informationen finden Sie unter Für große Bildschirme geeignet.

Stufe 2:

Hier implementiert Ihre App Layoutoptimierungen für alle Bildschirmgrößen und Gerätekonfigurationen sowie eine erweiterte Unterstützung für externe Eingabegeräte. Weitere Informationen finden Sie unter Für große Bildschirme optimiert.

Stufe 1:

Dies ist die beste Supportstufe und bietet Nutzern die beste Nutzererfahrung mit Ihrer App, da Premium-Funktionen und -Möglichkeiten angegeben werden.

Die App unterstützt gegebenenfalls Multitasking, faltbare Positionen, Drag-and-drop und Eingabe per Eingabestift. Auf dieser Ebene sind Apps sehr unterschiedlich. Achten Sie daher genau auf die Richtlinien für Dinge wie Multitasking und faltbare Positionen. Weitere Informationen finden Sie unter Unterscheidung für große Bildschirme.

Optimierte Layouts

Du kannst den zusätzlichen Platz auf großen Bildschirmen nutzen, ohne dass es zu Letterboxing (aufgrund einer eingeschränkten Ausrichtung) oder zu Verzerrungen kommt. Wenn Sie das Layout Ihrer App für Medien und soziale Medien optimieren, können Sie die Reichweite Ihrer App erhöhen und die Nutzerfreundlichkeit auf allen Geräten mit großen Bildschirmen – Tablets, faltbaren Geräten und ChromeOS-Geräten – verbessern. Außerdem wird die Unterstützung aller Smartphonegrößen ermöglicht.

Navigationsleisten und -schubladen bieten eine unauffällige Navigation für eine nutzerfreundliche und steuerbare Benutzeroberfläche. Die Komponenten ergänzen auch die kanonischen Layouts (Listendetails, Feed und unterstützender Bereich), indem die primären Navigationsziele gut erreichbar sind und gleichzeitig nur wenig Bildschirmfläche beanspruchen.

Medienlayouts

Sie können die Nutzerfreundlichkeit Ihrer App verbessern, indem Sie medienspezifische Layouts für Listendetails, Feeds und den Infobereich implementieren. Informationen zu MDX-, Flutter- und Compose-Layouts finden Sie unter Layoutressourcen.

  • List-detail:Mit einem interaktiven Medienbrowser in Ihrer App können Nutzer während der Wiedergabe oder des Hörens verschiedene Medien durchsuchen. Medientitel werden neben einer wiedergegebenen Video- oder Audiodatei angezeigt. Wenn sich die Geräteausrichtung ändert, wird ein Listendetaillayout verwendet, um den App-Status beizubehalten. Weitere Informationen finden Sie unter Layouts für Listendetails.

  • Feed: In einem Feedlayout werden gleichwertige Inhaltselemente in einem konfigurierbaren Raster angeordnet, um eine schnelle und bequeme Wiedergabe einer großen Menge an Inhalten zu ermöglichen, z. B. in einem Musikfeed oder einem Film- und Fernsehkiosk in Ihrer App. Weitere Informationen finden Sie unter Feedlayouts.

  • Unterstützender Bereich: Neben den primären und sekundären Anzeigebereichen kann Ihre App einen unterstützenden Bereich für Kontext, Relevanz oder Referenz einbetten, z. B. eine scrollbare Liste ähnlicher Titel, veröffentlichte Rezensionen oder zusätzliche Werke derselben Künstler oder Schauspieler. Weitere Informationen finden Sie unter Unterstützte Steuerfeldlayouts.

Eine Auswahl an Media-Layouts finden Sie in der Media-Galerie.

Layouts für soziale Medien

Große Displays bieten Nutzern von sozialen Medien mehr Arbeitsfläche, um Inhalte zu erstellen, zu multitasken, zwischen Apps zu ziehen und zu teilen. Mithilfe von Funktionen, die auf Geräten mit kleinem Display nicht möglich sind, können Sie in Ihrer Media-App für große Displays Listendetails, Feeds und unterstützende Steuerfeldlayouts nutzen.

  • List-detail:eignet sich ideal für Messaging-Apps, Kontaktmanager oder Dateibrowser. Ihre App kann beispielsweise eine Liste von Unterhaltungen mit Details nebeneinander anzeigen, damit Sie immer auf dem neuesten Stand sind. Weitere Informationen finden Sie unter Layouts für Listendetails.

  • Feed: Gängige Komponenten in diesem Layoutstil sind Karten und Listen. Du kannst beispielsweise ein Collage aus Beiträgen in einem flexiblen Rasterformat erstellen oder mit Größe und Position die Aufmerksamkeit auf wichtige Beiträge lenken. Nutzer können sich schnell große Gruppen von Inhalten ansehen. Weitere Informationen finden Sie unter Feedlayouts.

  • Unterstützender Bereich:Such- und Referenz-Apps oder eine Produktivitäts-App können von diesem Layout profitieren. Die Tools zur Erstellung von Inhalten sind für die Nutzer immer griffbereit. Mit Ihrer App können Nutzer beispielsweise Einstellungen anpassen, auf Farbpaletten zugreifen, Effekte anwenden und die Änderungen sofort sehen. Weitere Informationen finden Sie unter Unterstützte Steuerfeldlayouts.

Eine ausgewählte Sammlung von Social-Media-Layouts finden Sie auf der Seite Social-Media-Galerie.

Best Practices für Medien-Apps für große Bildschirme

Wenn Sie Best Practices für große Bildschirme anwenden, können Sie unnötige Überarbeitungen Ihrer App vermeiden. Außerdem wird Ihre App von Anfang an auf mehr Geräten nutzerfreundlicher, insbesondere in Bezug auf Ausrichtung, Tastenkürzel, Unterstützung der Kameravorschau und faltbare Positionen.

Ausrichtung und Größe

Wenn Ihre Medien-App Einschränkungen für die Ausrichtung und Größe festlegt, aktiviert Android einen Kompatibilitätsmodus. Im Kompatibilitätsmodus wird zwar dafür gesorgt, dass sich Ihre App akzeptabel verhält, die Nutzerfreundlichkeit wird jedoch stark eingeschränkt und die Nutzererfahrung leidet.

Wenn sich Ihre App beispielsweise auf einem Tablet befindet, wird das Tablet im Querformat angedockt. Wenn Ihre App auf Hochformat beschränkt ist, kommt es zu Letterboxing, was für den Endnutzer nicht ideal ist. Ihre App sollte es Nutzern ermöglichen, die von ihnen bevorzugte Ausrichtung zu verwenden. Nutzen Sie daher die verfügbare Größe eines großen Bildschirms in Ihrem Design.

Einschränkungen bei der Ausrichtung beschränken die Möglichkeiten der Nutzer, mit Inhalten zu interagieren oder Medien zu konsumieren, was die Nutzung Ihrer App einschränkt. Eine Änderung der Ausrichtung kann sich in gewissem Maße auf die Größe auswirken, aber eine Größenänderung führt nicht unbedingt zu einer Änderung der Ausrichtung.

Tastenkombinationen

Auf einem größeren Bildschirm werden Tastenkombinationen auf physischen Tastaturen wie „Starten“, „Stoppen“, „Pausieren“, „Zurückspulen“ und „Vorspulen“ mit größerer Wahrscheinlichkeit verwendet. So erhalten Nutzer eine einheitliche Nutzererfahrung mit einer Tastatur.

Nutzer erwarten diese Funktionen in ihren Medien-Apps. Um Probleme für Nutzer zu vermeiden, sollten Sie Ihre App mit einer physischen Tastatur testen. So können Sie diese wichtigen Verknüpfungen zu Beginn des Designs erkennen und in Ihre App einbinden.

Unterstützung der Kameravorschau

Bei großen Bildschirmen kann es häufiger zu Problemen beim Strecken, Zuschneiden und Drehen kommen. Sie können also nicht davon ausgehen, dass die Größe der Kameravorschau der Größe entspricht, die in der Benutzeroberfläche Ihrer Medien-App tatsächlich gerendert wird.

Wenn ein Nutzer beispielsweise ein Foto mit seinem Tablet aufnimmt, es aber auf dem Tablet-Bildschirm auf dem Kopf steht, ist das nicht optimal. Unterstützen Sie die Kameravorschau für große Bildschirme.

Weitere Informationen finden Sie unter CameraX-Vorabversion oder Camera2-Vorabversion.

Faltbare Positionen

Wenn Sie Ihre Medien-App für große Bildschirme entwerfen, müssen Sie auch faltbare Positionen berücksichtigen. Mit Ihrer App kann ein Nutzer beispielsweise eine Tischkonfiguration für die Medienwiedergabe verwenden oder ein Rückkameradisplay und den Dualscreen-Modus für Vorschauen und Aufnahmen nutzen.

Wenn Sie faltbare Positionen in Ihren Entwicklungsplan aufnehmen, ist Ihre App auf mehr Geräten verfügbar und hat eine größere Reichweite. Sie können die Mediennutzung für den Nutzer auf eine Weise erweitern, die mit anderen Geräten ohne faltbare Positionen nicht möglich ist. Weitere Informationen finden Sie unter Zusammenklappbare Positionen.