【交互设计-UX/UE】数据加载

数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。

一、6种常见数据加载

1470210931-7795-ggeyzyWVsmZe4DsKFARLlw
1470210930-8551-tvuj7Ev-xEWGgYMgfQhAbQ

1.全屏加载

全屏加载就是整个屏幕白屏进行数据加载,一般会有菊花转或进度条配合,常用于手机网页的加载中,例如列表页进入详情页,图片详情等。(可考虑融入趣味性较强的小动画,增强愉悦感,从用户心理上去缩短等待时间。)1470210935-7967-7YyTplJJSaHU27T06HD9PQ

优点:能保证内容的整体性,全部加载完才能够系统化的阅读。

缺点:有非常强烈的等待感,3s以上会产生焦躁情绪,所以在地铁等信号   不好的地方,使用手机网    页获取内容实在是比较灾难的一件事情。

2.优先加载

如果一个页面有图片有文字,可以先把文字都加载出来,保证用户可以有内容可读,然后再加载比较费流量的图片。但是活动页什么的,千万不能把重要信息全部放在图片上,导致加载不出来。这种加载形式更加适用于内容阅读型的APP。1470210935-9489-666kQpnlz-Jzjt-I6OsEzA

优点:可以帮助用户快速阅读内容,了解信息。

缺点:也许会丢失掉重要的关键信息,无法建立信息获取的闭环。

3.整页加载

当当前页与下一页是整页切换的时候,可以考虑采用整页加载的形式,但是要保证每个页面的数据量不是特别的大。一般适用于宫格图片模式、全屏图片模式、网状详情页模式。

1470210934-3012-GrP-Vc16pQslj-fWl4thAA

优点:能保证每个页面的完整性,体验比较整体。

缺点:不好保证整页的加载效率,且有可能影响浏览的流畅度。

4.自动加载

可以设定规则,默认加载20条,滚动第20条的时候,自动再加载20条。用这种手法,可以营造一种无极限浏览的错觉,很容易的把用户吸引住,一直向 下滚,一直向下滚。(因为人们受多巴胺的驱动,产生寻求信息的好奇心和热情,不断寻找信息,当我们找到的信息越容易,就越投入其中,这就是为什么当我们看 新闻、逛淘宝、刷微博时总是走不出来的原因)。适用于瀑布流、长列表、商品列表等情况。

1470210934-3230-GmvQWpbBj1uG582V5S-Fig

优点:把用户代入无尽浏览模式,让用户一直向下滚动,不需要手动点击下一页。

缺点:没有尽头,容易迷失,不方便快速索引定位到某个内容。

5.智能加载

当用户处于WiFi下,不受限于流量和访问速度时,可以放心加载大图、或播放视频,但是如果用户处于非WiFi的模式下(消耗数据流量),则需处理 成小图或者无图模式,视频和动画直接用一个占位符标识就好了,这种根据网络状况,智能调整的加载方式,叫做智能加载。适用于有大量图片或视频的APP,如 电商类、新闻或在线视频类APP。

1470210939-5830-b6wqh8wsXTUk9vkecPBiTw
例 如今日头条在WiFi模式下,图片大图展示,当处于非WiFi模式下时,展示小缩略图,当用户觉得某张图有足够的吸引力时,点击小缩略图加载大图,帮助用 户节省流量。再比如爱奇艺在非WiFi的模式下播放视频时,会提示用户继续播放会产生流量费用,这类设计就比较人性化,也容易让用户产生好感,建户忠诚 度。(用户知道你是在为他着想,毕竟流量还是挺贵的!)

优点:根据具体场景来控制流量和加载速度。

缺点:不一定真实有效的命中用户需求,所以还是需要给予用户一定的查看详情的入口,或者是设置项。

6.离线加载

当用户没网的时候,往往很多功能都不能用了,内容也无法加载出来,导致APP变得根本不可用,这时候就要考虑预加载+离线缓存的设计了。首先在有网 的时候把数据提前加载下来,缓存到本地,当没网的时候,直接加载已经缓存下来的内容。一般会提供给用户选择,是否开启有WiFi的情况下预加载功能,或者 是否开始WiFi下全部离线缓存的功能。这样便可在一定程度上减少地铁上信号时好时差而无法正常使用产品所带来的困扰了。但考虑到手机空间,要设计合适的 离线机制。并配合一定的清理缓存的机制。适用于小说阅读、新闻阅读、视频类APP。 

