| 整体加载(Native页) |
定义：加载完所有内容后，再展示给用户看 |
|
|
作用：能保证内容的整体性，能系统化的阅读所有内容 |
|
|
交互：显示在页面中央，先显示"加载中toast"，同时客户端拉取数据，全部拉取成功后再隐藏"加载中toast"，如果拉取失败则显示"失败toast" |
|
|
场景：某些重要页面，比如购物车 |
|
|
注意：可能有强烈的等待感，当超过3s后让用户产生焦躁 |
|
|
Toast安卓实现方法链接：https://www.oschina.net/code/snippet_168465_13935 |
|
| 整体加(HTML5页) |
交互：在头部标题栏下显示加载进度条。页面分页或分屏滚动加载 |
|
| 整页加载 |
定义：当前页与下一页是整页切换的时候，可以采用整页加载的形式。 |
|
|
作用：能保证每个页面的完整性，体验比较顺畅。 |
|
|
场景：全屏查看多图 |
|
|
注意：不好保证整页的加载效率，且有可能影响浏览的流畅度。每个页面的数据量不能很大。 |
|
| 优先加载 |
定义：优先客户端／H5显示界面1. 结构框架 2. 文字，3.图 4. 视频 |
|
|
作用：能让用户逐步看到内容，在这个渐进的过程中降低用户的焦虑心理。 |
|
|
场景：多屏并且数据较大的页面，比如h5电商活动页 |
|
|
注意：也许会丢失掉重要的关键信息，无法建立信息获取的闭环。 |
|
| 分页加载(自动) |
分页加载(自动)定义：展示列表数据的时候，比如初始展示20条，滚动到最后的时候自动加载20条。 |
|
|
作用：把用户代入无尽浏览模式，让用户一直向下滚动，不需要手动点击下一页。 |
|
|
场景：列表页，比如Pinterst的首页瀑布流 |
|
|
注意：没有尽头，容易迷失，不方便快速索引定位到某个内容。 |
|
| 分页加载(手动) |
定义：展示列表数据的时候，比如初始分页加载（自动）展示100条，滚动到最后的时候，需要点击再加载20条。 |
|
|
作用：方便快速索引定位到某个内容。 |
|
|
场景：列表页，比如Pinterest的首页瀑布流 |
|
|
注意：需要手动点击下一页。 |
|
| 分屏加载 |
定义：先加载框架和文字，再加载第一屏数据，向下滚动到哪里加载到哪里。 |
|
|
作用：可以帮助用户快速阅读内容。 |
|
|
场景：多屏并且数据较大的页面，比如h5电商活动页 |
|
|
注意：也许会丢失掉重要的关键信息，无法建立信息获取的闭环。 |
|
| 智能加载 |
定义：非WIFI网络下，只加载内容框架以及文字，图片视频等只显示占符。点击占位符，才去获取真实图片。WIFI网络下，初始加载所有资源。 |
|
|
作用：根据具体场景来元件流量和加载速度。 |
|
|
景：数据量比较大的页面，比如优酷的视频详情页 |
|
|
注意：不一定真实有效的命中用户需求。 |
|
| WIFI预先加载 |
定义：有WIFI的时候预先加载常用数据，缓存到本地，当没网的时候，直接加载已经缓存下来的内容。使用了预加载+离线缓存机制。 |
|
|
作用：解决了没网获取数据的问题，且节约了流量。 |
|
|
场景：小说阅读APP、视频类APP。 |
|
|
注意：占用本地存储空间，有时候预加载的内容最后用户没看。 |
|
| 预先加载 |
行为，并为他下一步需要使用的页面加载内容。 |
|
|
作用：预加载提供给用户无缝的产品使用体验，使得用户在使用产品的过程中更直接流畅，没有被打断的感觉。 |
|
|
场景：瀑布流 电商、内容、榜单 |
|
|
注意：预加载需要根据具体的场景来进行设计，设定好信息优先级，综合考虑各种类型信息的具体大小流量，整体考虑预加载的方式 |
|
|
|
|
|
|
