模式 空状态

空状态

无法显示项目内容时会显示空状态。

不包含任何项目的列表,或不显示任何结果的搜索,都是空状态的例子。虽然这些状态并不常见,但也应精心设计,以避免让用户感到困惑。

对于由于系统故障而无法显示的内容,请参阅应用错误

空状态的替代方案

初始内容
教育性内容
最佳匹配

空状态的内容

提示文案
非交互式图像

Material Design 中的空状态提示内容缺失

显示空状态 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

最基本的空状态是显示非交互式图像和提示文案。

使用满足以下条件的图片:

  • 简洁、低调,且与背景保持协调
  • 以活泼的方式传达应用的用途和潜能,例如应用的图标

提示文案应符合以下要求:

  • 保持积极的基调
  • 与你的品牌一致
  • 传达应用的用途,但避免使用类似行动指令的措辞
Material Design 中的简洁图像,传达应用用途

推荐做法

图像应简洁低调,在视觉上成为背景的一部分。提示文案应传达应用的用途,而不要让用户去执行某项操作。

Material Design 中的图像应避免使用鲜明提示文案

不推荐做法

图像过于鲜明,且提示文案的措辞像号召用户行动,可能会鼓励用户触摸图像或文本来开始视频聊天。

避免完全空状态 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

这里有几种完全空状态的替代方案。

初始内容

让新用户学习并对应用产生兴趣的最有效方式是直接使用它。考虑提供一些初始内容,让用户能立刻开始探索你的应用。

建议:

  • 使用具有广泛吸引力并展示主要功能的内容
  • 让用户能够删除和替换此内容
  • 如果可能,提供个性化的内容
Material Design 中的免费流行书籍推荐

图书阅读应用可以为所有用户提供几本免费的流行书籍,以便用户可以立即开始探索该应用。

教育性内容

如果屏幕的目的不易通过图片和提示文案来传达,请考虑显示教育性内容。

建议:

  • 帮助用户了解在此屏幕上有新内容后,他们能在此屏幕上执行哪些操作
  • 允许用户关闭或跳过此内容
  • 保持简短
Material Design 中的可关闭卡片说明服务功能和优点

在电影应用中,用户观看视频前显示一张可关闭的卡片来说明该服务的功能和优点。

最佳匹配

如果没有完全匹配用户查询的搜索结果,是否存在相似的搜索结果?如果有,则显示该结果,因为它们可能会帮用户找到他们想要的。

使用这种方法时,需要在搜索结果上方的标题中清楚地指出,该内容不应被误认为与实际查询结果相匹配。

Material Design 中的最佳匹配示例

最佳匹配示例

Material Design 中的最佳匹配处理用户拼写错误

提供最佳匹配是一个处理用户拼写错误,且不把责任推给用户的好方法。