1470210937-1984-HXqG01ggbrfE8-k6SFg5-Q

优点:解决了没网获取数据的问题,且节约了流量,保证了流畅。

缺点:占用本地存储空间,而且有时候预加载的内容根本没有用到。

二、启动页加载

每个APP都有自己特定的启动页,为了给用户营造一个好的第一印象,它所带来的价值也是比较多的,列如烘托情怀、强化品牌、商业广告等,其次产品启 动需要一个过度,要有足够的时间去加载类容,可以让用户感觉你的app非常快,不至于让用户看到空白页面,保证体验上的流畅性。

1470210939-4554-tFv0P1BEJdTDS99zasRXPg

三、4种减少等待感的设计

1.使用模态加载

尽量使用非模态的加载方式,在加载的过程不打断用户,不需要等待加载完就可以做别的事情的,而不用傻傻等待数据加载完成,大大降低了等待的焦躁感,提升用户体验流畅度。

1470210940-4967-BAq9QS4Y8G3i6W34CVp14w
模态加载:app在触发加载后,出现模态提示层,防止用户在加载过程中进行其他操作,导致当前加载出错。如果采用模态加载,会因为网络原因或内容过多导致长时间处于加载状态,建议提供一个“取消”的操作。同时在安卓中的后退按钮能关闭模态提示。

2. 情感化的加载动画

用户等待加载的过程是相当痛苦的,因为他迫切的想看到页面内容,通过设计一些呆萌可爱的加载动画,让用户在等待的过程中享受动画的愉悦感,让产品情感化,在心理层面上去减少用户的急躁感。

1470210940-7629-C132BTApaUEqAbQ1lTkIxg

3.进度条提示

如果是时间较长的加载过程,最好能清晰的告知过程进度,让用户有更加明确的知情权,和加载的时间预期。一个非常经典的体验设问,同样是3s的加载时 间,匀速的进度条、先慢后快的进度条、先快后慢的进度条,哪个让用户感觉上最快?经过科学的实验证实,先慢后快的进度条是让用户心理感受上最快的设计。这 是因为用户最容易记住最后一瞬间的感觉,如果最后一瞬间,感知到了快,就觉得顺畅了。

1470210940-3688-9xNzgxQ1tbuYJy8XrxVThQ

4. 尽量提前加载

尽可能的利用预加载或有WiFi的情况下离线缓存的方式,把内容提前加载下来,这样能做到最大限度的降低加载给用户带来的卡顿感。如果能判断出来用户下一步 要做的事情,提前帮用户加载相应的内容,肯定是最符合需求场景的事情。当我开始读第一页的时候,第二页第三页就开始陆续缓存下来了。

移动互联网的场景多种多样,我们在设计的时候需要考虑各种各样的场景,例如WiFi下、非WiFi下、无网络、又或者说电梯里、地铁上等等。但是咋们的目的也只有一个:优化用户体验,提高商业价值。所以无论设计什么功能模块都应该多考虑一下用户的使用场景。

感谢LIMBO-X的分享~~

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16774/

(0)
TinadminTinadmin
上一篇 2016-08-03
下一篇 2016-08-04

相关推荐

  • 从零开始做交互

    书名:《从零开始做交互》 作    者:阿西UED [button title="百度阅读:传送门" url="http://yuedu.baidu.com/ebook/6d8b975a49649b6648d7479d" color="default" size=""/] [button title="网易云课堂:传送门 " u…

    2015-07-02
  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

    2017-08-04
  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • iOS10 交互设计启示

    导读:本文用交互设计的思维对iOS10的新特性进行分析。撇开平时我们考虑的界面排布,页面元素等问题不谈,将视角转移到屏幕外的东西:如时间维度的,空间维度的,手势操作等等,以提升我们的用户体验。本文作者是蘑…

    2017-08-04
  • 未来的汽车用户界面将会让人惊叹

    如果有一天让你来设计汽车?未来的汽车会是什么样的呢?

    2017-05-12
  • 【用户体验】百度贴吧体验升级背后的故事,用户洞察与交互升级

    Alias工业设计点击关注 和工业设计做朋友关注作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的...

    2018-03-03
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • 不要做椅子上的设计师

    事件一:某巨头公司L开会,产品的老大C带头发言:“我觉得吧,用户不会喜欢这个设计、他们……”。相信在各位设计师的工作历程种这种发言都不是第一次听。

    2017-05-28