布局是结构化模板，为在整个应用中保持视觉一致性提供框架。通过定义视觉网格、间距和部分，布局为信息和 UI 元素的呈现建立了一个连贯且有组织的结构。
重点
- 与网页或移动设备不同，电视的屏幕纵横比固定为 16:9。
- 沿水平和垂直轴优化布局，以方便使用和控制。
原则
在设计电视布局时帮助您做出设计决策的指南。
设计大屏幕
自高清电视普及以来，具有 16:9 纵横比的矩形电视已成为主流。历史上，电视机的形状为正方形，称为 4:3 或 1.33 比 1 的纵横比。
在 Android 平台上设计
在设计时，使用 dp 在不同密度的屏幕上统一显示元素，就像任何其他 Android 设备一样。始终以 MDPI 分辨率（960px * 540px）进行设计。
在 MDPI 中，1px = 1dp。
素材需要以 1080p 为目标。这允许 Android 系统在必要时将布局元素缩减到 720p。
确保可见性和超扫描安全
确保用户始终可以看到重要的元素。为此，请在布局的左右两侧留出 5%（48dp）的边距，在顶部和底部留出 27dp 的边距，并将元素放置在该边距内。这样可以确保布局的屏幕元素位于超扫描范围内。
填充整个屏幕
不要将背景屏幕元素调整或剪裁到超扫描安全区域。相反，允许部分显示屏幕外的元素。这样可以确保所有屏幕都能正确显示背景和屏幕外的元素。
使用轴优化
考虑人们如何使用遥控器控制电视。确保您的电视界面易于使用遥控器控制。设计每个方向（上、下、左、右）使其具有明确的目的和导航模式，以帮助用户了解如何在大量选项之间移动。
布局
电视屏幕尺寸因设备而异。由于现代电视的纵横比为 16:9，因此建议您使用 960px x 540px 的屏幕尺寸设计应用。这样可以确保所有元素都可以按比例调整大小，以适应高清或 4K 屏幕。
超扫描边距
超扫描边距是内容与屏幕左右边缘之间的空间。
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
这些边框边距可以保护主要元素免受潜在的超扫描问题的影响。为了确保您的内容和信息安全，请使用 5% 的边距布局（侧面 58dp，顶部和底部边缘 28dp）。
列和槽
内容被放置在屏幕上具有列和槽的区域中。网格系统有 12 列。槽是列之间的空间，有助于划分内容。
使用 12 列，每列宽 52dp，列间距 20dp。两侧需要 58dp 的空间，行间垂直间距为 4dp。
布局模式
根据您的预期用途和显示设备，有三种布局模式可供选择：水平堆叠布局、垂直堆叠布局和网格布局。
水平堆叠布局
水平堆叠布局将组件水平排列。它们的大小、比例或格式可能有所不同。此布局通常用于对内容和组件进行分组。
垂直堆叠布局
垂直堆叠布局以垂直方式排列组件，允许灵活调整大小、比例和格式。它通常用于将各种类型的文本、交互式组件和布局模式组合在一起。
网格布局
网格是相交的列和行的集合，网格布局在此网格中显示内容。它以逻辑的方式排列内容，使用户可以轻松浏览和导航。
为了防止重叠，务必考虑项目之间的填充和聚焦状态的大小增加。例如，当突出显示聚焦的组件（如卡片）时。如果您使用我们建议的网格布局（12 列 52dp，槽 20dp），请参阅卡片以获取建议的组件布局和预览。
布局结构
以下是一些布局结构，可帮助您在设计电视布局时做出更好的决策。通过水平划分电视屏幕，可以帮助分离不同类型的组件，传达信息层次结构和导航逻辑。窗格可以包含多个单元列。每个窗格可以承载不同的布局模式，例如堆叠布局和网格布局。
单窗格布局
单窗格布局可以帮助将注意力吸引到主要内容上。将其与内容优先体验和关键信息页面一起使用。
双窗格布局
当页面显示分层内容时，双窗格布局的性能更好。它广泛用于任务优先体验。
认知超载
复杂且不清楚的内容会导致混淆、烦恼和参与度下降。使您的设计易于扫描、整洁，并且只呈现必要的信息。
避免使用过多面板来分组内容。这会给用户带来不必要的认知负担和层级结构。
做
不要
表达层级和导航
面板在视觉上分离和组织内容。它们有助于引导用户，并可以创建更直观的界面，从而增强用户体验。
做
不要
布局模板
布局模板促进秩序、一致性和熟悉感。设计创造了舒适的 UI 体验，清晰地传达了用户所在的位置以及他们可以去往的位置。
浏览
浏览器模板以垂直堆叠的方式显示媒体内容“集群”或行。用户上下导航以浏览行，左右导航以浏览特定行的内容。
左侧叠加
左侧导航模板在屏幕左侧显示一个叠加面板。它通常显示与背景内容相关的导航或可操作的项目。
右侧叠加
右侧叠加模板在屏幕右侧显示一个叠加面板。它通常显示与背景内容无关的可操作项目。
中心叠加
中心叠加模板显示一个模态元素，覆盖在现有视图之上。它用于传达紧急信息或提示决策。
底部叠加
底部叠加模板通常用于底部表单。底部表单是包含补充内容的面板，锚定在屏幕底部。它们允许您创建迷你流程，而不会丢失当前页面的上下文。
操作
操作模板在左侧显示标题和副标题，在右侧显示选项或操作。用户通常被要求使用此模板做出选择或执行操作。
内容详情
内容详情模板以水平堆叠布局显示内容。内容通常包括标题、元数据、简短描述、快速操作和相关信息集群。
编译
编译模板在屏幕左侧显示项目的详细信息，例如播客，以及其元素，例如其剧集，在右侧面板上。
网格
网格模板以组织良好的网格显示内容集合。它展示了具有清晰远程导航逻辑和最佳浏览体验的内容。
警报
警报模板显示全屏消息。它通常需要一个操作来解除警报并返回到上一个屏幕。
卡片列
1 卡片布局
卡片宽度 — 844dp
2 卡片布局
卡片宽度 — 412dp
3 卡片布局
卡片宽度 — 268dp
4 卡片布局
卡片宽度 — 196dp
5 卡片布局
卡片宽度 — 124dp
