移动端中的“加载策略”思考与总结

Posted 2021-04-30 交互设计心得笔录

     淘车改版项目中因为易车二手车App的合并，出现了很多视觉和交互上的冲突，为了达到全站的统一以及优化用户体验而做了很多调整。其中由于设计规范和开发写法都不尽相同，加载策略以及展现形式差距也很大。项目结束，总结归纳出了一些移动端中加载的原则。

一、加载状态到底有什么用呢？

      加载状态是对用户操作的一个等待状态的反馈，其本意是告诉用户系统正在拉取数据，使用户预知加载成功后的效果。等待时间越长用户越焦虑，这直接影响着用户感受，当网络条件不好时的加载策略更为重要。

二、同步加载、异步加载、延迟加载、预加载、智能加载？

      设计师经常考虑的问题是这个页面我想要什么样的呈现效果，对应着的加载策略也有很多。在与开发对接需求的时候我发现我们的“语言”跟他们是有一些差异的，从他们的角度来考虑问题使交流更高效，也更容易达到自己的心理预期。因此这里从技术的角度切入来详细描述什么样的情况使用什么样的加载策略。举个简单的例子，我们想要一个先加载文字后加载图片的效果，那在开发的脑子里想的可能是：这个地方我要做成“异步加载”，先执行~~再执行~~

1.先说一下什么是同步加载和异步加载吧

      同步加载就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步加载是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。比如：你叫我去吃饭，我听到了就立刻和你去吃饭，如果我们没有听到，你就会一直叫我，直到我听见和你一起去吃饭，这个过程叫同步；异步过程指你叫我去吃饭，然后你就去吃饭了，而不管我是否和你一起去吃饭。而我得到消息后可能立即就走，也可能过段时间再走。

        同步加载的优点是开发成本小，避免因不同步造成信息错误，但等待时间过长的情况一定要给用户留有放弃的出口；异步加载的优点是避免用户因等待而产生焦躁情绪，使反馈更加灵敏。

使用原则如下：

如果后续操作需要等本次提交的结果才能继续,则使用同步加载

- 登录注册，提交订单，上传资料等下一步操作与当前操作有先后顺序的情况

- 支付、提交订单、修改重要资料等获得操作结果特别重要的情况

- 产品开发资源严重紧缺的情况（体恤一下开发GG）

 如果后续操作与本次提交结果没有直接依赖关系,则使用异步加载

- 拥有大量图片或者视频的页面（1-车图页面）

- 有大量iterm数据的列表页（2-车辆列表页）

- 涉及大量数据计算的页面（3-金融产品列表页）

- 数据特别大的H5页面（4-开走吧等App调取H5页面）

- 需要情感化考虑给用户以最快的反馈（比如点赞操作前台页面快速的给用户以反馈点赞成功）

2.预加载是在空闲时间预先加载可能浏览的数据。延迟加载是一开始先不加载，等到需要时再加载。比如车辆列表页上的车图采用的延迟加载。延迟加载能够速度更快，且能给用户节省更多不必要的流量。虽然是两个对立的加载策略，但是还是会经常一起使用。比如说车辆车图列表页我们采用预加载的方式提前加载N条或者一屏，但是也会延迟加载里面存在的大图，在图片出现在可视区域时才加载图片。

如图5-选车控件

1，该页面车图进入用户视线才会加载车图，若暂时没加载出来则采用默认图替代。若网速较快其实不会出现默认图。

2，提前预加载屏幕下方的更多条车型，保证用户翻动页面可以一直看到内容

PS：一般设计师会跟开发说这里要优先加载框架和文字，预加载N条数据。其实这个案例里用到了异步加载、延迟加载和预加载这三种策略。

使用原则如下：

如果页面部分内容暂时用不到且需要大量流量,则使用延迟加载

如果页面部分预测用户接下来会访问,则使用预先加载

