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 Anzeigemodi, darunter „Mehrfenstermodus“, „Multi-Display“, „Freies Format“ und „Bild im Bild“. Faltbare Geräte können sich in verschiedenen Stadien oder Haltungen befinden, z. B. auf dem Tisch oder als Buch.

Berücksichtigen Sie bei der Entwicklung Ihrer App verschiedene Anwendungsfälle. Beispiel:

  • Geräte mit großem Bildschirm bieten Nutzern mehr Raum, um mit den Inhalten Ihrer Medien-App auf unterschiedliche Weise 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 sehen zu können. Deine App kann mehr Kontext zu einem Titel oder einer Szene in einem benutzerdefinierten Wiedergabe-Overlay anzeigen oder mehr Steuerungsoptionen auf dem Bildschirm anbieten.

  • 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.

Beachten Sie, dass Ihre Medien-App auf einem Standardsmartphone, einem faltbaren Tablet, einem Tablet und ChromeOS-Geräten denselben Code ausführt. Daher sollten Sie bei der App-Entwicklung von Beginn an für große Bildschirme entwerfen. Weitere Informationen und visuelle Beispiele finden Sie in der Galerie für große Bildschirme.

Medien-App standardmäßig responsiv machen

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 Richtlinien der Stufe 1, 2 und 3.

Die Richtlinien definieren umfassende 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 deine 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:

Das ist die beste Supportstufe für Ihre App, da sie durch die Premium-Funktionen und ‐Funktionen die beste Nutzerfreundlichkeit bietet.

Die App unterstützt gegebenenfalls Multitasking, faltbare Positionen, Drag-and-drop und Eingabe per Eingabestift. Auf dieser Ebene sind Apps sehr differenziert. Achten Sie deshalb 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, faltbare Geräte und ChromeOS-Geräte) 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 außerdem die kanonischen Layouts (Listendetails, Feed und unterstützender Bereich), indem primäre Navigationsziele in der Nähe positioniert werden und dabei nur einen minimalen Platz auf dem Bildschirm einnehmen.

Medienlayouts

Gestalten Sie Ihre App nutzerfreundlicher, indem Sie medienspezifische Layouts für Listendetails, Feeds und unterstützende Bereiche implementieren. Informationen zu MDX-, Flutter- und Composer-Layouts finden Sie unter Layoutressourcen.

  • List-detail:Wenn Sie Ihre App mit einem interaktiven Medienbrowser konzipieren, können Nutzer beim Ansehen oder Anhören verschiedene Medien durchsuchen. Medientitel werden neben einer Video- oder Audiodatei angezeigt, die gerade abgespielt wird. Wenn sich die Geräteausrichtung ändert, wird ein Listendetaillayout verwendet, um den App-Status beizubehalten. Weitere Informationen finden Sie unter Layouts mit 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 Listendetail-, Feed- und unterstützende Bereichslayouts nutzen.

  • Listendetails:Diese Option eignet sich ideal für Messaging-Apps, Kontaktmanager und Dateibrowser. Ihre App kann beispielsweise eine Liste mit Unterhaltungen neben Details 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. So sind die Tools zur Inhaltserstellung immer griffbereit für den Nutzer. Mit Ihrer App können Nutzer beispielsweise Einstellungen anpassen, auf Farbvorlagen zugreifen, Effekte anwenden und die Änderungen sofort sehen. Weitere Informationen finden Sie unter Unterstützte Fensterlayouts.

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 in Ihrer Medien-App Ausrichtungs- und Größenbeschränkungen deklariert sind, 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, führt dies 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-Display verkehrt herum angezeigt wird, 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 Haltung

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 Zulässige Positionen für faltbare Geräte.