主题

主题是一组样式或属性(例如颜色、类型和形状), 可能会影响用户的移动设备或大屏设备的外观和风格; 应用内体验

要点总结

  • 为了向用户提供更加个性化且易于使用的体验,请确保您的应用 采用系统偏好设置,包括主题(例如浅色/深色)、动态和 对比度。
  • 创建自定义主题,以便在动态不可用时用作后备主题。
  • 在使用各种主题时考虑类型设置。
  • 请务必检查文字和表面对比度,以确保易读性。

主题类型

主题基于系统或应用。系统主题会影响用户的整个 并在设备设置中提供相应的控件,而应用 只会影响实现该主题的应用。

应用必须实现任一类型的主题才能显示它,但应用主题适用 而不能在设备上的其他位置进行。您还可覆盖一些 系统主题设置和应用内设置。

系统主题

系统主题会应用于整个 Android 设备,包括各个应用 具体取决于用户设置系统主题包括浅色主题和深色主题 用户生成的主题和制造商主题

浅色和深色主题

浅色主题(也称为日间模式)由 根据高色调值构建而成的 Surface,反之,深色主题背景 或夜间模式,通过移动界面来降低亮度。表面以深色打造 灰度或低色调值。

深色主题具有多种优势:在阳光或光线昏暗的环境下提高屏幕易读性 降低因亮度降低而导致的眼睛疲劳 电量。此外,它往往也是用户最迫切的应用功能。

<ph type="x-smartling-placeholder">
</ph>
图 1:相同的主屏幕和图标,但采用浅色和深色主题 。

在实现浅色主题和深色主题时,请考虑以下要点:

  • 您可以自定义配色方案,让照片更具表现力。如果您使用的是 利用 Material Theme Builder 创建架构,它会自动创建一个深色 架构。详细了解如何自定义 Material 和颜色系统以创建 品牌主题。
  • 用户可以在系统级显示设置中设置浅色主题或深色主题 始终开启、始终关闭或根据一天中的不同时间自动开启。我们建议 不仅能反映用户的首选系统设置 创建应用内控件,以便为用户提供更精细的修改。
  • WebView 中的 Web 内容也可以使用浅色、深色或默认样式。阅读 如何在 WebView 中使用深色主题
  • 如果用户已启用此功能,Android 可以强制使用深色主题。您还可以创建一个 自定义深色主题,以便更好地控制。
  • 如果用户没有启用其他主题或设置,您可以选择 “锁定”更改为浅色主题不过,我们不建议您这样做 因为这有违用户的无障碍功能和个性化需求
。 <ph type="x-smartling-placeholder">
</ph>
图 2:应用显示的内容相同,但采用浅色和深色主题
用户生成的主题

用户生成的主题受到动态配色的支持, 从 Android 12 开始,由 Material You 提供。启用后,动态 color [颜色] 从用户的壁纸中派生自定义颜色,以将其应用到其应用 和系统界面此调色板可作为基础来生成 浅色和深色配色方案

您还可以在设备设置中更新字体设置,以满足用户的 偏好设置和无障碍功能需求。这些设置 因此请务必为字体使用可缩放的像素值。

<ph type="x-smartling-placeholder">
</ph>
图 3:从壁纸中派生的界面配色方案


<ph type="x-smartling-placeholder">
</ph>
图 4:应用界面配色方案壁纸
制造商主题

设备制造商可能会提供额外的专有主题功能 可能会影响系统界面和显示设置。

应用主题

基准

Material 库中的 Material 组件提供了一个基准主题, 采用了紫色配色方案和 Roboto 字体。任何未定义主题的应用 属性就会恢复为这些基准属性。

自定义(品牌)

使用自定义主题可为应用的外观提供更丰富的表达方式 或当某些系统主题不可用时作为后备选项。 无论您是使用完整的自定义设计系统、小型 品牌指南或几款您喜欢的颜色

您的应用也可以有多个自定义架构,无论用户是否可以使用完整架构 灵感来源、灵感来源或次级品牌元素

<ph type="x-smartling-placeholder">
</ph>
图 5:应用了基准主题后的同一应用及其内容 (左)并应用了自定义主题(右)


