【交互设计-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

相关推荐

  • 交互设计是什么?好学吗? 交互设计_百科,什么是交互设计?

    交互设计(Interaction Design) 作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出,他一开始给它命名为“软面(Soft Face)”,由于这个名字容易…

    交互设计 2015-01-05
  • 双管齐下:同时设计 iOS 和 Android

    不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。 在理想的情况下,我们希望能花上好…

    2016-01-06
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25
  • 2016年网页设计领域11个流行趋势预测

    来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势 ,而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势 会在2016年逐一涌现,但是总体上来说,它依然会沿着2015的大趋势来逐步演变。可以预见到的是,2016年会有更多的网站使用视频背景,更多基于Material Design 风格的界面设计,幻灯片式的界面切换也会继续火热下去。

    2017-05-29
  • 聊聊蒙版引导的应用场景以及设计建议

    蒙版引导一直是一个十分热门的话题,对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导,这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法(观点引自文章“Misused mobile UX patterns”)。但我认为这种说法过于片面,对于一些流程复杂或者功能个性的产品应用,添加蒙版引导进行说明,是十分有必要的。

    2017-05-11
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03
  • 设计方法论:一种统一图标大小的方法

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下。需要注意的是,方法有很多,这只是提供一种可行的方法,可供参考,有什么问题可以留言讨论。

    2017-05-18
  • B2B、企业SaaS中的交互设计总结

    [图片]熊猫设计院关注熊猫设计院发现更多设计好文[图片]译者 / 不器校对 / 熊猫小生作者 / Varun Mohapatra[图片]我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇

    微信热点 2018-04-18
  • 为了色盲用户的友好体验,你应该注意五点

    世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。

    2017-05-05
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07