布局

布局是结构模板，可提供一个框架，以便在整个应用中保持视觉一致性。通过定义视觉网格、间距和版块，布局可建立一个协调有序的结构，以呈现信息和界面元素。

亮点

• 与网站或移动设备不同，电视的屏幕宽高比固定为 16:9。
• 优化水平和垂直轴的布局，以便于使用和控制。

原则

这些准则可帮助您在设计 TV 布局时做出设计决策。

专为大屏幕而设计

自高清电视普及以来，宽高比为 16:9 的矩形电视已成为常态。从历史上看，电视机采用的是方形设计，宽高比为 4:3 或 1.33:1。

在 Android 平台上设计

在设计时，请使用 dp 在密度不同的屏幕上均匀显示元素，就像在任何其他 Android 设备上一样。始终以 MDPI 分辨率（960 像素 * 540 像素）进行设计。

在 MDPI 下，1px = 1dp。

素材资源应以 1080p 为目标分辨率。这样，Android 系统就可以在必要时将布局元素分辨率缩小到 720p。

确保可见性和过扫安全

确保重要元素始终可供用户看到。为此，请在布局的左右侧为元素设置 48dp 的外边距 (5%)，并在布局的顶部和底部为元素设置 27dp 的外边距。这样可确保布局的屏幕元素位于过扫范围内。

填充整个屏幕

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

使用轴进行优化

考虑用户如何使用遥控器控制电视。确保电视界面易于使用遥控器。为每个方向（向上、向下、向左、向右）设计明确的用途和导航模式，以帮助用户了解如何浏览大量选项。

布局

电视屏幕尺寸因设备而异。由于新型电视的宽高比为 16:9，因此建议您在设计应用时采用 960 x 540 像素的屏幕尺寸。这样可确保所有元素都能按比例调整大小，以适应 HD 或 4K 屏幕。

过扫描边距

过扫边距是指内容与屏幕左侧和右侧边缘之间的间距。

960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp

这些边框边距可保护主要元素免受潜在的过扫问题的侵害。为确保内容和信息的安全，请使用 5% 外边距布局（侧边为 58dp，顶部和底部边缘为 28dp）。

注意 ：大多数新型电视不再存在过扫问题。

列和边线

内容会放置在屏幕上具有列和边线的区域中。网格系统包含 12 列。边线是列之间的空白，有助于划分内容。

使用 12 个宽度为 52dp 且彼此间隔 20dp 的列。 两侧需要留出 58dp 的空间，行与行之间的垂直间距为 4dp。

布局模式

有三种布局模式可供选择，具体取决于您的预期用途和显示设备：水平堆叠布局、垂直堆叠布局和网格布局。

水平堆叠布局

水平堆叠布局会水平排列组件。 它们的尺寸、比例或格式可能会有所不同。此布局通常用于对内容和组件进行分组。

垂直堆叠布局

垂直堆叠布局以垂直方式排列组件，支持灵活的大小、比率和格式。它通常用于将不同类型的文本、交互式组件和布局模式组合在一起。

网格布局

网格是一系列交叉的列和行，网格布局会在此网格中显示内容。它以逻辑方式排列内容，让用户能够轻松浏览和导航。

为防止重叠，请务必考虑项之间的内边距以及聚焦状态的尺寸增加。例如，当聚焦的组件（例如卡片）突出显示时。如果您使用的是我们建议的网格布局（12 列，每列 52dp，边线间距 20dp），请参阅“卡片”，了解建议的组件布局和预览。

布局结构

以下是一些布局结构，可帮助您在设计 TV 布局时做出更好的决策。通过水平划分电视屏幕，可以帮助分隔不同类型的组件，传达信息层次结构和导航逻辑。一个窗格可以包含多个单元列。 每个面板都可以托管不同的布局模式，例如堆叠布局和网格布局。

单窗格布局

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

双窗格布局

当网页显示分层内容时，双窗格布局的效果会更好。它广泛用于任务型体验。

认知过载

复杂且不明确的内容可能会导致用户感到困惑和烦恼，进而降低互动度。使设计一目了然、整洁有序，并仅显示必要的信息。

避免使用过多面板来分组内容。这会给用户带来不必要的认知负担和层次结构。

check_circle

正确做法

将相关内容放置在一个面板中。这有助于用户了解内容的分组。

cancel

错误做法

避免使用过多面板来分组内容。这会给用户带来不必要的认知负担和层次结构。

表达层次结构和导航

面板可从视觉上区分和整理内容。它们有助于引导用户，并可打造更直观的界面，从而提升用户体验。

check_circle

正确做法

根据用户的阅读路径对内容进行分组。确保焦点路径与层次结构或决策逻辑保持一致。

cancel

错误做法

请勿让用户的注意力在面板之间来回切换。这会导致焦点路径不自然，不符合用户的阅读习惯。

布局模板

布局模板有助于实现有序、一致和熟悉的效果。该设计可打造舒适的界面体验，清晰地传达用户当前所在的位置以及可以前往的位置。

浏览

浏览器模板会以垂直堆叠的形式显示媒体内容“集群”或行。用户可以上下移动来浏览行，也可以左右移动来浏览特定行的具体内容。

左侧叠加层

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

右侧叠加层

右侧的叠加层模板会在屏幕右侧显示叠加层面板。它通常会显示您可以独立于后台内容执行操作的内容。

居中叠加层

中心叠加层模板会显示叠加在现有视图上的模态元素。用于传达紧急信息或促成决策。

底部叠加层

底部叠加层模板通常用于底部动作条。底部动作条是指包含锚定到屏幕底部的补充内容的界面。借助它们，您无需丢失当前网页的上下文即可创建迷你流程。

操作

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

内容详情

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

编译

合集模板会在屏幕左侧显示项目的详细信息（例如播客），并在右侧面板中显示其元素（例如分集）。

网格

网格模板会以有序的网格形式显示内容集合。它采用清晰的远程导航逻辑，提供最佳浏览体验，以便用户查看内容。

提醒

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

卡片列

1 张卡片布局

卡片宽度 - 844dp

2 张卡片的布局

卡片宽度 - 412dp

3 张卡片的布局

卡片宽度 - 268dp

4 张卡片的布局

卡片宽度 - 196dp

5 张卡片的布局

卡片宽度 - 124dp