2024年4月4日发(作者：)

Axure教程：实现进度条、进度环和滑动条的简单方法

作者分享了制作进度条、进度环和滑动条的简单方法，希望能给大家带来一定的收获。

画原型的目的之一是为了给开发人员看功能的实现效果，同时也可以打包制作成

Demo给相关人员了解产品的完成形态，是产品人员的必备技能之一。除了画原型，产品

人员还要做需求分析和文档编写等工作，所以不能花太多时间在此环节上。

画原型所需时间与实现方法有关，以提高效率为目的，本文尽可能详细的介绍了进度

条、进度环和滑动条三种原型的最简单实现方法，在介绍方法的过程中与大家分享自定义

函数和常用math函数的使用以及元件操作的一些小技巧，希望能帮助大家在画原型的时

候更加得心应手。

一、进度条

进度条常见于页面载入过程中，用于向用户展示当前的进度情况，配合上有趣的动画

效果可减少用户的等待焦虑。

1. 准备元件

在画板中拖入等宽等高的灰色矩形和蓝色矩形，灰色矩形命名【进度槽】，蓝色矩形转

换为动态面板后设置宽度为1，命名【进度条】，拖入开始按钮和文本标签，设置文本标签

文本为“0%”，命名【进度】。

2. 原理分析

1 / 9

1）实现原理

把蓝色矩形转换成动态面板【进度条】后，蓝色矩形成为【进度条】默认面板内的一

个元件。通过把【进度条】的初始宽度设置为1，暂时只显示一点点的蓝色矩形，使整个

进度槽看起来是空的。随着【进度条】宽度不断变大，蓝色矩形被显示出来的区域也不断

增多，直至当【进度条】的宽度等于【进度槽】的时候，蓝色矩形就全部被显示出来了，

使整个进度槽看起来被填充完成。期间进度条和进度是关联进行的，根据【进度条】的宽

度计算出【进度】的数值，用于表示当前的进度情况。

2）逻辑流程

改变【进度条】宽度

改变【进度条】的宽度是通过【设置尺寸】动作来实现的，Axure支持在用例中设置

改变元件的尺寸。【进度条】的初始宽度为1，我们要修改设置它的尺寸为【进度槽】的宽

度，设置动画为“线性”，时间为整个进度的时间。

自定义的函数中，指局部变量LVAR1的宽度，LVAR1指代【进度槽】，

故即为【进度槽】的宽度。

设置【进度】

根据“ 进度 = 进度条的宽度 / 进度槽的宽度 % ”，转换成原型中的函数为：

[[ ( 100 * / ) ]] %

2 / 9