[交互基础］系列之移动端页面加载详解

注：鉴于目前交互设计的知识体系较为混乱，我写了这个［交互基础］系列专题，旨在整理移动端交互设计基础知识。巩固自己的知识体系，也与大家共勉，打好基础，才能飞得更高！

一、人机交互

交互设计是定义、设计人造系统行为的设计领域。这是一个非常广的领域，我们在这里，只探讨IT产品的人机界面交互。举一个例子，用户点击一个确定按钮，完成了表单的提交，此时APP提示用户“提交成功”，这是用户与APP之间的一个交互过程。从点击按钮到弹出提示，这个过程发生了？在交互层面又需要考虑哪些问题呢？

二、用户——客户端——服务器

用户与客户端进行人机交互，如上述的例子，点击确定按钮，客户端将用户的操作转化为相应的指令，向服务器请求数据，若网络和服务器正常，服务器返还数据到客户端，用户看到自己操作所引发的结果。在这个过程中，涉及到用户与客户端之间的交互和客户端与服务端之间的数据传输这两个部分。

从用户点击确定按钮后到服务器返回数据到客户端，这个过程中需要耗费一定的时间，我们需要呈现一个加载的过程来告诉用户APP正在做什么，以缓解用户的焦虑情绪。当服务器返回数据以后，客户端需要提示用户”提交成功”，以告知用户操作的结果。当然，还会有异常的情况，客户端与服务器之间传输数据的过程中，可能遭遇网络不稳定、服务器异常等情况，这也需要及时告知用户，以避免用户不知所措、产生焦虑，影响体验。

加载发生的原理都是一致的，即用户与客户端发生人机交互以后，请求数据与返回数据的过程。但是在不同的场景下，需要考虑不同的加载处理方式。

三、加载模式

页面加载的两种模式：同步加载和异步加载。

1.同步加载

• 定义：同步加载请求执行某一任务，在该请求返回数据之前，请求端什么也不干就在等待，直至该请求返回数据，再执行下一步操作。（例如产品设计完成之后才能交付给开发。）

• 场景：登录注册、扫码支付、提交订单、上传资料、修改资料等需要验证、提交信息的情况或下一步的结果走向与当前操作相关的情况，也称顺序操作。（例如登录需验证账号信息，成功了就进入应用主页，失败则仍停留在登录界面）

• 特点：及时性，加载完成/失败会立即得到反馈结果，上下步操作的关联性强，更易于实现。但是如果加载速度太慢，很可能长时间停留在加载页面，使用户产生烦躁的负面等待情绪。

2.异步加载

• 定义：异步加载请求执行某一任务的同时，可以继续执行下一操作，等到收到返回数据，再处理该任务。（例如你要烧水和扫地，为了提高效率，先烧水，再在烧水的过程中扫地，等水烧开了，再去处理开水。）

• 场景：不涉及重要资料和顺序操作的数据加载都适合异步加载。如大量图片、视频的页面，长列表数据的列表页，内容的详情页面等。

• 特点：有效得提升了用户体验，页面的跳转和加载动画让用户觉得反馈很及时，增强了操作的流畅度。但是需要处理好操作之间的关联性，否则用户容易产生疑惑。

四、加载策略及表现形式

运用加载模式的两种原理，可以延伸出多种加载策略以对应不同的场景需要。加载策略是方法，加载模式是原理。需要注意的是，不同的加载策略运用了不同的加载模式，并不是简单的一对一的关系，要学会配合使用。

1.启动页加载

打开APP有一个加载的过程，在这个过程中，可能对同步加载和异步加载均有涉及。

• 同步加载时的常用策略：加载完某些数据才能进入应用，适合对某些关键数据进行检查，例如检查用户的身份信息，此种策略是为了保证一些关键数据的可控性。

• 异步加载的常用策略：进入应用内再加载使用的数据，例如进入应用再加载首页，可以提高进入应用的速度。

APP启动页显示的长短取决于需要加载的内容的多少。一些APP在启动页之后还设置了广告页面（一般可跳过），则考虑更多的是广告营销等商业目的。

（编辑：ASP站长网）