<ph type="x-smartling-placeholder">
</ph>
图 6:带有基准生成的主题(左侧)和主题的按钮 由自定义值组成(右)
内容

为了突出某些内容,界面可以使用动态配色继承颜色 。内容颜色适用于主要内容来源, 因此,在包含多个内容来源的观看次数时,请务必谨慎使用这一功能。

<ph type="x-smartling-placeholder">
</ph>
图 7:应用从关键图片中提取内容。媒体通知还可以提取媒体图片中的颜色

主题通常会影响整个应用,但也可以选择性地应用 以及其他主题您可以保留 具有层次结构:一个主要主题来源(动态或自定义), 适用于界面的大部分区域

<ph type="x-smartling-placeholder">
</ph>
图 8:应用可通过应用动态模式来利用主题组合 颜色或品牌颜色针对特定元素
Material

Material Design 提供了基准主题和主题系统(颜色、类型、 形状)。还可以扩展 Material 主题设置,以实现额外的功能 属性。

品牌

如果 Material Design 主题系统与您想要的外观和风格不一致 您可以实现完全自定义的主题。确保测试自定义 以便确保对比度和易读性

了解如何在 Compose 中实现自定义系统

主题属性

主题属性与界面设计中常用的视觉样式保持一致, 来激发一系列的美学。在应用内,这些属性通常与 Material 相关联 主题系统,支持应用开发者进行自定义。

颜色

利用颜色来表现风格和传达含义。设置应用的颜色 对于个性化、定义语义目的, 品牌身份的定义

在主题中,配色方案是分配给特定角色的一组色调 映射到组件的名称详细了解 Android 中的颜色 界面Material 3 颜色系统

<ph type="x-smartling-placeholder">
</ph>
图 9:着色

类型

Android 的系统字体是 Roboto(可免费提供给所有应用使用),但 可以自定义类型考虑要对齐的所选字体的易读性 角色了解如何申请类型

<ph type="x-smartling-placeholder">
</ph>
图 10:基于标题大小的类型示例

形状

自定义超出基准默认值的容器角的形状有助于 定义应用的特征例如,您可以使用全圆角 给人一种更柔和有趣的感觉,或者采用棱角分裂的设计营造更加严肃的感觉。 查看 Material 组件的形状令牌和样式。

<ph type="x-smartling-placeholder">
</ph>
图 11:容器角形状

图标

在您的应用中,Material 图标有五种样式可供选择:已填充、 轮廓、锐利、圆角、双色调。在整个 保持一致且精美的外观。

<ph type="x-smartling-placeholder">
</ph>
图 12:Material 图标样式

其他主题属性

虽然颜色、类型和形状构成了主要的 Material 主题系统, 不限于 Material 所依赖的概念。您可以 修改现有系统和引入全新的系统 - 包含新的类和 类型),以使其他概念与主题兼容。您可能还需要 扩展或替换现有系统,利用自定义属性, 。例如,您可能需要添加一个渐变或间距系统 维度。

在应用中应用主题

主题与样式以及类

主题和样式都可以具有多个设计属性。样式可以是 独立于主题,是指单个元素(或 视图),而您可以设置多个元素甚至整个主题 应用。样式是一种可重复使用的样式选择,类似于 你的设计软件例如,“大号”表示样式,而“浅色”和“深色” 都是主题

在 Compose 中实现主题

一个主题通常由多个系统组成,这些系统将常见的视觉元素和 行为概念,您可以使用具有主题值的类对其进行建模。

如需详细了解如何使用 Jetpack,请参阅 Compose 中的 Material Design 3 Compose 用于创建 Material Design 3 主题的实现。

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
在 View 中实现主题

主题是一系列从语义上命名的资源, 贯穿始终主题采用相同的样式语法。

开始使用 View

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

网页视图

WebView 中的 Web 内容也可以使用浅色、深色或默认样式。了解具体方法 支持在 WebView 中使用深色主题

自定义 Material 主题

您可以使用 Material Theme Builder Figma 插件来 自定义 Material 主题。通过构建主题,您可以实现 已生成具有浅色和深色配色方案的主题文件,让您可以 使用 精确值。

<ph type="x-smartling-placeholder">
</ph>
图 13:Material Theme Builder 支持生成动态的 主题