陌北默

如果追溯 Progress bar「进度条」的原型,通常被认为起源于 Henry Gantt 所提出的「甘特图」。用图形方式来表示某种项目的活动顺序和持续时间是甘特图的核心思想。

后来甘特图的概念被广泛用于计算领域,随着计算机技术的崛起逐渐演变并存在于各种形态中。它的作用只有一个,那就是让用户知道某任务并没有失去响应,并告知其完成的时间,而这个概念的视觉产物便是我们今天早已司空见惯的各种进度指示条。

如今的互联网技术为许多早前的传统做法提供了「再设计」的可能,所谓「再设计」就是通过各种技术与设计的创新在完成基本功能的前提下赋予其更多的新特性或效果。比如前篇《这不只是一个按钮!》中所提到的对于按钮的设计,而本期为大家带来的 7 个案例可以说是对于进度条「再设计」的典型,enjoy : )

1.

progress-bar-design

网易云音乐客户端中的进度条不仅仅可以用来提示播放进度,它拖柄同时还集成了「播放」和「暂?!沟墓δ?。

2.

progress-bar-design 2

Vimeo 的视频上传进度条的动画巧妙的将代表自身品牌识别度的 UI 设计融入其中,非常赞。

3.

progress-bar-design3

Transmit 中的进度条被设计为双重形态,浅色表示当前任务进度,而深色表示总任务进度。

4.

progress-bar-design4

500px 的照片上传进度会根据完成度的百分比显示不同色彩,初始阶段为黄色,进度过半为绿色。

5.

progress-bar-design5

Mixcloud 的播放进度条可在拖动时快速预览并定位当前所播节目中包含的分段内容。

6.

progress-bar-design6

YouTube 中 60 分钟时长以上的视频可以通过上拉进度条的方式进行更加精确的播放定位。

7.

progress-bar-design7

Look Films 的进度条是由当前视频的每一幅画帧所组成,并且鼠标移入后还可以快速预览当前帧的内容。

更多细节设计请访问 uedetail.com,也可关注新浪微博 @uedetail 与我交流。

文章来源:UEDetail

作者:UEDetail

转载请注明:学UI网—UI设计师学习教程平台 » 进度条设计很简单?错错错!

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
版画语言在广告设计中的运用版画语言在广告设计中的运用
浅谈影响用户的行为浅谈影响用户的行为
界面设计 ≠ 屏幕设计界面设计 ≠ 屏幕设计
优秀设计师:设计中的故事思维优秀设计师:设计中的故事思维
腾讯设计师!给路边摊暖心大变样~腾讯设计师!给路边摊暖心大变样~
阿里设计师带你探讨UxD设计是什么?阿里设计师带你探讨UxD设计是什么?
你掉进过“心理账户”的坑么?你掉进过“心理账户”的坑么?
云计算交互设计师的必备知识!云计算交互设计师的必备知识!
如何才能做到原创?如何才能做到原创?
?