解析|移动应用数据加载的三层策略与模式

2017年09月05日 人人都是产品经理



作者:王雪峰

全文共 3543 字,阅读需要 8 分钟


—— BEGIN ——


一、研究问题的方式


组合使用技术、交互和界面策略来解决具体问题及目标


用全面的思考来做出更好的决策,这三个层次的思考永远是相关的。


本文通过讲解这三个层次的常用策略,希望能驱动你更好的决策。


二、技术策略


因为加载的本质是通信的过程(此处只涉及数据传输,不涉及系统底层进程,但是原理相同),例如有些游戏进度条加载时会提示「加载不消耗流量」,此时的加载属于系统硬件加载,没有产生数据通信,所以暂不考虑。


1. 同步加载


(1)什么是同步?


我们来讲一个小朋友的故事:


有一天大雄正在学校做数学作业(当前任务),有个特别强壮的同学胖虎走了过来,把作业本猛的丢到大雄桌子上叫到「先把我的做完,我就在这看着你!」(收到同步任务),大雄对比了一下身型差距,敢怒不敢言,只好先拿过胖虎的作业本开始做(中断当前任务,开始处理同步任务),直到做完了胖虎的作业,很不情愿的交给胖虎(返还任务数据),等到胖虎美滋滋的走掉了,大雄才开始继续做自己的(继续之前的任务)。


这个持强凌弱的故事就和同步的原理类似:


同步加载请求执行某一任务,直至该请求返回数据之前,请求端什么也不干就在旁边等待。这种方式类似产品开发流程中的瀑布模型,产品设计之后才能交付开发,开发完成之后才能交付测试。


还有某些应用,有新版本更新时弹出一个模态提醒(一种必须操作的提醒样式),点击「更新」之后就在模态提醒内下载,此时不能返回不能退出也不能进行任何操作,除非你杀死应用进程。


(2)为什么用同步加载?


  • 即时性,加载完成/失败会立即得到反馈结果,上下步操作关联性强

  • 技术上更易于实现,避免了异步加载产生的各种资源利用和同步问题(比如在客户端更改某属性值,因为网络延迟,服务器没有收到更改消息,而客户端显示已经更改成功,于是去请求了其它数据产生错误。PS:真实情况要复杂得多)


(3)同步加载适用情况


  • 登录注册,提交订单,上传资料等下一步操作与当前操作相关的情况,俗称顺序操作(例如登陆之后才能发帖)

  • 扫码支付,修改重要资料等获得操作结果特别重要的情况

  • 产品开发资源不足的情况,程序猿开发异步是要工时的(乱加需求是要被打的哈哈)


2. 异步加载


(1)什么是异步?


回到刚才的故事:


大雄被人欺负心里很苦闷,晚上回家找到正在吃鱼的哆啦A梦,对它说「能不能给我做个道具收拾胖虎,等你做好叫我一声」(收到异步任务),然后就去做别的事情了,哆啦A梦抬头看看他继续吃鱼(继续之前任务),而大雄就等着什么时候收到道具收拾胖虎了(等待返还任务数据)。


异步加载在发送信息之后,继续执行下一步操作,等什么时候收到请求的信息,再进行处理。


举个不太恰当的例子,异步加载就相当于产品开发流程中的敏捷开发,现在可以研发工作和测试工作交叉进行了(同时开展,完成不同任务)。


在同步加载小节更新应用的例子里就是:


点击「更新」之后,下载任务跑到后台下载去了,你依旧可以在应用里随便玩,终于不怕突然点错什么卡住啦。


(2)为什么用异步加载


  • 有效的提升用户体验,界面跳转动画和异步加载会让用户觉得反馈很灵敏,增强操作的流畅度,避免用户被阻塞在等待界面产生负(bao)面(zao)情绪,但是操作之间关联性差,若异步处理不好容易让用户产生疑惑

  • 如果同步加载速度太慢,很可能会长时间停留在加载界面,让人欲罢不能(不过现在有些应用已经开始提供同步加载时的用户出口)


(3)异步加载适用情况


  • 只要不涉及重要资料和顺序操作的数据加载都适合异步加载

  • 大量图片/视频的页面

  • 大量item的列表页

  • 涉及大量数据计算的页面

  • 体量庞大的H5页面


3. 回调


(1)什么是回调?


简单来讲,就是你给别人发个邮件,他处理完之后给你回邮件,回邮件的过程就是回调。


微信登录就是典型的回调过程,在你的应用里点击微信登陆,然后调用微信,微信授权成功之后,再回调登录成功的信息给你的应用,你的应用就知道「噢,他登录成功了」。


(2)回调的意义


回调是异步实现的基础,回调实现了应用间数据传输,服务器和客户端之间的主动数据交互等。


在此就不多说了,在数据加载这里我们就按同步异步来讲就好。


三、交互策略


此处要注重强调一下,不同的交互策略运用了不同的技术策略,这是两个维度,并不是简单的一对一关系,要学会配合使用。


1. 启动页加载


同步加载时的常用策略是:加载完某些数据才能进入应用,适合对某些关键数据进行检查;例如检查用户身份信息,此种策略为了保证一些关键数据的可控性。


异步加载的常用策略是:进入应用内在加载使用的数据,例如进入应用再刷新首页,这种策略为了提高进入应用的速度。


2. 当前页加载


