优秀空白页の修养

姜正_

2018-10-04

原创文章

2845

0

12

经验分类:经验/观点/原创文章

空白页看似简单,但稍不用心就会造成用户的流失。希望这次的分享能对大家在空白页的设计上有所帮助。


Image title前言


大家可能觉得空白页只是 app 附加页面,不必花费过得精力去做。但其实并不是这样的,因为优秀的空白页能在空数据或者意外情况下挽留用户,提高产品的留存率。接下来我们从设计和功能的角度来判定一个优秀的空白页到底具备那些修养?


目录


1.空白页的定义

2.空白页的设计四大要素

3.空白页的作用

4.总结


Image title


空状态,顾名思义就是空白的状态。出现这种状况的两大原因是:数据缺失+网路异常。


Image title


这两个状态基本都是灾难性。就好比用户裤子都脱了,你却给他个空白页面,用户难免会感到失望,情绪低落。


Image title


用户无法接受的原因有两种,首先是不符合自己的预期,当用户热情高涨的时候,你泼了一盆凉水,造成了极大的心里落差;其次是网路异常,原则上不是产品的错,但是用户不会透过现象看本质,心神领会的想这里可能没信号或者自己手机问题,用户这个时候多半会被“简单归因”的想法所左右,主观的批评产品并且潜意识里将其贴上不靠谱的标签。


Image title


但是好的空白页却能帮助你解决这些问题,空白页最大的作用就是缓解用户焦虑的情绪,避免负面情绪的产生,进而减少对产品的产品负面形象的评价。并在功能上指导教育用户完成当前任务,能够顺利执行之后的操作,更好的服务用户。


Image title


由此我们可以看出一个合格的空白页是多么重要,接下来我们就来探究一下怎样才是一个合格的空白页,我们从会从设计和功能的角度进行分析。


Image title


一个好的空白页设计并不是天马行空的想象,而是在一定约束下的最佳表现。好的空白页设计一定是符合以下四项设计需求,如下图所示例:


Image title


A.品牌


品牌具有战略意义,所以说品牌设计会始终贯穿如意。我们作为设计师的最终目的服务于产品和公司,所以我们的设计必须遵循公司的品牌调性。


品牌的设计是贯穿一个产品的始终,是对产品标准化、规则化的基础,品牌设计使我们看到产品的第一印象。例如我们在生活中,通过的品牌规范的设计语言就能得知这是什么品牌的产品。我们举一个工业设计的例子,以宝马汽车为例:


Image title


宝马汽车将品牌的设计语言在所有产品上始终贯穿如一,即使不同类型的汽车,我们仍可以通过设计语言看出品牌的调性,即使摘掉 logo 我们仍可以一眼看出这是宝马的产品。


我们评判一个好的空白页首先就是看到整体设计是否符合其产品的品牌设计。如果不符合品牌设计的基础调性,会让用户感到迷茫,心想这是???所以符合品牌设计是我们设计的空白页的基础,例如腾讯动漫:


Image title


腾讯动漫是的logo是一个卡通人物(鹅娘)。在空白页中同样也是通过对卡通人物的形象延展,通过塑造卡通任务惊讶的表情来诠释空白页中的内容缺失。值得夸赞的是腾讯动漫整体空白页都保持了高度的一致的品牌性,鹅娘的形象充分运用到了所有空白页中。


B.创意


空白页是设计师充分发挥创意的地方,好的创意是帮助用户赶走的枯燥的利器,能让用户感到耳目一新的感觉。使原本枯燥无味的空白页显得生动有趣,让用户更加有动力去执行之后的操作。甚至有一点忍不住截图分享的冲动。


这里我们以 Google 浏览器的网络异常的空页面为例:


Image title


Google 浏览器网络异常的空页面,是一个迷路的灰色像素小恐龙。画面好像在讲“我迷失在网络的世界,找不到有效的数据而变得灰暗,需要你的帮助,让我回到我的世界。”通过简单的创意来引发用户的思考,让用户主动去参与网络异常的修复。


C.情感


由于空白的本身内容的确实会给用户造成情绪上焦虑,所以说情感的设计是空白页必备的元素之一。


好的情感设计能够有效抚慰用户的焦躁的心情,减少用户的负面情绪,并能让用户的转移到当前操作上,避免用户因为情绪的不满而放弃操作。我们以哔哩哔哩为例:


Image title


