1(2)APP设计-加载机制

APP交互流程



APP工作原理

APP的工作原理:用户通过APP(客户端)界面进行操作,客户端将用户的操作请求发送给服务器,服务器接收请求后返回相应的数据返回给客户端,客户端经过组装呈现给用户

通过工作原理,我们可以得知,用户操作完成后,接下来就是等待客户端和服务器的交互处理,不同的内容请求,不同的网络环境,会导致用户有长短不一等待时间,有的可能是不到0.1秒,有的可能要7/8秒,有的甚至无法正常返回数据。这个时候就需要给用户一个良好的体验环境,有效的缓解用户的焦虑心态,否则用户的表情就如下图所示。

加载时间与用户体验

APP加载机制

APP主要有四种加载机制,页面加载、操作加载、下一页加载还是当前页加载、先加载还是先展示,下面针对这四种加载机制做具体说明

页面加载

 1、单页面整体加载

这种加载比较简单,一般运用在页面内容比较单一的情况下,所以直接一次性加载完所有数据后再显示内容。其单页面加载失败的状态相对来说也比较好处理。

2、单页面分块加载

这种方案的特点是,能让用户逐步看到内容,在这个渐进的过程中降低用户的焦虑心理。

其中又可以分为,模块间有关联性的,先加载父内容,再加载子内容。如优酷,先把栏目加载出来,再加载各栏目的内容。

模块间没有绝对关联性的,可独自加载各自模块内容,根据请求的速度不同分别显示。这样处理有一定几率让用户在没完全刷出数据的情况下就能找到自己需要的功能,如大众点评、淘宝客户端等。

框架固定,内容更新的,可先把框架显示出来,再把各模块的数据各自加载显示,如各种iOS自带应用。

这种分模块加载的需要特别注意加载失败的状态,毕竟每个模块都提示加载失败,点击重试是很挫的一件事,可以根据信息的优先级来决定哪些数据失败了采用默认状态,哪些数据采用失败提示。

3、跨页面加载

父页面and子页面 or 同一app内,页面间字段可以复用的,在加载子页面时不需要重新加载新数据。

这种加载方式的特点是,在加载一个页面内容的同时,预测用户的下一步行为,并为他下一步需要使用的页面加载内容,使得他在下一步的操作中能立刻获取信息而不需要加载等待。

4、预加载

预加载提供给用户无缝的产品使用体验,使得用户在使用产品的过程中更直接流畅,没有被打断的感觉。

具体的例子有:

在浏览图集的时候,当看到第一张的图片时,就自动后台加载第二第三第四张图片,用户浏览完第一张图片切换到第二张时就不会有加载等待的过程。

在浏览新闻列表时,就把每篇新闻的内容在后台进行预加载,用户选择看某篇新闻时,能立刻阅读到内容。

但是这种方案也需要面临很多的问题,最直接的就是流量问题,因为会自动跑掉很多用户可能根本用不上的数据流量,所以,一般情况下建议可以设定在wifi环境才采用这种加载模式。又或者设定加载规则,只把主要内容预加载,而部分次要内容可以在用户真的用到的时候才加载,例如预加载新闻正文的情况,可以只加载文本信息,图片信息等到用户进入内页才加载。这种预加载与分块加载结合的方式也普遍运用在各个场景。

另外,预加载也需要时间的,他只是不在客户端显示给用户,默默在后台运作而已,需要特殊考虑未加载完用户就使用到那些信息的情况,所以在做预加载设计时需要同时考虑另一种适合该情况的普通加载方式。

预加载需要根据具体的场景来进行设计,设定好信息优先级,综合考虑各种类型信息的具体大小流量,整体考虑预加载的方式,这些都是需要经过精心分析思考的。

随着网络环境的发展,预加载将成为以后产品普遍的加载方式,他提供给用户的无缝使用体验大大地提升了产品的可用性。

操作加载

除了页面的信息需要加载,页面内的操作也是需要通过给服务器发送请求记录的。

1、加载层

进行一个操作后,弹出模态的提示层,告知用户正在加载。采用模态的提示主要是防止用户在该过程中进行其他操作,导致当前加载出错。由于采用模态的提示,并且有可能因为网络原因导致长时间处于加载状态,建议提供一个“关闭”的操作,终止本次加载,恢复App可用状态。加载失败时可在当前浮层变换为失败提示。模态提示层是最稳妥的方式,但他会使用户在使用过程中有打断的感觉。

