浅谈用户交互“加载、刷新与反馈”的常见使用类型和方法

用户交互_加载

这里所说的加载是指:启动app时文件、信息或数据的载入。




一、启动加载

在启动APP时需要一段时间来完成数据请求,通常我们会使用启动页来完成这一过程的过渡。


二、内容页加载

内容页加载氛围“当前页加载”和“新页面加载”两类;

0-1s,无需任何加载;

1-10s,需要明确的加载提示;加载动画、反馈提示语等手段进行提示,告知用户程序正在处理,安心使用;

10s+,需要含完成进度的加载提示,告知用户当前已完成进度和剩余内容。

1、当前页加载

即模态加载,通常适用于需要判断的情况,在当前页面通过toast请求并提示进行中状态,成功后进入到新页面;

2、新页面加载

不需要做任何处理和判断的情况下打开新页面,在完成这一页面内容的加载,体验更加流程;

注意:在此状态下需要区分原生、H5类型,调用不同的载入方式。

加载的同时可以使用分步加载形式,先加载模块和文字,后加载图片和视频等;需搭配加载动画完成;

在应用使用过程中,出现最多的就是页面之间的相互切换;切换页面后,通常有一个数据请求的过程,为降低这一过程中用户等待的混淆和沮丧感;需要进行加载页面的动态效果设计;以下我们针对原生应用及H5页面分别进行了区分。

2.1、原生载入方式

原生载入方式在数据请求较大(通常超过1s)或启动应用后首次载入各产品线时使用

2.2、H5载入方式

原生调用H5时,先打开H5页面在请求加载;通过进度条形式提示该页面内容正在加载中;

调用H5时,本流程之内的页面再此容器内加载;本流程之外的h5可继续打开新容器。


三、分页加载

页面不变,只在当前页面显示更多内容;

采用自动加载形式,优先加载20条数据,加载到第20条时自动加载接下来的20条;




用户交互_刷新

刷新机制也是设计师很容易忽略的问题,合理的刷新机制能让产品使用起来更流畅;通常我们使用最多的刷新分别为手势刷新、点击刷新和自动刷新。


一、下拉刷新

使用最多的是内容模块的下拉刷新;

刷新的步骤分为:

1、下拉刷新器至指定位置

2、到达指定位置后,提示释放可进行刷新

3、释放手势后提示当前正处于刷新状态


1.1、刷新类型


1.2、刷新过程


二、点击刷新

通过点击一个按钮达到刷新数据的目的,但是如今在移动端的设计过程中,刷新按钮的使用场景并不多见;使用较为普遍的是存在于一场页面当中,如出错、加载失败等搭配刷新按钮的使用会让异常的状态重新激活。


三、自动刷新

根据设定好的规则,如时间、事件规则自动向服务器获取新数据并替换旧数据。使用自动刷新需要根据场景来考虑是否合适

场景一   

对于频繁更新的内容、有时效性的内容,用户在一个设定的时间没有使用,则可考虑在下次使用时,自动刷新,把新的内容推送给用户

类似微博、新闻这种具有时效性的产品,用户在24小时内未打开产品,则在下次打开时帮用户自动更新Timeline

场景二   

对于一个相对稳定,数据不会经常变化的页面,可以考虑设定时间规则,在后台为用户默默更新数据并替换旧数据等




用户交互_反馈

反馈是产品设计中非常重要的一个环节,它的存在与否会极大的影响用户的体验,帮助用户随时感知系统的状态,满足用户的控制感,消减不确定性给用户带来的负面情绪;

反馈从涵盖范围上来说可以分为两种:操作反馈与用户反馈。


1.1、加载反馈

提示器反馈的主题是操作行为,即某一操作发起后,前台对表单的判断及提交后后台返回的结果;

针对操作场景的特性,我们提出2类反馈形式

toast反馈和对话框反馈

(1)异常,表单判断异常

