邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

创意进度条设计-12个优秀作品分享【附实例分析】

Anne 2018-07-10 07:30:08 阅读:15750


本文分享了12个创意进度条设计,多为Dribble上的作品,点击图片即可查看原作品,同时附上了案例分析—蜗牛进度条的设计步骤,希望能对你有帮助。


什么叫进度条?


进度条即计算机在处理任务时,实时的,以图片形式显示处理任务的速度,完成度,剩余未完成任务量的大小,和可能需要处理时间等信息,一般以长方形条状显示,但不局限于“条状”。


进度条的作用:

①帮助用户明确程序正在做什么,是否正常;

②向用户清楚表明当前进度;

③缓解用户等待时的焦虑感。


进度条的分类:从进度条的变化方式来看,可以分为偏静态进度条和偏动态进度条俩类。


偏静态进度条—明确显示当前状态,让用户了解当前状况,并基于此作出后续决策。比如电池电量、电脑磁盘空间的使用情况、游戏中的血量和魔法量等。

偏静态进度条设计


偏动态进度条—在用户等待过程中,动态地显示整个进程的当前状态,并提供相关操作(是否中断等)。只有进程完成后,才能到达用户预期的状态,比如程序初始化的加载过程(游戏的加载过程),资源的下载过程,应用程序的安装过程等。


偏动态进度条设计


进度条的样式


常见的进度条设计样式主要有三种:条形、圆形和不规则形。条形进度条和圆形进度条,形状虽然简单,但如果和企业logo、产品特色、文本、数字或色彩巧妙结合,也可以达到简洁清爽而又不失趣味。


1、条形:

条形进度条设计

此款进度条设计是针对酒水类网站设计的条形加载进度条,设计师结合产品生产流程,并以动画的形式展现出来,让用户不知不觉被动效吸引,忘却等待的时间。而重复的动图,会舒缓我们焦虑的心理,类似于催眠动图。


其他创意类的条形进度条设计:


创意类的条形进度条设计

创意类的条形进度条设计

创意类的条形进度条设计

创意类的条形进度条设计

创意类的条形进度条设计


圆形进度条设计:


圆形进度条设计


在此款圆形进度条设计中,设计师以3条曲线的旋转结合数字的变化,来直观展示当前进程状态。曲线颜色则选取深蓝色的3个相似色,来平复用户在等待过程中可能产生的焦虑感。曲线的旋转设计和数字的快速变化,也可以让用户直观的感受到程序正在后台飞速运转。


在圆形进度条的设计中,可以参考与数值动效的结合,可以便于用户直观的了解当前进程进行到的程度,提升用户体验。

可能给你灵感的其他圆形进度条设计:


圆形进度条设计

圆形进度条设计


其他形状进度条设计:


其他形状进度条设计


此款进度条设计中,设计师在简单图标变化的同时,用数字显示当前进度。logo与数字的巧妙结合,简洁又不失趣味。


在你的设计中,也可以以logo为切入点,在动态展示logo的同时,用数字显示当前进度,更加直观的展示品牌的logo,加深用户印象。品牌的logo可以结合简单的动效,如发光、流体、旋转、色彩 及形状的变化。


其他形状进度条设计


此款进度条设计中,设计师结合产品使用流程,并以动画的形式展现出来,减缓用户在等待过程中可能产生的焦躁感,同时加深用户对产品的理解,甚至对公司的品牌印象。


所以,在你的进度条设计中,也可以结合公司的品牌特色、产品使用流程或者制作流程,动态展示公司文化,减缓用户可能产生的负面情绪的同时,加深品牌知名度。


蜗牛进度条设计实例分析


先看效果

蜗牛进度条设计效果

制作步骤:


①拉两个形状组件出来,分别设置圆角,颜色;


蜗牛进度条设计步骤


②蜗牛对自己做交互,点击时移动,并选择移动方向和动画时长;


蜗牛进度条设计步骤


③蜗牛对两个形状组件做交互,点击时调整尺寸,选择移动方向和动画时长。


蜗牛进度条设计步骤


进度条预览链接:https://run.mockplus.cn/iy6xS8f2jgDRcHUz/index.html


本次进度条设计所用软件为:原型设计工具mockplus


希望这里分享的12个创意进度条设计和案例分析能对你有帮助。加载也是一门技术,如何在加载的过程中让用户有愉悦的体验,你可以看看这篇:《干货!15个最新优质加载动画设计,让等待成为一种享受》。


如果你对启动页设计更感兴趣,那么来瞧瞧《App启动页设计实例和技巧,启动即让人心动》。


原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