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

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

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

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

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

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

一、新用户初体验

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

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

原则1：What 

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

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

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

引导式的设计形式：

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

更好的设计形式：

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

原则2：Why 

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

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

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

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

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

原则3：How 

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

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

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

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

二、操作完成

操作完成的空状态，一般分为两种：

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

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

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

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

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

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

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

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

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

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

 三、错误状态

错误的空状态，同样分为两种：

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

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

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

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

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

还有更过分的：

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

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

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

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

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

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

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

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