布局是结构化模板,可提供用于维护 视觉一致性通过定义视觉网格、间距 和版块和版块,布局可以为 信息和界面元素的呈现方式。

亮点
- 与网页或移动设备不同,电视具有 16:9 的固定屏幕宽高比。
- 优化沿水平轴和垂直轴的布局,以方便使用 和控制。
原则
可帮助您在设计 TV 布局时做出设计决策的指南。

专为大屏幕而设计
自高清电视普及后,宽高比为 16:9 的矩形电视已成为常态。过去,电视为方形,称为 4:3 或宽高比为 1.33:1。

在 Android 平台上进行设计
在设计时,请使用 dp 在不同密度的屏幕上以一致的方式显示元素,就像其他任何 Android 设备一样。始终以 960x540 像素的 MDPI 分辨率进行设计。
在 MDPI 时,1px = 1dp。
素材资源的目标分辨率必须为 1080p。这样一来,Android 系统便可以在必要时将布局元素分辨率降至 720p。

确保可见性和过扫描的安全性
确保用户始终可以看到重要元素。为此,请将元素放置到布局左侧和右侧的 5% 的外边距 48dp,在布局的顶部和底部的外边距为 27dp。这可确保布局的屏幕元素在过扫描范围内。

填满整个屏幕
请勿将背景屏幕元素调整或裁剪至过扫描安全区域。而是允许部分显示屏幕外元素。这可确保所有屏幕都能正确显示背景和屏幕外元素。

使用轴优化
考虑用户如何搭配使用遥控器和电视。确保您的电视界面易于使用遥控器来使用。设计每个方向(向上、向下、向左、向右)均应有明确的用途和导航模式,以帮助用户了解如何在大量选项之间移动。
布局
TV 屏幕尺寸因设备而异。由于现代电视具有 宽高比为 16:9,建议您在设计应用时采用 屏幕尺寸:960 x 540 像素。这样可确保所有元素 针对高清或 4K 屏幕按比例调整大小。
过扫描边距
过扫描外边距是指内容与 屏幕的左侧和右侧边缘。
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
这些边框外边距可防止主要元素出现潜在的过扫描问题。 为了确保您的内容和信息安全,请使用 5% 的边距布局 (侧边 58dp,顶部边缘和底部边缘 28dp)。
柱子和边线
内容位于屏幕区域,具有列和边线。 网格系统有 12 列。边线是 用于划分内容的列。
使用 12 列,宽度为 52dp,列之间留出 20dp 的间距。 两侧必须留出 58dp 的空间,并在垂直方向留出 4dp 的空间 行间距。
布局模式
有三种布局模式可供选择,具体取决于您的预期 用途和显示设备:水平堆栈布局、垂直堆栈布局 和网格布局
水平堆叠布局
“水平堆栈”布局可水平排列组件。 它们在尺寸、比例或格式上可以有所不同。这种布局通常是 用于对内容和组件进行分组。
垂直堆叠布局
垂直堆栈布局可垂直排列组件, 支持灵活的尺寸、宽高比和格式通常 用于将各种类型的文字、互动组件以及 布局模式。
网格布局
网格是相交的列和行的集合,网格 布局会显示此网格中的内容。它以符合逻辑的方式 从而方便用户进行导航和浏览
为防止出现重叠 以及聚焦状态的大小增加。例如,当聚焦的 组件(例如卡片)会突出显示。如果您使用的是我们建议的 网格布局(52dp 为 12 列,边线为 20dp),请参阅卡片 组件布局和预览建议。
布局结构
下面介绍了一些布局结构 您在设计 TV 布局方面的决策。通过水平分割电视屏幕, 它可以帮助区分不同类型的组件, 层次结构和导航逻辑一个窗格可以包含多个单元列。 每个面板可以托管不同的布局模式,例如堆栈布局 和网格布局

单窗格布局
单窗格布局有助于吸引用户注意主要内容。请将其与以内容为主的体验和关键信息页面结合使用。

双窗格布局
当页面显示分层内容时,双窗格布局的效果更好。它广泛用于任务优先体验。
认知过载
复杂、不清楚的内容可能会让人感到困惑和烦恼, 互动。让您的设计清晰可辨、井然有序且生动呈现 只查看重要信息
避免使用过多面板对内容进行分组。这会创建 给用户带来不必要的认知负担和层次结构。

正确做法

错误做法
Express 层次结构和导航
面板可以直观地分隔和整理内容。它们可以帮助引导用户 并且可以创建更直观的界面来改善用户体验。

正确做法

错误做法
布局模板
布局模板可提高顺序、一致性和一致性。设计 营造舒适的界面体验,它能清晰地传达 用户的位置以及他们可以去往何处
浏览
浏览器模板显示媒体内容“clusters”或垂直堆叠中的行用户可以上下浏览以浏览行,通过左右浏览可浏览特定行的内容。

左侧叠加层
左侧导航模板在屏幕左侧显示叠加面板。它通常会显示导航项或可针对后台内容执行操作的内容。

右侧叠加层
右侧叠加层模板在屏幕右侧显示叠加层面板。它通常会显示您执行操作的项目,而不受背景内容的影响。

中心叠加层
中心叠加层模板显示叠加在现有视图之上的模态元素。用于传达紧急信息或促使用户做出决定。

底部叠加层
底部重叠式广告模板通常用于底部工作表。底部动作条是指包含锚定于屏幕底部的补充内容的表面。通过它们,您可以创建迷你流,而不会丢失当前页面的上下文。

操作
操作模板左侧显示标题和副标题,右侧显示选项或操作。系统通常会要求用户使用此模板选择一个选项或执行操作。

内容详情
内容详情模板以水平堆叠布局显示内容。内容通常包括标题、元数据、简短说明、快速操作和相关信息集。

编译
编译模板会在屏幕左侧显示某个项目(例如播客)的详细信息,及其元素(例如其分集)显示在右侧面板中。

网格
网格模板会以有序网格的形式显示内容集合。它所展示的内容具有清晰的遥控器导航逻辑,并提供了最佳浏览体验。

提醒
提醒模板会显示全屏消息。通常需要执行某项操作来取消屏蔽提醒并返回上一屏幕。

卡片列
1 张卡片布局
卡片宽度 - 844dp

双卡片布局
卡片宽度 - 412dp

三张卡片布局
卡片宽度 - 268dp

4 张卡片布局
卡片宽度 - 196dp

5 张卡片布局
卡片宽度 - 124dp
