不得不看的进度条「再设计」的 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

相关推荐

  • 关注 Web 设计

    相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。

    2015-01-03
  • 刷爆设计师朋友圈的年度音乐《射鸡师》

    喂?有空吗?帮我做个设计!
    哎,先做几个方案看看。
    对对对,下班前给我!
    纳尼?!还要钱?
    一曲《射鸡师》道出了设计师们的心酸,点击下面音乐,一起来倾听设计师的心声。

    2016-02-03
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 2016年天猫双11首波品牌海报出街,49张张张惊艳!

    日前,2016年天猫#双11狂欢夜#晚会将于11月10日晚上8点在深圳大运中心体育馆举办的消息已经宣布了,超级碗、奥斯卡、美国偶像的总导演David Hill将会担任此次晚会总导演,感觉会是一场掀起惊涛骇浪的视听盛宴。 狂…

    2016-10-18
  • 交互密度与最小交互区域

    体验优秀的App之所以优秀,往往是因为他们能让用户快速访问到各项功能。这里就涉及到多点触摸的交互密度,一个较大的触摸区域,在常规操作下十分好用。 或许对于一些用户来说,触控区域的大区块,视觉上可能有点难…

    2016-06-08
  • 苹果也中枪!拿什么拯救尴尬的UI界面?(一)

    你是否体验过死气沉沉的交互界面?或者你又是否曾感到自己设计的UI界面总是缺了点什么?如果你经历过上述的情况,那么你应该就体验过“尴尬”的UI界面。收下这篇全是干货的文章,拯救你的尴尬症! “尴尬”的UI界面就好…

    UI设计 2015-09-17
  • APP动画交互设计-让你的APP动起来吧!

    交互设计是指设计人和产品或服务互动的一种机制, 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品。图标的交互设计过程是设计的一大重要部分。

    2015-01-26
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08
  • Material Design 官方演示视频

    [button type="primary" text="Material DesignPDF 中文手册下载地址" url="https://www.iamue.com/7512" open_new_tab="true"]  

    Material Design 2015-08-07
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13