2、控件自身加载状态

这种方式是把操作加载的状态与控件的样式结合起来了,对某个控件进行操作后,控件变换为加载状态,此时控件不能重复操作。由于这种加载方式是控件的自身状态,不影响其他操作,所以用户也可以对页面进行其他操作,可能会导致同时有多个请求的情况,增加了加载失败的风险,这也算是这种方式的弊端,不过这种极端情况很少出现。请求失败后,可配合Toast提示告知用户失败的原因。

3、后台加载

用户在操作后,客户端立刻反馈操作成功,然后把请求放到后台与服务器交互,这一过程用户不需要了解,不需要等待,在正常情况体验是非常棒的。

但是在极端情况下会出现一些莫名其妙的状况,由于是后台记录请求并与服务器交互,所以实际请求是否成功客户端是不说明的,全部以操作成功来显示,这就会导致用户误以为操作成功了,但实际上下次来看发现没有成功。

所以,这种加载方式是需要根据具体使用场景来权衡使用的,对于一些重要的操作,建议还是使用模态的方式加载,对于一些小操作,如点赞、订阅、关注,可采用后台加载的方式。

下一页加载还是当前页加载

用户进入首页,正式迈出体验的第一步,接下来迎接的就是基于用户目标的界面间跳转。完成界面的跳转,会有各种加载策略,但无论形式如何,我们都可以将其归为两大类:“下一页加载”、“当前页加载”。

1、“下一页加载”满足了用户提前窥视的需求

我们把页面看成“点”,页面流是连接这些点的“线”,我们以“用户想买一条牛仔裤”这一场景作为案例做了简单的眼动研究,从应用启动到商品浏览再到商品确定最后进入下单页,用户所呈现的瞳孔梯次增大,即E>D>C>B>A,为了解释这一现象,通过与用户交流,我们发现相比于各种浏览,用户更期待看到他们想看到的东西。因此此时的“下一页加载”正好满足了用户提前窥视的需求。

2、Wait!I Need Think Think

我们以同样的方式又对“使用支付宝对手机充值”这一场景做了研究,从开始支付到二次确认支付,用户所呈现的瞳孔都比较大,即A与B近似相等,通过访谈,我们发现与“递增体验流”不同的是,当用户遇到判断逻辑的界面时,用户并非急于想看下一页面到底包含怎样的内容,而是非0即1的验证心态,即我的操作效成功了吗?因此在判断逻辑界面中,用户的内容窥视需求并不强,当然也没什么内容,要么仅是一个小小的Toast,再大一点就是一个简单的信息反馈界面(意味着“下一页加载”在这里就是个鸡肋),用户反而对非0即1的验证需求较为强烈,其中还伴随着等待结果过程中的紧张感、激动感,因此界面通过当前页加载表明系统正在努力地处理用户交代的指令迎合了用户的紧张感、激动感,直到结果显现“处理成功”,完成了非0即1验证的满足感。

先加载还是先展示

当需加载的是功能时,可以先展示再加载,当需加载的是内容时,则先加载再展示。

比如淘宝

打开APP的第一个页面是功能,所以先展示再加载的。

随便点击一个模块(不要点菜单),下面要展示的将要是内容(商品),所以是先加载再展示的,没有加载完都不展示。


先展示再加载


先加载再展示

先展示,后加载:

优点:给用户0等待的错觉

缺点:当前数据有可能是错的,而且得等用户操作到最后一步才会发现

先加载,后展示:

优点:保证数据的质量和准确

缺点:网络不好时,造成等待

显然,功能模块对于一个产品来说是既有固定的,在短时间内几乎不会更新,所以这种数据出现错误或与当前状态不同的几率小得多,因此,可以使用先展示后加载的方式。

另一方面,内容(特别是商品数据)是最容易产生变动的,为了保证每一个消费者看到的数据都是最真实,最准确的,所以务必要先加载再展示。通过当前页面加载表明系统正在努力地处理用户交代的指令迎合了用户的紧张感、激动感,直到结果显现“处理成功”,完成了非0即1验证的满足感。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351