与触摸界面不同,电视在很大程度上依赖于不同的主要状态(默认、聚焦、按下)来吸引用户对聚焦元素的注意力。这成为导航的起点。
重点
- 焦点系统由可聚焦元素的部分组成。
- 焦点指示器是强调聚焦元素的视觉设备。
- 缩放指示会在聚焦或选中时按 x 因子调整元素。
- 背景颜色是静态的,而表面颜色在聚焦时可能会发生变化。
焦点
焦点是电视设计的关键状态定义。导航受限于遥控器上可用的方向键交互。用户可以使用方向键移动,中心按钮选择,后退键返回。遥控器允许用户一次执行一个交互操作。元素的状态变化使用焦点指示器表示,以帮助用户进行可视化。
可聚焦元素和组
“可聚焦元素”是电视界面的组成部分。“可聚焦元素”可以是任何组件,例如按钮、卡片、列表项或自定义定义的表面。在任何给定时间,用户都应该只能聚焦一个可聚焦元素。
另一方面,“可聚焦组”包含一个或多个“可聚焦元素”。可以有任意数量的嵌套“可聚焦组”。可聚焦组用于逻辑上对不同的可聚焦元素进行分组,以便用户友好地导航。
焦点指示器
焦点指示器是聚焦元素的独特可视化表示。当选中元素时,它会进入“按下”状态,直到释放遥控器按钮。
可聚焦元素的每个状态都通过调整以下属性进行配置
- 缩放 — 更改聚焦元素的大小
- 边框 — 在元素周围绘制轮廓
- 辉光 — 在元素下方创建阴影(通常用于卡片)
- 颜色 — 更改元素背景和内容颜色
缩放指示
聚焦或选中时缩放元素。默认缩放值为:1.025、1.05 和 1.1 倍。使用此指示清楚地反馈导航。不同元素的缩放值可能会根据其大小而有所不同。
辉光指示
在元素周围添加漫射辉光或阴影。辉光指示采用以下参数
- 辉光级别:表示元素的高度,范围从 2dp 到 32dp
- 辉光颜色:可以根据图像或品牌颜色指定
轮廓指示
在元素周围添加一个独立于边框的轮廓。轮廓指示使用以下参数
- 轮廓宽度:在元素外部形成
- 轮廓内边距:元素与其轮廓之间的间距
- 轮廓颜色:可以根据图像或品牌颜色指定 \
颜色指示
元素可以通过适应颜色来更改状态。颜色指示使用以下参数
- 背景颜色:更改元素的表面颜色
- 内容颜色:更改表面上内容的颜色
色调高度
背景颜色是静态的,而表面颜色可能会发生变化。高度级别 +1 到 +5 的表面通过基于主色的颜色叠加进行着色。这为表面基线引入了色调变化。
色调表面提供了许多好处
- 创建高度效果以区分各种元素和文本
- 建立对比度以获得辅助功能优势
- 创建视觉参与度,并软化交互元素之间的过渡
禁用
在禁用状态下,背景颜色和不透明度显示较低的重要性,以表示该对象不可点击。
用例
可聚焦元素具有 3 个主要状态:默认、聚焦和按下,以及其他状态:启用、禁用和选中,形成一个矩阵。
卡片
默认 | 聚焦 | 按下 | |
---|---|---|---|
启用 |
按钮
默认 | 聚焦 | 按下 | |
---|---|---|---|
启用 | |||
禁用 |
芯片
默认 | 聚焦 | 按下 | |
---|---|---|---|
启用 | |||
启用 + 选中 | |||
禁用 | |||
禁用 + 选中 |