UI控件系列(8)—空数据控件

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
1433 0 1 2020-04-30

空数据

定义:当某些原因导致某功能或页面没有数据时,为了更好的产品体验,设计的反馈页面以便告知用户目前页面没有数据的原因。



初始状态

定义:没有任何内容,需要用户进行某种操作才能产生内容的界面。常规做法是简单的插画配合简洁的文案,必要的时候给出引导用户操作行为的按钮。


组成部分:

  • 相关插画或图标
  • 文案信息
  • 操作入口按钮或文字按钮(非必须)



例如:锤子商城APP,当购物车这一功能界面没有商品时,进入购物车界面,会给出提示购物车界面为空的提示以及去购买物品的按钮,引导用户操作。也有像知乎APP已购内容界面,直接给出一个空白界面,以插画和文字来告知用户目前没有已购内容。


用途:告知用户需要进行某种操作后才会出现内容,并不是没有内容。




清除状态

定义:通过删除或其他操作,清空当前页面内容,这时就需要告知用户当前界面的空状态以该如何操作产生内容。


组成部分:

  • 相关插画或图标
  • 文案信息
  • 操作入口按钮或文字按钮(非必须)



现在好多产品直接把清空状态的界面按照初始状态来设计,这样也是可以的,但缺点就是没有告知用户产生空状态的原因是初始化还是清空所致。

用途:告知用户该界面为空数据的原因是用户删除或其他操作的结果。




出错状态

定义:由于网络、服务器或没有找到其结果等原因导致无法加载内容,产生了空界面,这时候就需要告知用户该如何处理。用户操作反馈的无结果界面也可以用这样的思路来设计。


组成部分:

  • 相关插画或图标(非必须)
  • 文案信息
  • 操作按钮或文字按钮(非必须)




网络问题

定义:网络数据传输不通畅导致的数据断点的情况。


例如微博国际版APP,在网络异常时页面加载不出来,出现空数据页面,给出的文案提示和文字按钮。以及虎嗅APP在网络不好时只给出了插画图和文字信息,没有给按钮,但是给出文字告知用户,整个屏幕就是按钮。




搜索无数据

定义:在使用搜索功能时,无法获取到搜索内容,从而产生的空数据界面。


例如小红书APP在搜索不到内容时,产生的空数据状态界面。以及京东APP在搜索无结果时,给出的不同解决方案。




数据出错

定义:当原有界面的内容已被删除,用户点击进入时出现的出错状态。


例如微信APP里面的H5文章,通过朋友圈列表点击,进入文章详情,由于文章被删除,会出现文章被删除没有数据的出错状态。




服务器出错

定义:由于网络产品都需要有服务器作为承载数据处理的中枢,服务器属于机器设备在不间断的工作中也难免会不时出现一些错误。


当服务器出现错误时用来告知用户错误原因的界面。例如404的情况。




Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票