一、为什么需要loading设计
在用户和系统的整个交互过程中，有很大一部分交互流程是用户在客户端进行操作，客户端将用户操作所产生的请求发送给服务器，服务器找到请求的资源再返回给客户端，最后将请求的资源呈现在用户面前。在这个过程中，由于网络带宽、服务器性能、客户端性能等因素的影响，可能会导致请求的资源出现在用户面前需要一段时间。为了缓解用户在这段时间的焦虑，提示系统还在正常运行，因此需要设计loading。
二、常见的加载方式
1.模态加载
用户需要等到加载完成才能进行其他操作，模态加载时一般会停留在当前页面，等到内容加载完成才跳转、改变页面。模态加载一般用在单向流程、会造成不可逆结果的功能中，例如注册、支付、转账，这种情况下使用模态加载可以有效避免流程中出现各种异常情况。
模态加载常见的一种做法是在页面中间出现模态窗口，明显的告诉用户不可做其他操作。
微信发红包
另一种做法是只在相应的区域出现加载提示，但是点击其他区域时不产生反应。
支付宝转账
在模态加载的过程中，最好设定一个明确的超时判断，在超过指定时间数据仍未请求成功时，告知用户可能存在的原因和下一步行动点，避免一直卡在加载进程中。
支付宝转账
2.全屏加载
全屏加载实质上是属于内容的模态加载，加载时会跳转到内容展示页，再一次性加载完页面所有数据。
常见的做法是内容区整体保持空白，中间或内容区顶部有加载提示符告知用户耐心等待，直至所有数据请求就绪，再整体展示。若加载失败，则页面为空。这种方式最简单的一种加载处理方法，适用于页面中所有数据，每次查都需要重新请求、不存在本地数据的情况。例如知乎、网易云音乐、虎牙直播等都有广泛采取这种方式。
虎牙
同模态加载一样，全屏加载同样需要一个明确的超时判断，在超过指定时间数据仍未请求成功时，告知用户可能存在的原因和下一步行动点，避免一直卡在加载进程中。
3.优先加载
加载快的元素（例如文字）优先加载出来，加载慢的元素（例如图片、动图、视频）先用相关占位符表示，之后再逐步加载出来，这样用户在页面还未完全加载完的情况下就能对整体内容有个大致预期。但是缺点就是也许会丢失掉重要的关键信息，无法建立信息获取的闭环。
淘宝
对于图片资源，还可以通过分级加载可以让这一过程更加平滑，首先加载低清版（甚至模糊版）的缩略图，在保证内容完整呈现后，再加载高清资源。
对于优先加载，还可以在加载内容前，预先将整体结构占位符显示出来，可以从形到体地提前告知用户接下来将要看到的东西，再对内容进行优先加载。结构占位符一般是类似于线框图形式的灰阶色块图，将各个模块的典型结构元素展示出来，通常不代表真实情况——这意味着无法点击，所以实际上在这一阶段仍然类似整屏加载。
优先加载中还可以将结构占位符和内容优先加载结合起来。将全局性元素的结构占位符先加载出来，然后优先加载全局性的元素，再对内容区进行内容上的优先加载。这种方式针对于整体的结构占位符来说，更为简约清爽，能给用户一个非常轻松的过程。
优先加载的方式还有很多，有时候还要综合考虑业务因素，优先加载对业务目标最有利的因素，因此做优先加载时，需要根据具体情况做出更合适的方案。
4.懒加载
只加载用户当前视线内的内容，看不见的内容通过用户的操作来触发再次加载。例如当页面滚动到底部尽头或下拉页面时，才会自动加载内容。懒加载一般用在无尽的信息流页面，或者有内容折叠的页面。
5.预加载
这种方式和懒加载方式恰恰相反，不是偷懒只加载用户视线内的内容，而是在用户浏览当前页的时候就预先加载之后用户可能点击的页面，当用户点击进入已经加载的页面就能感受飞一般的速度。但是这种方式会增加客户端和服务器的负载，也会占用一定的网络带宽。例如今日头条APP，加载新闻列表的时候就预加载好了新闻详情。
三、提升加载体验的方法
1.提供视觉交互体验
有趣的加载动画可以让等待的过程变成了一种享受，让用户体会到新鲜有趣的等待过程。
digg
2.提供明确的提示，告诉用户所处处境和阶段
在用户的连接速度很慢，而页面又没有明确进程指示的情况下，用户很可能会不断刷新尝试重新连接，这就造成了用户的二次等待，使等待时间延长。为了避免这种情况，我们可以给出一定的提示，告诉用户所处处境和阶段。
好了，以上就是这次针对loading设计的一些总结和思考，在实际情况中运用的时候还是要考虑产品的具体诉求。想给用户提供一种什么视觉感觉，重点功能是否需要优先照顾到，重点流程是否需要确保足够流畅，某些流程是不是会造成不可逆后果等等具体问题，只有考虑清楚后才能设计出最适合你产品的loading哦。
网友评论