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