哔哩哔哩的默认收藏夹的空白页以自身的卡通 IP 形象进行延展设计,加以情绪化的表达。如上图通过类比营造一个收作业的场景,因为不能及时上交作业的而感到悲伤哭泣,比喻数据缺失的状态。通过哭泣的表情让用户产生同情心,并且企图帮助她,这样有效的减少了用户负面的情绪。


D.规则


规则是为了保证产品的一致性,特别是平台性质的产品,需要保持每一个模块和页面的统一性,空页面属于产品的一部分,一个优秀的空白页必定是遵循产品的设计规则。通过设计规则可以将用户可以在设计形式做到高度统一,以及可以将设计语言贯穿始终,并减少用户的认知压力。我们以same为例:


Image title


通过图例我们可以看出,same 在不同内容的空白页高度遵循产品设计的规则,使用相同的图形插画和组合形式,通过这种形式可以有效的减少用户的认知压力,用户能够迅速识别页面的状态,从而进行下一步的操作。


Image title


空状态就好像一粒缓冲剂,当页面没有内容或者出现异常的时候,空白页需要想尽各种办法挽留用户,让用户留下来,并能指导用户解决问题。接下来我们看看的空白页具备哪些主要功能才是合格的!


空白页的主要作用是:教育用户、取悦用户、引导用户。


Image title


A.教育用户


一个优秀的空白页的首要目的是教育用户如何使用 App,理解当前页面的功能,引导用户执行下一步操作。并且必须符合3W原则:


Image title


a.何物(What):这个页面在讲什么


b.何地(Where):告知用户当前的位置,以及接下来可以干什么


c.何时(When):解释此处空白在什么情况下才能出现有效的数据


3W原则告诉用这个页面在说什么,以及用户当前所处的位置,并解释在什么情况下会出现空白页面。我们以滴答清单为例:


Image title


滴答清单日历页面告诉用户的这是一个根据日程建立任务的页面,现在处于任务的空白期可以通过右下角的“+”号来添加任务,只有通过添加任务才能出现有效的数据。


B.取悦用户


优秀的空白页能够取悦用户,让用户的保持预约的心情。用户的愉悦保证了产品的留存,即使在空状态页面的情况,用户也愿意留下来,根据信息指示完成任务操作。我们以哔哩哔哩为例:


Image title


哔哩哔哩通过取悦用户通过使用自身的动漫 IP 来引发用户的情感共鸣,通过动漫人物“好奇、可爱”的表情来感染用户登陆。


C.引导用户


当用户进入一个初始状态的页面的时候,需要用户创建数据的时候,我们需要能够快速引导用户进行操作,而不是用户在一顿摸索之后最终放弃操作。


我们需要通过一下三种形式来引导用户:激励用户、说服用户、指导用户。


Image title


激励用户:用激励化的语言和设计去推动你的用户。例如猫头鹰旅行:


Image title


猫头鹰绿旅行通过激励性的语言:探索并收藏您最爱的创意。来鼓励用户操作去“创建行程。”


说服用户:提醒用户他们使用您的产品时将会收到的好处。例如 ASOS :


Image title


ASOS 其中的英文翻译是:“我公司免费提供8次免费送货和退货”。直接通过利益的吸引来诱导用户参与。


指导用户:推荐并向他们展示开始使用的最佳方式。 提供指引性的按钮,以指导用户看到空白屏幕所需的操作,来获得更有意义的内容。例如人视频为:


Image title


人人视频的视频空页面,通过蜘蛛侠的卡通形象下落的状态,配以文字和按钮,来指导用户点击刷新。


Image title


通过上述内容,我们了解到一个合格的空白页,首先在设计层面上要满足用户“品牌、创意、情感、规则”的四要素,其次在功能上要“教育用户”、“取悦用户”、“引导用户”,这样才能成为一个合格的空白页设计。我们需要在形式和功能上双向满足用户。 



参考链接


超实用!3个小技巧帮你设计优秀的空白页面

https://www.uisdc.com/design-empty-data-page#

交互干货!帮你消灭「空状态界面」的5个常用方法

https://www.uisdc.com/kill-empty-ui-state#

从零开始带你掌握空状态设计的正确方法

https://www.uisdc.com/empty-states-design-correct-way

看似最简单的空白页,腾讯微云的高手是如何设计的?

https://www.uisdc.com/weiyun-empty-states-design

移动端app中的空白页设计

https://zhuanlan.zhihu.com/p/24361388



全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消