聚焦系统

与触摸界面不同,TV 在很大程度上依赖于不同的主要状态(默认、聚焦、按下)来吸引用户的注意力。这将作为导航的起点。

亮点

  • 焦点系统由多个可聚焦元素部分组成。
  • 焦点指示标志是突出显示聚焦元素的视觉设备。
  • 当某个元素处于聚焦状态或被选中时,缩放指示会按 x 系数调整元素。
  • 虽然背景颜色是静态的,但 Surface 颜色在聚焦时可能会发生变化。

侧重点

焦点是 TV 设计的关键状态定义。导航功能仅限于遥控器上可用的方向键交互。用户可以使用箭头键进行移动,使用中间的按钮进行选择,使用返回键返回。遥控器允许用户一次进行一次互动。元素的状态变化使用焦点指示器表示,以帮助用户进行可视化。

可聚焦的元素和组

“可聚焦元素”是 TV 界面不可或缺的一部分。“可聚焦元素”可以是任何组件,例如按钮、卡片、列表项或自定义的 Surface。在任何给定时间,用户都应该能够仅专注于一个可聚焦的元素。

另一方面,“可聚焦的群组”包含一个或多个“可聚焦元素”。可以有任意数量的嵌套“可聚焦组”。可聚焦组用于在逻辑上对不同的可聚焦元素进行分组,以实现用户友好的导航。

焦点剖析

对焦指示标志

焦点指示标志是对焦点元素的独特可视化。 选择某个元素后,该元素会进入“按下”状态,直到松开遥控器按钮。

您可以通过调整以下属性来配置可聚焦元素的每种状态:

  • 缩放 - 更改聚焦元素的大小
  • 边框 - 在元素周围绘制轮廓
  • 发光 - 在元素下创建阴影(通常用于卡片)
  • 颜色 - 更改元素背景和内容颜色

焦点类型

比例指示

在聚焦或选择元素时缩放元素。默认扩缩值为:1.025、1.05 和 1.1x。使用此指示图标可针对导航提供明确反馈。不同元素的缩放值可能会因元素大小而异。

对焦缩放

发光指示

在元素周围添加漫射光晕或阴影。发光指示采用以下参数:

  1. 发光级别:建议元素的高度,范围为 2dp - 32dp
  2. 发光颜色:可以根据图片或品牌颜色指定

聚焦光晕

轮廓指示

在元素周围添加独立于边框的轮廓。轮廓指示使用了以下参数:

  1. 轮廓宽度:元素外的表单
  2. 轮廓边衬区:元素与其轮廓之间的间距
  3. 轮廓颜色:可根据图片或品牌颜色指定

焦点大纲

颜色指示

元素可通过适应颜色来改变状态。颜色指示使用以下参数:

  1. 背景颜色:更改元素的表面颜色
  2. 内容颜色:更改 Surface 上内容的颜色

焦点颜色

色调高度

虽然背景颜色是静态的,但 Surface 颜色可以更改。高度为 +1 到 +5 的表面通过基于主要颜色的颜色叠加层进行着色。这会在 Surface 基准中引入色调变化。

色调 Surface 具有许多优势:

  • 创建高度效果,以区分不同的元素和文本
  • 针对无障碍优势建立对比
  • 打造视觉互动体验,并柔化互动元素之间的过渡效果

已停用

在停用状态下,背景颜色和不透明度会以较低的显眼程度显示,以表示相应对象不可点击。

用例

可聚焦元素有 3 种主要状态:默认、聚焦和按下,还有更多状态:已启用、已停用和选中(形成一个矩阵)。

卡片

默认 专注 已按下
已启用 卡超出限制 聚焦卡片 已按下卡片

按钮

默认 专注 已按下
已启用 默认启用按钮 启用焦点的按钮 已按下按钮
已停用 按钮默认处于停用状态 已禁用焦点的按钮 已按下按钮已停用

条状标签

默认 专注 已按下
已启用 已启用条状标签的默认选项 已聚焦条状标签启用 已按下条状标签启用按钮
已启用 + 已选择 已启用条状标签的默认选项 已选择并聚焦条状标签启用 已按下启用“已选择条状标签”按钮
已停用 默认使用条状标签停用 条状标签已停用并聚焦 已按下已停用条状标签
已停用 + 已选择 已停用条状标签的默认选项 已选中并聚焦于条状标签 已按下已停用的条状标签