布局是结构化模板,可提供用于维护 视觉一致性通过定义视觉网格、间距 和版块和版块,布局可以为 信息和界面元素的呈现方式。
![布局的封面图片](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?authuser=19&hl=zh-cn)
亮点
- 与网页或移动设备不同,电视具有 16:9 的固定屏幕宽高比。
- 优化沿水平轴和垂直轴的布局,以方便使用 和控制。
原则
可帮助您在设计 TV 布局时做出设计决策的指南。
![针对大屏设备设计应用](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?authuser=19&hl=zh-cn)
专为大屏幕而设计
自高清电视普及后,宽高比为 16:9 的矩形电视已成为常态。过去,电视为方形,称为 4:3 或宽高比为 1.33:1。
![针对 Android 设计应用](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-on-android-platform.webp?authuser=19&hl=zh-cn)
在 Android 平台上进行设计
在设计时,请使用 dp 在不同密度的屏幕上以一致的方式显示元素,就像其他任何 Android 设备一样。始终以 960x540 像素的 MDPI 分辨率进行设计。
在 MDPI 时,1px = 1dp。
素材资源的目标分辨率必须为 1080p。这样一来,Android 系统便可以在必要时将布局元素分辨率降至 720p。
![确保可见性](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/ensuring-visibility-and-overscan-safety.webp?authuser=19&hl=zh-cn)
确保可见性和过扫描的安全性
确保用户始终可以看到重要元素。为此,请将元素放置到布局左侧和右侧的 5% 的外边距 48dp,在布局的顶部和底部的外边距为 27dp。这可确保布局的屏幕元素在过扫描范围内。
![填满整个屏幕](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?authuser=19&hl=zh-cn)
填满整个屏幕
请勿将背景屏幕元素调整或裁剪至过扫描安全区域。而是允许部分显示屏幕外元素。这可确保所有屏幕都能正确显示背景和屏幕外元素。
![使用轴优化](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?authuser=19&hl=zh-cn)
使用轴优化
考虑用户如何搭配使用遥控器和电视。确保您的电视界面易于使用遥控器来使用。设计每个方向(向上、向下、向左、向右)均应有明确的用途和导航模式,以帮助用户了解如何在大量选项之间移动。
布局
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 布局方面的决策。通过水平分割电视屏幕, 它可以帮助区分不同类型的组件, 层次结构和导航逻辑一个窗格可以包含多个单元列。 每个面板可以托管不同的布局模式,例如堆栈布局 和网格布局
![单窗格布局示例](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?authuser=19&hl=zh-cn)
单窗格布局
单窗格布局有助于吸引用户注意主要内容。请将其与以内容为主的体验和关键信息页面结合使用。
![双窗格布局示例](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=19&hl=zh-cn)
双窗格布局
当页面显示分层内容时,双窗格布局的效果更好。它广泛用于任务优先体验。
认知过载
复杂、不清楚的内容可能会让人感到困惑和烦恼, 互动。让您的设计清晰可辨、井然有序且生动呈现 只查看重要信息
避免使用过多面板对内容进行分组。这会创建 给用户带来不必要的认知负担和层次结构。
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?authuser=19&hl=zh-cn)
正确做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?authuser=19&hl=zh-cn)
错误做法
Express 层次结构和导航
面板可以直观地分隔和整理内容。它们可以帮助引导用户 并且可以创建更直观的界面来改善用户体验。
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=19&hl=zh-cn)
正确做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?authuser=19&hl=zh-cn)
错误做法
布局模板
布局模板可提高顺序、一致性和一致性。设计 营造舒适的界面体验,它能清晰地传达 用户的位置以及他们可以去往何处
浏览
浏览器模板显示媒体内容“clusters”或垂直堆叠中的行用户可以上下浏览以浏览行,通过左右浏览可浏览特定行的内容。
![浏览](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/browse.webp?authuser=19&hl=zh-cn)
左侧叠加层
左侧导航模板在屏幕左侧显示叠加面板。它通常会显示导航项或可针对后台内容执行操作的内容。
![左侧叠加层](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?authuser=19&hl=zh-cn)
右侧叠加层
右侧叠加层模板在屏幕右侧显示叠加层面板。它通常会显示您执行操作的项目,而不受背景内容的影响。
![右侧叠加层](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?authuser=19&hl=zh-cn)
中心叠加层
中心叠加层模板显示叠加在现有视图之上的模态元素。用于传达紧急信息或促使用户做出决定。
![中心叠加层](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?authuser=19&hl=zh-cn)
底部叠加层
底部重叠式广告模板通常用于底部工作表。底部动作条是指包含锚定于屏幕底部的补充内容的表面。通过它们,您可以创建迷你流,而不会丢失当前页面的上下文。
![底部叠加层](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?authuser=19&hl=zh-cn)
操作
操作模板左侧显示标题和副标题,右侧显示选项或操作。系统通常会要求用户使用此模板选择一个选项或执行操作。
![操作](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/actions.webp?authuser=19&hl=zh-cn)
内容详情
内容详情模板以水平堆叠布局显示内容。内容通常包括标题、元数据、简短说明、快速操作和相关信息集。
![内容详情](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?authuser=19&hl=zh-cn)
编译
编译模板会在屏幕左侧显示某个项目(例如播客)的详细信息,及其元素(例如其分集)显示在右侧面板中。
![编译](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?authuser=19&hl=zh-cn)
网格
网格模板会以有序网格的形式显示内容集合。它所展示的内容具有清晰的遥控器导航逻辑,并提供了最佳浏览体验。
![网格](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?authuser=19&hl=zh-cn)
提醒
提醒模板会显示全屏消息。通常需要执行某项操作来取消屏蔽提醒并返回上一屏幕。
![提醒](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/alert.webp?authuser=19&hl=zh-cn)
卡片列
1 张卡片布局
卡片宽度 - 844dp
![1 张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?authuser=19&hl=zh-cn)
双卡片布局
卡片宽度 - 412dp
![双卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?authuser=19&hl=zh-cn)
三张卡片布局
卡片宽度 - 268dp
![三张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?authuser=19&hl=zh-cn)
4 张卡片布局
卡片宽度 - 196dp
![4 张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?authuser=19&hl=zh-cn)
5 张卡片布局
卡片宽度 - 124dp
![5 张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?authuser=19&hl=zh-cn)