【交互设计-UX/UE】数据加载

数据加载是设计中比较容易忽略并且又比较重要的环节，以一种合适的方式告诉用户正在发生什么，将会发生什么，让用户对于加载后的内容有明确的时间预期，减少用户的等待感，尽可能消除焦躁情绪。

一、6种常见数据加载

1.全屏加载

全屏加载就是整个屏幕白屏进行数据加载，一般会有菊花转或进度条配合，常用于手机网页的加载中，例如列表页进入详情页，图片详情等。（可考虑融入趣味性较强的小动画，增强愉悦感，从用户心理上去缩短等待时间。）

优点：能保证内容的整体性，全部加载完才能够系统化的阅读。

缺点：有非常强烈的等待感，3s以上会产生焦躁情绪，所以在地铁等信号   不好的地方，使用手机网    页获取内容实在是比较灾难的一件事情。

2.优先加载

如果一个页面有图片有文字，可以先把文字都加载出来，保证用户可以有内容可读，然后再加载比较费流量的图片。但是活动页什么的，千万不能把重要信息全部放在图片上，导致加载不出来。这种加载形式更加适用于内容阅读型的APP。

优点：可以帮助用户快速阅读内容，了解信息。

缺点：也许会丢失掉重要的关键信息，无法建立信息获取的闭环。

3.整页加载

当当前页与下一页是整页切换的时候，可以考虑采用整页加载的形式，但是要保证每个页面的数据量不是特别的大。一般适用于宫格图片模式、全屏图片模式、网状详情页模式。

优点：能保证每个页面的完整性，体验比较整体。

缺点：不好保证整页的加载效率，且有可能影响浏览的流畅度。

4.自动加载

可以设定规则，默认加载20条，滚动第20条的时候，自动再加载20条。用这种手法，可以营造一种无极限浏览的错觉，很容易的把用户吸引住，一直向 下滚，一直向下滚。（因为人们受多巴胺的驱动，产生寻求信息的好奇心和热情，不断寻找信息，当我们找到的信息越容易，就越投入其中，这就是为什么当我们看 新闻、逛淘宝、刷微博时总是走不出来的原因）。适用于瀑布流、长列表、商品列表等情况。

优点：把用户代入无尽浏览模式，让用户一直向下滚动，不需要手动点击下一页。

缺点：没有尽头，容易迷失，不方便快速索引定位到某个内容。

5.智能加载

当用户处于WiFi下，不受限于流量和访问速度时，可以放心加载大图、或播放视频，但是如果用户处于非WiFi的模式下（消耗数据流量），则需处理 成小图或者无图模式，视频和动画直接用一个占位符标识就好了，这种根据网络状况，智能调整的加载方式，叫做智能加载。适用于有大量图片或视频的APP，如 电商类、新闻或在线视频类APP。

例 如今日头条在WiFi模式下，图片大图展示，当处于非WiFi模式下时，展示小缩略图，当用户觉得某张图有足够的吸引力时，点击小缩略图加载大图，帮助用 户节省流量。再比如爱奇艺在非WiFi的模式下播放视频时，会提示用户继续播放会产生流量费用，这类设计就比较人性化，也容易让用户产生好感，建户忠诚 度。（用户知道你是在为他着想，毕竟流量还是挺贵的！）

优点：根据具体场景来控制流量和加载速度。

缺点：不一定真实有效的命中用户需求，所以还是需要给予用户一定的查看详情的入口，或者是设置项。

6.离线加载

当用户没网的时候，往往很多功能都不能用了，内容也无法加载出来，导致APP变得根本不可用，这时候就要考虑预加载+离线缓存的设计了。首先在有网 的时候把数据提前加载下来，缓存到本地，当没网的时候，直接加载已经缓存下来的内容。一般会提供给用户选择，是否开启有WiFi的情况下预加载功能，或者 是否开始WiFi下全部离线缓存的功能。这样便可在一定程度上减少地铁上信号时好时差而无法正常使用产品所带来的困扰了。但考虑到手机空间，要设计合适的 离线机制。并配合一定的清理缓存的机制。适用于小说阅读、新闻阅读、视频类APP。 

优点：解决了没网获取数据的问题，且节约了流量，保证了流畅。

缺点：占用本地存储空间，而且有时候预加载的内容根本没有用到。

二、启动页加载

每个APP都有自己特定的启动页，为了给用户营造一个好的第一印象，它所带来的价值也是比较多的，列如烘托情怀、强化品牌、商业广告等，其次产品启 动需要一个过度，要有足够的时间去加载类容，可以让用户感觉你的app非常快，不至于让用户看到空白页面，保证体验上的流畅性。

三、4种减少等待感的设计

1.使用模态加载

尽量使用非模态的加载方式，在加载的过程不打断用户，不需要等待加载完就可以做别的事情的，而不用傻傻等待数据加载完成，大大降低了等待的焦躁感，提升用户体验流畅度。

模态加载：app在触发加载后，出现模态提示层，防止用户在加载过程中进行其他操作，导致当前加载出错。如果采用模态加载，会因为网络原因或内容过多导致长时间处于加载状态，建议提供一个“取消”的操作。同时在安卓中的后退按钮能关闭模态提示。

2. 情感化的加载动画

用户等待加载的过程是相当痛苦的，因为他迫切的想看到页面内容，通过设计一些呆萌可爱的加载动画，让用户在等待的过程中享受动画的愉悦感，让产品情感化，在心理层面上去减少用户的急躁感。

3.进度条提示

如果是时间较长的加载过程，最好能清晰的告知过程进度，让用户有更加明确的知情权，和加载的时间预期。一个非常经典的体验设问，同样是3s的加载时 间，匀速的进度条、先慢后快的进度条、先快后慢的进度条，哪个让用户感觉上最快?经过科学的实验证实，先慢后快的进度条是让用户心理感受上最快的设计。这 是因为用户最容易记住最后一瞬间的感觉，如果最后一瞬间，感知到了快，就觉得顺畅了。

4. 尽量提前加载

尽可能的利用预加载或有WiFi的情况下离线缓存的方式，把内容提前加载下来，这样能做到最大限度的降低加载给用户带来的卡顿感。如果能判断出来用户下一步 要做的事情，提前帮用户加载相应的内容，肯定是最符合需求场景的事情。当我开始读第一页的时候，第二页第三页就开始陆续缓存下来了。

移动互联网的场景多种多样，我们在设计的时候需要考虑各种各样的场景，例如WiFi下、非WiFi下、无网络、又或者说电梯里、地铁上等等。但是咋们的目的也只有一个：优化用户体验，提高商业价值。所以无论设计什么功能模块都应该多考虑一下用户的使用场景。

感谢LIMBO-X的分享~~