焦点系统

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

重点

  • 焦点系统由可聚焦元素的部分组成。
  • 焦点指示器是强调聚焦元素的视觉设备。
  • 缩放指示会在聚焦或选中时按 x 因子调整元素。
  • 背景颜色是静态的,而表面颜色在聚焦时可能会发生变化。

焦点

焦点是电视设计的关键状态定义。导航受限于遥控器上可用的方向键交互。用户可以使用方向键移动,中心按钮选择,后退键返回。遥控器允许用户一次执行一个交互操作。元素的状态变化使用焦点指示器表示,以帮助用户进行可视化。

可聚焦元素和组

“可聚焦元素”是电视界面的组成部分。“可聚焦元素”可以是任何组件,例如按钮、卡片、列表项或自定义定义的表面。在任何给定时间,用户都应该只能聚焦一个可聚焦元素。

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

Focus Anatomy

焦点指示器

焦点指示器是聚焦元素的独特可视化表示。当选中元素时,它会进入“按下”状态,直到释放遥控器按钮。

可聚焦元素的每个状态都通过调整以下属性进行配置

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

Focus Types

缩放指示

聚焦或选中时缩放元素。默认缩放值为:1.025、1.05 和 1.1 倍。使用此指示清楚地反馈导航。不同元素的缩放值可能会根据其大小而有所不同。

Focus scale

辉光指示

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

  1. 辉光级别:表示元素的高度,范围从 2dp 到 32dp
  2. 辉光颜色:可以根据图像或品牌颜色指定

Focus glow

轮廓指示

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

  1. 轮廓宽度:在元素外部形成
  2. 轮廓内边距:元素与其轮廓之间的间距
  3. 轮廓颜色:可以根据图像或品牌颜色指定 \

Focus outline

颜色指示

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

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

Focus color

色调高度

背景颜色是静态的,而表面颜色可能会发生变化。高度级别 +1 到 +5 的表面通过基于主色的颜色叠加进行着色。这为表面基线引入了色调变化。

色调表面提供了许多好处

  • 创建高度效果以区分各种元素和文本
  • 建立对比度以获得辅助功能优势
  • 创建视觉参与度,并软化交互元素之间的过渡

禁用

在禁用状态下,背景颜色和不透明度显示较低的重要性,以表示该对象不可点击。

用例

可聚焦元素具有 3 个主要状态:默认、聚焦和按下,以及其他状态:启用、禁用和选中,形成一个矩阵。

卡片

默认 聚焦 按下
启用 Card detault Card focused Card pressed

按钮

默认 聚焦 按下
启用 Button Enabled Default Button Enabled Focused Button Enabled Pressed
禁用 Button disabled default Button disabled focused Button disabled pressed

芯片

默认 聚焦 按下
启用 Chip enabled default Chip enabled focused Chip enabled pressed
启用 + 选中 Chip enabled selected default Chip enabled selected focused Chip enabled selected pressed
禁用 Chip disabled default Chip disabled focused Chip disabled pressed
禁用 + 选中 Chip disabled selected default Chip disabled selected focused Chip disabled selected pressed