布局是一种结构模板，可提供一个框架，以在整个应用中保持视觉一致性。通过定义视觉网格、间距和区段，布局可为信息和界面元素的呈现建立紧密的、有组织的结构。
亮点
- 与网页或移动设备不同的是，电视的屏幕宽高比固定为 16:9。
- 沿水平轴和垂直轴优化布局，以便于使用和控制。
原则
这些准则有助于您在设计 TV 布局时做出设计决策。
专为大屏幕而设计
自高清电视的普及以来，宽高比为 16:9 的矩形电视已成为常态。过去，电视都是采用方形的，宽高比称为 4:3 或 1.33:1。
在 Android 平台上设计
在设计时，使用 dp 可在不同密度的屏幕上均匀显示元素，就像显示其他任何 Android 设备一样。设计时应始终采用 960px * 540px 的 MDPI 分辨率。
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 的间距），请参阅“卡片”了解推荐的组件布局和预览。
布局结构
下面是一些布局结构，可帮助您在设计 TV 布局时做出更好的决策。通过水平划分电视屏幕，有助于分离不同类型的组件，以及传达信息层次结构和导航逻辑。一个窗格可以包含多个单元列。 每个面板可以托管不同的布局模式，例如堆栈布局和网格布局。
单窗格布局
单窗格布局有助于吸引用户注意主要内容。将其用于内容转发体验和关键信息页面。
双窗格布局
当页面显示分层内容时，双窗格布局的执行效果更好。它广泛用于任务驱动型体验。
认知过载
复杂和含糊的内容可能会让用户感到困惑、烦恼和互动度下降。确保您的设计清晰可辨，并且仅呈现重要信息。
避免使用过多的面板来对内容进行分组。这会给用户造成不必要的认知负载和层级结构。
正确做法
错误做法
表达层次结构和导航
面板在视觉上分隔并整理内容。它们有助于引导用户，并可创建更直观的界面来增强体验。
正确做法
错误做法
布局模板
布局模板可以提高顺序、一致性和熟悉性。这种设计能够营造出舒适的界面体验，能够清楚地传达用户所在的位置以及可以转到的位置。
浏览
浏览器模板会以垂直堆栈的形式显示媒体内容“集群”或行。用户可以上下导航来浏览行，也可以左右导航来浏览特定行的内容。
左侧叠加
左侧导航面板会在屏幕左侧显示一个叠加层面板。它通常会显示与后台内容相关的导航或可对其执行操作的项。
右侧叠加层
右侧叠加层模板会在屏幕右侧显示一个叠加层面板。它通常会独立于背景内容显示您对其执行操作的内容。
居中叠加
中心叠加层模板可显示一个模态元素，该元素叠加在现有视图之上。用于传达紧急信息或提示我们做出决定。
底部叠加层
底部叠加层模板通常用于底部工作表。底部动作条是指锚定在屏幕底部的补充内容的界面。借助它们，您可以创建迷你流程，而不会丢失当前页面的上下文。
操作
操作模板在左侧显示标题和副标题，在右侧显示选项或操作。系统通常会要求用户使用此模板做出选择或执行操作。
内容详情
内容详情模板以水平堆叠布局显示内容。内容通常包括标题、元数据、简短说明、快速操作和相关信息集。
编译
编译模板会在屏幕左侧显示某个内容（例如播客）的详细信息，并在右侧面板中显示其元素（例如分集）。
网格
网格模板会以井然有序的网格显示内容集合。它展示的内容具有清晰的远程导航逻辑和出色的浏览体验。
警报
提醒模板会显示全屏消息。通常需要执行某项操作才能取消屏蔽提醒并返回上一屏幕。
卡片列
单张卡片布局
卡片宽度 - 844dp
双卡片布局
卡片宽度 - 412dp
三张卡片布局
卡片宽度 - 268dp
四张卡片布局
卡片宽度 - 196dp
5 张卡片布局
卡片宽度 - 124dp
