用户体验优化：带你深度剖析App的加载机制

　　什么是加载

　　用户在客户端发出一个请求后，服务器进行响应并反馈数据，客户端拿到数据进行计算和渲染，这个过程叫做加载。

　　如果没有加载，计算机就无法实现用户的请求。

　　加载的时间具有不确定性，可能是瞬间的，也可能超过3秒，甚至可能因为网络不稳定、服务器异常等情况，无法获得响应。

　　在互联网产品中，为了更友好的用户体验，也为了缓解用户等待的焦虑感，可以把这段时间内计算机完成的一系列执行动作的过程进行可视化和情感化设计。

　　当然，这并不是说要细致地描述客户端是怎样向服务器发出请求并得到响应，根据尼尔森十大可用性原则之可视性原则进行设计即可。

　　即系统状态有反馈，等待时间要合适。让用户知道我们有在积极处理他们的请求，并告知他们大概需要等待多长的时间。

　　移动端的加载模式

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

　　总的来说，我们有两种加载模式：

　　同步加载指客户端请求执行某一任务，在该请求返回数据之前，客户端无法进行其他操作，直至该请求返回数据。

　　这种加载过程是不可逆单向通行的线性流程，一旦用户触发了事件，这种加载就会独占客户端，用户在其加载过程中只能选择等待。

　　所以除非是不完整加载出来就会导致严重错误，否则尽量不使用这种加载模式。

　　说那么多，同步加载究竟长啥样呢？

　　大概长这个样子：

　　一般是用在客户端的登录、注册、扫码支付、提交订单、上传资料、修改资料等情况，这些操作都是顺序继承的，即下一步的操作必须是上一步操作成功的基础上。

　　异步加载指客户端请求执行某一任务，在该请求返回数据之前，可以执行其他操作。

　　一般用在不涉及重要资料和顺序操作的数据加载，如大量图片、视频的页面，长列表数据的列表页，内容的详情页等。

　　让我们聚焦到App内的加载场景

　　运用加载模式的两种原理，可以延伸出多种加载策略，根据不同的场景需要选择适合的加载策略。且加载模式和加载策略的选择，不是简单的一对一的关系，常常需要搭配使用。

　　App内加载场景有三种：启动页加载、当前页加载、跳转页加载。

　　一、启动页加载

　　① 同步加载模式下：品牌页

　　A. 打开App时，页面展示品牌页，加载完某些数据才能进入应用。如果未加载完，则一直显示品牌页。

　　B. 打开App时，页面展示品牌页，设定展示时间，过了展示时间后，进入应用页面进行数据的加载。

　　这种做法便于企业进行品牌宣传。品牌页的设计应该符合品牌调性，识别度高且不轻易更换，起到宣传企业文化的作用。

　　② 异步加载模式下：广告页/活动页

　　打开App时，展示广告页/活动页，当用户点击「跳过」时，进入应用页面进行数据的加载。

　　这种做法可以帮助用户更快的进入应用，虽然进入到应用也需要等待加载完成，但这种做法造成的错觉可以有效缓解用户的焦虑。

　　无网状态下：

　　对于有缓存数据到本地的应用，无网的状态下并不影响功能的使用。当用户进入应用时，自动定位到无需加载数据的本地页面。

　　如网易云音乐无网状态下会定位的【我的】页面，同时提示用户当前网络异常状态 。

　　无论是有网还是无网状态下，让用户能成功进入应用并看到应用界面的做法，都要比把用户拒之门外的做法要更好。

　　给用户一些提示，告诉用户当前数据为什么加载不出来，告诉用户要怎么做，都能让这个产品更有温度。

　　二、模态加载

　　属于当前页的同步加载模式：当用户在当前页触发操作时，页面进行数据加载并提示，数据加载成功后，呈现数据或出现下一步操作。

　　适用于需要判断及验证处理的情况，或是下一步的操作建立在当前操作结果上的情况。如登录、注册、支付、转账、表单提交等。

　　无网状态下：停留在当前页面,spinner 消失 。

　　三、整屏加载

　　一次性加载完所有的数据，再展示给用户，它保证了内容的完整性。分为H5页面加载、原生页面加载。

　　① H5加载：

　　A. 跳转页的同步加载模式：触发后就进行跳转，这种做法会有特别强烈的等待感，未加载出来之前，页面是空白的，超过3秒以上还未加载出来，用户会产生焦躁情绪。

　　一般会把进度条设计成先快后慢的形式，减缓用户焦躁的情绪，但只是相对有效。

　　B. 跳转页的异步加载模式：用户触发后不影响当前页面的浏览操作，加载完成后进行页面的跳转。