刚提到了为用户省流量，还有一种智能加载的办法，用在比较特殊需要花费大量流量的地方。在淘宝等电商平台上我们切换4G和WiFi看到的图片清晰度是不一样的，WiFi环境下给用户呈现的是更加高清的大图。还有视频软件上无WiFi的情况下软件会自动停掉视频播放，让用户去选择是否要用4G去播放。即将开发的淘车资讯里视频频道应采取智能加载的策略。

总之，对于用户来说想要的就是：高效反馈！ 先告诉我重要的内容！节省流量！允许我放弃！至于鱼与熊掌不可兼得的事儿，就要靠设计师凭借具体的实际情况来衡量做取舍了。

三、模态加载or非模态加载？

我们提倡尽量使用非模态的加载方式，在加载的过程不打断用户，不需要等待加载完就可以做别的事情的，而不用傻傻等待数据加载完成，大大降低了等待的焦躁感，提升用户体验流畅度。模态加载：app在触发加载后，出现模态提示层，防止用户在加载过程中进行其他操作，导致当前加载出错。如果采用模态加载，会因为网络原因或内容过多导致长时间处于加载状态，建议提供一个“取消”的操作。在安卓机上控制物理键后退按钮能关闭模态提示。

模态和非模态是跟上面提到的加载策略不同纬度的分类，在这里我用通俗的话总结了以下三种情况

1.未加载完成时用户看不到任何结果，不让用户操作

这种情况一般是只有一个接口请求，是非0既1的结果；或者是全部加载完成才能让用户看到的内容

视觉的呈现效果就是全屏只有一个加载动画或者加载进度指示。

2.让用户看到加载的过程，不让用户操作

用户能够看到先加载出来什么内容再加载出来什么内容，虽然还不能够操作，但是一步步的显示出现的内容能够缓解用户的等待焦虑。

3.让用户看到，让用户操作

这种情况是相对友好的加载方式，用户能够看到页面在更新内容，也可以操作已经加载出来的部分。很多首页和列表页都采取的这种方式。比如说上面的（图2-车辆列表页）所采用的下拉刷新的策略即使如此。

四、如果网络没有了怎么办？

以上策略考虑的前提是“有网络”，那当网络彻底停掉了怎么办呢？比如用户在在地铁，在切换网络或者信号突然中断……

当页面无网络了我们首先想到的是告诉用户这件事情，在这主要分析了以下几种情况

1.空页面提示：很页面会采用这种办法，页面上会有  icon或者插画形式、网络异常文案、重新连接网络的button，如下面的图6-统一的空页面提示样式。

2.预设图和占位符提示：在一些关键页面或者首页、频道页上为了给用户更好的体验，APP中预设好图标和占位符来替代加载的数字、图片、文字等数据。也就是预处理过程。 缓存部分数据，同时提醒用户无网络。另外首页上当第一次打开没有网络的情况下会内置一些数据，避免用户看到崩溃的空白页面。

如图7虽然整个页面只有一张车图显示，但是如果使用统一空页面的无网络样式，那么当我点击按钮刷新出网络后，页面就会由白色底闪成黑色底，强烈的反差给用户以不好的体验，所以我们使用了如图8使用一张图裂了的占位符样式。

3.toast和dialog提示：网络信号不好或网络中断时，用户还在继续操作APP，为了提示用户，会采用toast或dialog的形式来提示用户网络异常。比如在搜索页面无网络了，用户在操作过程中会给一个简单的toast提示，如果是在表单填写中我们一般不会打断用户的操作，而是本地缓存下表单的内容，在用户提交时告诉用户由于没有网络而无法发送。

总之，让用户对加载的过程感知越小越好，还有一些情感化的方式来缓解用户在等待过程中的焦虑感，比如说做一些可爱的小动画之类的。但是更快速地反馈其实是用户最期望的，所以设计师要考虑到每个页面以及具体到每个模块的每个部分的加载策略，当然这要根据实际的情况来决定哪种方式是最佳的选择。