Axure基础：元件交互事件

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

=======================================

Axure 9.0元件交互事件

单击时：当元件被点击时。

双击时：元件被鼠标双击时。

右击时：当元件被鼠标右键单击时。

按下时：当鼠标按下左键没有被释放时。

松开时：当元件被鼠标点击，这个事件由鼠标按键释放触发。

鼠标移动时：当光标在一个元件上移动时。

鼠标移入时：当光标移入元件范围时。

鼠标移出时：当光标移出元件范围时。

鼠标停放时：当光标在元件上方悬停时。

鼠标长按时：当鼠标按下超过2秒没有被释放时。

按键按下时：键盘上的按键被按下时。

按键松开时：当键盘上的按键d起时。

移动时：当元件移动时，在页面中的坐标位发生了变化。

旋转时：当元件旋转时。

尺寸改变时：当元件宽度或高度发生改变时。

显示时：当元件通过交互动作显示时。

隐藏时：当元件通过交互动作隐藏时。

获取焦点时：当一个输入项获取焦点时。

失去焦点时：当一个输入项失去焦点时。

选中改变时：适用于下拉框，当下拉框被选中的项发生了改变时，通常作为事件的一个逻辑条件。

选中时：当复选框或单选按钮被选中时。

取消选中时：当复选框或单选按钮取消选中时。

载入时：当元件从一个页面的加载中载入时。

文字改变时：当单行文本框或多行文本框中的文字发生改变时。

状态改变时：当动态面板被设置了“设置面板状态”动作时。

拖动开始时：当一个拖动动作开始时。

拖动时：当一个动态面板正在被拖动时。

拖动结束时：当一个拖动动作结束时。

向左拖动结束时：当一个面板向左拖动结束时。

向右拖动结束时：当一个面板向右拖动结束时。

向上拖动结束时：当一个面板向上拖动结束时。

向下拖动结束时：当一个面板向下拖动结束时。

滚动时：当一个有滚动的面板上下滚动时。

向上滚动时：当一个有滚动的面板，向上滚动时。

向下滚动时：当一个有滚动的面板，向下滚动时。

Axure 9.0元件交互样式

鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。

鼠标按下：当鼠标按下元件时，元件的显示样式。

选中：元件被选中时的显示样式。

禁用：元件被停止使用时的显示样式。

获取焦点：当光标聚焦在元件（如文本框）上的显示样式。

=======================================

*** 作方法

第一步：

添加用例：在设计区域选中元件，在右侧交互面板中点击新建交互，我们会看到该元件可用的事件列表，点击其中的一个事件，点击右侧的用例图标或者直接选择想要添加的动作。

第二步：

插入动作：鼠标点击动作名称，开始添加动作，支持添加多个动作。当我们准备插入第二个动作时，点击用例下方的圆形十字架，开始插入更多动作。

第三步：

配置动作：动作选择完毕后，我们还需要为动作进行一些规则或属性的配置。比如，我们添加的动作是打开链接，在动作配置中，需要添加链接页面并选择页面打开的方式（当前窗口、新窗口/新标签、d出窗口和父级窗口），最后点击完成。

第四步：

设置交互样式：

选中元件，点击新建交互，可以进行悬停、选择、禁用等相关的交互样式设置；

第五步：

在预览或生成的HTML文件进行查看。

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

=======================================

元件交互示例：

（1）鼠标按下效果：

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

（2）鼠标选中效果：

希望 “提交”按钮 选中后， 变蓝色+下划线：

1：选择文本输入框，右边 *** 作区选择【交互】-【新建交互】

2：插入动作：鼠标点击动作名称，开始添加动作 「鼠标点击时」

3：编辑动作：动作选择完毕后，选择「设置选中」，设置选中动作细节

注：如果多个按钮，不同效果

法1）给不同的按钮123起名字，设置按钮1交互动作时设置好对应按钮23的动作

法2）全选按钮-右键-设置「选项的组」名称 --->选项组的所有元素默认只能单选

4：选择交互样式：选择文本输入框，-【新建交互】，选择【选中】设置样式

5：发布，预览看设置的样式

=======================================

配置动作细节 ：

（一）添加条件

有些时候，我们可能会在页面中表达一些判断逻辑，当xxx时，执行xxx动作。

为了做到这一点，我们可以使用axure提供的条件设置功能，来为一个元件设置条件并添加执行动作。

示例：

如果单击先出现d窗，再单击隐藏d窗

以下几小教程使用的是Axure的动态面板来实现，内容简单，适合菜鸟查阅，老鸟可飘过，顺便帮忙点个赞哈/偷笑。

一．伸缩/隐藏导航栏

例如：鼠标移动到一级导航上，二级导航会下拉方式显示

1.打开Axure,拖动一个矩形元件，设置宽830、高49；

2.输入所需要的一级导航名称，使用文本标签元件，字体大小20；

3.对需要做二级导航的标签处下方，设置5个左右的矩形框元件，矩形框内写上二级导航名称；

4.5个矩形框全选，右键设置“转换为动态面板”，此时5个矩形已合为一个元件，并设置好该元件的Name：tab

5.对需要下拉的标签，设置交互方式【鼠标移动时→选择显示动作→选择tab→更多选项（d出效果）】

二．遮罩效果d窗

例如：常见交互方式，点击登录或注册，d出登录或注册窗口，背景页面显灰色

�1.布局好所需的元件，样式可自定；

2.d窗外框和内容，右键设置“转换为动态面板”，并且样式处设置为隐藏，设置一个Name：add

3.注册设置交互方式【鼠标点击时→选择显示动作→选择add→更多选项（灯箱效果）→背景色设置为灰色】

三．返回顶部设计

例如：鼠标点击箭头，网页自动往上返回第一屏页面

1.先搭建一个建议的页面，页面尽量往下延伸，方便测试，在页面底端放一个矩形变形后的箭头，并把箭头右键设置“转换为动态面板”。

2..箭头右键设置为“固定到浏览器”，d出设置界面，固定到浏览器窗口→水平固定为右→边距设置为100→垂直固定底部→边距10；

2.将页面顶部元件设置一个Name,把它的Y坐标设置为“0”；

3.箭头设置鼠标点击交互，添加动作为滚动到元件<锚链接>，选择顶部元件，仅垂直滚动，动画为线性。

有看不明白的同鞋，可以留言。想要看《介绍Axure RP几个常用小设计（二）》，请加关注，谢谢！

---