交互的定义
什么是交互?简单通俗的讲,就是谁在什么时候做了什么样的事情。
这个主体“谁”=元件和页面;
什么时候,狭义的理解是时间,在这里我们可以延伸理解为时机,对应原型中的事件;
做了什么样的事情,这是一个动态变化的过程,在原型中对应着动作。
根据以上对交互的定义,我们可以看出交互效果的产生是由元件、事件、动作这3个最基本的元素构成。元件在前一章节已经给大家详细介绍过了,下面这一小节先来教大家认识axure中的“事件”。
事件(在什么时候/时机)
axure的事件可以分为和手动触发事件和自动触发的事件。
【元件事件】一般都是人为手动触发,比如单击页面上某个按钮。
【页面事件】一般为自动触发,比如当浏览器加载页面时,滚动页面时等等。
元件交互
举例讲解:鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以简书(https://www.jianshu.com/)这个网站的主导航(发现/关注/消息)跳转为例,说明元件的交互过程。
①点击关注,页面程序判断“关注”是否有鼠标单击事件。
②假设有鼠标单击事件,首先检查事件中是否有逻辑条件,如果有逻辑条件,则按照条件执行对应动作;如果没有条件,则直接执行动作。
③点击“关注"后,自动跳转到关注页面,交互执行完毕
Axure 9.0 自带元件交互事件
【单击时】操作解释:当元件被点击时。
【双击时】操作解释:元件被鼠标双击时。
【右击时】操作解释:当元件被鼠标右键单击时。
【按下时】操作解释:当鼠标按下左键没有被释放时。
【松开时】操作解释:当元件被鼠标点击,这个事件由鼠标按键释放触发。
【鼠标移动时】操作解释:当光标在一个元件上移动时。
【鼠标移入时】操作解释:当光标移入元件范围时。
【鼠标移出时】操作解释:当光标移出元件范围时。
【鼠标停放时】操作解释:当光标在元件上方悬停时。
【鼠标长按时】操作解释:当鼠标按下超过2秒没有被释放时。
【按键按下时】操作解释:键盘上的按键被按下时。
【按键松开时】操作解释:当键盘上的按键弹起时。
【移动时】操作解释:当元件移动时,在页面中的坐标位发生了变化。
【旋转时】操作解释:当元件旋转时。
【尺寸改变时】操作解释:当元件宽度或高度发生改变时。
【显示时】操作解释:当元件通过交互动作显示时。
【隐藏时】操作解释:当元件通过交互动作隐藏时。
【获取焦点时】操作解释:当一个输入项获取焦点时。
【失去焦点时】操作解释:当一个输入项失去焦点时。
【选中改变时】操作解释:适用于下拉框,当下拉框被选中的项发生了改变时,通常作为事件的一个逻辑条件。
【选中时】操作解释:当复选框或单选按钮被选中时。
【取消选中时】操作解释:当复选框或单选按钮取消选中时。
【载入时】操作解释:当元件从一个页面的加载中载入时。
【文字改变时】操作解释:当单行文本框或多行文本框中的文字发生改变时。
【状态改变时】操作解释:当动态面板被设置了“设置面板状态”动作时。
【拖动开始时】操作解释:当一个拖动动作开始时。
【拖动时】操作解释:当一个动态面板正在被拖动时。
【拖动结束时】操作解释:当一个拖动动作结束时。
【向左拖动结束时】操作解释:当一个面板向左拖动结束时。
【向右拖动结束时】操作解释:当一个面板向右拖动结束时。
【向上拖动结束时】操作解释:当一个面板向上拖动结束时。
【向下拖动结束时】操作解释:当一个面板向下拖动结束时。
【滚动时】操作解释:当一个有滚动的面板上下滚动时。
【向上滚动时】操作解释:当一个有滚动的面板,向上滚动时。
【向下滚动时】操作解释:当一个有滚动的面板,向下滚动时。
页面交互
举例讲解:
以页面载入时事件为例,向大家简单讲解页面事件的交互。
浏览器获取到一个加载页面的请求,可以是首次打开页面,也可以是从其他页面跳转过来。
1.页面首先检查是否有页面加载时交互,页面加载时事件是附加在页面上的。
2.如果存在“页面加载时”事件,浏览器首先会执行页面加载时的交互。
3.如果页面加载时包含交互条件,浏览器会根据逻辑条件,执行对应的动作;如果页面
4.加载时不包含条件,那么浏览器将直接执行动作。
5.被请求加载的页面渲染完毕,页面载入时的交互执行完成。
Axure 9.0 自带页面交互事件
【页面载入时】操作解释:当页面启动加载时。
【窗口尺寸改变时】操作解释:当浏览器窗口大小改变时。
【窗口向上滚动时】操作解释:当浏览器窗口向上滚动时。
【窗口向下滚动时】操作解释:当浏览器窗口向下滚动时。
【页面单击时】操作解释:页面任意位置被鼠标点击时。
【页面双击时】操作解释:页面中任意位置被鼠标双击时。
【页面鼠标右击时】操作解释:页面中任意位置被鼠标双击时。
【页面鼠标移动时】操作解释:当鼠标在页面任意位置移动时。
【页面按键按下时】操作解释:当键盘上的按键被按下时。
【页面按键松开时】操作解释:当键盘的按键释放时。
【自适应视图改变时】操作解释:当自适应视图更改时。
总结
此章节主要是带大家认识axure交互三元素中的“事件”元素,可能还是有很多小伙伴对以上的文字介绍整的有点懵逼,不要着急,本章的最后两小节,将会结合本节内容给大家示范交互操作哦!