如何设计手机APP的加载刷新策略？

编辑导读：手机APP在使用过程中，经常会遇到需要加载刷新的情况。当用户停留在加载界面时，他们的注意力都集中在这里。我们应该如何设计这个页面？本文作者对此发表了自己的看法，与大家分享。
你好，我是变质的面包。这篇文章有4489个字，我想分享一些手机app的加载和刷新机制。
在本文中，我将从“加载目的”这个维度对加载进行分类，主要分为数据加载和操作流程加载。
1)数据加载
从单个元素到整个页面的所有数据加载。
2)操作流程加载
所有操作的加载过程(提交信息、关注、订阅等。)在应用中。
一、数据加载数据加载可以分为页面缓存和页面缓存两种情况。
可以试着关掉WiFi和4G，再打开淘宝和美团。你会发现他们的主页内容丰富，或者只有少量内容缺失。此时页面的内容就是最后打开的APP缓存的内容。
为了避免空白的情况，APP会缓存数据，这样即使用户网络不好，打开APP也不会出现空白的现象，然后再加载APP连接内容。
这种治疗有两个目的：
首先是改善用户体验，增加流畅感。二是降低用户关闭APP的概率，增加粘性。人的注意力和耐心是有限的。一旦出现空白，网络不畅，用户耐心耗尽的后果就是关闭APP，除非你是微信这样的用户“不得不使用”的产品。那么在网络不好的情况下如何处理缓存和解缓存，用户体验会更好呢？
1.1有缓存。现在大部分应用都缓存了。打开app时，先显示缓存的内容，再加载数据。这个处理的目的前面也提到了：更好的用户体验，更流畅的使用。
加载新内容前显示缓存的Zhihu。
知乎会缓存用户上次浏览的内容，当用户再次打开APP时，会显示上次浏览的内容。
但值得讨论的是，在联网的情况下，知乎的“推荐”和“热门榜”板块以及虎扑Sniff.com的首页新闻并没有自动加载内容，而是用户选择手动加载，而知乎的“关注”板块在进入页面时会自动刷新。
我觉得这里的策略应该是基于用户的习惯。对于‘关注’的内容，既然用户点击了，说明用户希望看到自己关注的内容的最新动态，就像我们每次进入朋友圈，都希望看到朋友圈的最新动态一样。这是人的习惯或者说人性。
刚开始不明白怎么手动刷新热榜，但是切换了很多次标签页才发现。如果我每次切换标签都更新热榜，就会导致这样的情况：我点击热榜，热榜就更新了。这个时候我查了一下单子的内容，我看到了一半。这时候突然想搜一下“怎么瘦”。看完之后，我想看完剩下的热榜。这时候我点开了热门榜。目前在知乎有50个热榜。如果频繁刷新，热榜后半段的内容显示率可能会很低。
除了内容资讯类app，音乐视频也是大缓存。
毕竟这些产品都是靠内容支撑的。一旦没有内容，APP就是空的。
目前网易云音乐利用WiFi环境自动缓存歌曲，让其在没有网络的环境下也能听歌。
通过使用这种方法，我可以听成员只能用我过期的成员帐户听的歌曲，但是一旦我上网.游戏结束.
展示缓存的、没有网络提示就给出的网易云音乐。
1.2没有缓存的场景会比有缓存的场景清爽很多。毕竟手机容量有限，不可能为用户缓存所有内容。
无法通过以下方式加载任何缓存：
白屏加载
白屏加载是指进入界面前没有缓存，进入界面后加载内容。因为没有提前缓存，所以会出现白屏现象。
白屏加载的加载方式有进度条加载和加载动画。
H5页面和浏览器网页一般用进度条加载，APP原生加载一般用加载动画，也就是常见的‘菊花’加载，或者有些APP会制作有趣的加载动画来缓解用户的焦虑，提升品牌曝光度。
浏览器用进度条，美团用菊花。
APP内白屏加载适合界面内容不固定或者内容有限的页面。
1.3分步加载有三种分布加载：
图片前的文字
顾名思义，就是先用小数据加载文字，再用大数据加载图片。
目前包括美团、Get在内的很多应用都包含了这种设计方式，这种加载策略可以大大提高产品的流畅度。
如下图，美团商家详情先加载文字信息，再加载商家地图；并且所获得的课程细节也首先加载有文本信息，然后加载有图片信息。
加载图片前先加载文本。
底部地图
前面一点是关于分步加载，先图片后文字，那么图片加载慢了怎么办？
这时候就可以用下图了。
底部图是加载图片时图片或类似图片的位置位图。
加载顺序为：底图线上图。
图为目前市场上产品广泛使用的加载策略。我觉得几乎每个名副其实的APP都会用这种加载方式。少数产品会直接用色块展示，大部分产品会展示品牌logo。
而36Kr网易新闻的位图直接使用了纯色块，个人倾向于增加品牌曝光度和有趣的logo展示。然而，纯色块的优势在于R & ampd可以不剪图直接写，可以在一定程度上减少页面资源占用。
用纯色块占位置。
骨架屏幕
骨架最初是作为一种在网页上占据空间的方式使用的。通常，它由类似于页面布局的矩形色块显示，现在它被广泛应用于移动应用程序中。
因为是固定的矩形块布局，所以骨架屏更适合页面内容布局相对固定的页面，比如列表页、详情页。
目前已经有相当多的产品应用了骷髅屏，比如知乎、美团、Get、企鹅体育等等。
正在加载骨架屏幕
1.4智能加载智能加载是指根据手机的网络情况选择加载方式。
这种判断方法在流量没那么便宜的情况下尤为重要，不然一不小心看个视频就可能把话费烧掉。虽然现在流量便宜很多，甚至很多人花的比自己每月的流量还多，但是这个小费还是很有必要的。
因为在直播和短视频如此普及的今天，即使用户愿意为流量付费，我们也需要给出提示，防止用户在观看直播和视频时流量耗尽。
不做流量提示，体验不好就会被投诉，用户没有控制感。
毕竟每个人内心其实都有一个想要控制世界的小怪物不是吗？虽然我不能控制世界，但至少我可以控制我的手机流量…
智能加载我调查了目前市面上主流app(主要是视频直播)的处理方式，主要有以下几种：
操作后加载：
适用于应用程序(长视频、音频等。)非即时播放且消耗大量流量的：弹出框和播放区域提示策略1:弹出框提示频率策略供用户选择2:手动点击继续播放再播放。下次用吐司提示(爱奇艺)灯光提示：
适用于即时直播、低流量消耗的应用(直播、微视频等。)形式：吐司提示策略一：一次后吐司提示(印度客户直播、大众点评、今日头条)策略二：每看一个视频/直播(淘宝)就提示一次策略三：自己设置提示次数。个人中心设置允许3G/4G自动播放。1.4.1运行后的负荷。
后加载操作，有一个弹出框提示或用户可以选择提示的数量。
一种形式是弹出提示。
比如懒人听书(听书APP)目前就是这么设计的。用户可以选择自己的播放设置。用户选择今天不提醒后，用户今天听语音也不会被提示。
这种设计对语音产品影响不大，听语音产生的流量比看视频产生的流量少很多。
主动给用户选择权。
另一种形式是播放区域提示：
这种方法主要用在视频产品上，比如优酷视频、QQ、腾讯视频、爱奇艺等视频，或者包含视频板块的app。
由于视频会消耗更多的流量，所以大部分包含视频的app都会做出更强的流量提示。
个人比较欣赏腾讯视频、QQ等提示方式。我们对单个视频做流量统计，点击继续播放，流量数据的展示能给用户最大的安全感。
统计视频流量
当然，这种方式的开发成本并不低，如果资源有限，选择其他方式也无可厚非。
比如爱奇艺、优酷在播放窗口提示。用户选择继续播放后，可以在下次进入界面时使用灯光提示，可以提示用户当前的网络环境，避免每次进入视频页面都要手动选择播放。
提示用户使用当前流量。
1.4.2灯光提示
对于一些直播产品，首选吐司提示，因为这些产品的视频是即时播放的，如果直接打断用户的观看过程就不够好用了。
目前淘宝、映客等直播都采用吐司这种轻量级的提示方式，尽量不打断用户的观看过程。
只做轻量级吐司提示
1.5延迟加载(Lazy Loading)延迟加载也叫延迟加载，是指用户可见的部分第一次加载，然后在用户滑动屏幕的时候再加载。也可以说是按需加载。
其实懒装的目的很好理解。一次加载数据会给服务器造成很大压力，没有必要。按需加载是节省资源的更好方式。
懒加载是当前应用中广泛使用的一种加载方式，尤其是在列表的加载场景中，比如电商app淘宝JD.COM的商品列表、美团的订单列表、新闻列表等等。
拉高以加载更多数据
需要注意的是，交互时需要定义装载数量的规则。在实际工作中，装载数量将根据现场情况定义。
既能让用户负载无感，又能减轻服务器的压力。
一般文本类数据较少的列表可以加载多次，20-50不等，而图文视频类数据较少的列表可以加载多次，一般10-20不等，但还是需要根据场景来定义。
1.6预加载预加载，顾名思义，就是提前帮用户加载，是预测用户行为的意思。预测用户可能会打开某些页面，然后提前加载这些页面的内容，这样用户点击时几乎可以无缝连接，体验会非常好。
缺点也很明显。因为是预测，所以难免用户不一定会点击下一页，导致我们预装的资源白白加载。因此，目前预加载的应用还不够广泛。这里有一些例子来说明。
预装下一级界面内容广泛应用于新闻资讯类产品，如今日头条、虎嗅等。当我进入主页并关闭网络时，我仍然点击进入前两条新闻，我仍然可以看到新闻的文本内容。
这里涉及预加载的加载策略：
预加载下一级页面的前2(或3)条新闻数据。下一级页面只加载文字部分(图片部分可以在进入页面后加载)。目前这是今日头条和虎嗅的处理方式。
二。操作流程加载。我认为在优先级上，操作流程加载比数据加载更重要。数据加载影响体验，但操作流程加载不完善可能会涉及业务流程问题。
举一个提交信息的常见场景：
提交订单时，用户将点击[提交]按钮。点击后，数据将被发送到服务器生成订单。
此时如果网络不好，数据还没有到达服务器，用户再次点击【提交】按钮，数据会提交两次，会生成两个订单。严重的话，用户会赔钱。
但是如果这里的【提交】按钮在提交中增加了一个加载状态，或者在全屏加载中增加了一个加载效果，让用户无法点击，那么用户就无法重复提交数据，重复订单就不会出现。
由此可见，操作过程的加载是多么重要。这部分是新手设计师最容易忽略的地方。他们往往等到产品测试后甚至上线出现问题才修改，给别人留下不专业的印象，给用户造成很大损失。
我总结了以下三种常见的操作流程加载形式：
2.1模态加载在数据加载这一章中提到了白屏加载包括模态加载，模态加载通常是通过一个加载动画来显示的。
在加载过程中，用户不能进行其他操作，最大程度上保证了单向流动。
这里所说的模态加载是数据提交的‘加载’的一种状态表示，用户提交数据后不能进行其他操作。
这里需要注意的是，需要保留【返回】按钮。
万一用户由于网络不好或其他问题而处于无限加载状态，他仍然可以依靠返回来结束当前的加载。否则，用户只能通过“杀死”后台来关闭APP，这是极其糟糕的体验。
提交期间的模态加载
2.2加载控件本身最常见的方式是按钮的“加载”状态。大多数情况下网络好的时候我们甚至看不到这种状态，但是真的很重要。
与全屏模态加载相比，按钮加载的一个缺点是用户可能会更改其他部分的数据。虽然概率极小，但为了保险起见，最好只对涉及到钱的课程使用模态加载。
提交期间按钮加载
2.3后台加载后台加载是指用户操作后，客户端立即反馈操作成功，然后将请求放到后台与服务器进行交互。
比如常见的点赞、收藏等操作，当我们点击后会发现状态马上发生变化，然后在后台与服务器进行交互。虽然操作失败可能会导致收藏失败，但失败与成功概率相比微不足道，更何况及时的反馈可以大大提升用户体验。
比如美团商家的详情，当网络状态调整为3G时，我点击【关注】按钮，它会立刻变成【关注】。
再典型的例子就是朋友的赞，即使网络关闭了，你依然可以喜欢。
首先更改状态，然后处理交互。
本文由@馊面包原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。