iOS App中数据加载的6种方式

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

iOS App中数据加载的6种方式

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

一、6种常见的数据加载模式

iOS App中数据加载的6种方式

iOS App中数据加载的6种方式

目前APP设计中,合理的数据加载方式,主要分如下六种:

  • 全屏加载
  • 优先加载
  • 整页加载
  • 自动加载
  • 智能加载
  • 离线加载

这六种方式,适用于不同的需求场景,也适用于不同类型的APP,让我们来一一解读。

全屏加载

全屏加载就是整个屏幕白屏进行数据加载,一般会有菊花转配合,常用于手机网页的加载中。

iOS App中数据加载的6种方式

网易新闻

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

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

一般这种情况会配合有明确进度标识的进度条。

优先加载

如果一个页面有图片有文字,加载图片比较慢的情况下,可以先把文字都加载出来,保证用户可以顺畅阅读,然后再加载比较费流量的图片。如果是用这一种加载方式,活动页什么的,千万不能重要信息全部放在头图上,导致加载不出来。重要操作也不能用图片按钮,否则也会有操作显示不出来的风险。

iOS App中数据加载的6种方式

淘宝

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

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

这种加载形式更加适用于内容阅读型的APP。

整页加载

当当前页与下一页是整页切换的时候,可以考虑采用整页加载的形式,但是要保证每个页面的数据量不是特别的大。

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

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

一般适用于宫格图片模式、全屏图片模式、网状详情页模式。

自动加载

自动加载适用于长列表的情况,可以设定规则,默认加载20条,滚动第20条的时候,自动再加载20条。用这种手法,可以营造一种无极限浏览的错觉,很容易的把用户吸引住,一直向下滚,一直向下滚。

iOS App中数据加载的6种方式

今日头条

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

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

适用于瀑布流、长列表、商品列表等情况。

智能加载

当用户处于WiFi下时,不会受限于流量和访问速度,大可以加载大图片、大图标,甚至直接播放视频动画,但是如果用户处于非WiFi的模式下,则需要差异化的处理成小图或者无图模式,视频和动画直接用一个占位符标识就好了,这种根据网络状况,智能调整的加载方式,叫做智能加载。

iOS App中数据加载的6种方式

淘宝

例如淘宝APP,当网络切换到GPRS或3G的时候,首先会提醒用户网络变化,然后查看商品详情的时候,图片从自动下载,变换成点击加载,并且加载的只是精简版图文详情,防止多图造成的流浪浪费。

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

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

适用于有大量图片或视频的APP,如电商类或在线视频类APP。

离线加载

当用户没网的时候,往往很多功能都不能用了,内容也无法加载出来,导致APP变得根本不可用,这时候就要考虑预加载+离线缓存的设计了。首先在有网的时候把数据提前加载下来,缓存到本地,当没网的时候,直接加载已经缓存下来的内容。一般会提供给用户选择,是否开启有WiFi的情况下预加载功能,或者是否开始WiFi下全部离线缓存的功能。这样就能保证在地铁上,过个隧道就看不了内容的尴尬了。

iOS App中数据加载的6种方式

今日头条

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

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

适用于小说阅读、新闻阅读、视频类APP。

二、4种减少等待感的具体手法

用非模态的加载方式

尽量使用非模态的加载方式,就是加载的过程是不打算用户,不需要等待加载完就可以做别的事情的,如下示意:

iOS App中数据加载的6种方式

用非模态的加载方式,用户可以利用做别的事情,打发等待的时间,而不用傻傻等待数据加载完成,大大降低了等待的焦躁感。即便是模态的加载,也要给一个取消的选项,放在不耐烦的情况下还没法取消。

情趣化的加载动画

加载的过程如此的枯燥乏味,为什么我们不能做点什么让用户觉得好受一点呢?有创意的设计师们设计了各种呆萌可爱的加载动画。

iOS App中数据加载的6种方式

Google的加载动画

iOS App中数据加载的6种方式

Digg的加载动画

这些加载动画让等待的过程变成了一种享受,用户能感受到设计师的情怀,体会新鲜有趣的等待过程。提升了产品情趣化的设计语言,让等待的焦躁感一扫而空。

漫长加载告知进度

如果是时间较长的加载过程,最好能清晰的告知过程进度,这时候就需要采用有进度的加载设计了。

iOS App中数据加载的6种方式

百度

浏览器的进度条是一种较为常见的进度告知设计,通过这个进度告知,让用户有了更加明确的知情权,也能更好的预期到加载完成的时间。但即便是小小的进度条,也有很多的设计技巧在里面。一个非常经典的体验设问,同样是3s的加载时间,匀速的进度条、先慢后快的进度条、先快后慢的进度条,哪个让用户感觉上最快?经过科学的实验证实,先慢后快的进度条是让用户心理感受上最快的设计。这是因为用户最容易记住最后一瞬间的感觉,如果最后一瞬间,感知到了快,就觉得顺畅了。

尽量提前加载

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

