loading页的交互、技术及硬件平台

目录:

1. 交互:异常处理清晰,减少用户焦虑

2. 技术:明确加载方式,规划离线体验

3. 硬件&平台:负载均衡,分配合理


一、交互:异常处理清晰,减少用户焦虑

        异常提示:网络异常(信号减弱、间断、丢失);

        Loading:加载动画(启动动效、下拉刷星、上拉加载、换页加载)、进度条(H5加载速度、下载&上传加载进度)、仿真内容和占位符、Toast.

1. 网络异常

1.1. 情景:

        信号间断或丢失:wifi从室内到室外,wifi切换成流量模式,中途的切换间隔造成信号简短;开启飞行模式或者手机停机造成信号丢失。

        信号减弱:天气、地理位置变化,或进入电梯等都可能出现信号减弱的现象。

1.2. 提示:信号的强弱用户感知的可能性较弱,明确给出网络异常提示是有必要的。减少用户探索过程,减少用户焦虑的情形。

2. LOADING

2.1. 情景:信号不稳定是对图片、视频或音乐的加载时间较长,在这种情况下,考虑在这种间隙向用户展示什么内容减少等待的枯燥,减少用户的丢失率。

2.2. 解决办法:加载动画,进度条,仿真内容和占位符与Toast

2.2.1. 加载动画:分散用户等待的注意力

加载动画的使用场景:启动页加载、页面局部加载、下拉刷新加载、页面上拉加载、切换新页面数据加载。

具体:产品策划阶段,设计自定义加载的动画样式和场景,一般使用品牌形象或者品牌色生成的动效来代替系统动效。动效多用于设备启动、连接到网络或者加载数据,是为了告知用户页面正在加载或者刷新中,洋场等待时间,避免让用户缠身该页面打开失败的错觉。如:滑稽动画,勾起用户好奇心。

备注:加载动效不要过度设计页不要过度使用。保证动效大小,繁重复杂的动效可能对APP页面打开速度有影响,增加设备承载负担,对性能有很大考验。

2.2.2. 进度条:传递给用户时间感知

加载H5,上传文件等,用户会因无法预知加载时间长短而感到烦躁。给用户一个清晰的等待时间,让用户盯着一个下载进度条会让跳出率降低。

进度条可以传递给用户时间的感知,大概能判断这个过程需要花费多长时间,一般不强调准确性。

产品策划:开始时让速度显示得快一点,在结尾的时候,显示速度慢点,隐藏过程中的延迟。中途不间断,否则用户会认为这个加载或者上传过程中卡住了。如:迅雷的管用伎俩。99%及剩下的百分之一。

2.2.3.仿真内容和占位符:异步加载媒体前进入视觉中心。

如果无法缩短加载时间,那么应该试图让用户在等待中更高兴一点,可以利用加载时间显示一些临时信息,可以使用模拟内容作为文本和图片。

如:简书。

如果要加载图片,你可以首先加载一个小型的模糊图片,然后转化成一个清晰的大图片。使用占位图和仿真内容并没有加快加载过程,但是在用户眼中加载速度好像变快了。

加载框架。

当页面的框架固定时,只需要加载框架内数据时,采用这种刷新样式,即先加载框架,再加载框架内的数据。为了反之框架内的内容为空,会用占位符或者预设图片来填充。

2.2.4. Toast

Toast提示一般在使用过程中为环节用户等待焦虑,在规定时间内,出现加载失败或者网络连接失败时,给出的提示,起告知作用。

异常发生时长、toast显示时长、显示的内容、位置,根据实际情况自行定义,一切以用户方便为主。

Toast

个人认为Toast并不是用户友好的提示方式。

二、技术:明确加载方式,规划离线体验。

全局:

        1. 明确加载方式:量化加载时长,加载场景。

        2. 优化记载算法:明确页面预处理、异步处理加载方式。

        3. 规划离线体验:定义缓存机制,异常处理机制(规范化,可传承)

2.1.明确加载方式,量化加载时长和场景

APP加载方式:全屏加载、优先加载、整页加载、自动加载、智能加载、离线加载六种方式

加载方式

2.2.优化加载算法

优化加载算法使得APP与服务器交互数据的时间简短,直接减少了加载数据的时间,减少了用户需要等待的时间,从根本上解决了问题。

优化加载算法


技术优化点

tips:通常前后端一起考虑,几个优化放大混合使用,需视具体场景来定义。

3. 规划离线体验:定义缓机制,异常处理机制

离线体验

当用户无法连接wifi或者其他网络信号时,用户使用APP时仍然能有极佳的可用性。缓存常用来存储频繁调用的数据,当缓存后的数据再次被调用时,就可以由缓存直接提供数据,提高数据的响应速度。在规划App应用时,应该将这一设计方法考虑其中,提前规划好App在离线状态下的运营模式。

常用的策划方式:wifi环境下大量加载用户可能使用的数据,保证用户在短时间内的浏览流畅性,定期自动删除。用户在无网络情况下上传数据,可以先保存数据至本地,进入wifi或流量环境下自动上传。

三、硬件&平台:负载均衡,分配合理

在硬件支持上,要能满足数据快速提取需求,还能承受用户高并发情况下集中请求的压力,不让服务器崩掉就对啦。常见的优化固件的做法:图片&视频存第三方(如七牛)、拓服务器、拓带宽……

摘抄自:http://www.woshipm.com/pd/573704.html

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

推荐阅读更多精彩内容