提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
产品视觉设计中发现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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册