页面数据加载全解析

发表时间: 2018-12-17 19:17

本文作者详细的跟大家介绍了数据加载的相关知识,一起来文中看看~

在项目进程中,遇到了一个数据加载常见的问题:前端向服务器发送资源请求,服务端在返回数据的过程中,可能会因为网络或者返回路径出错等问题,导致资源没有办法顺畅的在前端进行展示,可能会出现加载延迟或者加载失败。

这时为了保持较好的用户体验,需要给到前端一个加载占位图和加载失败的状态提示。在解决这些问题的过程中,对于数据加载有了更多的认识,并整理了出来。

一、加载的业务场景/触发事件

(1)从后台切回前台(一定时间内)

若切到后台并在很短时间内切回前台(视业务需要而定),则不加载新数据,继续显示原页面和提示框;若时间间隔超过一定值,则需要追加事件刷新当前页面并加载新数据。

(2)启动APP

当异常关闭、应用闪退、进程被杀等情况出现时,点击需要重新启动APP,展示启动页或者直接加载首页。

(3)页面内事件触发加载:用户手动加载、系统自动加载

用户手动加载,一般通过下拉或者点击操作刷新页面,加载新数据;系统自动加载的方式一般为,当前内容已经展示完毕后随即加载并刷新出新的内容。

(4)定时数据刷新

一些排行榜或者限时活动,需要在特定时间进行页面刷新和数据加载。

(5)实时消息推送

IM消息采用实时推送机制,一般不需要用户手动去加载或刷新。

二、如何加载/加载逻辑

(1)懒加载和预加载

  • 懒加载(一般默认使用懒加载):进入页面,再加载数据;
  • 预加载(Wi-Fi情况下考虑使用):预加载数据,再展示页面。

(2)整体加载

加载完页面所有内容后,再展示给用户,可以保证内容的完整性,应用于一些对内容完整性有要求的页面,如购物车。若加载时间过长,需要给予用户一定反馈和提示。

(3)分块加载

可以根据资源类型等进行先后加载,比如资讯类文章优先加载文字,其后加载图片。可以保证用户最快获取内容,但是部门内容由于加载慢可能被用户忽略。

(4)分页加载

对于一些列表或者卡片信息,可以使用自动或者手动的分页加载。这样可以展示比较丰富的内容,但是也对信息的检索带来一定麻烦。

(5)分屏加载

先加载页面框架,页面滚动到哪里再加载相应内容。适用于一些数据量比较大的页面。

(6)智能加载

根据用户的网络状况选择不同的加载方案。非Wi-Fi下,暂不加载图片和文字,用户点击确认后,才加载资源;Wi-Fi情况下,加载所有资源。

(7)Wi-Fi预先加载+读取缓存

Wi-Fi情况下预先加载数据,缓存到本地;在没有网络时,直接读取本地缓存。可以解决无网络时获取数据的问题,节省流量,但是会占用本地存储空间。

三、加载优化

(1)在Wi-Fi条件下,考虑预加载

(2)异步处理

例如:支付宝弱网情况下的扣费处理(客户端告知用户扣费成功并将用户扣费行为记录下来,等待网络环境变好之后再上报服务器并进行扣费操作)。

(3)使用缓存

需要注意存储的数据类型、更新规则、是否要清除缓存、清除规则、用户是否可以手动清除。

四、加载的业务流程设计

(1)主流程

触发事件——(加载逻辑)——页面刷新规则(加载多少数据、展示规则)——刷新出新内容——用户提示文案。

(2)分支流程

没有更多新内容、空页面、页面被删除、页面被限制。

(3)异常流程

网络连接失败、刷新操作过于频繁、网络状态切换、弱网、 服务器崩溃

五、加载的功能流程设计

(1)功能

下拉刷新、点击刷新、系统自动刷新、重新加载按钮。

(2)加载状态展示

网络情况不佳是否有加载占位图、加载进度条(先慢后快)、加载动画、加载成功与失败提示。

六、加载占位图

(1)原理

通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片。

(2)设计原则

a. 加载品牌元素或其他元素(提示可能展现的内容)

优点:给予用户预期,提升品牌感知;缺点:需要适配

b. 加载色块:通过读取图片颜色或默认颜色来占位

优点:适配方便,需提供色库,画面不枯燥;缺点:需要调节颜色

c. 加载布局:简单,但是视觉效果有时不够好

d. 加载默认灰色图

e. 使用高斯模糊:效果炫酷;但是有一定功耗,加载慢

七、启动页/闪屏

(1)使用场景

在点击启动APP图标,到APP首页的出现,是存在一个时间,这个时间的长短取决于设备的性能和网络环境,从几百毫秒到几秒不等。在这段空白时间,为了不让用户感到困惑或因为等待而产生焦虑。

iOS的设计规范规定,要在启动APP时,设计一个启动页,来填补这段用户等待的时间。由于APP启动的过程很短,从几百毫秒到几秒不等,所以启动页也被称为闪屏。

但是,现在的启动页不仅仅应用于这一场景。许多启动页还担负了广告展示、H5活动展示、APP跳转等功能。

(2)设计原则

  • 快速启动类:和首屏页面类似,最大程度减少割裂感
  • 品牌类:提现品牌logo、名称、slogan等元素
  • 情感共鸣:弱化品牌元素,增进情感设计
  • 广告类:启动页展示广告位,流量变现。一般是先显示品牌页,再显示广告页,用户可以选择跳过
  • 节日类:为特定节日量身制作启动页,给用户新鲜感、亲切感
  • 其他:例如成为H5页面、其他APP入口等

(3)业务流程

启动APP——检测本地闪屏资源——-显示闪屏(同时进行登录状态、用户权限、闪屏业务检测)——点击跳转到落地页/直接进入首页。

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

题图来自Unsplash,基于CC0协议