Axure怎么制作手机充话费的界面效果?

百度经验   发布时间:2018-11-29 15:06:33   作者:毕志华1991   我要评论
Axure怎么制作手机充话费的界面效果?经常使用网络充值话费,想要制作话费充值页面,该怎么制作呢?下面我们就来看看axure制作话费充值界面的教程,需要的朋友可以参考下

Axure想要制作手机话费充值的界面,非常的简单,只需要几个元件加上一些交互用例即可以实现下面我们就来看看详细的教程。

1、首先创建一个空白的页面,在工作区域拖入几个矩形元件,并对矩形元件的文字描述和样式简单调整一下,如下图所示。

2、元件准备完成后,开始对元件的选中状态的样式进行设置,这里可以对字体颜色和填充颜色进行设置,如下图所示。

3、按照上述方法,将其他的矩形元件的选中状态也设置一下,这里可以全部选中一起设置,如下图所示。

4、下一步开始对每个矩形的鼠标单击时的交互事件进行设置,如下图所示。

5、为了达到演示效果,上面的充值金额会根据你选择充值的金额而变化,因此在做交互事件时需要定义一个局部变量用于控制金额的变化,如下图所示。

6、刚刚的交互事件已经把矩形的值赋给了变量值,下面这个交互事件是将变量值赋给充值金额,如下图所示。

7、同样的方式,将其他矩形的鼠标单击事件的交互进行设置,如下图所示。

8、这里需要注意,这些矩形需要设置到同一个组内,否则效果就无法实现了,如下图所示。

9、交互事件都设置完成后,f5预览一下效果,点击充10元,上面的充值金额就会变成10元,点击充20元,上面的充值金额就是20元了。

以上就是Axure设计手机话费充值页面的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure怎么制作上下滑动的页面原型?

Axure8页面内容怎么批量查找与替换?

Axure8页面怎么添加元件说明字段与配置?

相关文章

  • Axure8.0试用到期后怎么激活?

    Axure8.0试用到期后怎么激活?Axure8.0使用一个月后到期了,还想继续使用,该怎么激活呢?下面我们就来看看Axure8.0的激活教程,需要的朋友可以参考下
    2017-05-22
  • Axure RP 8怎么制作不倒翁的标靶图形?

    Axure RP 8怎么制作不倒翁的标靶图形?Axure中想要制作一个不倒翁的形状的靶子,该怎么制作呢?下面我们就来看看详细的绘制方法,需要的朋友可以参考下
    2017-05-16
  • Axure RP 8设怎么画一只漂亮气球图形?

    Axure RP 8设怎么画一只漂亮气球图形?Axure RP 8中除了制作网页原型,还可以画图,该怎么画一个漂亮的气球呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-05-16
  • Axure RP 8怎么画漂亮的游泳圈图形?

    Axure RP 8怎么画漂亮的游泳圈图形?Axure中想要绘制漂亮的游泳圈,该怎么绘制呢?下面我们就来看看详细的教程,很简答,需要的朋友可以参考下
    2017-05-15
  • Axure RP8怎么设计美轮美奂的椭圆矩形框?

    Axure RP8怎么设计美轮美奂的椭圆矩形框?Axure 中想要设计一个圆角矩形的图形,该怎么制作呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-15
  • Axure RP 8怎么控制不同颜色元件移动?

    Axure RP 8怎么控制不同颜色元件移动?Axure RP 8中想要控制两个不同颜色的柱子,该怎么操作呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-08
  • Axure RP 8怎么控制矩形元件颠倒旋转?

    Axure RP 8怎么控制矩形元件颠倒旋转?Axure RP 8中想想要使用按钮控制一个矩形的旋转,该怎么制作呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-08
  • axure怎么制作图片自动播放的效果?

    axure怎么制作图片自动播放的效果?axure中想要制作一个图片自动播放的效果,该怎么设计呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-05
  • Axure RP 8怎么设置动态面板显示隐藏对象?

    Axure RP 8怎么设置动态面板显示隐藏对象?Axure RP 8中设计的网页想要隐藏元件,该怎么实现呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-04-28
  • AXURE怎么使用中继器实现样式重复但内容不同的效果?

    AXURE怎么使用中继器实现样式重复但内容不同的效果?一般网站中我们都会遇到用一个模块显示不同内容的情况,该怎么使用AXURE实现呢?下面我们就来看看详细的教程,需要的朋
    2017-04-25

最新评论