轻松看懂规范!详解组件控件结构体系之空数据类

Echo :设计师或产品经理在设计产品原型时,大部分情况都是先设计主流程的主界面,然后设计其他各个场景的界面,最后设计异常界面、空数据界面等等。那么,空数据界面一共有哪几种类型呢?这篇文章我们来看一下设计规范中的空数据类型。

系列文章: 

  1. 《轻松看懂规范!详解组件控件结构体系之加载类》
  2. 《轻松看懂规范!详解组件控件结构体系之网络异常类》
  3. 《轻松看懂规范!详解组件控件结构体系之引导类》
  4. 《轻松看懂规范!详解组件控件结构体系之导航类》

空数据类型一共有三类:

  • 初始状态
  • 清空状态
  • 出错状态

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

轻松看懂规范!详解组件控件结构体系之空数据类

初始状态

定义:初始化状态,没有任何内容,需要用户进行某种操作才能产生内容的界面。

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

例如京东App,当用户没有把商品加入购物车时,进入购物车界面,会给出提示购物车界面为空,给出用户提示后,给出相对应的入口按钮,引导用户操作。如果直接给出一个空白界面,那样的话用户可能以为该界面出Bug了,不知所措。

Gmail直接用一个插画提示用户收件箱为空。

轻松看懂规范!详解组件控件结构体系之空数据类

初始状态的组成部分:

  • 相关插画/图片。
  • 解说文案。
  • 操作入口按钮或可点击文字(非必须)。

一般对于初始状态的设计,常规做法是简单的插画配合简洁的文案,必要的时候给出引导用户操作行为的按钮。

现在流行的设计趋势是插画越轻量越简单越好,以免抢夺了文案信息。

清空状态

定义:通过删除或其他用户操作,清空当前的页面内容,产生了空界面,这时候需要有明确的提示,且告知用户该如何处理。

用途:提示用户该界面为空数据的原因是用户删除了内容。

轻松看懂规范!详解组件控件结构体系之空数据类

清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似,唯一不同的是文案的提示。

清空状态的组成部分:

  • 相关插画/图片
  • 宣传解说文案的
  • 操作入口按钮或可点击文字(非必须)

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

出错状态

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

用途:告知用户当前产生的空界面是由于某些原因出错所致。

例如知乎在网络异常时,页面加载不出来,出现空数据页面,给出文案提示和点击重试按钮。微博国际版也给出文案提示,小插画和点击按钮。

轻松看懂规范!详解组件控件结构体系之空数据类

在对信息进行搜索,无法获取数据时,产生的空数据界面。例如iOS原生邮件在搜索不到内容时,产生的空数据状态界面。而网易考拉在搜索无结果时,给出新的解决方案。

轻松看懂规范!详解组件控件结构体系之空数据类

原有界面内容被删除时,用户点击进入时出现的出错状态。例如QQ浏览器,通过新闻列表点击,进入新闻详情,由于文章被删除,会出现出错状态的提示。

轻松看懂规范!详解组件控件结构体系之空数据类

欢迎关注作者的微信公众号:「UEDC」

轻松看懂规范!详解组件控件结构体系之空数据类

「看高手如何化腐朽为神奇」


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

收藏 12
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。