设计师解读移动APP中Loading设计(2)

2. 递进加载

预先设计整体的内容加载顺序，可以让核心信息优先被加载出来，让用户知道任务正在持续进行的同时，通过优先加载的内容吸引用户注意力，缓解等待的焦躁感。

多数情况下，所有的整屏加载都可以通过合理的设计优化为递进加载。当然，有些页面有整体性要求(如金融类APP中的各类表单)，所有信息一定要整体显示、否则会导致歧义，这种情况自然不适合采用递进的方式。

A. 文字+占位符优先

同时，对首页各类分流List、Timeline来说，及早透出的文字内容吸引用户兴趣，有可能在页面完整加载前就完成导流的任务。而在此期间用户进行判断的思考，则更加淡化了他们等待的感觉。

比如电商平台ZOZOTOWN预先加载的价格和打折标，就可以让用户在加载过程中，根据自己心里预设的价格区间和折扣期望，进行基本的判断和筛选。

根据内容资源性价比(资源传达的信息价值÷资源体积)，最先考虑加载的自然是文字，而图片、动图、视频在此期间则用占位符表示。最简单的占位符就是一个纯色块，用于让用户对即将呈现的内容尺寸有一个基本的心理预期。

占位符上可以通过icon告知用户资源类型是图片和视频，也可以借此展示产品或品牌的标志性icon。

B. 低清图片优先

图片资源的分级加载可以让这一过程更加平滑，首先加载低清版(甚至模糊版)的缩略图，在保证内容完整呈现后，再加载高清资源。

同理，占位符的色值直接选取图片的主色值也是一个有效的过渡手段。

C. 结构占位符优先

递进加载的思路不限于信息资源，结构元素同样可以考虑递进加载。

在文字加载之前，预先将结构占位符(Skeleton Screen，直译是「骨骼页」)显示出来，可以从形到体地提前告知用户接下来将要看到的东西，避免加载中的大忌——「惊喜感」，让加载过程更加自然。

结构占位符一般是类似于线框图形式的灰阶色块图，将各个模块的典型结构元素展示出来，通常不代表真实情况——这意味着无法点击，所以实际上在这一阶段仍然类似整屏加载。但结构占位符的核心目的也不是真实内容，而是衔接空白和载入成功的状态。简述和抖音的消息页都采用了结构占位符作为递进加载的中间态。

这样非功能性的优化或许很多开发并不愿意去做，但对微小细节的用心，可以让整个产品体验的顺滑程度、品质感都提高很多。用户的眼睛是雪亮的，随之而来口碑上的收获会让团队觉得付出都是值得的。

D. 业务优先

此外，还可以综合考虑资源体积和模块价值，可以考虑不按从上到下的顺序，而是对业务目标最有利的模块顺序加载资源。

四. 启动加载

讨论了很多应用内页面的加载，再单独把启动加载拎出来聊聊。

1. 空白框架加载

国外许多APP都采用了非常轻的启动页，首先展示一张与实际首页的结构非常近似的空白框架作为启动页，在此基础上加载框架内的具体元素。让用户在点击APP后就有一种「马上就启动了」的错觉。iOS的自带应用中这样的例子比比皆是，这正是iOS规范所建议的一种启动方式。

更加用心的一些产品，在此基础上设计了更细分的递进加载过程。在加载空白框架的基础上，首先加载全局性元素(顶栏、底栏)，最后加载中间内容层的具体内容。

如家装社区Houzz，首先加载的是由顶栏、底栏构成的空白框架，其中顶栏已经预先透出了用户头像和搜索框的占位符;第二步加载了顶栏、二级顶栏和底栏的icon、搜索框等全局性元素。第三步才开始加载内容区。

体育直播平台ESPN也同样采用了这样的三步启动，首先加载只有底栏的空白框架，由于ESPN的产品框架会根据用户关注的国家不同而有较大差异，顶栏结构和底部Tab会完全不同，所以在第二步请求到用户关注的国家后，才会依次加载底栏Tab、顶栏和内容区。

当然也并非所有的国外APP都认可iOS这一套极简的加载过程，商业环境下，品牌表达的诉求是天经地义。在Airbnb、Instagram等公认设计比较优秀的APP中，他们的做法是在空白框架的基础上，很克制地打上很轻的品牌标识。从而在强化品牌心智的同时，仍然保证主体内容是在空白框架上自然呈现的。

个人角度还是蛮喜欢这种更纯粹的启动方式的，可惜国内的APP由于习惯问题，采用空白框架加载的例子少之又少。

2. 启动页

国外也有许多APP选择设计与首页结构框架无关、独立的启动页，以实现更为强势的品牌透出，比如食谱平台Yummly和阅读推荐平台Medium，都设计了与首页框架无关的启动页，极具辨识度且不会轻易更换。

这点上，国内最好的例子就是微信，「孤独遥望地球」的画面使用之久、辨识度之高，仅仅是地球照片换成国产就能引发全网热议。「这个世界是孤独的」的故事，即使没有slogan写在启动页上，也早已深入人心。同样，网易云音乐和其他一些APP的启动页也在品牌认知效果上做得不错。

相比之下，滴滴、B站、豆瓣等许多国内APP的启动页采用了更简化的做法——白屏+底部LOGO，通常会以小字体附上slogan或者版权信息。

关于这种设计的判断见仁见智，可以认为它是一种品牌宣导与「不打扰用户」的折中。但我仍然保留个人观点，在这一问题上的折中，可能导致两头不讨好。

