Axure基础：元件交互事件

Posted 2023-04-25

参考技术A 鼠标单击跳转就是最基本的元件交互事件，可以用于鼠标点击时，也可以用于移动设备上的手指点击时。我们以的主导航（发现/关注/消息）跳转为例，说明元件的交互过程。

=======================================
Axure 9.0元件交互事件

单击时：当元件被点击时。
双击时：元件被鼠标双击时。
右击时：当元件被鼠标右键单击时。
按下时：当鼠标按下左键没有被释放时。
松开时：当元件被鼠标点击，这个事件由鼠标按键释放触发。
鼠标移动时：当光标在一个元件上移动时。
鼠标移入时：当光标移入元件范围时。
鼠标移出时：当光标移出元件范围时。
鼠标停放时：当光标在元件上方悬停时。
鼠标长按时：当鼠标按下超过2秒没有被释放时。
按键按下时：键盘上的按键被按下时。
按键松开时：当键盘上的按键弹起时。
移动时：当元件移动时，在页面中的坐标位发生了变化。
旋转时：当元件旋转时。
尺寸改变时：当元件宽度或高度发生改变时。
显示时：当元件通过交互动作显示时。
隐藏时：当元件通过交互动作隐藏时。
获取焦点时：当一个输入项获取焦点时。
失去焦点时：当一个输入项失去焦点时。
选中改变时：适用于下拉框，当下拉框被选中的项发生了改变时，通常作为事件的一个逻辑条件。
选中时：当复选框或单选按钮被选中时。
取消选中时：当复选框或单选按钮取消选中时。
载入时：当元件从一个页面的加载中载入时。
文字改变时：当单行文本框或多行文本框中的文字发生改变时。
状态改变时：当动态面板被设置了“设置面板状态”动作时。
拖动开始时：当一个拖动动作开始时。
拖动时：当一个动态面板正在被拖动时。
拖动结束时：当一个拖动动作结束时。
向左拖动结束时：当一个面板向左拖动结束时。
向右拖动结束时：当一个面板向右拖动结束时。
向上拖动结束时：当一个面板向上拖动结束时。
向下拖动结束时：当一个面板向下拖动结束时。
滚动时：当一个有滚动的面板上下滚动时。
向上滚动时：当一个有滚动的面板，向上滚动时。
向下滚动时：当一个有滚动的面板，向下滚动时。

Axure 9.0元件交互样式

鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。
鼠标按下：当鼠标按下元件时，元件的显示样式。
选中：元件被选中时的显示样式。
禁用：元件被停止使用时的显示样式。
获取焦点：当光标聚焦在元件（如文本框）上的显示样式。

=======================================
操作方法

第一步：
添加用例：在设计区域选中元件，在右侧交互面板中点击新建交互，我们会看到该元件可用的事件列表，点击其中的一个事件，点击右侧的用例图标或者直接选择想要添加的动作。
第二步：
插入动作：鼠标点击动作名称，开始添加动作，支持添加多个动作。当我们准备插入第二个动作时，点击用例下方的圆形十字架，开始插入更多动作。
第三步：
配置动作：动作选择完毕后，我们还需要为动作进行一些规则或属性的配置。比如，我们添加的动作是打开链接，在动作配置中，需要添加链接页面并选择页面打开的方式（当前窗口、新窗口/新标签、弹出窗口和父级窗口），最后点击完成。
第四步：
设置交互样式：
选中元件，点击新建交互，可以进行悬停、选择、禁用等相关的交互样式设置；
第五步：
在预览或生成的html文件进行查看。

参考：https://www.jianshu.com/p/ae12af2a1f43

=======================================
元件交互示例：

（1）鼠标按下效果：
点击按下按钮置灰这样一个静态效果：就不用设置【交互动作】 ，直接设置【交互样式】即可

（2）鼠标选中效果：
希望 “提交”按钮 选中后， 变蓝色+下划线：
1：选择文本输入框，右边操作区选择【交互】-【新建交互】
2：插入动作：鼠标点击动作名称，开始添加动作 「鼠标点击时」
3：编辑动作：动作选择完毕后，选择「设置选中」，设置选中动作细节
注：如果多个按钮，不同效果
法1）给不同的按钮123起名字，设置按钮1交互动作时设置好对应按钮23的动作
法2）全选按钮-右键-设置「选项的组」名称 --->选项组的所有元素默认只能单选
4：选择交互样式：选择文本输入框，-【新建交互】，选择【选中】设置样式
5：发布，预览看设置的样式

=======================================
配置动作细节 ：

（一）添加条件
有些时候，我们可能会在页面中表达一些判断逻辑，当xxx时，执行xxx动作。
为了做到这一点，我们可以使用axure提供的条件设置功能，来为一个元件设置条件并添加执行动作。
示例：
如果单击先出现弹窗，再单击隐藏弹窗

axure

1.页面结构 添加子或者同级页面 双击打开页面 可以进行重命名

2.添加元件库或者创建原件库以及下载元件库（创建元件库之后要保存以及刷新元件库）

3.母板的使用

4.交互以及说明的使用 

5.元件属性与样式

6.右下角的元件管理 可以进行筛选

7.对元件进行命名非常有必要

8.页面样式 页面交互以及页面说明 （页面样式的添加 以及草图的作用）

9.选中元件的时候右上角有一个黑色的小点 可以调节元件的形状等等