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

一、人机交互

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

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

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

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

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

三、加载模式

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

1.同步加载 定义：同步加载请求执行某一任务，在该请求返回数据之前，请求端什么也不干就在等待，直至该请求返回数据，再执行下一步操作。（例如产品设计完成之后才能交付给开发。）场景：登录注册、扫码支付、提交订单、上传资料、修改资料等需要验证、提交信息的情况或下一步的结果走向与当前操作相关的情况，也称顺序操作。（例如登录需验证账号信息，成功了就进入应用主页，失败则仍停留在登录界面）特点：及时性，加载完成/失败会立即得到反馈结果，上下步操作的关联性强，更易于实现。但是如果加载速度太慢，很可能长时间停留在加载页面，使用户产生烦躁的负面等待情绪。

2.异步加载 定义：异步加载请求执行某一任务的同时，可以继续执行下一操作，等到收到返回数据，再处理该任务。（例如你要烧水和扫地，为了提高效率，先烧水，再在烧水的过程中扫地，等水烧开了，再去处理开水。）场景：不涉及重要资料和顺序操作的数据加载都适合异步加载。如大量图片、视频的页面，长列表数据的列表页，内容的详情页面等。特点：有效得提升了用户体验，页面的跳转和加载动画让用户觉得反馈很及时，增强了操作的流畅度。但是需要处理好操作之间的关联性，否则用户容易产生疑惑。

四、加载策略及表现形式

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

1.启动页加载

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

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

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

2.当前页加载

当前页加载大多属于同步加载。

定义：点击触发操作后，在当前页进行数据加载并提示，数据加载成功后，才能进入下一页面。（网络异常的话，就只能待在当前页面。）场景：适用于需要判断及验证处理的情况，或下一步走向与当前操作结果相关的情况。例如登录注册、表单提交等。作用：加载完成/失败会立即得到反馈结果，上下步操作的关联性强，更易于实现。缺点：加载时间超过3S，容易使用户产生焦虑的情绪。表现形式：如下图所示，登录过程中使用多态按钮表示验证过程，保存收货地址可使用模态加载的方式过渡表单的提交过程。

3.下一页加载

下一页加载大多属于异步加载。由于下一页的内容类型、内容量等因素的影响，又有多种处理方式。

定义：点击触发操作后，页面跳转至下一页并加载内容。场景：大多数应用的内容页面都采用这种方式。作用：极大的增强了流畅的感觉，毕竟在当前页卡住与在下一页卡住是两种不同的感受。网络异常的情况下，用户点击触发操作，若一直停留在当前页面没有变化，很容易产生烦躁的负面情绪；而跳转到下一页加载，一定程度上可以缓解负面情绪，因为在用户发出指令的同时，应用的页面就发生了跳转，让用户看到了操作带来的变化，只是因为网络差没有尽快的加载成功而已。

3.1.整体加载

定义：一次性加载完所有的内容后，再展示给用户。场景：适用于页面的内容较为单一的情况，同时在H5页面中大多采用这种加载方式。作用：保证了内容的整体性，能系统性的阅读所有内容。缺点：等待感显得比较强烈，超过3S容易使用户产生焦虑的情绪。因此，在地铁等信号不好的地方使用手机网页获取内容的体验是比较差的。表现形式：如下图所示，APP的加载过程通常使用能强化品牌效果的趣味动画，或者简单的循环加载、菊花加载样式，但趣味性动画的设计更能吸引用户，减轻用户等待时的焦虑感。H5页面通常使用进度条来表示加载的进度。

3.2.分步加载

分步加载即先加载文字，再加载图片。页面通过整体加载的方式将文字加载成功后，再使用分步加载的方式来呈现页面的内容，即呈现文字内容和图片占位符，再加载图片。这样做是为了减短整体加载的时间，让内容尽快呈现，减少用户的等待时间。由此，我们可以看出，我们经常要对多种加载策略进行搭配使用，以达到更好的用户体验。

定义：根据页面上的资源类型进行先后加载，优先加载占网络资源较小的文字，图片在加载过程中使用占位符，直到图片加载成功。文字→图片→视频→其他资源。场景：适用于图文内容交织的页面,如新闻列表页面、详情页面等。许多应用的首页都有大量的图文内容，就适合用这种加载方式。作用：可以让用户快速地了解界面信息布局及阅读内容。缺点：开始的瞬间可能会丢失掉重要的关键信息，用户初次感知可能会认为产品出现问题了。表现形式：如下图所示的图文列表、内容详情页面，先加载文字，图片加载过程中使用占位符填充位置，占位符一般使用灰框显示，或在灰框内加入品牌标识，强化品牌效果。

加载占位符（Skeleton Screen ）：加载占位符是分步加载的另一种形式，即先加载页面的框架，然后再加载框架里的内容。这种形式所展示的是内容的大概轮廓，用于内容框架固定的页面，若页面可能出现空数据也不宜使用，需保证最后呈现的内容与展示的框架大致相符。如下图所示，Facebook、简书等采用了这种加载方式。加载占位符的方式可根据实际情况配合分步加载、分屏、分页等加载方式，可达到更佳的效果。

3.3.分屏加载

分屏加载又称延迟加载或懒加载。

定义：先加载框架和文字，再加载第一屏的数据，向下滚动到哪里加载到哪里。场景：适用于多屏且图片资源较多的页面，如电商应用商品展示页面。作用：仅加载当前视窗内的图片，页面加载速度快，可以减轻服务器的压力，节约流量，用户体验好。缺点：也许会丢失重要的关键信息，无法建立信息获取的闭环。表现形式：如下图所示，淘宝的商品展示页面，只加载首屏的图片，页面上滑时，下方图片进入视窗，显示占位符，加载完成后显示商品图片。

3.4.分页加载

定义：展示列表数据时，例如默认展示20条，滚动到最后的时候，自动再加载20条或者手动点击加载。场景：适用于长列表、商品列表、咨询列表或瀑布流。作用：避免一次性加载大量数据造成的体验不佳，用户可以有选择的一直向下滚动，不需要手动点击下一页。缺点：把用户带入无尽浏览的模式，没有尽头，用户容易迷失，不方便快速索引定位到某一内容。表现形式：如下图所示，分页加载分为手动点击加载和自动加载两种形式。