对用户体验，这种设计不像空白框架加载一样有一个衔接非常自然的启动体验。

对品牌曝光，又不像微信启动页一样具有极强的品牌认知价值。

在底部放一个小LOGO，难道用户点击APP时没看到么，为什么一定要以进入APP的体验流畅度为代价去让用户再看一遍?

至于一闪而过的slogan或是版权信息，字体非常小的情况下连看都看不清，其实有多少用户会留意到呢。

简而言之，既然要设了一道屏障，为什么不让这个屏障更有价值?

3. 一言难尽的广告页

国内APP还有一个似乎约定俗成的习惯——在启动页后插入广告，甚至直接把广告作为启动页，虽然多数都在角落提供了跳过的选项，但仍然有可能会引起用户的反感甚至流失。

不可否认这是价值不菲的一个黄金广告位，尤其当这种做法无论对产品方还是用户都已经司空见惯的时候，似乎体验上的风险也就没那么大了。

所以，这里不再去纠结国外APP的做法与「国情」之间的优劣。还是那句话，用户体验也是植根于市场和文化习惯的。

在这样的背景下，设计师可以体现价值的地方，应该在于去思考怎么把启动广告做得不那么让人反感，甚至用精良的设计给用户带来独特的期待。

五. 提升加载体验的其他技巧

1. 加载提示符的设计

线上线下的服务设计很多地方是相通的。

在以服务著称的海底捞，我们排号等待期间并不会觉得时间特别漫长。首先，海底捞会提供小吃、酸梅汤，甚至美甲、陪客人下棋等服务，让我们感受到商家已经充分考虑到了排号的痛苦、并为此提供了体贴的关怀。其次(这点不单指海底捞)，叫号机频繁报号也让我们对「前面还有多少桌」始终心中有数。

线上APP的等待过程也同样如此。

精心设计的加载过程可以有效缓解等待的压力。无论是在线型进度条、Spinner上融合品牌特色做出种种新意，还是结合产品调性尝试更富创意的动效，总比千篇一律的转菊花或者单调的文字，更能让用户感受到我们对加载等待过程的充分考虑和设计上的用心。

例如厨房故事APP在加载中使用的Spinner，就巧妙地结合了LOGO中黄色圆点，设计了一个节奏和灵动感俱佳的Spinner。熊猫直播屏幕中央卖力跳动的小熊猫，配合「卖力加载中」的文案，能博得用户会心一笑，就为加载多争取了几秒安全时间。

其次，认真为等待过程配上准确的文案，告知用户他所处的具体处境和阶段，就像排队听到报号一样，离结果更近一步，就对等待下去多了一份坚定。

例如一个很经典的例子——Yummly的新手引导流程中，经过多次偏好选择后，会有一个「体验个性化(Personalizing Your Experience)」的计算过程，加载中，会实时地告诉用户目前处于8个步骤中的哪一步，icon颜色顺时针逐一变化的同时，下方文案会提示用户这一步具体在做什么，比如「正在检测你的时区、正在合并账户信息」等。这让用户感觉到终点并不遥远，进度在自己的掌控之中，并且对当前步骤对自己的价值心里有数。

编者注：更多优秀案例右戳《让等待也成为享受!18个读取进度条的优秀设计案例》

2. 内容秒发

以简书为例，在内容发布类流程中，传统的设计是在点击「发布」后进行模态的发布进度确认，直至监听到完整发布的事件，再进入发布成功的页面。

而微信朋友圈的做法是，无论是点赞、评论还是发布一条朋友圈，都在点击后「瞬间加载」，立刻呈现出假设用户已经发布成功后的状态，无需用户陪同服务器一起等待整个数据传输和返回过程。

当然，留心一下可以发现，这种「假完成」状态下，还没有真正发布成功的朋友圈是无法评论和点赞的。

这一做法让用户很自然地觉得：哇，在朋友圈发东西好流畅!即使这只是一种假象，但就像浏览器加载中的进度条一样，有时用户正是需要这种假象。

相应的风险很容易想到，就是容易出现用户误以为已经发出的内容，实际上没有发送成功。这就要求在采用这种做法的同时，一定要在超时发送失败时，用最醒目的方式告知用户发送失败。

总结

不可逆流程适合采用模态加载，注意要同时提供取消按钮。

已有本地数据的IM、邮箱类应用适合采用标题栏加载，而每次打开都要重新请求数据的页面适用于整屏加载。

Web页面采用浏览器加载，显示迷你进度条，建议先快后慢，可以让等待时间“显得”更短。

除了页面上所有信息一定要整体显示否则会导致歧义的情况，多数情况下递进加载的体验优于整屏加载。先文后图，先占位符后图，先色块后图，先模糊后高清，先“骨骼图”后真实内容……都是可以考虑使用的递进方式。

内容发布类流程可以通过直接呈现发布成功的状态，制造极速发布的“秒发”假象，但记得在失败时醒目地告知用户。

让用户感受到产品用心程度，告知用户所处的具体阶段，都是加载提示符可以贡献的设计价值。

除非有明确的理由，尽量避免在启动时的数据请求中使用模态加载。

iOS规范推荐的空白框架加载是一种很棒的启动加载方式，无论是两步还是三步。但国内环境下，也许独立的启动页在一段时间内仍然是主流。

一个全屏、品牌辨识度极高且不轻易更换的启动页，能最大限度地发挥启动页的价值。在启动体验和品牌曝光的问题上，折中的效果可能未必理想。

欢迎关注作者的微信公众号：西市馒头铺子