笔者在本文中介绍了如何用Axure动态面板实现轮播图效果的操作步骤,与大家分享。
所需元件
一个转换为动态面板的矩形并命名为轮播图:
这里要记得把“自动调整为内容尺寸”勾选取消掉,方便后面调整图片大小。
三张图片并给图片编号1、2、3:
三个椭圆并给椭圆对应编号1,2,3:
操作步骤
(1)建立三个面板并分别命名为“图1”、“图2”、“图3”
(2)将三张图分别放到三个面板下
(3)为动态面板设置第一个交互动作——载入时,使其自动轮播。
(4)看看效果
到这一步我们已经实现了轮播图的自动轮播,但是椭圆元件还只是摆设作用,接下来让我们为椭圆也加入交互。
(5)将三个椭圆放到一个选项组内
按住Ctrl键并用鼠标分别点击三个椭圆,在“设置选项组名称”里填入group。
这里选项组的作用是保证这三个椭圆当有一个是选中状态时,其他两个都将是非选中状态。
(6)为每个椭圆设置相应的交互动作——鼠标单击时,以及交互样式——选中
1)椭圆1:
交互动作:
这里需要注意,因为图1在最左边,所以“进入动画”是“向右滑动”。
交互样式:
2)椭圆3:
交互动作:
图3在最右边,所以“进入动画”是“向左滑动”。
交互样式:
与椭圆1相同。
3)椭圆2:
交互动作:
因为椭圆2处于中间,所以我们需要增加判断条件:
最终椭圆2的交互动作为:
交互样式:
与椭圆1相同。
4)动态面板:
我们再为动态面板交互动作——载入时,增加一个椭圆1状态为选中。
(7)再看看效果:
(8)当我们点击了椭圆时,会发现轮播图的自动轮播效果没了,如果想要实现点击椭圆后轮播图继续轮播只需要再在每个椭圆的交互动作后面增加动作:
到这里我们的轮播图就完成啦!( ‘ω’ ) get!
小记
(1)这里我们用到了动态面板的又一种用途——轮播图。如果想知道动态面板的另一种用途——密码可见性切换,可以看我的另一篇文章:http://www.woshipm.com/rp/3126520.html
(2)轮播图实现起来不难,但是主要考验我们对于项目中每个元件的命名的严谨准确,否则很容易就会把椭圆对应的图片弄混,比如点击第一个椭圆却跳到了第三张图…这个项目还只是一个案例,里面的元件非常少,只有十个不到。
然而当我们制作一个较大的原型时,项目里面的元件少说也有上百个,当你从一开始没有养成给每个元件命好名的习惯的话,后面再去梳理将会是一件非常麻烦的事情,也不便于后面查看你的项目的人的查阅。血的教训o(╯□╰)o,所
对于我们每天熟悉得不能再熟悉的拨号键盘,你有没有想过它背后的交互设计理念是什么,它是如何通过Axure实现的呢?在本文中,笔者将告诉你这些问题的答案。
对于我们再熟悉不过的手机拨号键盘,今天来讲解其中的交互效果:
当鼠标的悬浮、按下时,键盘的按键背景色发生变化;当点击按下数字字母按钮时,将输入对应的数字,同时显示“添加号码”按钮和“删除”按钮;当点击“删除”按钮时,将删除号码最后面的一个数字;当数字全部删除时,“添加号码”按钮和“删除”按钮全部隐藏。
交互讲解一:鼠标的悬浮、按下交互
选中12个数字符号按钮,在其【属性】栏中的交互样式,设置鼠标悬浮和按下时,填充色的变化。
交互讲解二:数字符号的输入
利用全局变量,文本函数[[This.text]]和[[Target.text]]实现数字输入的交互。
1. 添加全局变量
顶部菜单栏【项目】-【全局变量】,添加全局变量,命名随意取,本教程取为:number。
2. 设置鼠标单击时事件交互
1)选中任意数字按钮,双击属性栏中【鼠标单击时】,左侧动作栏中【全局变量】-【设置全局变量】,勾选全局变量【number】,其值设置[[This.text]]——即鼠标单击某个按钮的值(当按下按钮1,则number为1;当按下2,则number为2)。
2)为了实现,点击数字按钮时,号码输入框累积输入该数字,因此:
在左侧动作栏【元件】-【设置文本】,勾选【号码文本框】,将文本值设置为[[Target.text]][[number]]。
(其中,[[Target.text]]代表文本框之前的文本值,[[number]]代表刚点击的按钮值。)
接下来,直接将此交互事件复制粘贴到其他按钮上面即可,是不是很简单粗暴。
交互讲解三:数字符号的删除
主要利用函数[[LVAR.length]]:获得元件字符串的长度(即1234.length=4);以及函数[[LVAR.substring(from,to)]]:截取第from位到to位的字符串。
(即[[12345.substring(1,4)]]=234,也就是说截取第一位到第四位的数字但不包括第一位。)
1. 设置鼠标单击时事件交互
选中【删除】按钮,双击属性栏中【鼠标单击时】,在左侧动作栏【元件】-【设置文本】,勾选【号码文本框】,其文本值设为[[LVAR1.substr(0,LVAR1.length-1)]]。
(其中,LVAR