不得不看的进度条「再设计」的 7 个典型案例

如果追溯 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 的进度条是由当前视频的每一幅画帧所组成,并且鼠标移入后还可以快速预览当前帧的内容。

动效设计越来越重要,大家可以根据自己的项目情况优化一下自己的项目的动效设计。

转载自:UEDetail 2015.08.04 www.ifanr.com⤴

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/7794/

(0)
iouedioued
上一篇 2015-08-04
下一篇 2015-08-04

相关推荐

  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • Sketch从入门到精通-Sketch3 神奇的测量键

    在做设计的时候经常离不开精准的测量,间距,字体的大小。尤其是在做移动端UI设计的时候,设计完的界面效果图还要输出标注规范给工程师们让他们去实现,这就离不开精准的测量。 在Sketch里面,有个神奇的测量键,你…

    2015-08-28
  • 个性的移动应用引导页设计欣赏

    现在的用户下载app时最先看到的东西就是引导页。一个引导页就像一个导游,它会快速的向用户介绍app本身对用户有什么用处已经该如何操作。这是描述应用本身最简单的方式,但是它的设计却不是那么容易。 一个引导页最…

    2016-04-27
  • 移动APP:2015 UI/UX 趋势,Material design布局未来!

    移动APP:2015 UI/UX 趋势,Material design布局未来! 在国内,移动端的发展远远超过网页,初创公司们想拓展品牌都会首选手机App。那么你知道近期App设计风格的趋势么,想要做出不土、高逼格的App,以下的趋势你是…

    2015-08-04
  • Coolors极简配色推荐

    设计人为本,颜色舒适人眼才不会造成视觉疲劳。 在设计网页的时候难免总会盲目的选择颜色然后加以尝试,难免会造成很多无用功。 对于新手设计师coolors帮了很大的忙。 这是一个超级简单的颜色搭配生成器。 进入的时…

    2015-01-02
  • 昨晚,微软发布了一款设计师神器!业界一片哭声!

    #交互学堂#昨晚,微软又硬了。 发布了一部怪兽,把毒少毒死了。。。 这就是我要的桌面电脑啊!!! 一体机—— surface studio (这是配置:Core i7处理器,GeForce 980M显卡,32GB内存+2TB混合硬盘,3:2 TrueColor…

    2016-10-27
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • 动态响应-应用程序的身体语言设计

    引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

    2014-12-30
  • sktch打造knob开关icon 附sketch破解下载!

    小编:今天带来的是由小乔分享的knob拟物小教程,对于想学习sketch小伙伴们或者已经在用的同学们 练习起来都是不错的选择,当然没有mac用photoshop也是可以能设计出来的哟,快来开动你们的脑筋和动手能力吧!(附sk…

    2015-12-23
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27