马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 运营思维 > App运营 > App界面常用的数据加载设计和技术

App界面常用的数据加载设计和技术

时间:2015-09-11   文章来源:马海祥博客   访问次数:

设计师在进行APP设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。

那么,我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?

App界面常用的数据加载设计和技术-马海祥博客

今天,我就借助马海祥博客的平台跟大家介绍6种常见的加载模式设计和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

一、APP常见的数据加载模式

目前APP设计中,合理的数据加载方式,主要分如下六种:1.全屏加载 2.优先加载 3.整页加载 4.自动加载 5.智能加载 6.离线加载,这六种方式,适用于不同的需求场景,也适用于不同类型的APP,在此,马海祥就同各位一起来一一解读。

App界面常用的数据加载设计和技术-马海祥博客

1、全屏加载

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

App界面常用的数据加载设计和技术-马海祥博客

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

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

对此,马海祥建议:一般这种情况会配合有明确进度标识的进度条。

2、优先加载

如果一个页面有图片有文字,加载图片比较慢的情况下,可以先把文字都加载出来,保证用户可以顺畅阅读,然后再加载比较费流量的图片(具体可查看马海祥博客《实现网页图片预加载效果的3种技术方法》的相关介绍)。

App界面常用的数据加载设计和技术-马海祥博客

如果是用这一种加载方式,活动页什么的,千万不能重要信息全部放在头图上,导致加载不出来,重要操作也不能用图片按钮,否则也会有操作显示不出来的风险。

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

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

在马海祥看来,这种加载形式更加适用于内容阅读型的APP。

3、整页加载

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

App界面常用的数据加载设计和技术-马海祥博客

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

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

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

4、自动加载

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

App界面常用的数据加载设计和技术-马海祥博客

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

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

在马海祥看来,这种加载形式适用于瀑布流、长列表、商品列表等情况。

5、智能加载

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

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

App界面常用的数据加载设计和技术-马海祥博客

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

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

在马海祥看来,这种加载形式适用于有大量图片或视频的APP,如电商类或在线视频类APP。

6、离线加载

当用户没网的时候,往往很多功能都不能用了,内容也无法加载出来,导致APP变得根本不可用,这时候就要考虑预加载+离线缓存的设计了(具体可查看马海祥博客《交互设计的三大隐形机制:加载、刷新和缓存》的相关介绍)。

首先在有网的时候把数据提前加载下来,缓存到本地,当没网的时候,直接加载已经缓存下来的内容,一般会提供给用户选择,是否开启有WiFi的情况下预加载功能,或者是否开始WiFi下全部离线缓存的功能,这样就能保证在地铁上,过个隧道就看不了内容的尴尬了。

App界面常用的数据加载设计和技术-马海祥博客

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

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

在马海祥看来,这种加载形式适用于小说阅读、新闻阅读、视频类APP。

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

都说一个好的交互设计的评判标准之一是“别让我等”,但互联网产品总是受制于实际的网络问题,移动端产品则更为明显,2G、3G环境下加载不够给力,wifi环境也未必每次都是那么顺利,因此“别让我等”更像是种奢望,我们倒应该思考的是“如何优雅而不令人烦躁的等”,与之最直接关联的就是APP加载页面的设计。

1、用非模态的加载方式

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

App界面常用的数据加载设计和技术-马海祥博客

用非模态的加载方式,用户可以利用做别的事情,打发等待的时间,而不用傻傻等待数据加载完成,大大降低了等待的焦躁感,即便是模态的加载,也要给一个取消的选项,放在不耐烦的情况下还没法取消(具体可查看马海祥博客《移动端网站提升页面加载性能的优化技巧》的相关介绍)。

2、情趣化的加载动画

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

App界面常用的数据加载设计和技术-马海祥博客

App界面常用的数据加载设计和技术-马海祥博客

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

3、漫长加载告知进度

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

App界面常用的数据加载设计和技术-马海祥博客

浏览器的进度条是一种较为常见的进度告知设计,通过这个进度告知,让用户有了更加明确的知情权,也能更好的预期到加载完成的时间。

但即便是小小的进度条,也有很多的设计技巧在里面,一个非常经典的体验设问,同样是3s的加载时间,匀速的进度条、先慢后快的进度条、先快后慢的进度条,哪个让用户感觉上最快?经过科学的实验证实,马海祥发现先慢后快的进度条是让用户心理感受上最快的设计,这是因为用户最容易记住最后一瞬间的感觉,如果最后一瞬间,感知到了快,就觉得顺畅了。

4、尽量提前加载

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

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

马海祥博客点评:

移动APP产品的信息都是通过页面来承载或加载的,同时APP页面的加载方案设计是交互设计师和移动产品经理需要面对的一个重要的课题,良好的移动APP加载页面设计对于APP来说是非常重要的,直接影响用户的体验和APP的转化率问题。

总之,避免显示无关内容,尽可能让启动画面变得简洁有意义,毕竟在打开APP的那么几秒时间内,对于用户来说,他们希望立即体验你的应用程序而不是欣赏一些无用信息,比如植入广告,就是非常讨厌的行为,同时也是致命的。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/App/1286.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: app   app技术  