表单判断信息异常,通过“!”的形式进行警告,提示用户出错位置;该toast出现3s后淡出,文案控制在4-16字之间,若文案文案大于该区间,则调用1阶基础对话框来完成该项报错。

(2)异常,服务器返回错误

服务器返回异常,通过“x”的形式进行通知,提示用户出错原因;该toast出现3s后淡出,文案控制在4-16字之间,若文案文案大于该区间,则调用1阶基础或2阶基础对话框来完成该项报错及解决方案。

(3)正常

正常状态的反馈需要结合实际使用场景来决定是否需要;

例1:我们在走一项独立流程时,在完成最后一步操作且无结果页时需要将当前结果状态通过toast形式告知用户后退出该页面。

例2:在同一流程中若非最终操作,加载完毕后进入下一页面时,则无需提示操作成功,直接进入下一级页面即可。

注:通常,成功状态文案表示当前操作任务成功即可,如支付成功,订阅成功等;

但需要注意的是逆向操作不可使用此方法,如“取消成功”可采用“操作成功”来描述。

1.2、刷新反馈

在刷新后,toast反馈会以另一种形式进行反馈;此类反馈针对正常/异常进行了微弱的区分,但整体操作方式一致;该toast出现3s后淡出,文案控制在4-16字之间,表示成功/失败状态或具体化的文案描述。

1.3、页面反馈

与提示器相比,页面反馈的主体是操作流程,更像是一个流程的终端站;我们在完成某一项任务达到最终状态时,进入到某一完成页面,如支付成功页、交易完成页等…

1.4、标签反馈

标签反馈常用于多字断的填写,主要用于表单,用户录入信息的过程可逐行进行校验提示;

标签反馈常用于pc端,此处不做过多说明。

1.5、动效反馈

动画也可以用来完成反馈,这里的动画特指的是功能性动画。动画的合理使用可以吸引用户的注意力,因为人类都是视觉动物,在app和网页中,小动画对我们来说像是眼睛的甜点一样,我们会不自觉的被它们吸引。


1.6、声音反馈

声音是经常受到设计师忽视的一个反馈方式,但是是我们接触最早的。我们之前打电话按键,每按一下就会发出“滴”的声响,告诉用户按键成功。


1.7、元件反馈

元件是我们使用应用中操作最多的项目,一个按钮、一行列表以及一个有效的触区,在我们进行操作时,通常需设计其默认、按下以及禁用三个状态;操作时与用户进行互动,表示其发出的反馈;

此处不做过多注释,后续元件中会专门列出各效果说明。

注:第二是用户反馈,暂不在此做解析...




总结

以上为本次针对“加载、刷新、反馈”做出的归类和总结;

在整理公司移动端交互规范指南时,突发奇想发篇文章与大家进行交流;如有不足,还请各位看官加以指正;

后续小编将持续更新关于交互设计指南用户交互章节的相关设计要点。

注:图片资源来源于网络,设计资料内容来自于个人的相关看法及一些相关资料的总结。

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

推荐阅读更多精彩内容

  • 用户交互_引导 引导,可以让用户在短时间内快速了解产品的特色及使用方式,轻松上手去体验产品的功能,完成自己的目标。...
    九天来仪箫阅读 1,770评论 3 5
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 1. 总有那么几天,我整个人都不在状态。 每天都感觉懒洋洋的,窝在沙发上或者床上不想动。平时那种打鸡血的状态跑到九...
    陈陈读书阅读 419评论 1 3
  • 标题可能有点混乱,一定有好多人以为我是一个情窦初开的妹子或者一个饱经沧桑的妇人,我要跟大聊一聊爱情。其实,我只是想...
    艾Mi倪阅读 365评论 2 1
  • 今天有收获,收获还挺大的,我感觉管理真的是一件很有意思的事情,每个人的性格,做事情的方式都有差异,真的很难做到整齐...
    哈维斯特收获教育阅读 149评论 0 0