3、开关状态切换 —— Axure实用交互

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,这样就可以循环满足条件实现原型设计。

 

 

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

 

 

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

 


至此,雷达效果讲演结束,期待与您的交流沟通!

7

评论:

8 条评论,访客:8 条,站长:0 条

100%好评

  • 好评:(100%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. NEKO
    NEKO发布于: 

    为什么按钮没有到beijing的末端,而是空了一小截?

  2. NEKO
    NEKO发布于: 

    为什么最后设置了case 1 的条件了,但是点了按钮后,它还是往前面跑了?

  3. NEKO
    NEKO发布于: 

    请问移动的选项是不是要选择”到达”?

  4. 兵兵
    兵兵发布于: 

    为什么设置了移动距离的函数之后预览不生效呢,我看和你的是一样的

    • Superman!
      Superman!发布于: 

      是第一步移动到指定位置都实现不了么?看看鼠标点击的目标是否设置正确,移动后的X、Y值是否定义清楚

发表评论