APP开发规划之loading加载页面处理

      相信大家在运用APP的时分都有过这样的经历，等候加载页面。绝大部分的APP都需求与服务器进行数据交换，APP发出数据恳求，继而服务器接纳后传输相应数据到APP，APP成功接纳后，显现数据内容，而接纳失利即无法显现数据内容。用户在运用APP的时分可能会由于网络原因，需求等候必定的时刻进行这个数据交换数据加载的进程，而这个等候的时刻就需求APP开发中的loading加载机制，好的loading规划能让用户耐心等候，而不合理的loading会让用户欠好的运用体会。

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

       作为用户体会规划师，不管是APP开发产品、交互仍是UI，都习气于站在人机交互的角度去考虑产品规划问题，在这个进程中往往会疏忽了一个重要进程：客户端和服务器之间的数据恳求和传输。先看下面这张图。

用户、客户端、服务器

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

      已然数据传输是开发人员考虑的问题，身为规划师是不是就不必考虑了?当然不是，原因很简单：数据传输的状况会影响到人机交互。例如，假如数据传输遇到网络不稳定或许服务器反常，就要在人机界面体现出来，不然用户会手足无措，发生焦虑，影响用户体会，这便是UED要考虑网络和服务器反常时的交互规划的原因。再比如，一个页面包含许多信息，即便网络稳定，也要加载不少时刻，那怎样经过交互规划来缓解用户的焦虑。

二. 数据加载的几种方法及对应的交互规划

1. 标题loading

      聊天列表页的聊天记录是储存在本地的，所以页面内容不为空。这个时分加载无需获取用户的视觉焦点，只要奉告用户页面正在恳求新数据，所以挑选在标题栏展现App正在加载是个不错的挑选，加载成功则标题栏loading消失，若由于网络错误未衔接服务器，则在标题栏显现未衔接状态。

2. 白屏loading

当页面内容比较单一，直接一次性加载完再显现数据。多出现在H5 页面。内容加载完成之前界面都会停留在loading界面。许多产品都会选用无限循环的小菊花，但进度条和有趣的动画规划，更能减轻用户等候时的焦虑感。

      除了进度条+卡通动画+案牍的方法，还有种更为高级的白屏loading款式。

3. 优先加载

      当有文字和图片时，图片会比文字加载的慢，这个时分往往文字先加载，图片在加载进程中运用占位符，直到图片加载成功。当加载的页面内容有固定的结构时，能够先加载结构，再加载结构内的内容。经过先加载页面结构，规划占位符等方法能够削减用户的心思等候时长，进步产品体会。

3. Skeleton Screen

      这种加载方法你可能没听过，可是必定见过。它是一种将未加载出来的内容区域，用灰色的色块填充的方法。所以整个页面在加载进程中会给用户很连接的感觉。这种方法一般用于内容结构固定的页面，假如页面可能会出现空数据的状况也不宜运用。合作前面讲的优先加载的方法，作用会更佳。

5. 下拉改写加载

6. 分段加载

      当新页面的内容有好几百条乃至更多时，假如一次性加载一切内容，会添加设备的担负，而且加载内容过大，加载时刻会过长，一起APP自身也能够由于运算本钱太高而崩溃。为了处理这个问题，发生了一种叫分段加载的方法。即：先加载最新的几十条数据，当用户继续向上滑动想阅读更多时，再加载几十条。

      分段加载要在PRD或许交互规划文档里清晰注明，一次性加载多少条内容，假如内容以图片为主，主张加载 20 到 30 条左右，假如内容以文本为主，主张 40 到 60 条左右。

7. 智能加载

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

三. 关于加载的更多考虑

      由于存在网速不快、网络反常、服务器反常、bug等状况，让用户等候的状况是必不可少的。可是我们都知道，等候会发生焦虑感，分分钟卸载你的产品，除了用上文介绍的其间loading，还有没有其他方法来下降或缓解用户的焦虑感?

1. 优化App的加载算法，使得App与服务器数据传输的时刻减短

      这个需求开发人员的精益求精了。这个是从根本上处理了问题，由于直接削减了加载数据的时刻，也就削减了用户需求等候的时刻。

2. 选用预加载和智能加载的方法

      拿阅读App打比方，当用户在看第一页的时分，App在后台加载完后面的几页，等用户翻到第二页的时分就不需求等候加载了，由于App现已帮用户提早加载好了。这种加载机制对用户体会特别好，可是存在一个问题，便是要预测用户行为，加载其他数据，这样会耗费不少流量，所以主张在WiFi网络环境下采取这种预加载机制，而在蜂窝网络状态下则不选用预加载机制。这个要和开发人员评论交流，确保预加载机制完美运转。

3. 异步处理

4. 规划有趣的loading动画

      假如能和自身品牌元素结合起来，一起能反映出产品的调性，那就再好不过了。

      回到文章的开头，APP的开发也好，微信定制开发也好，企业网站建造也好，等等都产品开发人员都不应该把视野限制在人与客户端之间的交互，也要把客户端和服务端之间的数据传输考虑进来，站在用户、客户端和服务器闭环的角度去考虑产品，只有这样，才能规划出体会更好的数据加载计划，而不会有失偏颇。