认识达内从这里开始

认真做教育专心促就业

太原计算机培训Axure进度条设计方法

发布：佚名
来源：推酷
时间：2016-10-11 09:53

我们在学习ui设计和编程的过程中，不可避免的会做一些进度条的设计，那么如何在Axure中设计一个符合当前网页的进度条呢？下面我们就给大家简要讲解一下进度条的设计方法。

太原计算机培训Axure进度条设计方法

一、最简陋的进度条：用于说明原理

1、新建一个矩形，命名为“进度框”;

2、新建一个矩形，让它和之前的矩形大小一样，并重叠，填充黄色，命名为“进度条”;

3、对“进度条”右键，选择“转换成动态面板”，命名为“动态条”，设置宽度为1(因不能设置成0);

4、因进度条一般在页面载入时显示，所以选择“动态条”的载入时–设置面板尺寸–勾选“动态条”，按下图顺序设置宽度，点击fx–在弹出的界面添加局部变量–设置函数–确认，最后不要忘记勾选动画为线性，用时可以随意设置，这里设为5000毫秒;

LVAR1表示“进度框”这个部件，[[LVAR1.width]]则表示“进度框”的宽度。

5、最后点击发布-预览，便可以欣赏你刚刚完成的进度条了。

二、为进度条添加数字，更好地显示进度

1、进度条做好后，在进度条居中位置添加一个Label，设置文字居中显示，并隐藏，命名为“进度数字”;

2、对“进度数字”右键，选择“转换成动态面板”，命名为“动态数字”;

3、对“进度数字”做以下操作，载入时–显示–动态数字+进度数字;

4、对“进度数字”做下图操作，更多事件–显示–设置文本–进度数字–设置局部变量–设置函数–确认;

函数为：

[[Math.floor(LVAR2.width/LVAR1.width*100)]]%

原理为：

进度数字%=动态条的宽度/进度框的宽度*100%

其中Math.floor(X)表示对括号里的X取整。

做完前面4步，会发现显示数字是不会随进度条变化的，因此还需要设置数字显示的自循环。

5、还是在刚才的用例1里依次添加，等待0秒-隐藏This-显示This;

6、最后，点发布–预览，就可以看到带数字的进度条了。

三、各类进度条

抛开UI设计不谈，市面上大多数进度条的运行原理都是差不多的。

只要掌握了以上进度条以及数字添加的原理后，就可以举一反三，设计出形式各样的进度条。

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择太原计算机培训，不再孤军奋战，轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。

< 上一篇：太原计算机培训ui设计师的换位思考

下一篇：太原计算机培训产品上市注意事项 >