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

Android-Geräte sind in verschiedenen Formfaktoren erhältlich, darunter Smartphones, Tablets, faltbare Geräte und ChromeOS-Geräte, die eine Vielzahl von Bildschirmgrößen haben. Android unterstützt viele Anzeigemodi, darunter Mehrfenstermodus, Multi-Display, Freiform und Bild im Bild. Faltbare Geräte können sich in verschiedenen Zuständen oder Positionen befinden, z. B. auf dem Tisch oder wie ein Buch.

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

  • Geräte mit großem Display bieten Nutzern mehr Platz, um auf verschiedene Weise mit den Inhalten deiner Medien-App zu interagieren.

  • Nutzer können Multitasking betreiben, während sie sich ein Video im Mehrfenstermodus 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 mit Freunden und Familie in Verbindung zu bleiben und sie besser zu sehen. Deine App kann in einem benutzerdefinierten Wiedergabe-Overlay mehr Kontext zu einem Titel oder einer Szene anzeigen oder mehr Steuerungsoptionen auf dem Bildschirm bieten.

  • Karussells in einer Suchansicht können mehr Abwechslung bieten und so die visuelle Attraktivität steigern. Alternativ kann deine Medien-App die Nutzerinteraktion fördern, indem sie einen durchsuchbaren Feed neben der Wiedergabe anbietet.

Denken Sie daran, dass Ihre Medien-App denselben Code auf einem Standard-Smartphone, einem faltbaren Gerät, einem Tablet und ChromeOS-Geräten ausführt. Sie sollten daher von Anfang an für große Bildschirme entwickeln. Weitere Informationen und visuelle Beispiele finden Sie in der Galerie für große Bildschirme.

Medien-App standardmäßig responsiv gestalten

Vermeide fehlerhafte Nutzererfahrungen in deiner Medien-App, indem du das Layout deiner App für Smartphones, Tablets, faltbare Gerä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 findest du 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äteausrichtung oder anderen gerätespezifischen Überlegungen. Ihre App sollte diese grundlegenden Anforderungen erfüllen, bevor Sie mit dem Design für einen großen Bildschirm beginnen. Hier findest du weitere Informationen zur grundlegenden App-Qualität.

Deine App sollte unabhängig vom Formfaktor, der Bildschirmgröße, dem Anzeigemodus oder der Ausrichtung des Geräts eine hervorragende Nutzererfahrung bieten. Beachte daher beim Design deiner App die folgenden Richtlinien der Stufen 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 deine App weiterhin die Anforderungen an UI und Grafiken erfüllen. Ihre App ist für große Bildschirme geeignet 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- oder Kompatibilitätsmodus ausgeführt. Die App bietet grundlegende Unterstützung für externe Eingabegeräte wie Tastatur, Maus und Trackpad. Weitere Informationen findest du unter Für große Bildschirme optimiert.

Stufe 2:

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

Stufe 1:

Dies ist die beste Unterstützung und bietet dem Nutzer die beste Erfahrung mit deiner App, da Premium-Funktionen und -Funktionen angegeben werden.

Die App unterstützt Multitasking, faltbare Geräte, Drag-and-drop und die Eingabe per Eingabestift, sofern zutreffend. Auf dieser Ebene sind Apps stark differenziert. Beachte daher die Richtlinien für Multitasking und faltbare Geräte. Weitere Informationen finden Sie unter Für große Bildschirme optimiert.

Optimierte Layouts

Nutze den zusätzlichen Platz auf großen Bildschirmen, ohne dass Letterboxing (aufgrund einer eingeschränkten Ausrichtung) oder Stretching erforderlich ist. Wenn Sie das Layout Ihrer App für Medien und soziale Medien optimieren, erweitern Sie die Reichweite Ihrer App und schaffen eine bessere Nutzererfahrung auf allen Formfaktoren mit großen Bildschirmen – Tablets, Foldables und ChromeOS-Geräten – und unterstützen alle Smartphone-Größen.

Navigationsleisten- und Navigationsleistenkomponenten bieten eine unauffällige Navigation für mehr Komfort und Kontrolle auf der Benutzeroberfläche. Die Komponenten ergänzen auch die kanonischen Layouts (Listen-Detailansicht, Feed und unterstützender Bereich), indem sie primäre Navigationsziele in Reichweite positionieren und gleichzeitig nur wenig Platz auf dem Bildschirm einnehmen.

Medienlayouts