最后,不得不说,细微之处见真章,看似不起眼的数据加载,往往都是程序员哥哥一时兴起随便定义的,都含有这么多设计门道,作为体验设计师的你,如果不了解个中奥妙,你是否有足够的信心拍着胸脯说你能对体验负责呢?

总结一下:

6种常见的数据加载模式:

  1. 全屏加载
  2. 优先加载
  3. 整页加载
  4. 自动加载
  5. 智能加载
  6. 离线加载

4种减少等待感的具体手法:

  • 用模态的加载方式
  • 情趣化的加载动画
  • 漫长加载告知进度
  • 尽量提前加载。

 

作者:菜菜_M

原文地址:http://www.jianshu.com/p/3582ee1a0e87#

版权声明:若该文章涉及版权问题,请联系我们主编,QQ:419297645

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

(0)
CatherineCatherine
上一篇 2017-06-02 18:04
下一篇 2017-06-02

相关推荐

  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • 百度高级UI设计师:规范、方法、一致性,真有那么重要?

    本文来自百度用户体验部高级UI设计师大牙的佳作,此文是她对自身工作的一种思考:一个遵从设计规范,按照所谓的系统设计方法,步步推导而来的解决方案,是否真的就是一个好的设计?你的答案是怎样?不妨一起来看看大牙的吧~

    2017-05-02
  • 这就是你们期望得到的:自动抢红包神器

    红包抢到100个,一共10元。

    屏幕:猝~!

    2016-02-03
  • 帮UX新人摸清用户体验设计各岗位的典型特征【UXRen译#172】

      作者:Christian Beck  |  翻译:小蟹,校审:Duke   当我面试刚从学校毕业的准设计师时,我总是问他们:“当你被指派到一个新的项目时,你希望做哪一部分的工作,哪一部分的工作又是你心里祈祷别人会做的?” 众所…

    交互专题 2017-08-07
  • 交互设计不只是解决业务问题

    「解决问题」是很多人对设计的定义归纳,具体到产品/交互设计领域,深入理解业务并提出合适的解决方案也是一项很基础、重要的要求。但对于用户体验/交互设计师来说,我觉得「理解业务」和「解决问题」本身都并不足…

  • 中国交互设计“教父”辛向阳老师首次线上分享会来啦

    应集创堂的邀请,中国交互设计“教父”辛向阳老师将在4月20日为大家带来首次线上分享会!辛老师是卡耐基梅隆大学设计哲学博士,是目前很少数在美国获得设计哲学博士、并首个回到中国内地的华人之一。有着跨多个学科的教育和工作背景,包括机械、建筑、平面设计、油画、交互设计以及艺术史。同时,辛老师还是IXDC(交互设计国际大会)大会主席,提出了“交互设计五要素”和“行为逻辑”等交互设计领域的重要理论和方法,并在香港理工大学成功创办了中国首个交互设计专...

    2018-04-17
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 伦艺交互设计(MA)offer入手,工科出身、完全零基础的她是如何做到的

    对于零基础申请的同学来说,短时间内接触并掌握一个陌生的专业,既需要勇气,又需要决心。这是因为,科班出身的同学申请国外名校尚有难度,更何况是毫无专业基础的同学,过程中遭遇困难、挫折也可想而知。正因为申请难度大,如果能从其他同学的申请过程中吸取成功经验,规避问题,少走弯路,必然会有利于未来申请。本期,简清为同学们请到了拿下伦艺交互设计(Interaction Design Communication)专业offer的L同学,作为一名零基础申...

    2018-04-12
  • 5个突破点,设计更具吸引力的圣诞节Banner及专题页面

    圣诞节即将来临,如何突破固化思维,开阔新的思维,让我们的圣诞节Banner及专题页面设计更有意思更具吸引力呢?不妨跟随作者的脚步,发散下思维,一起来寻找灵感?活动主题:惊艳圣诞Party
    大标题:够红才够女王范儿
    小标题:口红新品/限量发售
    定位分析,先理解一下这个活动要表达的几个意思:
    (1)这是圣诞节活动;
    (2)这是卖口红的圣诞节活动;
    (3)买这只口红的人是梦想自己在圣诞Party上成为最受瞩目的那位女王的人;
    (4)这只口红是新品,谁先买了谁就能抢一步体验当女王的感觉,价格多少是其次;
    (5)买这只口红的人应该是爱玩的年轻少女或少妇,内心是渴望放纵渴望变美渴望变时尚的。

    2017-05-13
  • 我是如何从测试转到产品的?

    为什么我从测试转产品?无论硬件研发还是软件研发,都需要测试工程师找出软件缺陷、保障产品质量,以降低项目风险,我们可能听到过由于某一个漏洞导致公司损失多少钱的例子。而测试的价值就是尽可能早的——发现这些会给公司造成损失的问题,在项目交付前反馈到开发修复。所以测试岗位对于企业来说也至关重要。在做测试时,我一直期望能发挥自己的最大价值,无论是功能性问题还是用户体验问题,我都会一一跟踪。当兼顾项目进度,有些问题来不及修复时,遗留问题我会...

    2018-04-02