上一篇:企业该如何通过APP营销树立品牌
下一篇:详解APP从设计到切图的工作流程

您可能还会对以下这些文章感兴趣!

  • APP常用的推广方法

    受渠道集中化和市场竞争的激烈化的影响,现在的APP推广越来越难,推广和开发又不一样,开发一个APP比较简单,招聘几个技术员画个设计图几个月就能上线了,虽然累点,但是产品一上线,对技术同学们来说,工作就算完成了一大半,而推广则不一样,推广是一个慢慢积累的过程……【查看全文

    阅读:1934关键词: app   app推广   日期:2015-10-06
  • 免费App平台是如何赚钱盈利的?

    近日,微信朋友圈惊现的信息流广告,再度掀起了用户对App内移动广告的大讨论,当然,这其中也有声音在说,“广告就广告了呗,人家都免费为几亿用户提供服务了”,众多周知,大多数App都是免费的,而且它们靠广告赚钱,但当细化到如何通过广告盈利时,不仅仅用户,有时候……【查看全文

    阅读:23630关键词: app平台   app   赚钱   日期:2015-01-23
  • 详解APP应用分发平台的榜单推荐和搜索排名规则

    APP是英文Application的简称,由于iPhone等智能手机的流行,APP指智能手机的第三方应用程序。一开始APP只是作为一种第三方应用的合作形式参与到互联网商业活动中去的,随着互联网越来越开放化,APP作为一种萌生与iphone的盈利模式开始被更多的互联网商业大亨看重,如淘宝开放……【查看全文

    阅读:8167关键词: APP应用   APP分发平台   APP榜单   APP推荐   搜索排名规则   日期:2014-03-11
  • App Store应用商店的最新最全审核规则

    App Store模式的意义在于为第三方软件的提供者提供了方便而又高效的一个软件销售平台,成为第三方软件的提供者参与其中的积极性空前高涨,适应了手机用户们对个性化软件的需求,从而使得手机软件业开始进入了一个高速、良性发展的轨道,是苹果公司把App Store这样的一个……【查看全文

    阅读:863关键词: app   app应用   app商店   日期:2016-01-11
  • 运营新手该如何找到APP产品运营的要点

    在我们运营一款新的APP或产品时,通常会遇到的一个问题就是找不到运营这款产品的出发点,于是,有些人经常会用一些传统的手法进行无效的运营,盲目无知的运营手段不仅不能吸引用户,同时还会出现反向效应。出现这种情况的运营是因为你并不了解产品,也不太懂产品的价值究……【查看全文

    阅读:210关键词: 运营新手   app产品   app运营   app   日期:2019-01-11
  • 如何成功打造一个3亿用户的App产品

    一直以来,很多过亿App的产品都是大家争相曝光的对象,也是大家认为最为成功的产品,但是在曝光的过程中,很少会有人说到是怎么推广出来的,大多把用户数的增长归功于产品,偶尔说到推广的时候,也只是只言片语,不敢说太多,这是因为推广方法是很多产品成功的核心秘密……【查看全文

    阅读:4311关键词: app用户   app产品   app   日期:2014-12-02
  • APP消息推送的误区与真相

    APP消息推送指的是APP开发者通过第三方工具将自己想要推的消息推送给用户,让用户被动的接收。如今的手机每天都会被各种App的消息推送覆盖,消息推送也成了APP增加自己曝光量的一种重要手段,消息推送的技术也日渐成熟,各种平台纷纷出现,抢占这一业务。根据数据表明……【查看全文

    阅读:523关键词: app   app消息   app推送   日期:2016-12-06
  • App运营必须关注的5个数据指标

    现在的App开发已经进入到了必须靠推广运营才能上位的时代,有用户不代表什么,有活跃度、有留存率只稍表欣慰,看到真金白银才会喜上眉梢,毕竟最近最火的是游戏应用,它们才是捞到钱的新晋金主,但是它们赚到钱都是有过程的,各位开发者从开发到运营过程中都应该一步一……【查看全文

    阅读:6395关键词: App运营   App数据   App指标   日期:2014-06-12
  • 构建APP消息Push推送通知策略详解

    随着互联网的发展,手机容量的不断增加,用户安装的APP也越来越多,通常情况下,除了微信、支付宝等强需求高频的APP之外,绝大部分APP每天只是静静的躺在手机桌面的小角落里,被动的等待用户唤醒。我们可以发现Push消息推送则确实是激活用户打开APP的不二之选,也是挽留……【查看全文

    阅读:1593关键词: app   app消息   app推送   app策略   日期:2017-03-15
  • 史上最全的APP推广模式及方法技巧

    APP推广的重要性对APP的运营来说是不言而喻,首先要清楚的一点是,不同的APP适用于不同的推广方法,并没有哪一种APP推广方法是能够做到真正意义上的放之四海皆准的,而在所有的APP推广方法中,最重要的当属应用市场了,对任何一款APP而言,应用商店不仅是他们的基础,……【查看全文

    阅读:11054关键词: app推广   推广模式   推广方法   推广技巧   app   日期:2015-05-23
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

一个完整的企业网站首页应该具备什么因素? 如何利用极客精神优化网站的网络组件和代码