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 – und haben unterschiedliche Bildschirmgrößen. Android unterstützt viele Anzeigemodi, darunter Multi-Window, Multi-Display, Freeform und Bild-im-Bild. Faltbare Geräte können sich in verschiedenen Zuständen oder Positionen befinden, z. B. im Tisch- oder Buchmodus.

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

  • Auf Geräten mit großem Display haben Nutzer mehr Möglichkeiten, mit den Inhalten Ihrer Media-App zu interagieren.

  • Nutzer können während der Videowiedergabe im Mehrfenstermodus Multitasking betreiben oder den größeren Bildschirm nutzen, um nach der Aufnahme eines Bildes komplexere Bearbeitungen vorzunehmen.

  • Nutzer greifen möglicherweise auf ein Tablet zurück, um per Videoanruf in Verbindung zu bleiben und Freunde und Familie besser sehen zu können. Ihre App kann in einem benutzerdefinierten Wiedergabe-Overlay mehr Kontext zu einem Titel oder einer Szene anzeigen oder mehr Steuerungsmöglichkeiten auf dem Bildschirm bieten.

  • Karussells in einer Browsing-Ansicht können für eine höhere visuelle Attraktivität mehr Vielfalt bieten. Alternativ kann Ihre Media-App Nutzer auch durch einen durchsuchbaren Feed neben der Wiedergabe fesseln.

Denken Sie daran, dass Ihre Media-App auf einem Standard-Smartphone, einem faltbaren Gerät, einem Tablet und ChromeOS-Geräten mit demselben Code ausgeführt wird. Sie sollten Ihre App also von Anfang an für große Displays konzipieren. Weitere Informationen und visuelle Beispiele finden Sie in der Galerie für große Displays.

Medien-App standardmäßig responsiv gestalten

Vermeide Probleme bei der Nutzerfreundlichkeit deiner Media-App, indem du das Layout deiner App an Smartphones, Tablets, Faltgeräte und ChromeOS-Geräte anpasst.

Ihre App sollte responsiv sein, um unterschiedliche Displaygrößen, Ausrichtungen und Formfaktoren zu berücksichtigen. Ein adaptives Layout ändert sich je nach verfügbarem Anzeigebereich. Weitere Informationen finden Sie unter Verschiedene Displaygrößen unterstützen.

Design gemäß Richtlinien

Die grundlegende App-Qualität ist die Basis aller Android-Apps, unabhängig von Displaygröße, Geräteposition 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 finden Sie unter Grundlegende App-Qualität.

Ihre App sollte unabhängig von Geräteformfaktor, Bildschirmgröße, Anzeigemodus oder Ausrichtung eine hervorragende Nutzererfahrung bieten. Entwerfen Sie Ihre App daher gemäß den folgenden Richtlinien für Tier 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 den Anforderungen für Benutzeroberfläche und Grafiken entsprechen. Ihre App ist für große Bildschirme optimiert und Nutzer können wichtige Aufgaben ausführen, aber die Nutzerfreundlichkeit ist nicht optimal.

Das App-Layout ist möglicherweise nicht ideal, aber die App wird im Vollbildmodus oder im Mehrfenstermodus im Vollfenstermodus ausgeführt. Es wird nicht im Letterbox-Format angezeigt und 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 optimiert.

Stufe 2:

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

Stufe 1:

Dies ist die beste Supportstufe, die Nutzern die beste Erfahrung mit Ihrer App bietet, da sie Premium-Funktionen und ‑Funktionen angibt.

Die App unterstützt, sofern zutreffend, Multitasking, Faltmodi, Drag-and-drop und Stifteingabe. Auf dieser Ebene sind Apps stark differenziert. Achten Sie daher genau auf die Richtlinien für Dinge wie Multitasking und Faltmodi. Weitere Informationen

Optimierte Layouts

Nutzen Sie den zusätzlichen Platz auf großen Displays, ohne dass es zu Letterboxing (durch Einschränkung der Ausrichtung) oder Streckung 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 – sowie auf allen Smartphones verbessern.

Navigationsleisten- und ‑schubladenkomponenten bieten eine unaufdringliche Navigation für mehr Benutzerfreundlichkeit und Kontrolle. Die Komponenten ergänzen auch die kanonischen Layouts (Liste mit Details, Feed und unterstützende Bereiche), indem sie primäre Navigationsziele in unmittelbarer Nähe positionieren und gleichzeitig nur wenig Bildschirmplatz einnehmen.

Medienlayouts

Implementieren Sie mediaspezifische Layouts für die Ansichten „Liste/Details“, „Feed“ und „Unterstützungsbereich“, um die Nutzerfreundlichkeit Ihrer App zu verbessern. Informationen zu MDX-, Flutter- und Compose-Layouts finden Sie unter Layout-Ressourcen.

  • Listenansicht mit Details:Wenn Sie Ihre App mit einem interaktiven Media-Browser gestalten, können Nutzer verschiedene Medien durchsuchen, während sie sich etwas ansehen oder anhören. Medientitel werden nebeneinander mit einem wiedergegebenen Video oder einer wiedergegebenen Audiodatei angezeigt. Wenn sich die Ausrichtung des Geräts ändert, reagiert das Layout mit Liste und Detailansicht, um den App-Status beizubehalten. Weitere Informationen finden Sie unter Layouts mit Listen und Details.

  • Feed:Bei einem Feed-Layout werden gleichwertige Inhaltselemente in einem konfigurierbaren Raster angeordnet, damit Nutzer schnell und bequem auf eine große Menge an Inhalten zugreifen können, z. B. auf einen Musikfeed oder einen Film- und TV-Kiosk in Ihrer App. Weitere Informationen finden Sie unter Feed-Layouts.

  • Unterstützender Bereich:Mit 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 desselben Künstlers oder Schauspielers. Weitere Informationen finden Sie unter Unterstützung von Bereichslayouts.

