首页 > 建站资源 > 网站优化 > APP设计教程:特殊情况下如何处理加载页面?

APP设计教程:特殊情况下如何处理加载页面?

时间:2017-07-04    来源:人人都是产品经理

好的loading设计能减弱用户的等待焦虑,不合理的loading设计会让用户骂爹骂娘了。

大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败。在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁。好的loading设计能减弱用户的等待焦虑,不合理的loading设计会让用户骂爹骂娘了。

一. 用户、客户端和服务器

作为用户体验设计师,不管是产品、交互还是UI,都习惯于站在人机交互的角度去思考产品设计问题,在这个过程中往往会忽略了一个重要过程:客户端和服务器之间的数据请求和传输。先看下面这张图。

用户、客户端、服务器

用户与客户端进行人机交互,触发某个操作,客户端会将用户触发的操作转化为相应指令,向服务器请求数据,若网络和服务器正常,服务器会返回数据到客户端,用户便能看到自己操作所引发的结果。整个过程是用户、客户端、服务器一起完成的,人与客户端之间是人机交互研究的领域,而客户端和服务器之间的数据传输更多的是开发人员所考虑的。

举例来说,你去京东购物,点击搜索栏,输入完关键词“风衣”,点击搜索(触发了操作),京东APP会将该操作发送给服务器,服务器将所有有关风衣的信息传给京东APP,并通过列表的形式呈现。

既然数据传输是开发人员考虑的问题,身为设计师是不是就不用考虑了?当然不是,原因很简单:数据传输的情况会影响到人机交互。例如,如果数据传输遇到网络不稳定或者服务器异常,就要在人机界面体现出来,不然用户会不知所措,产生焦虑,影响用户体验,这就是UED要考虑网络和服务器异常时的交互设计的原因。再比如,一个页面包含很多信息,即使网络稳定,也要加载不少时间,那怎样通过交互设计来缓解用户的焦虑。

二. 数据加载的几种形式及对应的交互设计

1. 标题loading

微信&钉钉

微信、钉钉等都采用了这种形式。聊天列表页的聊天记录是储存在本地的,所以页面内容不为空。这个时候加载无需获取用户的视觉焦点,只要告知用户页面正在请求新数据,所以选择在标题栏展示App正在加载是个不错的选择,加载成功则标题栏loading消失,若因为网络错误未连接服务器,则在标题栏显示未连接状态。

2. 白屏loading

当页面内容比较单一,直接一次性加载完再显示数据。多出现在H5 页面,例如微信的文章详情页。内容加载完成之前界面都会停留在loading界面。很多产品都会采用无限循环的小菊花,但进度条和有趣的动画设计,更能减轻用户等待时的焦虑感。

微信&美团

除了进度条+卡通动画+文案的形式,还有种更为高级的白屏loading样式。

左侧的开眼APP,将自己的logo进行变换,仿佛一个眼睛在转啊转;右侧的好奇心日报APP,用铅笔和橡皮擦,将自己的品牌字母Q,进行手写和擦除。这种形式不仅增加了loading的趣味性和设计感,同时还达到了强化品牌的效果,大家可以借鉴使用。

开眼&好奇心日报

3. 优先加载

当有文字和图片时,图片会比文字加载的慢,这个时候往往文字先加载,图片在加载过程中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。

通过先加载页面框架,设计占位符等形式可以减少用户的心理等待时长,提高产品体验。

微博&微信

微博采用了灰色块作为图片的占位符,而微信公众号,则在灰色块的基础上增加了无限循环的loading,除此之外,还可以使用带有产品logo或形象的图片作为占位符。

相关推荐
网站优化:“进度条”如何有效的帮助用户体验设计
实例分析:创意进度条设计分享(LOADING进度条设计)
制作完美搜索框的9个要素设计原则
探探和Linkedin都用的卡片设计 怎样才有好的体验?
2017版“我的淘宝”可能是迄今为止最懂你的设计
为什么你爱用的App,都用卡片式设计?优势在哪?
手机淘宝卡券包的改版设计经验分享
手淘首屏设计是如何用户逛得停不下来?
UI设计规范:单选按钮vs复选框要怎么用?
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择
App启动页分类与设计逻辑
APP移动应用弹窗设计指南
如何让APP图标设计得有特色?
24个UI案例对比 教你如何提升APP设计品质
干货:移动端响应式的7种UI布局解析
APP设计优化:空白页的存在价值与设计方案
iPhone X 官方人机交互指南中文版
9个UI界面设计灵感来源的网站推荐
从iOS 11看怎样设计APP图标
推送的暗黑模式:被 App 小红点淹没的你正被套路……
5种技巧教你如何提高移动端用户体验
APP设计推送通知的时候,这7个关键点要把握好
超实用的APP引导页设计基础手册分享
为什么微博不像微信一样设计得简洁?
APP设计:如何打造优质移动页面提高用户体验?
APP设计:内容呈现更友好易用的5种常见导航设计模式
那些方法可以让搜索框的体验更好?
APP界面设计:关于卡片设计、分割线、无框设计的思考
APP设计:启动页/广告页/引导页设计思想
APP设计:悬浮按钮设计规范和经典实践
APP设计教程:导航设计的对比总结
总结:那些可以提升用户设计体验的方法分享
APP设计:“返回”功能应该怎么设计?
设计实践:如何让用户参与我的设计?
从两个层面分析抖音的交互设计

精彩推荐

热门教程