设计移动端应用产品时，我们绝大多数的精力和时间都会花在各个页面的设计上。但与此同时，网络环境的复杂性，会造成在网速偏慢、弱网、无网的条件下，用户相当一部分停留时长会用在Loading上——无论页面最终呈现出来的状态我们设计得多么精美，它的加载总是需要一个过程。
而页面打开和跳转时的加载过程，很多时候会在设计中被严重忽视，最后在项目上线前仓促、随意地进行设计，甚至任由开发找一个「菊花」放上去转一转就完事了。
Loading过程的设计缺失对用户体验的伤害无法量化，但长此以往，犹如一剂慢性毒药，总有突破用户忍耐极限，导致用户流失的一天。
本文将简单梳理移动端应用设计中常见的加载模式，并结合一些国内外应用的实例，探讨如何针对场景特点选用合适的加载方式。
一. 模态加载
提到加载方式的分类，最明确的一个界限应该就是模态加载和非模态加载。而说起模态加载，可能有人会根据一些经典书籍中的观点认为模态一定是不好的，非模态才是正义。
但事实上，选用模态加载还是非模态加载，首先要做的是问自己一个问题，这个加载是否出现在不可逆流程？
1. 模态加载与「不可逆流程」
这里说的「不可逆」并非表达平日语境下「无法挽回」的含义，只是指一些单向通行的线性流程。典型如注册类(注册、登录、找回密码)、交易类(下单、支付、转账)流程，比如下图易信的注册流程和微信发红包的流程。
在不可逆流程中，一个步骤加载时如果允许用户随意触发其他行为，极易导致各种分支和异常。为了防止用户犯错，也为了设计和开发时减少异常流数量，在这类流程中使用模态加载是很正常的选择。
2. 其他场景下，避免模态阻断
而在无关不可逆路径的情况下，确实如经典论述所说的，应该减少模态阻断的使用。
采用模态加载则会让用户在等待期间无所事事，等待时间较长时会加剧焦躁情绪的产生。尤其是一些APP直接在启动页采用模态加载，这会导致用户感觉与产品每次见面都有一道无法逾越的鸿沟。
在国内，这种情况已经比较少了。不过少数金融类的APP仍然会直接在启动页进行阻断式的模态加载，考虑到金融类APP需要保障资金安全，这样的处理方式可能有一些行业特殊性。
一贯传统的日本，时至如今，很多APP仍然保留了在登录页就模态加载的习惯。即使是毫无阻断必要的。
电商类APP和交通查询类APP也是如此，以服饰电商ZOZOTOWN和东京メトロ为例。
当然，这两个APP实际上内部的设计质量已经非常不错了，有许多细节是值得借鉴的，这里只是就事论事讨论它们的启动加载问题。
它们在启动加载中使用了蒙层式的模态加载，即使东京メトロ设计了极富特色的加载指示符(9个代表不同线路的小圆圈)，仍然改变不了一种将用户拒之门外的隔阂感。
如果说电商APP的启动多是在用户较为闲暇、安静的场景，模态登录带来的伤害相对较小。那么交通查询类APP就不一样了，启动场景多是在户外移动，急于知道结果以确定下一步往哪走的情形之下，更不适合使用模态加载。地铁查询APP更为特殊，很大比例的场景是用户正在地铁中查询换乘信息，在信号不佳的情况下直接模态阻断，这样的体验是致命的。
综上，我的判断是，除了不可逆流程外，基本上没太大必要去使用模态加载。
百度地图在搜索地点中使用了模态，相比之下，而iOS自带的地图，搜索地点就没有采取模态加载，用户可以在不耐烦时随时尝试其他操作，体验上的差别显而易见。
3. 模态阻断要有「取消」选项
即使确信模态加载是正确的，最好也给用户一个「取消」的选项，避免用户只有杀掉进程以结束漫长的等待。
上面例子中，百度地图的搜索采用模态或许必要性不大，但至少设计师意识到了「取消」选项的重要性，用户在加载过程过慢时可以随时点击「×」终止行为。
反例是EBAY的登录页，上面有一个「×」，会让用户误以为是「取消」，但实际上是关闭登录页的按钮，在登录加载过程中是无法点击的。弱网环境下的用户唯有漫长的等待，唯一能做的就是杀掉进程。用户被卡住后不停地点击「×」却毫无反应，带来的焦躁和挫败感可想而知。
二. 整屏加载
另一类常见的加载严格来说不属于模态，因为对于产品整体来说，用户可以自由选择执行其他操作，但对当前正在浏览的内容层而言却又是一种阻断性的加载。准确的描述应该称为「局部模态」或者「内容层模态加载」，这里为了叙述方便，简称为「整屏加载」。
1. 整屏加载
原生应用的整屏加载，常见的做法是内容区整体保持空白，中间或内容区顶部有加载提示符(多数是Spinner，就是我们俗称的转菊花)告知用户耐心等待，直至所有数据请求就绪，再整体展示整个页面。
整屏加载是最简单的一种加载处理方法，适用于页面中所有数据，每次查看都需要重新请求、不存在本地数据的情况。在知乎、Behance、Airbnb、网易云音乐、ENJOY、熊猫直播等各类型的APP中都有广泛应用。
整屏加载的本质是内容层的模态加载，因此和模态加载一样，需要一个明确的超时判断，在超过指定时间数据仍未请求成功时，告知用户可能存在的原因和下一步行动点，避免一直卡在加载进程中。
本文为授权转载文章，任何人未经原授权方同意，不得复制、转载、摘编等任何方式进行使用，e-works不承担由此而产生的任何法律责任! 如有异议请及时告之，以便进行及时处理。联系方式：editor@e-works.net.cn tel：027-87592219/20/21。
文章
