如何使用AxureRP8实现进度条的原型效果

 时间:2024-11-06 19:24:06

对于我们的原型设计,很多时候都要做进度条的效果,例如裼沙钔炯上传,下载等等,如何做一个保真度高的进度条,将在一定程度上决定你的鞔杪鹨矍原型的好坏,直接放一张进度的静态图片简单,但是却会让人觉得不专业,下面小编就给大家讲解一下如何使用AxureRP8做进度条原型

工具/原料

AxureRP8原型制作软件

方法/步骤

1、首先打开我们的AxureRP8软件,新建一个空白的页面,命名自定义进度条,用于接下来的操作,如图所示

如何使用AxureRP8实现进度条的原型效果

2、准备两个矩形,矩形的做成相同的宽度,并分别命名背景和进度

如何使用AxureRP8实现进度条的原型效果

3、然后设置矩形的大小和位置,设置成同样的坐标,这里我们把背景和进度的坐标和宽高设置为如下图所示的值

如何使用AxureRP8实现进度条的原型效果

如何使用AxureRP8实现进度条的原型效果

4、注意,这个时候我们要将进度的图层放到背景的图层上面,不然效果会被背景遮挡。

如何使用AxureRP8实现进度条的原型效果

5、然后我们进行交互用例的设置,添加用例页面载入时,双击进入,设置如下图所示

如何使用AxureRP8实现进度条的原型效果

6、然后找到元件--设置文本,设置进度文本的元件,设置为隐藏,具体的操作步骤如下如图所示。

如何使用AxureRP8实现进度条的原型效果

7、然后进行元件尺寸的设置,进入用例,找到元件下的设置尺寸,然后设置进度的元件,设醅呓择锗置锚点,设置线性动画,时间设置为4000ms,详细如下图所示

如何使用AxureRP8实现进度条的原型效果

8、在上图的基础上,点击宽后面的fx标志,设置载入元件进度的宽度,添加局部变量proc娣定撰钠ess,插入函数[[process.width-2]],这里函数一定要加上[[]]的标志,不然识别不了

如何使用AxureRP8实现进度条的原型效果

9、然后继续设置进度文本显示,的设置方式和设置隐藏是类似的,选择元件-显示,设置进度文本为显示状态即可

如何使用AxureRP8实现进度条的原型效果

10、点击AxureRP软件的预览效果,在浏览器中预览我们的进度条

如何使用AxureRP8实现进度条的原型效果

Axure RP 如何实现下拉框二级联动效果 FLASH使用CheckBox制作多选题(AS3) flash中如何做闭封形状和不闭封形状转化 视频极快速上字幕方法 Pr/Fcut/Edius/Vegas通用 AnimateCC如何使用声音文件(2)
热门搜索
猫眼实时电影票房 qq带字图片 小学生看图写话图片 弱点 电影 手绘装饰画图片大全