|
网页进度条应该如何轻松搞定
进度条是较为通俗的叫法，代表的是与进度展示相关的内容，但并不局限于“条形”。
一、为什么要有进度条?
从“进度”一词不难看出，“进度条”这一视觉元素其实是为了让用户清晰的了解当前状态。状态表现一般都有一定的参照，同时存在限定值，如果单纯的通过数字/文字表达，不便于用户理解，所以引入了图形化的元素，也就是我们常见的进度条。
进度条本身比较单一，但是当和场景结合起来，就会衍生出不同的类型。不同类型的进度条设计目标，相关信息元素均不相同。
二、进度条有哪些类型?
进度条的实际运用情况多种多样。有些进度条是实时变化的，有些则是静止不动的。当放到实际的场景中，进度条在场景中的含义就有了进一步的扩展。结合使用场景，将它们分别分成3种类型，分别是“进程型”进度条，“进程型+状态型”进度条和“状态型”进度条。
1. “进程型”进度条
一般为动态，表明程序正忙于某些功能
“进程型”进度条十分常见，也经常被人们提及，像常见的Loading进度条、下载进度条等均属于此种。
在此种使用场景下，进度条的设计目标可以归纳为以下两点：
1、帮助用户明确程序正在做什么，是否正常;
2、如果一定要让用户等待，那就缓解他们等待时的焦虑感;这类使用场景具有3个显著特征：
1、“进程”概念十分明显，只有将进程走完，才能达到较为稳定的状态;(例如只有Loading完，才能看到完整的页面;只有扫描完，才能获知完整的扫描结果 )2、一般都需要用户等待;
3、需要让后台进程在前台可见，帮助用户明晰当前进度;2. “状态型”进度条
一般为静态，表明当前所处状态
在大部分讲进度条的文章中，“状态型”进度条较少有人提及，但不管是在实际生活中，还是互联网产品中都十分常见。
在此种使用场景下，进度条的设计目标主要为两点：
1、帮助用户明确当前状态;
2、为用户的后续决策提供充足的支持;
这类使用场景具有3个显著特征：
1、“进程”概念被削弱，有些甚至完全没有进程概念;2、不需要用户等待;
3、充分展示较为稳定的“当前状态”，需要让用户了解基本状况，并基于此作出相关决策。
3. “进程型＋状态型”进度条
部分结合“进程型”+“状态型”的特点
此类进度条较为特殊，是介于“进程型+状态型”之间的进度条类型，较为常见的例子就是音频&视频播放器中的进度条。
在此种使用场景下，进度条的设计目标综合了“进程型”和“状态型”两种，主要为3点：
1、帮助用户明确程序正在做什么，是否正常;
2、帮助用户明确当前状态;
3、为用户的后续决策提供充足的支持;
这类进度条的使用场景具有3个显著的特征：
1、有明确的进程概念，和时间关联紧密;
2、进度条不是为了缓解等待的焦虑感，而是为了展示当前状态，让用户做出相关决策;3、对比完成状态，当前状态转瞬即逝，但意义更大，用户是在进程中&当前状态下实现自己的目标;此类进度条需要完成的任务如下：
1、向用户清楚地表明当前正在运行进程，进程是否正常;2、向用户清楚地表明当前状态、重要的进度节点;3、向用户清晰地展示可能需要的操作
|
