Layouts sind strukturelle Vorlagen, die einen Rahmen bieten, in Ihrer gesamten Anwendung einheitlich zu gestalten. Indem Sie visuelle Raster, Abstände, und Abschnitte schaffen Layouts eine zusammenhängende und organisierte Struktur für das von Informationen und UI-Elementen.
![Titelbild für Layouts](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?authuser=8&hl=de)
Highlights
- Anders als im Web oder auf Mobilgeräten haben Fernseher ein festes Seitenverhältnis von 16:9.
- Layouts an horizontalen und vertikalen Achsen für eine einfachere Verwendung optimieren und Kontrolle.
Grundsätze
Richtlinien für Designentscheidungen beim Entwerfen von TV-Layouts.
![Design für große Bildschirme](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?authuser=8&hl=de)
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.
![Design für Android](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-on-android-platform.webp?authuser=8&hl=de)
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 px = 1 dp.
Assets müssen auf 1080p ausgerichtet sein. So kann das Android-System die Layoutelemente bei Bedarf auf 720p herunterskalieren.
![Sichtbarkeit gewährleisten](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/ensuring-visibility-and-overscan-safety.webp?authuser=8&hl=de)
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](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?authuser=8&hl=de)
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](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?authuser=8&hl=de)
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 Seitenverhältnis 16:9 haben, sollten Sie Ihre App mit einer 960 x 540 Pixel. Dadurch wird sichergestellt, dass alle Elemente Proportional für HD- oder 4K-Bildschirme angepasst werden.
Overscan-Ränder
Die Overscan-Ränder sind die Leerzeichen zwischen dem Inhalt und dem am 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 %, um Ihre Inhalte und Informationen zu schützen (58 dp an den Seiten und 28 dp an der Ober- und Unterseite).
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 Bereiche zwischen Spalten, mit denen der Inhalt unterteilt wird.
Verwenden Sie 12 Spalten, die 52 dp breit sind und einen Abstand von 20 dp zwischen ihnen haben. Der Abstand muss auf beiden Seiten 58 dp und in vertikaler Richtung 4 dp betragen. Zeilenabstand.
Layoutmuster
Ihnen stehen drei Layout-Muster zur Verfügung, je nachdem, Zweck und Anzeigegerät: Horizontal Stack Layout, Vertical Stack Layout, und „Raster-Layout“.
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 ist häufig zur Gruppierung von Inhalten und Komponenten.
Vertikales Stapellayout
Bei einem vertikalen Stack-Layout werden Komponenten vertikal angeordnet, So sind Größe, Seitenverhältnis und Format flexibel. Häufig handelt es sich werden verschiedene Arten von Text, interaktive Komponenten und Layoutmuster zusammenfügen.
Rasterlayout
Ein Raster ist eine Sammlung sich überschneidender Spalten und Zeilen. Ein Raster Das Layout zeigt Inhalte in diesem Raster an. Die Inhalte werden in einer logischen und erleichtert den Nutzern die Navigation.
Um eine Überlappung zu vermeiden, ist es wichtig, den Abstand zwischen Elemente und die Größe der fokussierten Zustände. Wenn beispielsweise ein fokussierter Komponente (z. B. eine Karte) ist markiert. Wenn Sie unsere empfohlenen Rasterlayout (12 Spalten bei 52 dp, mit Spaltenabständen bei 20 dp), siehe Karten für empfohlenen Komponentenlayouts und Vorschauen.
Layoutstrukturen
Hier sind einige Layoutstrukturen, mit denen Sie bei der Gestaltung von TV-Layouts. Durch horizontale Teilung der Fernsehbildschirme kann es dabei helfen, verschiedene Arten von Komponenten zu trennen, Informationen Hierarchie und Navigationslogik. Ein Fenster kann mehrere Einheitsspalten enthalten. In jedem Bereich können verschiedene Layoutmuster wie Stack-Layout und „Raster-Layout“.
![Beispiel für ein einseitiges Layout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?authuser=8&hl=de)
Einfenster-Layout
Ein Ein-Bereich-Layout kann die Aufmerksamkeit auf primäre Inhalte lenken. Verwenden Sie sie für inhaltsorientierte Seiten und Seiten mit wichtigen Informationen.
![Beispiel für ein zweiteiliges Layout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=8&hl=de)
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 einem Einbruch führen. Interaktion. Ihr Design übersichtlich, übersichtlich und präsentieren die nur die wesentlichen Informationen enthalten.
Verwenden Sie nicht zu viele Bereiche, um Inhalte zu gruppieren. Dadurch entstehen unnötige kognitive Belastung und Hierarchie für die Nutzenden.
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?authuser=8&hl=de)
Dos
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?authuser=8&hl=de)
Don'ts
Express-Hierarchie und -Navigation
Mithilfe von Bereichen können Sie Inhalte visuell voneinander trennen und organisieren. Sie helfen Nutzenden, und eine intuitivere Benutzeroberfläche schaffen, die die Nutzung verbessert.
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=8&hl=de)
Dos
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?authuser=8&hl=de)
Don'ts
Layoutvorlagen
Layoutvorlagen fördern Reihenfolge, Einheitlichkeit und Vertrautheit. Das Design schafft eine komfortable Benutzeroberfläche, die klar kommuniziert, und welche Seiten sie aufrufen können.
Suchen
In der Browservorlage werden „Cluster“ für Medieninhalte angezeigt Zeilen in einem vertikalen Stapel. Nutzer navigieren nach oben und unten, um die Zeilen zu durchsuchen, und nach rechts und links, um den Inhalt einer bestimmten Zeile zu durchsuchen.
![Suchen](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/browse.webp?authuser=8&hl=de)
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 links](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?authuser=8&hl=de)
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 rechts](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?authuser=8&hl=de)
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 anzuregen.
![Overlay zentrieren](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?authuser=8&hl=de)
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. Mit ihnen können Sie Miniabläufe erstellen, ohne den Kontext der aktuellen Seite zu verlieren.
![Overlay unten](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?authuser=8&hl=de)
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.
![Aktionen](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/actions.webp?authuser=8&hl=de)
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.
![Informationen zu den Inhalten](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?authuser=8&hl=de)
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.
![Compilation](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?authuser=8&hl=de)
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.
![GRid](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?authuser=8&hl=de)
Warnmeldung
In der Benachrichtigungsvorlage wird eine Vollbildmeldung angezeigt. In der Regel ist eine Aktion erforderlich, um die Blockierung der Benachrichtigung aufzuheben und zum vorherigen Bildschirm zurückzukehren.
![Warnmeldung](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/alert.webp?authuser=8&hl=de)
Kartenspalten
1-Kartenlayout
Kartenbreite: 844 dp
![1-Kartenlayout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?authuser=8&hl=de)
2-Karten-Layout
Kartenbreite: 412 dp
![2-Karten-Layout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?authuser=8&hl=de)
3-Karten-Layout
Kartenbreite: 268 dp
![3-Karten-Layout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?authuser=8&hl=de)
4-Karten-Layout
Kartenbreite: 196 dp
![4-Karten-Layout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?authuser=8&hl=de)
5-Karten-Layout
Kartenbreite: 124 dp
![5-Karten-Layout](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?authuser=8&hl=de)