特别情况下的APP设计3如何处理加载页面？

好的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或形象的图片作为占位符。

注：相干网站建设技巧阅读请移步到建站教程频道。

12下一页查看全文

• 上一篇：微信小程序升级页面体验能力相干解析
• 下一篇：分享干货！老年用户体验设计应注意哪些细节？