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.
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.
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.
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.
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.
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.
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.
Express-Hierarchie und -Navigation
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.
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.
Kartenspalten
1-Kartenlayout
Kartenbreite: 844 dp
2-Karten-Layout
Kartenbreite: 412 dp
3-Karten-Layout
Kartenbreite: 268 dp
4-Karten-Layout
Kartenbreite: 196 dp
5-Karten-Layout
Kartenbreite: 124 dp