当前位置:首页 >UI学院 >学院新闻

收藏|“空状态”页面设计的几种思路

生动亦紫菜作者:生动亦紫菜 发布时间:2019月06月18日 17时20分25秒 浏览量:484次

在设计师们进行用户界面、交互以及用户体验等设计的时候,时常会存在各式各样类型不同的界面,而“空状态”就属于其中的一种。而在不同的界面设计中,有着不一样的设计方法,那么今天就跟着小编一起来了解一下“空状态”页面要如何进行设计呢?

空状态,或零数据状态——比如网站购物车为空时、页码没有下一页、某页面出错或不存在等等这些都可以称为空状态”——是产品设计中经常碰到的页面类型。

空状态在引导性、愉悦性和保留用户等方面的潜质,对于产品体验在细节当中的成败有着不可忽视的作用。

收藏|“空状态”页面设计的几种思路

空状态的触发情况一般有以下几种情况:新用户初体验(缺乏数据)、操作完成(典型如清空垃圾桶)、错误状态。

下面我们根据不同的情况来分析如何更好的设计空状态页面。

一、新用户初体验

据专注于个性化移动体验的Quettra基于1.25亿移动设备的调查数据显示,App从下载开始截至72小时,日活跃用户数(DAU)会下降77%。用户的天性是变化莫测的,尤其是在与产品初次互动的短暂时间内,而初体验中,用户接触最多的,恰恰是空状态页面。

收藏|“空状态”页面设计的几种思路

当还没有提交任何资料时的空白画面,通常会显示如「你还没有任何照片」「你还没有追踪的朋友」等,但这看似是个很直觉的页面设计,其实是个能够与使用者对话的重要机会,是个能够诱导使用者跨出第一步,并且开始着迷于你有趣服务或程序的关键。

收藏|“空状态”页面设计的几种思路

原则1What 

首先我们必须要清楚地告诉使用者,这个页面所会出现的内容信息是什么。

常常可以看到只显示个「空白」或是「没有数据」这种没有注明内容名称的方式那到底是没有什么信息?什么东西是空的呢?

可能是朋友、照片、或是旅游记录,但用户无法马上了解到此页面的信息形态我们应该要清楚的提示内容的形态。

收藏|“空状态”页面设计的几种思路

引导式的设计形式:

收藏|“空状态”页面设计的几种思路收藏|“空状态”页面设计的几种思路

透过清楚的形态名称及描述,再加上图示,快速明白我们将要创建的内容是什么

更好的设计形式:

收藏|“空状态”页面设计的几种思路收藏|“空状态”页面设计的几种思路

除了文字与图标解说以外,还有一种快速让用户了解信息内容的方式——就是让他们直接体验真实的信息内容,或是一些范例信息,而不需要凭空想象。

原则2Why 

在了解信息内容的形态以后,最好能提供使用者一个渴望提交内容的冲动或诱因,告诉他们使用了你的服务以后可以得到些什么?

例如你因此可以认识更多的人、提交了标签以后你可以更轻松的找到你要的信息、或是你可以与客户之间的往来更方便而节省时间与成本等。

让使用者产生目的性以及愿景

收藏|“空状态”页面设计的几种思路

情绪性的言语表达或是图示,发挥的作用不可小觑。

影响用户行为和结果的促发行为往往不易察觉却至关重要。

收藏|“空状态”页面设计的几种思路

原则3How 

在用户短暂且非理性的评估时间中留下第一印象后,能否真正成功,关键是能不能通过空状态引导用户进入实际操作流程中去。

可以把空状态设想为某种landing页面,保持最小化设计原则的同时,构造场景氛围,使用一目了然的视觉元素引导用户进入操作流程。

收藏|“空状态”页面设计的几种思路

例如dribbble的空状态页面,蓝色按钮的引导设计。

收藏|“空状态”页面设计的几种思路

Apple music的开启引导页的空页面引导性设计。

二、操作完成

操作完成的空状态,一般分为两种:

一种为用户主动操作,例如删除或清空

一种为系统自动操作,例如回收站的自动清理功能

主动操作:用户主动操作或删除通常都带有某种目的性,只需给予结果性的反馈即可。

收藏|“空状态”页面设计的几种思路

