展示设计包括哪些类型-无论你选择哪种进度条设计，从这4个方面入手，都可以轻松搞定！

无论是在APP还是PC，无论是在加载页面还是音乐播放器，进度条的应用都非常广泛，其表现形式更是多种多样，让人眼花缭乱。作为交互设计新手，在项目中经常会碰到进度条的设计，心里总是有很多疑惑：

目标：进度条为什么存在？引入进度条的目的是什么？

类型：根据使用场景，进度条有哪些类型？进度条的目的是什么？进度条需要展示什么信息？

形式：进度条的形式多种多样吉祥物，如何从本质上区分它们呢？

应用：实际项目中如何选择合适的进度条？

下面列出了三种常见的进度条样式，我们会将这三种进度条结合起来，逐步进行梳理，希望能够帮助大家更加清晰的理解。

1. 为什么需要进度条？

进度条是比较通俗的叫法，代表与进度显示相关的内容，但并不局限于“条”，在各种设计中被广泛使用。

从“进度”二字不难看出，“进度条”这种视觉元素其实是为了让用户清楚的了解当前的状态，状态表达一般都有一定的参照值和限值，如果单纯用数字或者文字来表达，不容易让用户理解，所以就引入了图形元素，也就是常见的进度条。

进度条本身比较简单，但和场景结合就会衍生出不同的类型，不同类型的进度条有不同的设计目标和相关信息元素。

2. 进度条有哪些类型？

进度条的实际应用是多种多样的，有的进度条是实时变化的，有的则是静态的。放到实际场景中，进度条在场景中的意义就被进一步拓展了。结合使用场景，我将其分为三种，分别是“流程型”进度条、“流程型+状态型”进度条、“状态型”进度条。下面将按照以下思路，对这三种进度条进行详细介绍。

1.“进度类型”进度条

通常是动态的，表示程序正忙于某项功能

“进程类型”的进度条很常见，也经常被人们提及，常见的加载进度条、下载进度条都属于此类型，在介绍中的例子中，最左边的进度条就是一个典型的例子。

在这个使用场景下，进度条的设计目标可以概括如下：

1.帮助用户了解程序正在做什么以及是否正常；

2. 如果您必须让用户等待吉祥物设计，那么请减轻他们在等待时的焦虑。

此类使用场景有三个显著特点：

1、“过程”的概念很明确，只有完成过程，才能达到相对稳定的状态；

（例如，只有加载完成后才能看到完整的页面；只有扫描完成后才能知道完整的扫描结果）

2.一般情况下需用户等待；

3、后台进程需要在前台可见，帮助用户了解当前的进度；

Alan Cooper 在他的书《关于人脸交互设计要点》中列出了进度对话框需要完成的任务：

1. 让用户清楚地知道有一个耗时的过程正在运行；

2.向用户明确表明一切运行正常；

3. 让用户清楚该过程需要多长时间；

4.为用户提供取消操作和恢复程序控制的方法；

结合上述设计目标、​​场景特点以及进度条任务，我们可以更加清晰的认识到这样一个进度条应该包含哪些信息元素。一个完整的“进度型”进度条包含以下信息：

1.解释当前进程，显示相关信息（例如下载、动态效果）

2.提示当前进程处于正常状态，并显示相关信息（例如下载速度）

3.说明进度和剩余时间（例如，当前下载百分比以及需要多长时间才能完成）

4.提供强相关操作（例如取消、激活会员以提高速度）

现实中，并不是所有“流程型”进度条都具备上述四方面的信息，进度条的信息元素会受到流程长度、使用情景背景、项目实施成本等诸多因素的影响，这些不仅会影响信息元素的有无，还会影响各信息的优先级。

2.“状态型”进度条

一般是静态的，表示当前状态

在大多数介绍进度条的文章中，很少会提到“状态型”进度条，但在现实生活和互联网产品中却非常常见，下图中的汽车测速仪就是一个典型的“状态型”进度条，也是走出了条形的造型。

在这个使用场景下展示设计包括哪些类型，进度条的设计目标主要有两点：

1.帮助用户了解当前状态；

2.为用户后续的决策提供充分的支持；

此类使用场景有三个显著特点：

1.“流程”概念被弱化，有的甚至根本没有流程概念；

2.无需用户等待；

3.充分展示相对稳定的“当前状态”，以便用户了解基本情况并据此做出相关决策。

在介绍中的例子中，最右边的进度条是一个“状态型”进度条。

本场景中的进度条及相关信息需要完成以下任务：

1.明确地向用户指示当前的状态；

2.向用户清晰地标出重要的进度里程碑；

3.清晰的向用户展示他可能需要的操作；

结合上述设计目标、​​场景特点以及进度条任务，我们可以更加清晰的了解到这样的进度条应该包含哪些信息元素。一个完整的“进度型”进度条应该包含以下信息：

