Axure实用交互开关状态切换

　　写在开头:

　　开关的制作在几乎所有原型设计中都会用到，所以美观自然的交互开关可以给你的原型设计加分不少。

　　本次开关设计主要用到的是逻辑为：选中状态的切换

　　首先，来看一下演示动画

　　开始原型设计

　　一、创建元件

　　首先需要打开Axure软件，并在画板上创建两个图形：一个为300*40的矩形，需要在“样式”一栏中修改它的元件半径为60，背景填充颜色为灰色，线段类型为无none，并命名为beijing;一个为45*45的圆形，填充颜色为深灰色，线段类型为无none，并命名为anniu。

　　创建完以后需要把两个元件居中对齐。

　　二、交互设计

　　(1)设置圆形anniu的交互动作(case 1)

　　① 当鼠标点击时，移动当前元件到*值X、Y

　　② X=[[anniu.x+beijing.width-anniu.width]]，需要定义Fx的局部变量anniu以及beijing

　　上面函数的意思为：按钮的X坐标值+后面矩形背景的宽度-按钮的宽度，因为元件的X坐标是以左边为基准的。

　　③ Y=[[target.y]]，target不需要定义因为它的含义为“目标的” ; [[target.y]] 意为：移动后的Y坐标和移动前的一致。

　　④ 动画为线性500ms

　　现在可以点击预览一下画面，然后你就会惊奇的发现还没有设置颜色变换。

　　所以我们还要设置anniu选中状态!因为选中状态可以切换颜色进行变化展示。

　　(2)改变选中交互设置

　　下面需要设置anniu、beijing的选中交互设置为改变填充颜色

　　如下图所示：

　　接着设置鼠标单击anniu的交互动作为选中状态于anniu、beijing为true;

　　(3)设置选中状态及交互条件(case 2)

　　① 然后设置鼠标单击anniu的case 2 的条件为当anniu的选中状态为true的情况下

　　移动当前元件到*值，X=[[anniu.x+anniu.width-beijing.width]]，同样也需要进行Fx的定义。

　　Y=[[target.y]]， 动画为线性500ms。

　　② 设置选中状态于anniu、beijing为flase，这样可以达到周而复始循环开关的效果。

　　(4)设置case 1的条件

　　要实现循环开关，则需要给case 1进行条件约束，保证case 1和case 2不互相进行干扰。因为要是不给case 1限制的话，当鼠标点击按钮后，元件会移动到指定位置完成*步操作。但是再次点击按钮后，元件会继续往前移动，一直进行case 1 的动作而不运行case 2 的动作。

　　所以需要在case 1前设立条件如果anniu的元件状态为flase，这样就可以循环满足条件实现原型设计。

　　整个交互用例设计如下图所示

　　因为交互用例中没有直接改变目标颜色的交互操作，所以如果你想要更改目标颜色，不妨试试使用选中状态、禁用状态、鼠标按下以及鼠标悬停这些设置，通过设置状态变化从而切换显示颜色。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。