主题

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

断球数

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

主题的类型

主题基于系统或应用。系统主题可以影响用户的整个设备界面,并在设备设置中提供相应的控件,而应用主题仅影响实现它的应用。

您的应用必须实现任一类型的主题才能显示它,但应用主题仅适用于应用内,而不适用于设备上的其他位置。您还可以使用应用内设置替换某些系统主题设置。

系统主题

系统主题可应用于整个 Android 设备,包括单个应用,具体取决于用户设置。系统主题包括浅色和深色主题、用户生成的主题以及制造商主题。

浅色和深色主题

浅色主题或日间模式由亮度较高的明亮显示模式和使用高色调值构建的 Surface 组成。相反,深色主题(或夜间模式)会切换界面来降低亮度。表面由深灰色或低色调值构建而成。

深色主题具有多种优势:有助于在阳光或弱光条件下提高屏幕清晰度、降低亮度导致眼睛疲劳,以及节省电量。此外,这也经常是用户呼声最高的应用功能。

图 1:相同的主屏幕和图标,并显示了浅色主题和深色主题。

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

  • 您可以自定义配色方案,让表达方式更加丰富。如果您使用 Material Theme Builder 创建方案,它会自动创建深色方案。详细了解如何通过自定义 Material 和颜色系统来创建品牌主题。
  • 用户可以在系统级显示设置中将浅色主题或深色主题设置为始终开启、始终关闭或根据一天中的时间自动开启。我们建议您采用用户的首选系统设置,不过最好创建应用内控件,以便为用户提供更精细的修改。
  • WebView 中的 Web 内容还可以使用浅色、深色或默认样式。了解 WebView 如何支持深色主题
  • 如果用户已启用深色主题,Android 可以强制启用深色主题。您还可以创建自定义深色主题,以便更好地进行控制。
  • 如果用户未启用其他主题或设置,您可以选择将应用“锁定”为浅色主题。但是,我们不建议这样做,因为这样可能会违背用户的无障碍功能和个性化需求。
图 2:应用显示相同内容,但采用浅色主题和深色主题
用户生成的主题

从 Android 12 开始,用户生成的主题由动态配色支持,动态配色功能随 Material You 一起提供。启用后,动态配色会从用户的壁纸中派生自定义颜色,以将其应用到其应用和系统界面。此调色板可用作生成浅色和深色配色方案的起点。

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

图 3:派生自壁纸的界面配色方案


图 4:应用界面配色方案壁纸
制造商主题

设备制造商可能会提供其他专有主题功能,这些功能会影响系统界面和显示设置。

应用主题

基准

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

自定义(品牌)

使用自定义主题可让您更好地表达应用的外观和风格,或者在特定系统主题不可用时作为后备方案。无论您是使用完整的自定义设计系统、小型品牌指南,还是使用您最喜欢的几种颜色,这都非常有用。

您的应用还可以有多个自定义架构,包括用户可以选择的完整架构、灵感的内容或子品牌元素。

图 5:应用了基准主题(左侧)并应用了自定义主题(右侧)的同一应用及其内容(右侧)


图 6:具有由基准生成的主题(左侧)和由自定义值组成的主题(右侧)的按钮
内容

为了让某些内容更加引人注目,界面可以使用动态配色从相应内容继承颜色。内容颜色适用于一个主要内容来源,但在包含多个内容来源的视图中,请务必谨慎使用。

图 7:应用从关键图片中提取内容。媒体通知还可以从媒体图片中提取颜色

主题通常会影响整个应用,但也可以有选择地与其他主题一起应用。请保留一个层次结构,以避免过多的主题和组合:主要主题源(无论是动态还是自定义)适用于界面的大部分内容。

图 8:应用可以通过将动态配色或品牌颜色应用于某些元素来利用主题组合
材质

Material Design 提供了基准主题和主题系统(颜色、字体、形状)。您还可以扩展 Material 主题设置来实现主题的其他属性。

品牌

如果 Material Design 主题系统与应用的外观和风格不一致,您可以实现完全自定义的主题。请务必测试自定义属性,以提高对比度和易读性。

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

主题属性

主题属性与界面设计中使用的常见视觉样式保持一致,以激发各种美感。在应用内,这些属性通常与 Material 主题系统相关联,以允许应用开发者进行自定义。

颜色

利用颜色来表现风格和传达意义。设置应用的颜色对于个性化、定义语义用途以及品牌身份当然至关重要。

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

图 9:着色

类型

Android 的系统字体是 Roboto(所有应用均可免费使用),但您可以自定义字体。考虑所选字体的易读性,以与其角色保持一致。了解如何应用类型

图 10:基于标题大小的类型示例

形状

自定义超出基准默认值的容器角的形状有助于定义应用的特征。例如,您可以使用全圆角来营造更柔和有趣的感觉,或使用角度切割来营造更严肃的氛围。查看 Material 组件的形状令牌和样式。

图 11:容器角形状

图标

在应用中使用 Material 图标有五种样式:填充、轮廓、锐利、圆角、双色调。请在整个应用中使用相同的图标样式,以保持一致且精致的外观。

图 12:Material 图标样式

其他主题属性

虽然颜色、字体和形状构成主要 Material 主题系统,但设计系统不限于 Material 所依赖的概念。您可以修改现有系统并引入全新的系统(采用新的类和类型),使其他概念与主题兼容。您可能还需要扩展或替换现有系统,以便利用所提供的自定义属性之外的自定义属性。例如,您可能需要添加渐变或间距维度系统。

在应用中应用主题

主题与样式加类

主题和样式都可以有多个设计属性。样式可以独立于主题,是指单个元素(或 View)的外观,而您可以为多个元素甚至整个应用设置主题。样式是一种可重复使用的样式选择,类似于设计软件中的样式或令牌。例如,“Body Large”是一种样式,而“Light”和“Dark”是主题。

在 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

WebView 中的 Web 内容还可以使用浅色、深色或默认样式。了解如何支持在 WebView 中使用深色主题

自定义 Material 主题

您可以使用 Material Theme Builder Figma 插件自定义 Material 主题。使用它构建主题后,您就可以获得已生成浅色和深色配色方案的可实现主题文件,这样,您就可以使用确切的值更新导出的主题文件,从而进一步进行自定义。

图 13:Material 主题构建器允许生成动态和自定义主题