弱而不轻，浅谈APP界面设计之缺省页

近期工作参与了一些小产品设计，无论是视觉还是体验对产品有了更多的认知。平时都是看别人的文章，今天肾上腺素分泌旺盛也想和大家瞎BB~~第一次写，欢迎纠错和脑补~~

相信这种画面懂得人不会陌生，按完整的原型图出稿、切图交到程序猿手上，以为可以喘口气的时候猿哥会呆萌的跑过来问你，这里空白的时候是什么样子？这里没有网络的时候显示什么？~~Oh，NO！也许要为赶最后一班公交车，秒出一个百搭图形，搞定~

这类页面或出现频率低，或显示时间短，或者规划遗漏~无论什么原因它们就是容易被轻视，甚至忽视~~所以在设计时它也会被“随便搞搞”就ok了

马上进入正题，倡议不要轻看APP里这块存在感微“弱”的部分

----------------------------------------

WHO：它是谁

缺省页，简单来说缺省页就是操作异常状态下给予用户反馈的提示页面，或无数据，或操作失败等情况下出现的Empty State。

它的作用不仅是提醒用户，安抚情绪；更重要的是用“空白”触发用户的操作行为，营造良好用户体验。

----------------------------------------

WHEN:它出现的场景

1、首次操作

用户首次操作，没有内容显示。缺省页可以说是门面担当，以下你更愿意去敲哪家的门？

 

2、积极触发

用户主动触发的一些事件。如删除成功，试着给用户一个鼓励赞赏的画面吧！以下哪个画面在你点删除后出现看着会舒服呢？

3、被迫中断

因客观因素导致用户操作被打断，影响体验。如“网络连接中断”，这种情况需要引导用户帮助解决问题。

再次强调，好的缺省页设计很重要...

----------------------------------------

WHAT：它的表现形式

（图案+文字表示或只有图案或只有文字或图案和文字）

样式1.图案＋文字

图案为一些关联元素；文案则直观阐述缺省原因，整体符合产品调性，简单明了或委婉或直接，或有趣或严肃。这类表现形式意思就是错了就是错了，失败就是失败，没有就是没有，单向反馈结果，没有进一步的指向性。

 

样式2.图案＋文字+指引

相比前者，这类形式会引导用户进行某项操作或感知某些信息，用进一步的行为帮助用户解决当前问题，如果用户是个耐心的小白能认真看完你的tips，这种方式则是值得一试的。

样式3.图案＋文字+功能入口

功能入口同样是解决问题，不过比指引更简单粗暴，可以更快速诱导用户行为。

从形式1到3，用户体验好感是递增的，即1＜2＜3

样式3有直接入口点击即可简单便捷；

样式2要你去研读操作步骤，再才可能解决当前问题，相对麻烦；

样式1啥都没有就不说了，画的再好看也是然并卵。

可以说样式3应用于大部分的产品设计中，1、2的表现形式甚至可以淘汰掉。

一开始我也是这么认为，但后来我变了~~呵呵~~

举个栗子，说说我为什么改观。如果你去问路，问了路人甲，他高冷的说不知道；问了路人乙，他说左拐...再第一个路口右拐…就到了；问路人丙，他说我带你去吧！

相信大部分人都喜欢丙，不喜欢甲，对乙中立。

其实想想也许甲真的不知道，与其告诉错误信息说不知道是对你负责。如样式1单向反馈，客观原因实在没有解决方法用样式1比样式2、3会更好；

乙是知道路也许出于某些原因他没办法带你去，只能告诉你路线。就像微信里只会告诉你粘贴淘宝网址去浏览器打开，不会给你直接入口，因为有商业利益冲突（揣测）；

丙是刚好知道又可以去就直接带路了。就像淘宝里的让“你去逛逛”按钮，的确，方便你去剁手了...

现在再回过头看，有没有觉得路人丙才是最坑爹的呢~

如果在界面加了个多余的按钮，分散了用户注意力，反而对产品结构是一种破坏。所以在评判哪类缺省页的表现形式最优时，更应该去思考它出现的原因，了解WHAT（它的表现形式）考虑WHEN（它什么场景下会出现）因地制宜，再着手去设计，相信视觉和体验都会比“随便搞搞”要好的多。

有人说我一个视觉蛇鸡士操了产品汪的心，乖乖按交互原型来不好吗，想这么多~

恩，是的，心好累，我只想做个美工~~所以不多说了，我去作图了~~

第三遍，好的缺省页设计很重要...

希望对有同样困惑的同胞有帮助~下次见~~哈~哈~哈~

参考文献：

1、见微知著，谈移动缺省页设计 http://isux.tencent.com/mobile-default-page.html

2、移动应用空白情况页面的设计 http://www.woshipm.com/pd/172332.html

3、浅谈界面的空白状态设计 http://www.ui.cn/detail/20299.html