Material Design Empty States 空状态

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

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

目录

内容

选项

内容

空状态可以展示各种各样的内容。例如,无项目的列表,或无反馈的搜索结果。虽然这些状态并不常见,但对它们的设计应该尽量避免混淆。

显示空状态

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

图片使用应:

中性或幽默的基调与你的品牌一致

标语使用应:

采用有帮助的信息与你的品牌一致传达当前屏幕的用途,而不要出现可执行的操作

f3dfmknj0ul.png插图

选项

启动器内容

为了帮助用户熟悉应用或应用的某一部分,可以使用入门内容填充原本为空的屏幕。入门内容允许用户立即开始使用应用,使他们更容易了解应用提供的功能。

建议:

启动器内容最好是应用的经营内容(如电子书或音乐),或者是模版内容(如笔记或文件)。使用具有显著吸引力并展示主要功能的内容。使用户能删除和替换此内容。如果可以的话,提供个性化的内容。

l2kgxuks0qc.png插图(1)

教育的内容

如果屏幕的目的不易通过图片和标语来传达,请考虑显示教育的内容。教育内容能帮助用户了解在此屏幕上有新内容后,他们能在此屏幕上执行哪些操作。

建议:

可以关闭或跳过此内容保持简短与当前界面的上下文保持一致。这不应该是将用户加入整个应用程度的地方。

42qknpybns1.png插图(2)

最佳匹配

如果没有任何内容与用户的查询完全匹配,则可以显示包含与查询最佳匹配的内容,即反馈显示拼写略有不同的查询结果。通过显示这些结果,用户可以找到他们正在寻找的东西。

vd43n2fmpew.png插图(3)

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

Material Design Help & feedback 帮助&反馈

2020-10-12 0:04:50

UI设计

数据分类在黑白版中的色彩搭配

2020-10-12 0:04:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索