1.解释当前的显示项及其对应状态，并显示相关信息；（例如电脑管家里的“容量”标题）

2.若状态分阶段，即此阶段的状态与下一阶段有明显不同，则需说明重要变化节点；（例如“汽车转速表”中的正常阶段与红色阶段）

3.提供强关联操作（例如电脑管家里的“清理”）

实际情况中，并不是所有“状态型”进度条都有这三类信息，都需要结合实际场景和上下文进行梳理。比如汽车里程表里没有状态的“重要节点”，也没有必要有“汽车里程表”标题。相关的加速、减速操作也与进度条和相关信息区分开来。以上三类信息的有无、信息的优先级，都需要结合实际项目进行判断。

3.“流程类型+状态类型”进度条

部分结合了“流程型”+“状态型”的特点

这种类型的进度条比较特殊，是介于“进程类型 + 状态类型”之间的类型，常见的例子就是音视频播放器中的进度条，上例中中间的进度条就是这种类型。

它为什么会有“进程”这个概念呢？

– 使用场景中有明显的“进程”概念（例如音乐播放器正在播放音乐，进程结束时歌曲也结束）

为什么会有“状态类型”的概念呢？

– 无需用户等待，进度条显示当前状态，这就是听音乐的过程，过程更有意义；

– 帮助用户了解当前状态，并为后续操作提供进一步支持（例如快进、上一首/下一首歌曲）

在这个使用场景下，进度条的设计目标是“流程型”与“状态型”的结合，主要有三点：

1.帮助用户了解程序正在做什么以及是否正常；

2.帮助用户了解当前状态；

3.为用户后续的决策提供充分的支持；

该类型进度条的使用场景有三个显著的特点：

1、有明确的流程概念，流程与时间紧密相关；

2、进度条不是为了缓解等待的焦虑，而是为了展示当前的状态，让用户做出相关决策；

3. 相对于完成状态，当前状态虽然转瞬即逝，但更有意义。用户在当前状态下正处于实现目标的过程中；

该类型的进度条需要完成的任务如下：

1.明确地向用户提示当前正在运行哪个进程，以及该进程是否正常；

2.向用户清晰的提示当前的状态和重要的进度节点；

3. 清楚地向用户展示他们可能需要采取哪些行动

“流程类型+状态类型”进度条的信息也和上述任务紧密相关，主要包括

1.状态信息（例如当前播放的歌词）

2.重要信息节点（例如进度条中的白点代表歌曲高潮部分的起点）

3.相关操作（如上一曲、下一曲）

同样，在实际场景中，三类信息也并非全部存在，“流程类”和“状态类”信息之间存在着微妙的平衡，且二者的优先级也会随着使用场景的变化而变化。

3.进度条的形式

有很多文章对进度条做了详细的分析，这次就不详细描述了，主要总结一下常见的进度条类型：

从变化的角度看，可以分为两类：

1. 部分静态进度条

这种进度条多用于“状态型”进度条。但现在也有很多做法，在状态型进度条出现时，在很短的时间内从 0 变化到当前值，同时插入一些动画。但这些都是在很短的时间内完成的，之后进度条趋于稳定。

2. 动态进度条

此种进度条多用于“流程型”进度条和“流程型+状态型”进度条，大部分做法是全程伴随，进度条会伴随动态效果。

从基本形态上看，可分为三类：

1. 剥离

2. 圆形

3.不规则型

通过基础形态+动态效果的组合，进度条的形态可以变化多端，创意空间无限，这也给进度条的设计增添了不少乐趣。

4.如何选择合适的进度条？

通过上面的分析，相信大家对这三种进度条类型都有了一定的了解，虽然三者都涉及到进度的显示，但本质上是三种完全不同的类型，只有根据实际的项目场景选择合适的进度条类型，才能够帮助自己实现设计意图。

这一过程主要有四个步骤：

1.明确你的设计意图

如果你需要在某个场景中使用进度条，那么请想清楚你的设计意图展示设计包括哪些类型，是为了让用户更好地了解当前状态并据此做出决策？还是为了减轻用户在当前流程中等待的焦虑？

2. 根据设计意图选择合适的进度条类型

根据自己的设计意图，确定三种进度条哪种更适合当前的场景。同时结合前面的分析，带入到当前的项目中进行深入研究，明确进度条需要完成什么任务，需要展示什么信息。

3. 确定信息元素的优先级

在清晰的展现信息之后，进一步考虑信息的优先级，哪些是最重要的，哪些是不重要的，对当前场景下的进度条有更深的理解和思考。

4. 使用适当的表达形式

进度条的形式有很多种，但不管是哪种形式，都要基于之前的思考，在此基础上结合实际项目特点，考虑合适的基础形式+动效，这样的进度条设计才是优秀的设计。

以上就是我个人对进度条的一些想法，希望能提供一些有用的信息给大家帮助，也欢迎大家一起讨论，互相学习，不断进步。