第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

[交互基础]系列之移动端页面加载详解(3)

时间:2017-09-08 10:57来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
场景:信息需要即时刷新,适用于预加载后消耗的流量较少的场景,如信息、消息等。(预加载占网络资源较小的元素如文字,是一种平衡网络流量和流畅

  场景:信息需要即时刷新,适用于预加载后消耗的流量较少的场景,如信息、消息等。(预加载占网络资源较小的元素如文字,是一种平衡网络流量和流畅体验的方法。)

  作用:用户进入下一级界面无需加载过程,给用户流畅的体验。

  缺点:为了换取更好的用户体验,增加服务器前端压力,牺牲了服务器前端性能。假设在非wifi环境下,用户不确定查看的情况下,浪费了流量。

  表现形式:如下图所示,iOS的信息,当用户未查看时,信息详情实际上已经预加载出来了;微信的公众号消息,预加载消息的文字部分及框架,图片部分需联网获取加载。这是考虑到图片本身较大,如果预加载下来,损耗较多流量的同时占本地缓存太大,预加载文字及框架等占网络资源较小的元素,节约流量,也保证了用户在无网/弱网情况下查看消息的体验。

  

[交互基础]系列之移动端页面加载详解

  4.下拉加载

  下拉加载的运用十分广泛,一个优秀的刷新动画可以使加载过程传递出情感化、人性化和品牌化。

  定义:页面下拉,出现加载动画,释放后对页面进行重新加载。

  场景:适用于界面信息会经常更新或变更的情况。(这个场景应该任何应用都有吧。)

  作用:已成为用户习惯的加载方式,方便用户刷新当前页面,获取新数据。

  缺点:非首屏,无法进行该手势操作。

  表现形式:如下图所示,是下拉加载的各种表现形式。当然,一个符合品牌调性的趣味性加载动画更能吸引用户,但一个普通的加载过程可能是产品希望用户更加专注于内容本身。

  

[交互基础]系列之移动端页面加载详解

  5.智能加载

  定义:考虑网络环境、用户流量成本,选择合适的方式去呈现图片、视频、音乐等高流量消耗的资源。例如以下的处理方式:

  在WIFI环境下:优先加载高质量的图片、视频、音乐等。

  在4G环境下:提示是否终止下载行为或自动停止下载行为,优先加载普通甚至停止加载图片、视频、音乐等,并提示用户当前网络环境可能消耗大量流量。

  在弱网环境下:默认加载低质量甚至停止加载图片、视频、音乐等,并提示用户当前网络环境异常。

  场景:适用于有大量图片或视频的应用,如新闻资讯类应用、视频类、直播类的应用。

  作用:根据场景来控制流量消耗,帮助用户避免出现流量非自愿损耗的情况。

  缺点:不一定能准确地满足用户的需求。(土豪不会考虑流量因素。)

  表现形式:如下图所示,需检测用户当前设备的网络环境。非WIFI环境下进入直播间,提示用户当前网络环境观看直播会消耗大量流量;查看今日头条新闻,非WIFI环境下,文章内的图片默认显示缩略图,用户可选择性地显示大图,避免流量消耗过多,WIFI环境下直接显示大图,以保证体验更佳。

  

[交互基础]系列之移动端页面加载详解

  6.缓存加载

  定义:应用从本地数据库获取已缓存的数据,以至在无网/弱网的情况下,用户仍可查看一些内容或使用一些功能。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