颜色系统

Android TV 遵循 Google 的 Material 颜色指南,确保界面和谐一致且视觉效果出色。它创建了一种高度沉浸式和引人入胜的视觉风格,专门针对电视屏幕。本指南详细介绍了将 Material Design 主题应用于 Android TV 界面。

亮点

  • Android TV 遵循 Google 的 Material 颜色指南,但针对电视进行了优化。
  • 从深色主题构建,以创造电影般的体验。
  • 使用 Material 主题构建器 创建主题。

配色方案

配色方案可帮助您以有意义的方式将颜色应用于您的 UI,从而创造和谐、品牌一致性和可扩展性。

配色方案的基础是五个关键颜色集,它们分别与具有 13 种或更多色调的独立色调调色板相关联。来自每个色调调色板的特定色调被分配给 UI 中的颜色角色。关键颜色是创建任何动态配色方案的基础。您可以使用 Material 主题构建器基于一种根颜色创建关键颜色,或选择您自己的关键颜色。

Key Colors

在确定关键颜色后,Material 的算法将指定表达交互状态、错误和可访问对比度所需的完整颜色范围。

Color theme generation process

Material 主题构建器使用相同的颜色标记生成深色和浅色配色方案,从而简化主题之间的切换。

颜色角色

主要

主要角色用于 UI 中的关键组件,例如突出的按钮、活动状态和升高表面的色调。

Accent Primary

次要

次要角色用于 UI 中不太突出的组件,例如筛选器芯片以及更多颜色表达的机会。

Accent Secondary

第三级

第三级角色用于与主要颜色和次要颜色形成对比的重音,可以用来平衡主要颜色和次要颜色,或将注意力集中到某个元素,例如输入字段。

Accent tertiary

表面

中性角色用于表面和背景,以及高亮显示的文本和图标。有关表面的更多信息,请参阅 Material Design 指南

Surfaces

轮廓

有关轮廓角色的更多信息,请参阅 Material Design 指南

Outline

动态颜色

在 Android 移动设备上,从 Android 12 开始,用户可以通过壁纸选择和其他自定义设置生成个性化的方案。Android TV 不支持壁纸,这意味着不支持用户生成的方案,并且 Android TV 操作系统仅广播基础调色板。

作为用户生成方案的替代,您可以使用基于内容的配色方案创建动态且有趣的图案,这些图案基于内容,例如电影海报、专辑封面和其他英雄图像。有关详细信息,请参阅 基于内容的配色方案

使用 Material 颜色实用工具 开发者库,您可以直接从图像中提取关键颜色,或运行您自己的颜色提取算法以找到关键颜色,然后使用 Material 颜色实用工具生成主题。

以下是如何从图像中提取颜色的示例

Dynamic Color

  1. 源图像
  2. 提取的种子颜色
  3. 生成的關鍵顏色

您可以使用这些关键颜色生成配色方案,或使用色调将其应用于 UI 上。

Dynamic color application example

可访问性

有关可访问性注意事项,请参阅 Android TV 的可访问性最佳实践