多语言展示
当前在线:697今日阅读:168今日分享:49

Axure原型工作如何制作数字选择器效果

前几篇的经验我们介绍过一些数字计算器,以及倒计时的效果,下面小编介绍一篇Axure原型工作如何制作数字选择器效果,好好学习吧,很实用的。
工具/原料
1

电脑

2

Axure

方法/步骤
1

首先创建一个空白页面,在工作区域内拖入本次要使用的元件元素,主要有标题、输入框以及按钮,如下图所示。

2

元件元素准备完成后,对元件的样式进行设置,如下图所示。

3

元件样式设置完成后,然后给各元件的名称进行设置,如下图所示。

4

下面给输入框的类型进行设置,其实可以设置成数字,这样输入框中就只能输入数字了,当然文本也可以,但效果就不一样了,自己摸索一下,如下图所示。

5

下面就开始给两个按钮的交互事件进行设置了,首先给加号的按钮做单击交互事件,如下图所示,需要变量来控制。

6

然后在给减号按钮的单击交互事件进行设置,同样需要变量控制,上面就是输入框中值加一,这里就是减一,如下图所示。

7

准备工作完成,f5预览一下效果,如下图所示。

8

点击加号的时候,数字会从1开始加,点一下加一次,如下图所示。

9

点击减号的时候,就会在当前值的基础上减一,也可以自己输入一个数字,然后在减,如下图所示。

注意事项
1

数字选择器用处较多,实现效果非常简单

2

更多好玩的Axure经验欢迎关注小编一起学习

推荐信息