=======================================
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中可以通过母版解决多个页面中重复内容的编辑问题。就像PPT中的母版一样，只需要把每个页面中都有的内容在母版中编辑完毕，然后添加到相应的页面中。当页面中添加了母版的内容时，如果母版中的内容发生了改变，页面中的内容也会同步改变。
我们先来看一下母版的基础 *** 作：新建、编辑与删除。（图7-1）
（图7-1）
点击面板中的新建按钮或者点击面板空白处按快捷键<Ctrl+回车键>完成母版的创建。
创建后可以对母版名称进行编辑，双击母版名称，画布则变成母版的编辑区域。母版画布中可以像组织页面内容一样，放入元件、添加交互等组成模板的内容。
如果需要删除一个母版，需要先将母版从所有关联的页面中移除，才可以删除母版。被删除的母版有下级母版时，下级母版将被同时删除。如果需要查看母版被添加到哪些页面中，可以在母版名称上点击【鼠标右键】，在菜单中选择【使用情况】进行查看。
在母版名称上单击<鼠标右键>，打开右键菜单，在菜单列表中点击选项【添加到页面中】，在d出的窗口中，可以指定将母版放到哪些页面中使用。指定页面的时候软件提供了一些快捷功能给我们使用。（图7-2）
（图7-2）
如果页面上不再需要某个母版，或者将某个母版添加到了无需添加该母版的页面中，我们可以通过在母版名称上点击<鼠标右键>，打开右键菜单，选择【从页面中移除】，在打开的页面中选择要移除的页面后，点击【确定】即可完成移除。（图7-3）
（图7-3）
另外，也可以在页面中，点击母版将其选中，然后按下<Delete>键其删除。
母版除了使用前面的方法添加到页面中，还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要，软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>，打开右键菜单，在【拖放行为】的二级菜单中进行选择。（图7-4）
（图7-4）
允许将母版内容放入画布中的任意位置上摆放。
母版内容放入到画布中并松开鼠标后，母版内容会自动放置到画布中的固定位置上，这个位置与母版中该内容所在的位置一致。
允许将母版内容放入画布中的任意位置上摆放。但是，当拖放结束后，这些内容与母版脱离联系，变成普通元件存在于画布中。母版进行编辑发生改变时，这些内容不会同步发生变化。
圆儿：这样果然很方便！但是还有个问题。母版中的内容，包括交互都是可以重用在任何页面上，并且与母版保持一致。但是，假如母版中有一个按钮，我需要在不同的页面中，点击这个按钮时，显示不同的内容。需要怎么做呢？
小楼：我没太听懂，你举个例子说一下。
圆儿：比如说啊！ A、B两个页面中添加了同一个母版，母版中有一个在线客服的按钮。在A页面中，鼠标进入这个按钮时显示客服小张的头像，而在B页面中，鼠标进入这个按钮时则显示客服小李的头像。
小楼：嗯，这么说我就明白了。 我也给你举个例子。我们家里用电，如果只有一个供电总线，那么开关供电总线的电闸会影响家中所有的供电。但是，我们希望每个房间的供电都能单独控制，所以，需要安装一个设备叫“配电箱”，通过配电箱就可以对每个房间的供电进行单独管理，不会互相影响。在Axure中，母版中的每个触发事件添加交互都像供电总线，影响所有使用了这个母版页面。如果在添加了母版的页面上给母版中的某个触发事件单独添加交互，这就需要我们给母版中的这个触发事件接上一个“配电箱”，这个“配电箱”的名字叫“自定义触发事件”。
案例13：母版的自定义触发事件
（图7-5）
（图7-6）
2、创建一个自定义的触发事件，就如同需要购买一个配电箱。
创建自定义触发事件，需要先双击母版名称，打开母版的编辑区域。然后，在导航菜单中，点击菜单项【布局】，选择列表中的最后一项【管理母版触发事件】中进行创建。本案例中，需要对按钮元件的【鼠标移入时】事件进行不同页面的交互设置，就可以点击【+】添加一个自定义的触发事件名称，比如：“MyMouseMove”。（图7-7）
（图7-7）
注意：只有画布中编辑母版的内容时，才能在导航菜单中打开【管理母版触发事件】的选项。否则，该选项为灰色的禁用状态。
为按钮元件的【鼠标移入时】事件添加交互，【添加用例】，并设置动作为选择【引发事件】为“MyMouseMove”。（图7-8）
（图7-8）
将母版添加到PageA和PageB两个页面中。在添加了母版的页面中点中母版，则会在交互的功能界面中出现这个母版中绑定的所有自定义触发事件，就像从配电箱中接出的分线。（图7-9）
（图7-9）
为自定义触发事件“MyMouseMove”，添加用例设置动作为【设置图片】于图片元件“CallCenter”，为客服小张的头像。（图7-10）
（图7-10）
然后，继续设置动作【显示】图片元件“CallCenter”，【更多选项】中选择“d出效果”。d出效果能够让鼠标离开时，显示出来的图片元件“CallCenter”再自动恢复隐藏状态。（图7-11）
（图7-11）
为自定义触发事件“MyMouseMove”，添加用例设置动作为【设置图片】于元件“CallCenter”，为客服小李的头像。（参考图7-10）
然后，继续设置动作【显示】图片元件“CallCenter”，【更多选项】中选择“d出效果”。（参考图7-11）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）