人机交互,6种最被BAT认可的加载模式

作为用户体验设计师,不管是产品、交互还是UI,都习惯于站在人机交互的角度去思考产品设计问题,在这个过程中我们往往会忽略了一个重要的过程:数据传输。先看下面这张图。

用户、客户端、服务器

用户与客户端进行人机交互,触发某个操作,客户端会将用户触发的操作转化为相应指令,向服务器请求数据;若网络和服务器正常,服务器会返回数据到客户端,用户便能看到自己操作所引发的结果。整个过程是用户、客户端、服务器一起完成的,人与客户端直接是人机交互研究的领域,而客户端和服务器直接的数据传输更多的是开发人员所考虑的。

1.全屏加载

多出现在H5页面,例如微信的文章详情页。全屏加载的特点是数据一次性加载完成,内容加载完成之前界面都会停留在loading界面。进度条和有趣的动画设计,都会减轻用户等待时的焦虑感。

美团&微信

加载失败后,数据为空,即缺省页面。这里要注意两点,1.在符合产品调性的前提下,可以做的有趣,如下图左侧的美团,右侧微信设计的很简约。2.方便用户进行重新加载。

美团&微信

2.分步加载

当有文字和图片时,图片会比文字加载的慢,这个时候往往文字先加载出来,图片在加载过程中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。

简书&微信读书

3.下拉刷新加载

Twitter当年提出下拉刷新,并被广泛使用,让用户能够手动对当前页面进行更新,加载的loading样式可以做进一步设计,例如QQ将loading动画和下拉手势结合起来,增加了趣味性;豆瓣把loading做成了笑脸,给予了产品人性化的设计。

4.自动加载

当你浏览信息时,不停的向上滑动,新的内容会不停的从底部出现,这种方式称为自动加载。

知乎&same

5.预加载

在线浏览照片时,客户端会自动帮你加载后几张的照片,这样当你滑到下一张就不用再等待,直接能看到下一张照片。如果你发现自己公司的产品每次浏览信息都要加载一次,不妨跟开发人员沟通,是不是可以考虑使用预加载的方式。

6.智能加载

当网络状态不好时,可以考虑加载低质量的图片,当网络良好时,则加载高质量的图片。同理,当检测到用户正在使用蜂窝数据时,则显示占位符而不显示图片,当使用WiFi时则直接加载出图片。

由于存在网速不快,网络异常,服务器异常等情况,让用户等待的情况是必不可少的。但是我们都知道,等待会产生焦虑感,分分钟让用户卸载你的产品,那么我们可以通过哪些手段来降低或缓解用户的焦虑感?

第一:优化App的加载算法,使得App与服务器数据传输的时间减短。这个需要开发人员的精益求精了。这个是从根本上解决了问题,因为直接减少了加载数据的时间,也就减少了用户需要等待的时间。

第二:采用预加载和智能加载的方式。拿阅读App打比方,当用户在看第一页的时候,App在后台加载完后面的几页,等用户翻到第二页的时候就不需要等待加载了,因为App已经帮用户提前加载好了。这种加载机制对用户体验特别好,但是存在一个问题,就是要预测用户行为,加载其他数据,这样会消耗不少流量,所以建议在WiFi网络环境下采取这种预加载机制。

第三:异步处理。这一点做得好的App莫过于Instagram,不知道你有没有发现,用Instagram的时候会觉得特别流畅,即使在网络不好的情况下。这是为什么?因为在网络不好的情况下,你给好友点了赞,Instagram并不会提示你网络不好,操作失败,而是提示你点赞成功了,其实它只是将你点赞的操作记录了下来,等网络一好就将点赞的行为上传到服务器,从而完成点赞行为。

第四:设计有趣的loading动画,如上文介绍的美团APP奔跑的小人,这是提升产品情感的重要手段。

回到文章的开头,作为产品设计人员,不应该把视野局限在人与客户端交互,也要把客户端和服务端之间的数据传输考虑进来,站在用户、客户端和服务器闭环的角度去思考产品,只有这样,才能设计出体验更好的数据加载方案,而不会有失偏颇。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-03-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏架构师之路

58到家通用实时消息平台架构细节(Qcon2016)

2016Qcon北京,业务核心架构场,《58到家通用实时消息平台架构细节》。 一、解决什么问题 + 难点 解决什么业务问题 (1)端到云的实时上报需求:58速运...

3725
来自专栏沃趣科技

备份重于一切:远离“Gitlab删库事件”,QBackup是你的最佳选择!

作者简介:孙朝阳 沃趣科技高级产品经理。 案发现场: Gitlab删库事件回顾 Gitlab是大家很熟悉的开源Git代码托管工具,国内公司大多使用社区版自行搭...

3668
来自专栏腾讯Bugly的专栏

美团大众点评 Hybrid 化建设

导语 上周末,精神哥去参加了好友小青在北京办的T沙龙,探讨移动端热更新相关的话题。Bugly曾为大家介绍过不少腾讯内部的热更新的框架,正好这次看到了美团,去哪儿...

4819
来自专栏腾讯云TStack专栏

腾讯私有云MySQL解决方案—TDSQL

TDSQL是腾讯提供的一套完整的MySQL数据库集群化管理解决方案,作为私有云TStack平台重要的数据库产品能力,旨在解决高可用、高性能、分布式、配套设施等方...

6959
来自专栏网站设计制作、数字营销

企业网站是生成静态页的好还是直接动态网址的网站好?

企业网站现在基本都是采用动态网站制作技术制作的后台,前台网页有的是生成的静态页展现,而有的则是直接动态网址展现,那么企业网站是生成静态页的网站好还是直接用动态网...

580
来自专栏京东技术

JDFlutter | 京东技术中台新一代跨平台开发框架

JDFlutter 是商城共享技术部-多端融合技术部推出的新一代跨平台开发框架,可快速集成至现有 Android/iOS 工程,开发者可借助 JDFlutter...

1.3K4
来自专栏丿King科技-老李博客

关于域名SEO优化的问题 我们该怎么选择

我们都清楚!SEO优化不是单纯的发发外链,要想把网站排名做上去,需要很多过程,那么在这个过程中,网站域名有没有起到一定的作用呢?

1534
来自专栏pangguoming

比较全的OA系统功能模块列表

如何判断一款协同OA软件,是否智能,是否注重细节,是否足够成熟呢?产品的设计优势、功能特性,需要我们总结,也需要让更多的用户了解。功能到底强在哪里?下文中将给出...

1.5K9
来自专栏云加头条

腾讯云“开发者实验室”与“DCDB”产品揽获工信部信通院两大年度奖项

11月17日,由高效运维社区主办的GOPS全球运维大会暨第二届中国运维行业年度盛典隆重召开,全球运维大会也是中国首个专属运维行业的盛会,面向互联网及传统行业的广...

1390
来自专栏腾讯移动品质中心TMQ的专栏

性能自动化充电、断电之痛​——小松鼠的救赎之路

起因 去年刚来公司,我便接手了腾讯LB这款App的性能测试工作。 当时的性能测试的需求是,采集腾讯LB在“前台导航”“后台导航”等数个场景下的...

2289

扫码关注云+社区

领取腾讯云代金券