Du kannst die Nutzerfreundlichkeit deiner App verbessern, indem du medienspezifische Layouts für die Listen-Detailansicht, den Feed und den unterstützenden Bereich implementierst. Informationen zu MDX-, Flutter- und Compose-Layouts finden Sie unter Layoutressourcen.

  • Listen-Detailansicht: Wenn du deine App mit einem interaktiven Medienbrowser entwirfst, können Nutzer verschiedene Medien durchsuchen, während sie sich etwas ansehen oder anhören. Medientitel werden neben einer wiedergegebenen Video- oder Audiodatei angezeigt. Wenn sich die Geräteausrichtung ändert, reagiert eine Listen-Detailansicht, um den App-Zustand beizubehalten. Weitere Informationen finden Sie unter Listen-Detailansichten.

  • Feed: In einem Feed-Layout werden gleichwertige Inhaltselemente in einem konfigurierbaren Raster angeordnet, damit sich große Mengen an Inhalten schnell und bequem ansehen lassen, z. B. ein Musik-Feed oder ein 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 deine App einen unterstützenden Bereich für Kontext, Relevanz oder Referenz einbetten, z. B. eine scrollbare Liste ähnlicher Titel, veröffentlichter Rezensionen oder zusätzlicher Werke derselben Künstler oder Schauspieler. Weitere Informationen finden Sie unter Unterstützende Bereichslayouts.

Eine Auswahl an Medienlayouts finden Sie in der Mediengalerie.

Layouts für soziale Medien

Große Displays bieten Nutzern von sozialen Medien mehr Platz zum Erstellen von Inhalten, für Multitasking und zum Ziehen von Inhalten zwischen Apps, um sie zu teilen. Mit speziellen Funktionen und Möglichkeiten, die auf Geräten mit kleinem Display nicht möglich sind, kann deine Medien-App für große Displays von Listen-Detailansicht-, Feed- und unterstützenden Bereichslayouts profitieren.

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

  • Feed: Gängige Komponenten in diesem Layoutstil sind Karten und Listen. Sie können beispielsweise eine Collage aus Beiträgen in einem flexiblen Rasterformat erstellen oder Größe und Position verwenden, um die Aufmerksamkeit auf wichtige Beiträge zu 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 Produktivitäts-Apps können von diesem Layoutstil profitieren. Die Tools zur Erstellung von Inhalten sind für Nutzer leicht zugänglich. In deiner App können Nutzer beispielsweise Einstellungen anpassen, auf Farbpaletten zugreifen, Effekte anwenden und die Änderungen sofort sehen. Weitere Informationen finden Sie unter Unterstützung von Bereichslayouts.

Eine Auswahl an Layouts für soziale Medien finden Sie auf der Seite Galerie für soziale Medien.

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

Wenn du Best Practices für große Bildschirme befolgst, kannst du unnötige Nacharbeiten an deiner App vermeiden. Außerdem wird deine App von Anfang an auf mehr Geräten nutzerfreundlicher, insbesondere im Hinblick auf die Ausrichtung, Tastenkombinationen, die Unterstützung der Kameravorschau und faltbare Geräte.

Ausrichtung und Größenanpassung

Wenn deine Medien-App Einschränkungen für die Ausrichtung und Größenänderung deklariert, aktiviert Android einen Kompatibilitätsmodus. Der Kompatibilitätsmodus sorgt zwar dafür, dass sich deine App akzeptabel verhält, die Nutzerfreundlichkeit wird jedoch stark beeinträchtigt und die Nutzererfahrung leidet.

Wenn sich deine App beispielsweise auf einem Tablet befindet, 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. In deiner App sollten Nutzer die bevorzugte Ausrichtung verwenden können. Nutze daher die verfügbare Größe eines großen Bildschirms in deinem Design.

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

Tastenkombinationen

Auf einem größeren Bildschirm werden Tastenkombinationen auf physischen Tastaturen wie Start, Stopp, Pause, Zurückspulen und Vorwärtsspulen eher verwendet, was die Nutzerfreundlichkeit mit einer Tastatur verbessert.

Nutzer erwarten diese Funktionen in ihren Medien-Apps. Um Reibungspunkte für Nutzer zu reduzieren, sollten Sie Ihre App mit einer physischen Tastatur testen. So können Sie diese wichtigen Tastenkombinationen schon zu Beginn des Designs in Ihre App einbinden.

Unterstützung für Kameravorschau

Bei großen Bildschirmen kann es zu Problemen mit Streckung, Zuschneiden und Drehung kommen. Du kannst also nicht davon ausgehen, dass die Größe der Kameravorschau der Größe entspricht, die die Benutzeroberfläche deiner Medien-App tatsächlich rendert.

Wenn ein Nutzer beispielsweise ein Bild mit seinem Tablet aufnimmt, es aber auf dem Tablet-Bildschirm verkehrt herum angezeigt wird, ist das nicht optimal. Unterstützung für Kameravorschau auf großen Bildschirmen einbinden.

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

Foldable-Status

Wenn Sie Ihre Medien-App für große Bildschirme entwerfen, sollten Sie auch faltbare Geräte berücksichtigen. In deiner App kann ein Nutzer beispielsweise eine Auf-dem-Tisch-Konfiguration für die Medienwiedergabe verwenden oder ein rückseitiges Display und den Dual Screen-Modus für Vorschauen und Aufnahmen 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 die Mediennutzung 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.