Eine kuratierte Sammlung von Media-Layouts finden Sie in der Media-Galerie.

Layouts für soziale Medien

Auf großen Displays haben Nutzer sozialer Medien mehr Arbeitsfläche, um Inhalte zu erstellen, zu multitasken, Inhalte zwischen Apps zu ziehen und zu teilen. Mit besonderen Funktionen und Möglichkeiten, die auf Geräten mit kleinen Displays nicht möglich sind, kann Ihre Media-App für große Displays Layouts mit Listen, Feeds und unterstützenden Bereichen nutzen.

  • Liste – Detailansicht:Dieses Layout eignet sich ideal für Messaging-Apps, Kontaktmanager oder Dateibrowser. Ihre App kann beispielsweise eine Liste von Unterhaltungen neben Details anzeigen, damit Sie über die neuesten Nachrichten auf dem Laufenden bleiben. Weitere Informationen finden Sie unter Layouts mit Listen und Details.

  • Feed:Häufig verwendete Komponenten in diesem Layoutstil sind Karten und Listen. Sie können beispielsweise eine 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 Mengen an Inhalten ansehen. Weitere Informationen finden Sie unter Feed-Layouts.

  • Unterstützender Bereich:Apps für die Suche und Referenz oder eine Produktivitäts-App können von diesem Layoutstil profitieren. So haben Nutzer die Tools zur Inhaltserstellung immer zur Hand. Mit Ihrer App können Nutzer beispielsweise Einstellungen anpassen, auf Farbpaletten zugreifen, Effekte anwenden und die Änderungen sofort sehen. Weitere Informationen finden Sie unter Bereichslayouts unterstützen.

Eine kuratierte Sammlung von Social-Media-Layouts finden Sie auf der Seite Social Media-Galerie.

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

Wenn Sie Best Practices für große Displays 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, Tastenkombinationen, Unterstützung der Kameravorschau und faltbare Geräte.

Ausrichtung und Größenanpassung

Wenn in Ihrer Media-App Einschränkungen für die Ausrichtung und Größenänderung deklariert werden, aktiviert Android einen Kompatibilitätsmodus. Im Kompatibilitätsmodus verhält sich Ihre App zwar akzeptabel, die Nutzerfreundlichkeit ist jedoch stark eingeschränkt und die Nutzererfahrung leidet.

Wenn Ihre App beispielsweise auf einem Tablet ausgeführt wird, wird das Tablet im Querformat angedockt. Wenn Ihre App auf das Hochformat beschränkt ist, führt dies zu Letterboxing, was für den Endnutzer nicht ideal ist. Nutzer sollten Ihre App in der von ihnen bevorzugten Ausrichtung verwenden können. Nutzen Sie daher die verfügbare Größe eines großen Displays in Ihrem Design.

Einschränkungen der Ausrichtung schränken die Interaktionsmöglichkeiten der Nutzer mit Inhalten oder die Nutzung von Medien ein, was die Nutzung Ihrer App einschränkt. Das Ändern der Ausrichtung kann sich bis zu einem gewissen Grad auf die Größe auswirken, aber die Größe zu ändern, ändert nicht unbedingt die Ausrichtung.

Tastenkombinationen

Auf einem größeren Bildschirm werden Tastenkombinationen auf physischen Tastaturen wie „Start“, „Stopp“, „Pause“, „Zurückspulen“ und „Vorspulen“ eher verwendet. So wird eine einheitliche Nutzererfahrung mit einer Tastatur ermöglicht.

Nutzer erwarten diese Funktionen in ihren Media-Apps. Um die Benutzerfreundlichkeit zu verbessern, sollten Sie Ihre App mit einer physischen Tastatur testen. So können Sie diese wichtigen Shortcuts gleich zu Beginn des Designs in Ihre App einbauen.

Unterstützung der Kameravorschau

Bei großen Bildschirmen kann es häufiger zu Problemen mit dem 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 Media-App tatsächlich gerendert wird.

Wenn ein Nutzer beispielsweise mit seinem Tablet ein Foto aufnimmt, das auf dem Display des Tablets auf dem Kopf angezeigt wird, ist das nicht optimal. Unterstützung der Kameravorschau auf großen Bildschirmen

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

Status für Foldables

Wenn Sie Ihre Media-App für große Bildschirme entwickeln, müssen Sie auch die verschiedenen Faltmodi berücksichtigen. Ihre App kann es Nutzern beispielsweise ermöglichen, eine Tischkonfiguration für die Medienwiedergabe zu verwenden oder ein Rückdisplay und den Dual-Screen-Modus für Vorschau und Aufnahme zu 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 erweitern das Media-Erlebnis für den Nutzer auf eine Weise, die andere Geräte ohne faltbare Positionen nicht bieten können. Weitere Informationen finden Sie unter Faltbare Geräte.