鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以简书的主导航(发现/关注/消息)跳转为例,说明元件的交互过程。
=======================================
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提供的条件设置功能,来为一个元件设置条件并添加执行动作。
示例:
如果单击先出现弹窗,再单击隐藏弹窗