样式

有效设置 widget 的样式对于实现具有视觉吸引力且一致的用户体验至关重要。本部分将深入探讨定义颜色和排版以创建最实用且最具吸引力的 Android widget 的关键概念和技巧。

颜色

使用颜色来表现风格和传达含义。为 widget 颜色设置合适的颜色对于提高可读性、实现个性化以及表达应用的品牌标识至关重要。

使用 Material 颜色角色和令牌 来满足无障碍对比度参考值,并支持动态颜色功能,例如用户生成的颜色以及深色或浅色主题。

通过强调角色探索视觉层次结构,在元素中营造鲜明的对比度,或者探索更具趣味性的自定义主题来展现您的品牌。

突出显示了颜色令牌的小部件。
使用颜色为新内容定义视觉层次结构,以打造更具表现力的 widget。

如需详细了解颜色角色,请参阅 Material Design 颜色指南

形状

微件的形状决定了微件的风格。对于矩形 widget,请使用系统圆角半径属性。此属性可在不同设备上实现一致性,并有助于防止 widget 内容被剪裁。

如果您的 widget 显示的数据内容很少,例如照片、天气或当前歌曲播放信息,那么不妨尝试将整个 widget 设置为富有表现力的形状,为用户的主屏幕带来令人兴奋的活力。如果您有更复杂的布局和数据,不妨考虑使用灵动形状来呈现视觉层次结构,突出显示新内容或号召性用语。

使用不同形状的 widget
采用表现力形状的微件,以及使用表现力形状来呈现视觉层次结构的矩形微件。

如需了解详情,请参阅实现圆角

动态主题

从 Android 12 开始,微件可以为按钮、背景及其他组件使用设备主题颜色。这样一来,不同的 widget、主屏幕图标和壁纸在视觉上会保持一致,从而为 Android 用户提供更具凝聚力的用户体验。使用提供的颜色令牌有助于确保 widget 在不同设备制造商提供的设备主题和用户设置的动态主题中看起来浑然一体。

突出显示了颜色 token 的 widget 图片。

浅色主题和深色主题

深色主题是设备界面在低光照条件下的版本,主要显示深色界面颜色。越来越多的用户开始使用深色主题,以延长电池续航时间并提升舒适度。如果您的 widget 无法适应深色主题,则会显得格格不入,可能会让用户感到沮丧。

左侧屏幕上采用浅色模式的 widget,右侧屏幕上采用深色模式的 widget。

排版

排版有助于使文字清晰易读且美观。利用字号和字重来建立清晰的层次结构,引导用户将目光投向最重要的元素。请注意行间距和字间距(字距调整),以提高可读性,尤其是在微件的有限空间内显示较小文本时。

层次结构

层次结构通过字体粗细、大小、行高和字母间距的差异进行传达。更新后的字体比例将文字样式分为五种角色,这些角色的名称描述了各自的用途。这五种文字样式分别是显示、大标题、标题、副标题和正文。这些新角色与设备无关,可在各种用例中更轻松地应用。

显示不同类型比例尺的用法。

虽然 widget 使用的是系统字体,但您仍然可以通过醒目的字号添加富有表现力的细节:使用标题、标签和数据让文字更醒目。

一种结合了表现技巧并使用富有表现力的大号字体的 widget。