进度条设计很简单?错错错!
xsobi 2024-12-09 18:24 1 浏览
如果追溯 Progress bar「进度条」的原型，通常被认为起源于 Henry Gantt 所提出的「甘特图」。用图形方式来表示某种项目的活动顺序和持续时间是甘特图的核心思想。
后来甘特图的概念被广泛用于计算领域，随着计算机技术的崛起逐渐演变并存在于各种形态中。它的作用只有一个，那就是让用户知道某任务并没有失去响应，并告知其完成的时间，而这个概念的视觉产物便是我们今天早已司空见惯的各种进度指示条。
如今的互联网技术为许多早前的传统做法提供了「再设计」的可能，所谓「再设计」就是通过各种技术与设计的创新在完成基本功能的前提下赋予其更多的新特性或效果。比如前篇《大哥，这真的不只是一个按钮》中所提到的对于按钮的设计，而本期为大家带来的 7 个案例可以说是对于进度条「再设计」的典型，enjoy
1. 网易云音乐
网易云音乐客户端中的进度条不仅仅可以用来提示播放进度，它拖柄同时还集成了「播放」和「暂停」的功能。
2. Vimeo
Vimeo 的视频上传进度条的动画巧妙的将代表自身品牌识别度的 UI 设计融入其中，非常赞。
3. Transmit
Transmit 中的进度条被设计为双重形态，浅色表示当前任务进度，而深色表示总任务进度。
4. 500px
500px 的照片上传进度会根据完成度的百分比显示不同色彩，初始阶段为黄色，进度过半为绿色。
5. Mixcloud
Mixcloud 的播放进度条可在拖动时快速预览并定位当前所播节目中包含的分段内容。
6. YouTube
YouTube 中 60 分钟时长以上的视频可以通过上拉进度条的方式进行更加精确的播放定位。
7. Look Films
Look Films 的进度条是由当前视频的每一幅画帧所组成，并且鼠标移入后还可以快速预览当前帧的内容。
更多细节设计请访问 uedetail.com，也可关注新浪微博 @uedetail 与我交流。
相关推荐
- 斗鱼针针成旻云个人资料 针针年龄身高演艺经历介绍
-
[闽南网]针针成旻云曾是七煌旗下签约艺人，经常在斗鱼进行直播身高超过170cm的她更因为有一双大长腿而被称为“斗鱼第一美腿”、“电竞第一腿”。本文这就来对针针的个人资料进行详细介绍，想知道她的年龄身高...
- 轻量级RTSP服务模块和RTSP推流模块适用场景区别
-
好多开发者一直搞不清轻量级RTSP服务SDK和RTSP推流SDK的区别，以下是相关区别：1.轻量级RTSP服务模块：轻量级RTSP服务解决的核心痛点是避免用户或者开发者单独部署RTSP或者RTMP服...
- 《新·奥特曼》11月18日国内视频平台上线
-
《新·奥特曼》海报。新京报讯11月14日，由上海新创华文化发展有限公司授权引进电影《新·奥特曼》宣布正式定档11月18日（周五）00:00上线视频平台，上线版本为日语配音中文字幕版。影片由庵野秀明（...
- 剑指Apple Watch!Android Wear也将支持视频功能
-
想必智能手表发展到现在，大家最期待的还是视频功能，近日AndroidWear就实现了这一功能，以后就能在手表上看视频了，想想就挺激动的，快来看看吧！其实早在WWDC大会上，老对手AppleWatc...
- QT应用编程:基于VLC开发音视频播放器(句柄方式)
-
一、环境介绍操作系统:win1064位QT版本:QT5.12.6编译器:MinGW32VLC版本:...
- OBS 源码分析 obs开发
-
本文将按照数据源的获取、渲染、推送的直播流程来让大家深入了解一下。1、直播源数据获取obs在启动时会优先加载libobs核心库，这个库初始化obs很多内容，包括crash模块、com、性能监...
- Android和iOS端Moments更新:支持视频分享功能
-
Moments是社交网络巨头Facebook推出的一款私人照片分享应用，今天公司宣布对Android端和iOS端应用同时升级，新增对视频分享功能的支持。事实上早在数周之前，Facebook就曾表示Mo...
- 您很快就可以在Android Galaxy设备之间传输视频通话
-
在阅读此文之前，辛苦点击右上角的“关注”，既方便您进行讨论与分享，又能给您带来不一样的参与感，感谢您的支持！导语：在科技领域，每时每刻都有新的发展，令人兴奋的创新不断涌现。早在八月份，Android系...
- 一篇文章带你FFmpeg到流媒体服务器开发
-
安装ffmpeg:下载FFmpeg和libx264的包ffmpeg-2.4.1.tar.bz2last_x264.tar.bz2libx264需要yasm,所以先安装yasmapt-getinst...
- YouTube 为 Android 平台提供 1440P 视频
-
安锋网8月10日消息，Android从起初的480P的屏幕分辨率发展到2014年的1440P花了将近六年的时间，一般认为1080P的屏幕分辨率已经是人眼可以识别的极限，但是...
- FFmpeg 调用 Android MediaCodec 进行硬解码(附源码)
-
FFmpeg在3.1版本之后支持调用平台硬件进行解码，也就是说可以通过FFmpeg的C代码去调用Android上的MediaCodec了。在官网上有对应说明，地址如下：trac....
- Android FFmpeg + OpenGL ES YUV Player
-
1、FFmpeg解出YUV帧数据1.1方法介绍打开封装格式上下文...
- 基于WebRTC的Android移动端无线视频传输
-
摘要：视频传输技术在现代社会广泛应用，人们对其的要求也越来越高，其发展的趋势是方便、快捷、随时随地。传统的视频传输过于依赖线路，线路的走向限制了传输的很多可能，所以无线传输才是发展的方向。本文提出...
- 使用python爬取抖音app视频 python爬取抖音视频数据
-
记录一下如何用python爬取app数据，本文以爬取抖音视频app为例。编程工具：pycharm...
- Android IOS WebRTC 音视频开发总结(七七)-- WebRTC的架构和协议栈
-
本文主要介绍WebRTC的架构和协议栈（我们翻译和整理的，译者：litie），最早发表在【编风网】为了便于理解，我们来看一个最基本的三角形WebRTC架构（见下图）。在这个架构中，移动电话用“浏览器M...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- android开发视频 (30)