进度条的定义及使用条件

进度条用于展示操作的当前进度。在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；当需要显示一个操作完成的百分比时。在这样的情况下，使用进度条。

快速绘制线框图

下面这张图拆解分析了进度条的结构，进度条线框图主要有背景、进度条和进度组成。进度达到100%的时候会变成一个对勾图标。

下面我们来绘制线框图部分。

背景：从系统元件库拖动一个矩形，调整矩形的尺寸，为矩形填充颜色，颜色填充为#F2F2F2，设置无边框，将矩形的四个角调整为圆角。

进度条：复制背景，设置填充色为橙色，色值为#FF9900，将进度条和背景进行对齐。

进度：拖动一个文本标签至背景右侧，用来显示进度，默认为0%。添加一个对勾图标覆盖在进度条的上方，对勾图标填充色为#FF9900，默认隐藏对勾图标。

分析交互效果

通过观察，不难发现进度条有以下几个交互效果：

随着时间的推移，进度条逐渐变长；

进度随着进度条变长而逐渐递增；

进度条延长至背景的长度时，停止延长；

当进度条长度等于背景长度时，进度为100%，同时进度也变成了一个对勾图标。

制作交互原型

01 进度条的加载

进度条的长度变化是一个循序渐进的过程，并不是一蹴而就的。我们可以通过动态面板的状态循环来达到进度条长度的不断增长。所以，这个时候，我们需要添加一个动态面板来辅助我们实现这样的效果。我们将这个辅助的动态面板称之为控制器，掌控着进度条的变化节奏。我们需要为这个控制器再添加一个状态，至少保证有两个状态来实现动态面板状态的循环切换。

在正式配置交互之前，我们还需要将进度条转换为动态面板，设置默认长度为1。设置完之后，与背景进行左对齐，停靠在背景的左侧。大家可能会有一个疑问，为什么要将进度条设置为动态面板了？因为后面需要通过进度条尺寸变化来控制着进度显示的变化，众多元件当中，只有动态面板具有“尺寸改变”事件，故而需要将进度条转换为动态面板。

既然由辅助控制器动态面板的状态切换来达到控制进度条的长度，那么如何实现动态面板状态的循环切换呢？这个时候，我们可以为页面添加一个“载入时”事件，载入时，设置辅助控制器动态面板循环切换状态，设置循环间隔为0.1秒，交互设置如下图所示。我们也可以通过为其它任何一个元件添加载入事件实现同样的效果。

接下来再为辅助控制器添加“状态改变时”事件，设置进度条的尺寸，进度条高度不变，宽度等于当前宽度+背景宽度的百分之一，即进度条宽度以1%速度保持匀速增长。我们知道进度条的宽度不能超过背景的宽度，所以，在这里需要为该事件添加一个前提条件，即当进度条宽度小于等于背景宽度时，执行刚才设置的尺寸变化动作。

添加第二个情形，即除了第一个情形之外的情况，则应停止动态面板的状态切换，隐藏进度，显示对勾图标。这种情况，一般为进度条加载完成。关于辅助控制器的交互配置如下图所示。

上图中的变量Target代表进度条，变量LVAR1代表背景。完成交互配置，记得将控制器动态面板进行隐藏，控制器并不是交互原型的一部分，只是辅助我们实现交互动画的工具。

02 进度的动态变化

进度的变化由进度条的尺寸变化所决定，所以，我们需要为进度条动态面板添加“尺寸改变时”事件。当进度条的尺寸发生变化时，进度的文本值=进度条的宽度/背景宽度*100%，转换成 Axure的函数表达式为[[This.width/LVAR1.width*100]]%，其中变量this代表进度条,变量LVAR1代表背景。进度的值为整数，不会出现小数位，为了避免计算结果出现小数位的情况，我们需要对刚才的百分比数值进行向下取整，向下取整函数为Math.floor（x）。最终，表达进度值的函数表达式为[[Math.floor(This.width/LVAR1.width*100)]]%。交互配置如下图所示。

好了，关于进度条交互原型的配置已经完成，点击预览按钮，验证下我们的劳动成果吧。

---

小结

进度条的交互动画实现起来其实很简单，总的说来，只要掌握以下3点：

通过页面或某个元件的载入事件，控制辅助动态面板的状态切换；

通过辅助动态面板的状态改变，掌控进度条尺寸的变化节奏；

利用进度条尺寸改变的时机，重新计算进度数值。

按照以下操作，可获取案例源文件

1.关注 本账号《Axure原型设计》

2.点赞 本节课内容

3.发送简信 关键字【进度条】

【Axure原型设计】专注分享Axure基础教程、交互案例以及经验技巧，并不定期赠送各种资源福利，包含：系统组件库、页面模板、实战案例等。