loading数据加载的6种形式

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

1.全屏加载

多出如今H5页面，例如微信的文章详情页。全屏加载的特色是数据一次性加载完成，内容加载完成以前界面都会停留在loading界面。进度条和有趣的动画设计，都会减轻用户等待时的焦虑感。

美团&微信

加载失败后，数据为空，即缺省页面。这里要注意两点，1.在符合产品调性的前提下，能够作的有趣，以下图左侧的美团，右侧微信设计的很简约，可是不是能够更精致些？2.方便用户进行从新加载。

美团&微信

2.分步加载

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

经过先加载页面框架，设计占位符等形式能够减小用户的心理等待时长，提升产品体验。

简书&微信读书

3.下拉刷新加载

Twitter当年提出下拉刷新，并被普遍使用，让用户可以手动对当前页面进行更新，加载的loading样式能够作进一步设计，例如QQ将loading动画和下拉手势结合起来，增长了趣味性；豆瓣把loading作成了笑脸，给予了产品人性化的设计。

豆瓣&QQ

4.自动加载

当你浏览信息时，不停的向上滑动，新的内容会不停的从底部出现，这种方式称为自动加载。关于自动加载，要注意每次加载多少条内容，或者多少屏的内容，我无聊的数了数今日头条每次会自动加载60条新闻。

知乎&same

5.预加载

在线浏览照片时，客户端会自动帮你加载后几张的照片，这样当你滑到下一张就不用再等待，直接能看到下一张照片。若是你发现本身公司的产品每次浏览信息都要加载一次，不妨跟开发人员沟通，是否是能够考虑使用预加载的方式。毕竟这对于提高产品的用户体验能起到立竿见影的效果。

6.智能加载

当网络状态很差时，能够考虑加载低质量的图片，当网络良好时，则加载高质量的图片。同理，当检测到用户正在使用蜂窝数据时，则显示占位符而不显示图片，当使用WiFi时则直接加载出图片。这些设计方案都是站在用户的角度，真正的替用户着想，为用户带来价值，用户才会真正喜欢上你的产品。

知乎：蜂窝&WiFi状态

如何下降用户的焦虑感？

因为存在网速不快，网络异常，服务器异常等状况，让用户等待的状况是必不可少的。可是咱们都知道，等待会产生焦虑感，分分钟让用户卸载你的产品，那么咱们能够经过哪些手段来下降或缓解用户的焦虑感？

第一：优化App的加载算法，使得App与服务器数据传输的时间减短。这个须要开发人员的精益求精了。这个是从根本上解决了问题，由于直接减小了加载数据的时间，也就减小了用户须要等待的时间。

第二：采用预加载和智能加载的方式。拿阅读App打比方，当用户在看第一页的时候，App在后台加载完后面的几页，等用户翻到第二页的时候就不须要等待加载了，由于App已经帮用户提早加载好了。这种加载机制对用户体验特别好，可是存在一个问题，就是要预测用户行为，加载其余数据，这样会消耗很多流量，因此建议在WiFi网络环境下采起这种预加载机制，而在蜂窝网络状态下则不采用预加载机制。这个要和开发人员讨论沟通，确保预加载机制完美运行。

第三：异步处理。这一点作得好的App莫过于Instagram，不知道你有没有发现，用Instagram的时候会以为特别流畅，即便在网络很差的状况下。这是为何？由于在网络很差的状况下，你给好友点了赞，Instagram并不会提示你网络很差，操做失败，而是提示你点同意功了，其实它只是将你点赞的操做记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为。这就是让产品本身去解决问题，而不是把问题抛给用户。

第四：设计有趣的loading动画，如上文介绍的美团APP奔跑的小人，这是提高产品情感的重要手段。

回到文章的开头，做为产品设计人员，不该该把视野局限在人与客户端交互，也要把客户端和服务端之间的数据传输考虑进来，站在用户、客户端和服务器闭环的角度去思考产品，只有这样，才能设计出体验更好的数据加载方案，而不会有失偏颇。