大部分都是的同步加载,要在当前页面完成数据加载,才能进入下一页面。网不好?那就在这呆着吧(; ̄ェ ̄)。


不过一般会在加载期间显示一些小动画,例如小菊花,来减缓用户等待的阻塞感= =。


在APP里,一般加载失败留在当前页面;而在H5页面里,一般加载失败,页面为空或报错。


3. 下一页加载


为保证用户体验,现在大多数应用都采用下一页面加载策略,毕竟在当前页面卡住和在下一页面卡住是两种不同的感受哦,用户心理如是也-_-#;


而且网络差导致页面加载过慢时,在下一页加载能一定程度上转移仇恨。


让用户感觉进不去界面是因为网络或者其它原因,而我们(APP)可是在很努力的帮他加载呢,千万不要怪我们呦~


敲黑板:「下一页加载不等同于异步加载」


(1)白屏加载


这种就是下一页加载的同步加载版本,一进入页面出现一个大白屏,直到加载完成一次性显示全部页面。


(2)分步加载


一般我们说的分布加载都是异步加载,但是异步加载不是分布加载,要分清楚包含关系呦~


  • 分布加载一般先加载占网络资源小的元素,随后再加载图片、视频等占大量网络资源的元素,这种方式多用在大量图片/视频的页面

  • 另一种形式是先加载页面的框架,然后再加载框架里的内容,这种方式多用在页面元素有层级关系的页面(例如嵌套),可以保证页面打开后显示的格式可控

  • 还有一种形式是加载固定数量的item,现在有大量内容的列表页面的产品,在Feed流页面普遍使用分布加载,来保证用户流量和阅读体验的平衡


(3)延迟加载


有些内容不是界面初始化的时候就需要的,可能在用户下一步操作(例如上滑页面)的时候才会出现的,而这些内容又占用很多的网络资源(比如图片、视频)这时就使用到延迟加载的策略,延迟加载也属于分步加载。


例如淘宝,用户浏览时只加载当前屏幕的图片,直至上滑界面使新的图片进入可视区域时,才会加载新图片,这样可以节省用户流量,同时保证用户操作的可用性。


(4)预加载


我们和延迟加载对比一下:延迟加载是进入可视区域后才会加载,预加载就是在进入可视区域前加载。


预加载是一种在节省流量和流畅体验二者中向流畅性优化的例子,理想情况下是使用户感觉不到内容的加载过程,滑到哪就能看到哪。


5. 智能加载


断网或弱网时,缓存加载策略能有效提升用户体验,在页面中显示之前缓存在本地的内容,使页面不至于出现大白屏或者错误代码等。


6. 渐进加载


傅立叶变换的实际应用,主要用于高清图片的加载,在传输大图的过程中,先显示一个模糊效果,随着下载数据的增多,逐渐精细图片的细节,形成一个平滑的加载过程(形成平滑的用户体验),最终变成完整分辨率的清晰图片。


渐进式加载要预先处理图片和优化应用支持,这有点麻烦,所以有一些替代方案的尝试,举例如下:


  • 微信的加载方式:先显示一个小图/缩略图,随后加载完成大图/高清图再显示大图;

  • 传统的加载方式:图片从上至下/从左至右显示完成,类似打印机逐行扫描;


四、界面策略


在UI设计里,关于数据加载的表现形式千变万化,具体处理方式总结起来大概有以下几种。


诺,你看


1. 状态栏加载



2. 导航栏加载



3. 白屏加载



简单粗暴你看是不是?


4. Toast加载



5. 进度条加载



6. 下拉刷新加载



额外提一下,细腻的下拉动画是包含下拉加载、释放加载、正在加载三种状态的呦~


7. 页面上滑加载



8. 全屏加载



白屏加载的变种,加入了用户体验的优化,别说效果就是不一样,在解决问题上的每一点探索都值得尊重,所以我单独把它列为一类(启动应用加载也属于全屏加载)


五、策略组合


如果能看到这里,你一定对技术、交互、和UI三个层面的数据加载解决方案有了大致的了解。


非常重要的是:在实际设计中,这三个层次的解决方案是互相交叉组合来匹配具体的应用场景的,使用不同的策略优势互补,配合解决复杂问题,其目的都是为了更好的用户体验或完善业务逻辑。


此处就先不讨论具体策略组合来解决场景问题的方案了,希望正在看文章的你也能思考思考,有哪些有意思的策略组合,解决了复杂场景的问题,可以留言我们一起讨论交流~


本文从技术、交互、UI三个角度梳理了移动应用数据加载的常见设计模式。


但是大家一定要记住:模式只是一些比较成熟的解决方案,在实际设计中不要被模式约束,也不要滥用模式;要深入剖析每个设计模式是在什么环境下为解决什么问题而设计的,明确问题环境的约束,找到合适的妥协点,完成你自己的设计。


关于用户体验:文内多次提到用户体验,但是因为涉及篇幅太多,而且本篇文章不打算深入聊用户体验,所以没有深入讲解,请见谅。


如果您有什么意见或疑惑欢迎来与我交流,微信号「ijokul」,希望在产品的路上大家能共同进步。


—— END ——


作者:王雪峰,工业设计转产品经理,奋斗在创业IT公司,擅长用设计思维思考产品问题。

本文由 @王雪峰 原创发布于人人都是产品经理。未经许可,禁止转载

点击“阅读原文”下载APP


收藏 已赞