Dropbox的操作完成空状态页面设计,不同的颜色和图标区分不同的操作结果

当然也不排除用户手抖误删的小概率情况。

收藏|“空状态”页面设计的几种思路

QQ音乐支持恢复一个月内删除的歌单和音乐,很用心地解决了这个小概率事件。

越是概率小,对用户产生的结果也越可能严重,试想当你一个手抖不小心把经营多时的歌单给删了,看到此功能必会有种大难不死必有后福的快感。

系统操作:系统操作通常具有周期性,应在明显位置提示,且操作完成后应有结果反馈

收藏|“空状态”页面设计的几种思路

iOS照片应用的最近删除文件夹,在顶部明显位置提示系统操作的周期性,为用户提供缓冲余地

操作完成后的结果反馈及周期提醒

 三、错误状态

错误的空状态,同样分为两种:

一种为系统错误,例如网络未连接、系统维护

一种为用户操作失误,例如上传格式错误,页面打开错误(404

系统错误:在这种情况下提供一些更有用的或是更具亲和力的内容,而不是一堆丑陋的出错信息。让用户在非常规用例中看到你的设计,他们就会感知到当前的状况是在可预计范围之内的,从而放松下来。

收藏|“空状态”页面设计的几种思路收藏|“空状态”页面设计的几种思路

设计过的错误信息样式,以及错误原因和友好的用户纠错提示

收藏|“空状态”页面设计的几种思路

Ie浏览器非常不友好的错误页面。

还有更过分的:

收藏|“空状态”页面设计的几种思路

这个页面是不少人的痛苦回忆。

当然,在win8之后,这个页面也进行了更加有好的设计形式:

收藏|“空状态”页面设计的几种思路

现在app普遍采用更加优秀的设计形式,即用本地资源或缓存数据替换错误页面:

收藏|“空状态”页面设计的几种思路收藏|“空状态”页面设计的几种思路

用户错误:在使用产品过程中出现错误,用户会出现明显的挫败感和消极情绪。

这种情况下,最不该做的就是通过大段晦涩的文字以及生硬的视觉风格来加剧用户的焦虑感,而是通过设计来弱化用户的负面情绪,尽量挽回用户体验。千万别强调用户的错误,用户会出错,是因为体验没做好。

收藏|“空状态”页面设计的几种思路

通过幽默的插图或icon,配合诙谐的文案,缓解消极体验。

当然,能给用户一个发泄的方式会更好,例如下面这个404

收藏|“空状态”页面设计的几种思路

由此可见,以用户体验为核心来设计不同的空状态页面,不仅能更好的降低用户使用成本,更能增加用户粘度,所以设计师们,想要做好产品,这个“空状态”页面不可不重视

专业秒懂

还有疑问?
当下是CG行业正热之时,CG技术人才缺口大,月薪高,一将难求。你所熟知的《千与千寻》、《龙猫》等动漫世界里的经典场景,好莱坞大片《复仇者联盟》、《星际穿越》、《安德的游戏》中酷炫的3D电影特效镜头等,都是由无数的CG设计师创作呈现出来的成果。火星时代课程与行业前沿技术相贴合,开设影视后期、剪辑包装、游戏设计、游戏开发、UI设计、商业插画、室内设计等专业,同学们可根据自己的爱好和职业发展选择自己喜欢的专业方向深入学习。
  • 相关推荐
  • 人气推荐
  • 教程分享
  • 相关标签
1分钟测出适合你的职业发展方向
你的爱好
看电影/追剧
  • 爱追剧/看电影
  • 爱逛淘宝等电商平台
  • 爱玩游戏
  • 爱收集手办/盲盒
  • 爱家居家装
  • 爱看漫画
你期望的月薪
8K-10K
  • 8k-10k
  • 10k-20k
  • 20k以上
你手机号
获取验证码

优秀作品赏析

  • 2101期学员李思庭作品

    作 者:李思庭

    所学课程:2101期学员李思庭作品

  • 2104期学员林雪茹作品

    作 者:林雪茹

    所学课程:2104期学员林雪茹作品

  • 2107期学员赵凌作品

    作 者:赵凌

    所学课程:2107期学员赵凌作品

  • 2107期学员赵燃作品

    作 者:赵燃

    所学课程:2107期学员赵燃作品

  • ×