联系我们
咨询电话 010-64758810
曹责

曹责

更新于2019 09 26・ UI设计

UI界面中“进度条”的设计原则

说到进度条,大家第一反应都是想到加载进度。那么很明显,对进度条的进行UI设计的主题就是帮助用户消除恐惧心理,对结果有着积极预期。对于我们的目标用户来说,希望也许是最具鼓舞人心能力的动机。

关于进度的概念其实有很多种,最主要的是流程是:找到任务-开始任务-任务进行中-任务结束-反馈,这套流程是范围最大,定义最广的“进度”阐述,用简单的话术表示则是“开始-进行-结束”三步骤。根据任务的使用场景不同,展现方式也都就有所不同。

在接下来文章中,誉财教育将在不同的场景下具体为大家分析“进度条”的设计和注意点,要仔细看哦!

一、签到/完成任务

这种是我们最常见的进度类型。此时的设计重点在于每个任务节点上的奖励或成就的展示。要让用户看到自己的坚持度与完成度,以激励用户。

在一般的任务流程中,用户都很难坚持一直签到或是不断的完成任务,这是因为用户在投入机制后,很难得到即时反馈,所以上瘾的程度也就较小。在这里需要设计足够多的“奖励机制”来不断的刺激用户坚持完成任务的行为。例如KEEP中的跑步等级奖励徽章(从众和虚荣心),虎克网中的任务赚虎克币(奖励诱惑)等等。

二、操作流程

一般常见的信息采集流程展示。清晰的步骤展示与引导流程是设计重点。设计难点在与要把握好用户的耐心与持久度。

这种类型的进度多数是为了让用户了解自己所处的位置,好让用户有掌控感和心理预期,多是用于填写资料这种大量的信息收集界面使用。需要注意的是,web端场景下用户耐心一般比较平和,而手机端就算有步骤展示,太多信息也会让用户失去耐心,从而增加流失率,所以应该尽量避免在手机端进行大量的信息采集,必要时可以采用一些简短的选择器来代替,也不为是一种良策。当前案例全部引导界面的一种,一般都是三个步骤可完成操作。用户在选择了目标、体重等大致信息后则可进入产品主界面。

三、订单/排队/进程跟踪

一般多用于非即时反馈的内容,缓解长时间等待的焦虑心情等使用。

设计重点在于现在等待进度的实时状态,设计师要知道用户对当前状态的了解程度以及可视化认知。

物流和等车都是让人等待的过程,都属于非即时反馈的形式,稍有差错或是进度跟不上就会造成用户的心态爆炸,从而会有投诉等负面情绪的爆发,所以除了清晰的展示用户的等待状态外,技术上的信息实时更新也是很重要的一环,能有预计到达时间是最好的,能给足用户预期,类似菜鸟裹裹的猜包裹到达日期的活动等。在现在的高德、百度地图等软件内,会告诉用户当前等待的车辆距离自身还有几站地,多久,这都是非常好的进程跟踪手段,抚平了用户急躁的心情。

四、抢购/库存/剩余

一般多用于了解储存情况的信息,有可控的整体范围使用。

设计重点在于在已有内容在整体范围占比,或剩余内容的占比展示,需使用户区分清楚重点是已有内容还是剩余内容。

该类进度多是有整体范围的,也就是最大值是有限制的。在抢购、完成任务数量等类似的设计上用的较多,区分好“已有” 、“未有” 的区别,就能满足大多数情况。有时候会遇到需要提高用户警惕性或焦虑感的设计,例如储存空间已满需要清理、抢购库存仅剩几件等等,用警惕色系的设计,可以帮助提升产品目的,或是帮助用户解决优先级较高的内容。

五、下载/安装/loading

一般多用于了解当前进行的任务进度状态。

这里重点要放在缓解用户“等待中焦虑情绪”的设计上,大家可以思考缓解等待焦虑的方式,不能让用户有进度条不再前进的感觉。

loading的进度条很容易找到参考,设计方式也是所有进度中最能体现创意的一种,常规方式的进度条多是”静止“状态的,有些进度条会设计很多其他的动态效果来转移用户的注意力,在不知不觉中将任务进行完毕。

六、播放/收看进度

一般多用于播放器的播放进度展示。

界面播放进度的拖拽交互性是设计重点,而设计难点在于设计需符合手指的点击区域,要注意拖动时的交互反馈。

播放界面进度条主要设计点是在拖拽过程给人的体验,很多音乐播放器做了创新式时间与拖拽点结合的设计,不仅增大了点击区域,也使信息更加集中,减少了占用空间。但会有当前锚点位置所在具体时间的疑惑,但结论上是个进步的交互方式。

最后让誉财为大家总结一下,“进度条”的设计方式多种多样,不同的设计能给人完全不同的体验,其实这也是UI设计师们存在的意义。做UI设计不只是让产品更好看,要结合使用场景和使用人群,多方位考虑科学设计。最好去亲身体验设计,这才是正确的设计方式与流程。之后再通过这些细节来提升产品的转化率,增加产品的趣味度方为良策。

我们通过整合差异化,为客户提供有价值的定制化服务!

有效降低开发运维难度和整体IT成本

立即获取