微件是自定义用户主屏幕的关键组件。它们通常可以帮助用户只需点按一下即可完成应用的关键用户历程,或快速提供应用最重要的数据摘要。还可以根据用户需求和个人偏好进行自定义。
widget 的质量可能会影响用户与应用内容和功能的互动度。微件质量主要分为三个层级:
- 第 3 层级:质量较低 - 未达到最低质量要求,且未提供出色的用户体验。
- 第 2 层级:质量标准 - 实用性强,并提供优质体验。
- 第 1 层级:与众不同 - 此类微件是典范之作,可提供个性化的主打体验,并帮助用户打造独特且高效的主屏幕。
第 3 层级:低质量
如果微件不符合标准的布局、颜色、发现度和内容条件,则会被视为质量较低。如需详细了解如何构建符合最佳实践的高质量微件,请参阅以下准则。
第 2 层级 - 质量标准
该 widget 满足以下所有布局、颜色、发现和内容标准,才算是优质应用:
布局
- 当 widget 放置在主屏幕上时,必须填充启动器网格设置的边界。该 widget 可调整为至少以下一种尺寸:2x2、4x2(启动器网格单元格)。如需了解详情,请参阅调整大小指南。
- widget 必须在纵轴或横轴上与主屏幕元素正确对齐,且不占用不必要的空间。
- Widget 必须与网格的至少两个对角边接触。换句话说, widget 不必是矩形。它们可以采用自定义形状,前提是形状的边缘至少要与网格的两个边缘相接触。
- 如果可调整大小,widget 必须具有适当的最小尺寸或最大尺寸,可在 AppWidgetProviderInfo XML 中使用
minWidth
、minHeight
、maxResizeWidth
和maxResizeHeight
进行设置- 如果调整微件的大小只会增加空白区域,则应设置大小上限。
- 最小尺寸应根据微件在仍能提供价值且满足触摸目标要求 (48x48) 的最小尺寸进行设置。

正确做法
提供 48x48dp 的触摸目标。

错误做法
触摸目标过小。
颜色
- 微件文本和图标按钮必须具有足够的对比度,才能满足无障碍功能要求(不包括缩略图和图片)。

正确做法
确保色彩对比度足够高。

错误做法
使用色彩对比度不足的颜色。
发现
widget 必须在 widget 选择器中具有准确的预览。您可以在 AppWidgetProviderInfo XML 中使用
previewImage
和previewLayout
进行设置,也可以使用生成的预览进行设置。- 微件预览的外观与添加到主屏幕时提供的功能保持一致。
视频 1 :微件预览不准确。
内容
- 微件内容不得长期过时或不及时更新。
- 在用户通过微件完成操作后,微件必须更新。
- 在用户在应用内完成相关操作后,widget 必须更新
- 微件必须允许用户手动刷新内容,前提是用户希望数据的刷新频率高于界面。
- 微件界面必须正常运行,否则内容会被剪裁。
- 当 widget 已安装但用户尚未登录时,widget 零状态和空状态必须是有意为之,并且必须显示 widget 的值或提供号召性用语。


第 1 层级 - 差异化
最佳 widget 满足所有第 2 层级条件,以及以下所有布局、颜色、发现和系统一致性条件。
布局
- 微件会填充边界,并在垂直或水平轴上与其他主屏幕元素正确对齐,且不会占用不必要的空间
- 所有形状都必须与网格的边界四个边缘相交

正确做法
让微件扩展到网格边界的所有 4 个边缘。

错误做法
创建一个不填充网格边界的自定义大小。
微件支持首选尺寸
- 该 widget 可调整为至少以下一种尺寸:2x2、4x2
一致使用和应用微件标头
- 建议在以下情况下使用标头:
- 您希望提供指向搜索等特定应用功能的深层链接。
- 您想应用一个应用品牌图标,该图标可用作点按后返回应用的一致链接。
- 微件包含滚动内容(列表、网格等)
- 标题内容提供了实用的背景信息(待办事项的名称)
- 在以下情况下,标题为可选:
- 微件是全宽图片(照片)
- 空间有限(高度少于 2 行)
- 标头内容冗余时。
- 如果使用标头,请遵循我们的规范:
- 图标、标题、操作。
- 图标始终存在
- 当有足够的空间时显示标题
- 根据微件上下文执行的操作。
- 高度 48dp,内边距 14dp
- 图标、标题、操作。
- 建议在以下情况下使用标头:

正确做法
提供符合 widget 规范的标头。

错误做法
使用自定义规范来设置尺寸和标题。
颜色
- 微件支持基于系统主题、内容颜色或品牌颜色的配色方案。

发现
- 预览包含用户内容或应用系统主题(AppWidgetProviderInfo XML 中的 GeneratedPreviews API 或
previewLayout
)。

- widget 的名称或说明有助于用户了解 widget 的价值。
- 名称的长度少于 50 个字符。
- 名称和说明在应用内是唯一的。例如,应用不能有多个以相同名称命名的 widget。

正确做法
添加独特、简洁的说明。

错误做法
提供通用说明。
系统连贯性
- 矩形 widget 必须使用系统提供的角半径(特定于 OEM)

正确做法
使用系统圆角半径。

错误做法
设置自定义角半径。
- 显示带有进度指示器的加载状态(在带有主题颜色或带有品牌标识的对应颜色的
initialLayout
中)。

- 使用系统配置,而不是自定义微件设置入口点
- 在进入/退出应用到微件时使用系统启动转换
创建 widget 时,请牢记本指南中提供的提示。您需要提供最佳质量和出色的用户体验。规范布局可以满足许多质量要求。如需详细了解质量标准,设计人员请参阅 Android widget 模板;开发者请参阅平台示例中的布局代码示例和布局开发者指南。