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