小纽扣
幸运28 )整理归类了10中加载类型在不同场景下的使用。根据产品的类型、页面类型甚至服务器的限制来选择合适的加载方式,为了让用户体验更流畅,可以组合使用加载模式。

 

目录:

一、为什么需要加载
二、常见的加载场景
三、加载的10种类型和分析
四、总结
 

一、为什么需要加载?

1 、给用户反馈

在上篇《尼尔森10大可用性原则》中我们说过,系统应该通过在合理时间内适当反馈,向用户通知当前的状态。

加载其实就是一种反馈

——让用户知道产品正在响应操作,同时通过一些加载的设计形式,吸引用户注意力,减缓用户等待的焦虑。

 

2、 防止用户跳失

0-0.3秒内的响应基本上是及时的;

0.3-1秒时用户已经能够察觉到延迟了。

幸运28当遇到页面内信息内存过大或者网络状况不好时,加载时间通常会比较长,我们就需要针对不同的情况设计不同的加载方式。

幸运28否则,当加载时长超过3秒时(参考谷歌2017年《消费者行为文档》),53%的用户会选择离开;加载超过5秒就会有74%的用户离开(腾讯娱乐的《移动端行为报告·第一期》H5)。

 

 

二、加载常见的应用场景

移动端的加载常见场景有:

幸运28APP启动、界面跳转、上拉加载后续内容、下拉刷新、

浏览信息(文字、图片、视频)、下载内容、操作反馈(提交、付款)

……

当然这些只是通用的场景,不同类型的产品加载场景肯定会有差别的,在实际工作中,我们需要和开发、数据人员一起去梳理这些加载时间过长的页面,排查原因(操作系统层面的问题?服务器的问题?),如果暂时无法解决的,或者不可控的网络问题,就需要通过加载的设计来缓解用户等待时的焦虑,降低用户的跳失率。

 

三、加载的10种类型和分析

我们常见到的大部分的加载都是非模态加载

 

1、启动加载

因为APP的启动需要一个过程,所以会通过启动页来吸引用户的注意力。

幸运28启动加载的常见表现形式有品牌启动页、广告页(外部广告or内部运营活动)。启动页大部分是静态的,也可以是动态的,比如腾讯视频就是动态的品牌启动。

幸运28品牌页和广告页启动可以单独存在,也可以同时存在,比如考拉,此时通常品牌页在前,广告页在后,广告页需要有跳过按钮。

 

2、占位图加载

先加载页面布局和占位图,等到后台数据加载完成后,再加载页面的细节内容(文字、图片)。占位图通常以色块形式呈现,图片类占位通常为图片icon或者产品logo。

幸运28这种方式适合页面布局比较固定的页面,此时需要注意的是,如果页面布局进行了改版,就需要对占位图进行对应的更新。

幸运28有次我们全线品牌升级之后,把APP图标进行了更新,但是后来测试时发现,商品的占位图仍然为旧版的logo……

优点:减少用户心理等待时间,体验比较流畅

应用:适合页面布局比较固定的页面,比如简书、facebook

 

3、分步加载

此时会优先加载内存较小的元素,通常是先加载出文字、图标等最后加载图片、视频幸运28。图片视频类资源也是逐步加载出来的。

幸运28优点:即时响应,用户能够先看到部分内容

幸运28应用:一般用于图片/视频类资源比较多的页面

 

4、预加载

提前加载后续内容幸运28,当用户需要查看时可直接从本地缓存中渲染。

浏览A页面时,系统自动加载出B页面,用户无需等待,体验比较好,但是服务器的负很大大。

比如头条,在幸运28浏览时,我们尝试断掉网,打开浏览过的任意一个新闻的详情页,可以看到它已经把这些新闻的文字内容都加载好了

优点:使用流畅、无需等待页面跳转

缺点:服务器负担重

幸运28应用:适用于服务器配置高的产品;且下个页面内容是确定的

 

5、渐入加载

图片出来的时候,预先呈现出与图片较为相似的色彩值,或者高斯模糊的图片,直到图片加载完全,会有种渐入的效果。

幸运28优点:相比分步加载更加直观、色彩感强

应用:一般用于图片类产品,比如谷歌的搜图、pinterest、unsplash

 

6、懒加载

当页面内容丰富,图片数量多,而且比较大时,通常会使用懒加载的方式。通常应用于feed流上拉加载后续内容。

 

可视区加载

仅加载用户可视区域,一般会在距下面内容一定距离时开始加载,这样能保证用户拉下时正好能看到内容,这个主要由监控滚动条来实现。能给用户一种无缝衔接的感觉,比如网易新闻

幸运28优点:无需用户操作,自动加载后续内容,营造沉浸式体验。

应用:适合feed流、列表、算法推荐类的内容

 

手动加载

手动加载意味着用户操作后才能触发幸运28的加载,比如点击加载更多、上拉加载更多。

幸运28优点:比较节约用户流量,服务器负担也小

幸运28缺点:浏览时每次都需要手动进行加载,打断用户阅读流

幸运28应用:比较适合服务器配置有限的产品

 

7、下拉刷新加载

