订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

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

博客 > 投稿文章 > 进度条设计很简单?错错错!

进度条设计很简单?错错错!

UEDetail
2015-08-04
32239

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

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

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

1. 网易云音乐

loading-01

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

2. Vimeo

loading-02

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

3. Transmit

loading-03

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

4. 500px

loading-04

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

5. Mixcloud

loading-05

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

6. YouTube

loading-06

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

7. Look Films

loading-07

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


上一篇
如何在 Mac 上截图的技巧与工具汇总

Mac玩儿法   08/05

想要App做得美,这些UI/UX设计趋势你要知道啊

Medium   08/03

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com