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

相关推荐

  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 手机界面设计:人机交互界面设计的五大原则

    出色的用户界面应该遵循人性化的设计原则,基于用户的思维和工作模式,而不是移动设备的功能和特点。若是界面不吸引人、逻辑不合理,再伟大的应用程序也不会受到用户的青睐的,但是一个漂亮的、吸引人的UI界面不仅…

    2015-04-30
  • 负空间海报设计分享

    小编话:负空间是什么?简单来说,负空间就是物体之间的空间。我们之前有欣赏过负空间的LOGO设计,今天给大家分享的是由cndesign分享的负空间风格的海报设计。在排版构图与设计时都能成为一个不错的参考,enjoy! …

    2015-01-22
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

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

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

    2014-12-30
  • 字体设计之字体性取向

    小编话:无论你是UI设计师还是平面设计师或是其他,在做设计时对字体的运用一定是多之又多的。有时候也会因为把握不好字体而使整个画面达不到自己预期的效果。今天给大家带来由alipayifed分享的字体设计之字的性取…

    2015-01-22
  • Sketch从入门到精通-Sketch3 复制旋转功能的运用

    复制旋转功能是一个算是很特别很好玩的一个功能,当你需要对一个图形重复旋转的时候,如果手动调一定会有偏差,这个时候就需要复制旋转功能来实现,在菜单栏中进入图层 — 路径 ­­— 复制旋转 (Layer > Paths >…

    2015-08-03
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

    今天更新了一下sketch measure的插件,下面说一下都更新了哪些地方 1.新的UI界面 友好的ui界面使你标记起来更加便捷,新界面是不是看起来更加专业了许多,视觉上更加直观 2.输出出口 自动生成HTML的样式,而不仅仅…

    Sketch 2016-07-25
  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29