Axure PR 9 倒计时 设计&交互

     分类 [产品经理]
2024/12/20 16:10:53 浏览量  546 喜欢  58
导读:Axure PR 9 倒计时 设计&交互

Axure PR 9 倒计时 设计&交互

大家好,我是大明同学。

这期内容,我们来探讨Axure中倒计时的设计与交互技巧。

 

Axure PR 9 倒计时 设计&交互

 

倒计时

 

创建倒计时所需的元件

1.打开一个RP 文件并在网上随便找一张背景素材粘贴到画布上。

 

Axure PR 9 倒计时 设计&交互

 

2.在元件库中拖入一个矩形元件,在样式窗格将字号设置为300,字体颜色设置为白色,线宽设置为0,输入文本“倒计时”,基于背景素材左下角调整到合适的位置。

 

Axure PR 9 倒计时 设计&交互

 

3.在元件库中拖入一个矩形元件,在样式窗格将元件命名为“时”,字号设置为150,字体颜色设置为白色,线宽设置为0,输入文本“00”,基于背景素材左下角调整到合适的位置。

 

Axure PR 9 倒计时 设计&交互

 

4.在元件库中拖入一个矩形元件,在样式窗格将字号设置为150,字体颜色设置为白色,线宽设置为0,输入文本“:”,基于背景素材左下角调整到合适的位置。

 

Axure PR 9 倒计时 设计&交互

 

5.根据以上方式同步配置“分”、“秒”元件,将秒文本设置为 “10” 并选中“时”、“分”、“秒”右键组合。

 

Axure PR 9 倒计时 设计&交互

 

创建交互

1.选中“秒”元件,在交互窗格中新建交互,载入时,启用情形,情形1:添加条件 元件文字 当前 大于 文本 10

 

Axure PR 9 倒计时 设计&交互

 

添加动作,设置文本 当前 文本 插入变量或函数:[[this.text-1]]

 

Axure PR 9 倒计时 设计&交互

 

添加动作,等待 1000毫秒,触发事件 当前 载入时 。

 

Axure PR 9 倒计时 设计&交互

 

添加情形 情形2:添加条件 元件文字 当前 大于 文本 0,添加动作,设置文本 当前 文本 插入变量或函数:0[[this.text-1]],等待 1000毫秒,触发事件 当前 载入时 。

 

Axure PR 9 倒计时 设计&交互

 

添加情形 情形3:添加条件 元件文字 分 大于 文本 10,添加动作,设置文本 当前 为 59,分 文本 插入变量或函数:[[target.text-1]],等待 1000毫秒,触发事件 当前 载入时 。

 

Axure PR 9 倒计时 设计&交互

 

添加情形 情形4:添加条件 元件文字 分 大于 文本 0,添加动作,设置文本 当前 为 59,分 文本 插入变量或函数:0[[target.text-1]],等待 1000毫秒,触发事件 当前 载入时 。

 

Axure PR 9 倒计时 设计&交互

 

添加情形 情形5:添加条件 元件文字 时 大于 文本 10,添加动作,设置文本 时 插入变量或函数 :[[target.text-1]],秒 文本 59,分 文本 59,等待 1000毫秒,触发事件 当前 载入时 。

 

Axure PR 9 倒计时 设计&交互

 

添加情形 情形6:添加条件 元件文字 时 大于 文本 0,添加动作,设置文本 秒 文本 59,分 文本 59, 时 插入变量或函数 :0[[target.text-1]] ,等待 1000毫秒,触发事件 当前 载入时 。

 

Axure PR 9 倒计时 设计&交互

 

预览交互

点击预览,页面载入时,倒计时元件会从10开始倒计时,这里为了便于演示,所以之设置了10秒,具体可以根据实际业务,修改时、分、秒文本,大小 字号等设置。

 

Axure PR 9 倒计时 设计&交互

 

 

预览地址:https://bipa6u.axshare.com

OK,这期内容到这里就结束了。

我是大明同学

下期见

 

 

 

标签

微信扫一扫,分享到朋友圈

微信公众号

相关推荐