下拉刷新可以让用户在看到本地数据的同时加载新数据幸运28。下拉动画能够给用户惊喜,下拉加载一般分为两种形式:

 

动画加文字:

文字通常表示状态,如腾讯动漫下拉刷新:正在连接漫星球——哔哔,连接成功

纯动画:

幸运28常规为刷新小圈圈,也有很多产品用展示品牌形象相关的动画,比如下图美团的刷新动画。

幸运28优点:刷新动画可以自由设计;展示品牌形象

应用:适合页面内容为推荐类、或者信息更新频次高的产品;不适合固定内容的页面。比如微信的聊天页面下拉是小程序,支付宝的下拉刷新在页面中间。

 

8、全屏加载

全屏加载顾名思义就是整个页面的内容一同加载幸运28,页面内容全部加载出来,或者全部都加载不出来。此时页面通常为空白页,会通过进度指示器(小菊花或者进度条)来表示进度。

幸运28也有很多产品使用品牌形象,以及各种创意动画来吸引用户的注意力,缓解用户焦虑。

幸运28优点:将整个页面的内容都加载出来才展现给用户,能够保证整个页面的完整性。

缺点:看不到页面内容,等待的时间较长。

应用:新页面的内容不确定时;各种H5页面。

 

9、智能加载

智能加载是根据不同的网络状况来加载不同的内容,比如在Wi-Fi等网络环境较好的情况下,自动加载内容会直接加载高质量的图片、音频、视频等信息。

而流量模式下或者网速较差时,只加载文字或者小图。

幸运28优点:能根据用户的网络环境进行对应的加载,用户体验较好;

缺点:采用的方式并不一定是用户想要的。(所以很多产品支持自定义智能加载模式,比如头条、搜狗浏览器

应用:适合大量视频、图片信息的产品。

当然,随着带宽、流量的扩增,用流量观看视频对很多用户已经不再是问题了,所以目前许多产品只是在观看时提醒用户——当前为移动网络,比如抖音和爱奇艺

除了上面的9种以外,还有以模态弹框形式呈现的加载。

 

10、模态弹框加载

模态加载会阻断用户,此时用户不能进行其他操作,用户只能等待加载结束。通常用于旧命令正在处理中幸运28,当前不允许你再修改请求。比如支付中、微信发红包;

除此之外,当客户端向服务器请求信息、还没有收到服务器的数据时,也会用模态加载来表达“后台正在工作,马上好了,先别走哦~”

幸运28优点:引起用户重视,防止用户进行其他操作

缺点:打断用户的行为

应用:适合下一步的操作与当前操作关联性强的、属于同一个流程的。或者和其他加载方式结合,当网络状况不好或者页面请求数据未到达时,吸引用户注意,防止跳失。

 

四、总结

本文总结了10种加载的类型,以及分析了其优缺点和应用场景。一起来回顾一下~

我们需要考虑到产品的类型、页面的类型、甚至服务器的限制,来选用合适的加载方式。当然,用什么加载方式并不是一个单选题,为了让用户体验更流畅,很多产品会根据场景组合使用这些加载方式

幸运28比如pinterest一开始为全屏加载,请求到数据后,开始分步加载出页面,页面继续往下滑到第二屏第三屏,采用的是懒加载。

 

参考:
1、The consumer behaviors shaping the next generation of mobile experiences:https://www.thinkwithgoogle.com/advertising-channels/mobile-marketing/consumer-behavior-mobile-digital-experiences/
2、腾讯娱乐《移动页面用户行为报告》:https://www.digitaling.com/company/articles/11462
3、懒加载和预加载:https://www.jianshu.com/p/4876a4fe7731
4、选择合适的加载方式,减少用户的等待:https://mp.weixin.qq.com/s/IOqznxow8tr-rnIK5ZHq_Q
 
原文地址:(公众号)
作者:白鹭漫谈

转载请注明:幸运28 » 交互基础:加载的10种类型和应用场景分析

登录收藏
 
你可能喜欢的:
AI时代下的求职服务设计|58智能求职助手交互设计总结AI时代下的求职服务设计|58智能求职助手交互设计总结
交互七大定律的理解与应用——菲茨定律交互七大定律的理解与应用——菲茨定律
视觉设计如何体现交互逻辑视觉设计如何体现交互逻辑
微交互:移动端APP页面跳转方式分析微交互:移动端APP页面跳转方式分析
放置类AR体验框架和设计建议 (下篇)放置类AR体验框架和设计建议 (下篇)
放置类AR体验框架和设计建议 (上篇)放置类AR体验框架和设计建议 (上篇)
一文读懂最全语音交互设计流程一文读懂最全语音交互设计流程
交互原型设计基础交互原型设计基础
语音交互如何测试与评估?语音交互如何测试与评估?
如何设计微交互创建出色用户体验方案如何设计微交互创建出色用户体验方案
文章评论
 2分快3——2分快3骗局-2分快3外挂 六合秒秒——六合秒秒计划-六合秒秒开奖 2分六合——2分六合走势图-2分六合代理 一分六合——一分六合单双-一分六合大小 大发快3——大发快3分析-大发快3遗漏 五分快3——五分快3官网-五分快3彩票