　　② 原生页面加载：

　　属于当前页的同步加载模式，通常利用趣味性动画减轻用户等待焦虑感。

　　无网状态下：停留在当前页面，给用户一个明确的超时判断，告知用户可能存在的原因和下一步行动点。

　　四、渐进加载

　　渐进加载分为四种：结构占位符加载、文字+图片占位符加载、优先加载低清图片、优先业务加载。

　　① 结构占位符加载，属于同步加载模式：

　　类似于线框图形式的色块图，将各个模块的典型结构元素展示出来，通常不代表真实情况。这种方式能帮助用户快速了解整个界面的信息布局 。

　　② 文字+图片占位符加载，属于异步加载模式：

　　先加载文字，再加载图片，最后加载视频的顺序进行数据加载。

　　这种加载策略适用于图文交织的页面，能减短整体加载的时间，尽可能快地把内容呈现给用户，以达到更好的用户体验。

　　如果图片承载的内容信息比文字重要，在弱网状态下，用户对内容的了解就会受到阻碍。

　　③ 优先加载低清图片，属于异步加载模式：

　　先加载低清版图片，再加载高清版图片，图片资源的分步加载可以让页面内容更快呈现给用户。

　　④ 优先业务加载：

　　先加载对业务目标最有利的模块，再加载其他模块。

　　五、延迟加载,也叫懒加载

　　对视频图片进行「按需加载」，即用户浏览到该区域，再加载内容，网速非常快时，用户甚至不能感知懒加载的动作。

　　它属于当前页的异步加载模式，适用于以图片为主，文字为辅的场景，视频或图片未加载出来时，不影响点赞等功能的操作。

　　如抖音(视频流)，仅加载当前视窗内的图片，这种加载方式速度快，省流量又不影响用户浏览。

　　六、上拉加载，也叫分页加载

　　一般适用于长列表、商品列表、咨询列表或瀑布流。它展示数据列表的时候，默认展示20条，滚动到最后，自动再加载20条或者手动点击/上拉触发加载。

　　它属于当前页的异步加载模式，这种加载策略避免一次性加载大量数据，省流量，把用户带入无尽浏览模式。

　　七、预加载

　　就是提前加载。用户在看A页面时，客户端就在准备用户可能会看到的B页面，用户要看B页面时，直接把B页面给他，然后去加载C页面。

　　它属于异步加载模式，这种加载策略给用户无缝衔接的感觉，但耗费的流量比较多。

　　一般用在不太消耗大量流量的场景，如信息，消息等。

　　八、标题栏加载

　　IM、邮箱类应用会使用缓存加载，把大量数据存在本地。

　　在无网或弱网的情况下，支持用户浏览本地数据。

　　在正常网络下，会在顶栏或底栏显示加载提示符，以文字+Spinner形式进行加载，正常网络下的这种加载策略叫做标题栏加载。它属于当前页的异步加载模式：

　　九、下拉加载

　　它属于当前页的异步加载模式，这种加载策略可以说是非常常见，它要求用户必须在首屏进行操作，适用于界面信息会经常更新的场景，用户刷新当前页面，获取新数据。

　　我们通常会对下拉样式进行调整，让它更具有趣味性，也能利用这个场景进行品牌文化的宣传：

　　a.普通加载图标+随机文案（网易云课堂：百尺竿头，更进一步）

　　b.品牌logo动效

　　c.IP形象动画

　　d.品牌场景动画

　　e.普通原生菊花转（或者样式较单一）

　　下拉加载有四个反馈纬度：

　　下拉、松开、刷新中、刷新后。设计的动效会在刷新中的状态下进行播放，播放结束后，会给用户反馈“XX条更新”/“XX条新动态” 。

　　十、缓存加载

　　这种加载策略是应用从本地数据库获取已缓存的数据，在无网或弱网的情况下，用户还是可以查看一些内容。

　　一般用在新闻资讯、小说App内，对资讯列表和内容文本及框架进行缓存。

　　使用这种加载策略需要考虑容量限制和清理时间的问题，每个手机的储存空间是有限的，如果不进行限制和清理，手机将不堪重负。

　　十一、智能加载

　　这个加载策略是基于用户流量成本、网络环境的考虑，选择更优 的方式去加载图片、视频等需要消耗大量流量的资源：

　　a.Wi-Fi环境下，优先加载高质量图片、优质音乐和视频

　　b.4g环境下，下载行为自动终止，优先加载普通图片，甚至停止加载图片或音乐

　　c.网络不通畅时，默认加载低质量，甚至停止加载图片或音乐

　　好了，大概就是这样了。