Diese Seite wurde von der Cloud Translation API übersetzt.

Layouts

Layouts sind strukturelle Vorlagen, die ein Framework für die Aufrechterhaltung visueller Konsistenz in Ihrer Anwendung bilden. Durch die Definition visueller Raster, Abstände und Abschnitte schaffen Layouts eine zusammenhängende und strukturierte Struktur für die Darstellung von Informationen und UI-Elementen.

Highlights

Anders als im Web oder auf Mobilgeräten haben Fernseher ein festes Seitenverhältnis von 16:9.
Optimieren Sie Layouts entlang horizontaler und vertikaler Achsen für eine einfache Verwendung und Kontrolle.

Grundprinzip

Richtlinien für Designentscheidungen beim Entwerfen von TV-Layouts.

Designs für große Bildschirme entwickeln

Seit der Verbreitung von HDTV sind rechteckige Fernseher mit einem Seitenverhältnis von 16:9 zur Norm geworden. In der Vergangenheit wurden Fernsehgeräte in einer quadratischen Form hergestellt, die als Seitenverhältnis von 4:3 oder 1,33:1 bekannt war.

Auf der Android-Plattform entwerfen

Verwenden Sie beim Designen dp, um Elemente wie bei jedem anderen Android-Gerät einheitlich auf Bildschirmen mit unterschiedlicher Dichte anzuzeigen. Verwende beim Design immer eine MDPI-Auflösung von 960 × 540 Pixel.

Bei MDPI: 1 Pixel = 1 dp.

Assets müssen auf 1080p ausgerichtet sein. So kann das Android-System die Layoutelemente bei Bedarf auf 720p herunterskalieren.

Sichtbarkeit und Overscan-Sicherheit gewährleisten

Stellen Sie sicher, dass wichtige Elemente für die Nutzenden immer sichtbar sind. Positionieren Sie dazu die Elemente mit einem Rand von 5% von 48 dp an der linken und rechten Seite und 27 dp oben und unten in einem Layout. Dadurch wird sichergestellt, dass sich die Bildschirmelemente des Layouts innerhalb des Overscans befinden.

Vollbild ausfüllen

Bildschirmelemente im Hintergrund dürfen nicht im sicheren Overscan-Bereich angepasst oder zugeschnitten werden. Erlaube stattdessen die teilweise Anzeige von nicht sichtbaren Elementen. Dadurch wird sichergestellt, dass auf allen Bildschirmen die Hintergrund- und nicht sichtbaren Elemente korrekt angezeigt werden.

Mit Achsen optimieren

Überlegen Sie, wie Nutzer die Fernbedienung mit ihrem Fernseher verwenden. Achten Sie darauf, dass die Benutzeroberfläche Ihres Fernsehers mit der Fernbedienung einfach zu bedienen ist. Gestalten Sie jede Richtung (nach oben, unten, links, rechts) so, dass sie einen klaren Zweck und ein klares Navigationsmuster haben, damit Nutzende verstehen, wie sie sich durch große Gruppen von Optionen bewegen müssen.

Layout

Die Größe von TV-Bildschirmen ist von Gerät zu Gerät unterschiedlich. Da ein moderner Fernseher ein Seitenverhältnis von 16:9 hat, empfehlen wir, Ihre App mit einer Bildschirmgröße von 960 x 540 Pixeln zu entwerfen. Dadurch kann die Größe aller Elemente für HD- oder 4K-Bildschirme proportional angepasst werden.

Layoutraster

Overscan-Ränder

Die Overscan-Ränder sind die Abstände zwischen dem Inhalt und dem linken und rechten Rand des Bildschirms.

960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp

Diese Rahmenränder schützen Primärelemente vor potenziellen Overscan-Problemen. Verwenden Sie ein Layout mit einem Rand von 5 % (58 dp an den Seiten und 28 dp an der Ober- und Unterseite), um Ihre Inhalte und Informationen zu schützen.

Overscan-Ränder

Säulen und Dachrinnen

