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 Mehrfenstermodus, 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 mehr Vielfalt bieten, um die visuelle Attraktivität zu steigern. 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 denselben Code ausführt. Sie sollten Ihre App also von Anfang an für große Bildschirme 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 der Displaygröße, der 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 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 eine umfassende Reihe von Qualitätsanforderungen für die meisten Arten von Android-Apps.

Stufe 3:

Auch auf dieser grundlegenden Ebene muss Ihre App die Anforderungen an Benutzeroberfläche und Grafiken erfüllen. 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 Vollfenster 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 Trackpad. 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 Bildschirme 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-Funktionen und Stifteingabe. Auf dieser Ebene sind Apps sehr unterschiedlich. Achten Sie daher genau auf die Richtlinien für Multitasking und Faltmodi. Weitere Informationen

Optimierte Layouts

Nutzen Sie den zusätzlichen Platz auf großen Bildschirmen, 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 für alle Formfaktoren mit großen Bildschirmen – Tablets, Foldables und ChromeOS-Geräte – sowie für alle Smartphone-Größen eine bessere Nutzerfreundlichkeit schaffen.

Navigationsleisten- und ‑schubladenkomponenten bieten eine unaufdringliche Navigation für eine komfortable und kontrollierte Benutzeroberfläche. Die Komponenten ergänzen auch die kanonischen Layouts (Listen-Detailansicht, Feed und unterstützende Bereiche), indem sie primäre Navigationsziele in unmittelbarer Reichweite positionieren und gleichzeitig nur wenig Bildschirmplatz einnehmen.

Medienlayouts

Implementieren Sie mediaspezifische Layouts für die Listen-Detailansicht, den Feed und den Unterstützungsbereich, um die Nutzerfreundlichkeit Ihrer App zu verbessern. Informationen zu MDX-, Flutter- und Compose-Layouts finden Sie unter Layout-Ressourcen.

  • Listen-Detailansicht: 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 ein Listen-Detailansicht-Layout, um den App-Status beizubehalten. Weitere Informationen finden Sie unter Listen-Detailansichten.

  • 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 scrollende 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 Social-Media-Nutzer mehr Arbeitsfläche, um Inhalte zu erstellen, Multitasking zu betreiben, Inhalte per Drag-and-drop zwischen Apps zu verschieben und Inhalte zu teilen. Mit besonderen Funktionen und Möglichkeiten, die auf Geräten mit kleinen Displays nicht möglich sind, kann Ihre Medien-App für große Displays Layouts mit Listen-Detailansicht, Feeds und unterstützenden Bereichen nutzen.

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

  • 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 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 Produktivitäts-Apps können von diesem Layoutstil profitieren. So sind die Tools zur Inhaltserstellung für den 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 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 von Nutzern 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 durch das Ändern der Größe wird die Ausrichtung nicht unbedingt geändert.

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 Bedienung für Nutzer zu vereinfachen, 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 Streckung, Zuschneidung und Drehung 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 einem Nutzer 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 Geräte 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 Positionen.