美文网首页
如何利用Axure制作高保真banner?

如何利用Axure制作高保真banner?

作者: 简单_杨小希 | 来源:发表于2016-11-09 11:23 被阅读87次

    一个负责维护世界和平的产品经理。

    一、元件准备

    (1)拖入一个动态面板到画布中,为其命名为banner。双击动态面板打开【面板状态管理】窗口,点击【+】,为动态面板添加4个状态。

    (2)双击State1,并添加一张与动态面板一样大小的图片。

    (3)用同样的方式,为动态面板的其他3个状态添加图片。

    (4)在动态面板上拖入4个椭圆,为每一个椭圆添加“选中”状态,并依次设置椭圆的名称为button1~button4。

    (5)为了避免重复选中,需要给4个button建立一个选项组,如果不理解为什么要建立选项组的童鞋 ,可以取消选项中试一下。

    (6)当我们打开某一个页面时,banner的第一个总是默认选中的。所以,双击button1,在“属性”面板中,设置button1的默认状态为“选中”。

    二、添加交互

    (7)为动态面板添加“载入时”事件case1,添加动作为【设置面板状态】banner为【next】,勾选【向后循环】与【循环间隔】,循环间隔时间自行设置,并设置动画为向左滑动。

    (8)为动态面板的“状态改变时”添加事件case1,添加判断条件为:当【面板状态】banner【==】【状态】State1时。

    (9)添加动作为【选中】button1。

    (10)按照相同的方法添加case2事件,当【面板状态】banner【==】【状态】State2,添加动作为【选中】button2,依次类推,依次设置case3,case4.事件交互设置如下图:

    (11)为动态面板的State1状态下的图片添加“鼠标单机时”事件,打开所要链接的页面即可。

    妥妥滴,预览查看效果吧~

    相关文章

      网友评论

          本文标题:如何利用Axure制作高保真banner?

          本文链接:https://www.haomeiwen.com/subject/pwizuttx.html