Inhalte werden in Bereiche des Bildschirms platziert, die Spalten und Spaltenabstände haben. Das Rastersystem hat 12 Spalten. Dachrinnen sind die Abstände zwischen den Spalten, mit denen der Inhalt aufgeteilt wird.

Verwenden Sie 12 Spalten, die 52 dp breit sind und einen Abstand von 20 dp zwischen ihnen haben. Auf beiden Seiten muss ein Mindestabstand von 58 dp und zwischen den Zeilen ein vertikaler Abstand von 4 dp eingehalten werden.

Säulen & Dachrinnen

Layoutmuster

Je nach beabsichtigtem Zweck und Anzeigegerät sind drei Layoutmuster verfügbar: Horizontal Stack Layout, Vertical Stack Layout und Rasterlayout.

Horizontales Stack-Layout

Bei einem horizontalen Stack-Layout werden Komponenten horizontal angeordnet. Sie können in Größe, Seitenverhältnis oder Format variieren. Dieses Layout wird oft verwendet, um Inhalte und Komponenten zu gruppieren.

Horizontales Stack-Layout

Vertikales Stapellayout

Bei einem vertikalen Stack-Layout werden Komponenten vertikal angeordnet, um eine flexible Größe, ein flexibles Verhältnis und ein flexibles Format zu ermöglichen. Es wird häufig verwendet, um verschiedene Arten von Text, interaktive Komponenten und Layoutmuster zu gruppieren.

Vertikales Stapellayout

Rasterlayout

Ein Raster ist eine Sammlung sich überschneidender Spalten und Zeilen und mit einem Grid-Layout werden Inhalte in diesem Raster angezeigt. Inhalte werden logisch angeordnet, um Nutzern das Navigieren und Suchen zu erleichtern.

Rasterlayout

Um eine Überlappung zu vermeiden, müssen Sie den Abstand zwischen den Elementen und die Größe der fokussierten Zustände berücksichtigen. Zum Beispiel, wenn eine fokussierte Komponente (wie eine Karte) hervorgehoben ist. Wenn Sie unser empfohlenes Rasterlayout (12 Spalten in 52 dp, mit Spaltenabständen in 20 dp) verwenden, finden Sie unter „Karten“ empfohlene Komponentenlayouts und Vorschauen.

Layoutstrukturen

Hier sind einige Layoutstrukturen, die Ihnen bei der Gestaltung von TV-Layouts helfen. Durch die horizontale Unterteilung der TV-Bildschirme können verschiedene Arten von Komponenten voneinander getrennt, die Informationshierarchie und die Navigationslogik kommuniziert werden. Ein Fenster kann mehrere Einheitsspalten enthalten. Jedes Feld kann verschiedene Layoutmuster wie Stack Layout und Grid Layout enthalten.

Einfenster-Layout

Ein Ein-Bereich-Layout kann dazu beitragen, die Aufmerksamkeit auf primäre Inhalte zu lenken. Verwenden Sie sie für inhaltsorientierte Seiten und Seiten mit wichtigen Informationen.

Zweifensterlayout

Ein 2-Fenster-Layout funktioniert besser, wenn die Seite hierarchische Inhalte zeigt. Es wird häufig bei aufgabenorientierten Lösungen verwendet.

Kognitive Überlastung

Komplizierte und unklare Inhalte können zu Verwirrung, Ärgernis und Einbruch der Nutzerinteraktion führen. Gestalten Sie Ihr Design übersichtlich und übersichtlich und präsentieren Sie nur wichtige Informationen.

Verwenden Sie nicht zu viele Bereiche, um Inhalte zu gruppieren. Dies schafft eine unnötige kognitive Belastung und Hierarchie für die Nutzer.

Dos

Gruppieren Sie zusammengehörige Inhalte in einem Steuerfeld. So können Nutzer die Gruppierung von Inhalten besser nachvollziehen.

Don'ts

Verwenden Sie nicht zu viele Bereiche, um Inhalte zu gruppieren. Dies erzeugt eine unnötige kognitive Belastung und Hierarchie für die Nutzer.

Mithilfe von Bereichen können Sie Inhalte visuell voneinander trennen und organisieren. Sie helfen den Nutzern bei der Orientierung und können eine intuitivere Benutzeroberfläche schaffen, die die Nutzung verbessert.

Dos

Inhalte basierend auf dem Lesepfad des Nutzers gruppieren Achten Sie darauf, dass der Fokuspfad mit der Hierarchie oder der Entscheidungslogik übereinstimmt.

Don'ts

Lenken Sie die Aufmerksamkeit der Nutzenden nicht hin und her zwischen den Panels. Dadurch entstehen unnatürliche Fokuspfade, die nicht mit den Lesegewohnheiten der Nutzenden übereinstimmen.

Layoutvorlagen

Layoutvorlagen fördern Reihenfolge, Einheitlichkeit und Vertrautheit. Das Design schafft eine komfortable Benutzeroberfläche, die klar angibt, wo sich der Nutzer befindet und wohin er gehen kann.

Entdecken

In der Browservorlage werden „Cluster“ oder Zeilen für Medieninhalte in einem vertikalen Stapel angezeigt. Nutzer navigieren nach oben und unten, um die Zeilen zu durchsuchen, und nach rechts und links, um den Inhalt einer bestimmten Zeile zu durchsuchen.

Overlay links

Die linke Navigationsvorlage zeigt ein Overlay-Steuerfeld auf der linken Seite des Bildschirms. In der Regel werden im Hintergrund Navigationselemente oder Elemente angezeigt, auf die Sie reagieren können, die für den Inhalt relevant sind.

Overlay rechts

Die rechte Overlay-Vorlage zeigt ein Overlay-Steuerfeld auf der rechten Seite des Bildschirms. Normalerweise werden hier Elemente angezeigt, auf die Sie reagieren, unabhängig von den Inhalten im Hintergrund.

Overlay zentrieren

Die Vorlage für das zentrale Overlay zeigt ein modales Element, das über eine vorhandene Ansicht gelegt wird. Sie wird verwendet, um dringende Informationen zu kommunizieren oder eine Entscheidung zu fällen.

Overlay unten

Die Vorlage für das Overlay am unteren Rand wird häufig für Blätter am unteren Rand verwendet. Untere Blätter sind Oberflächen mit ergänzenden Inhalten, die am unteren Bildschirmrand verankert sind. Sie ermöglichen die Erstellung kleiner Abläufe, ohne den Kontext der aktuellen Seite zu verlieren.

Aktionen

In der Aktionsvorlage werden links Titel und Untertitel angezeigt, auf der rechten Seite Optionen oder Aktionen. Die Nutzenden werden normalerweise aufgefordert, mit dieser Vorlage eine Option auszuwählen oder eine Aktion auszuführen.

Informationen zu den Inhalten

In der Vorlage für Inhaltsdetails werden Inhalte in einem horizontalen gestapelten Layout angezeigt. Zu den Inhalten gehören in der Regel Titel, Metadaten, eine kurze Beschreibung, Schnellaktionen und Cluster mit zugehörigen Informationen.

Compilation

In der Kompilierungsvorlage werden auf der linken Seite des Bildschirms Details zu einem Element (z. B. eines Podcasts) angezeigt. Die einzelnen Elemente, z. B. Folgen, werden im rechten Bereich angezeigt.

GRid

In der Rastervorlage werden Inhaltssammlungen in einem organisierten Raster angezeigt. Sie präsentiert Inhalte mit einer klar verständlichen Remote-Navigationslogik und einer optimalen Browsernutzung.

Warnmeldung

In der Benachrichtigungsvorlage wird eine Vollbildmeldung angezeigt. Normalerweise ist eine Aktion erforderlich, um die Blockierung der Benachrichtigung aufzuheben und zum vorherigen Bildschirm zurückzukehren.