一、交互概述
交互是Axure的显著特征
有了Axure这一神器,产品、设计、运营等非开发岗位的同学,不用写一行代码,只需要通过几步简单的配置,就能够实现前端工程师们平日里通过大量代码实现的交互和功能。Axure生成的Html文件之所以能够被称作为原型,而不仅仅是一个线框图或者是草图,就是因为其强大的交互基因,决定了它不是一款普通意义的界面设计工具。交互是Axure中重要的构建模块,用来将静态的线框图转换为可交互的动态HTML文件。在Axure中,通过一个简洁的、带有指导提示的界面指令和逻辑指引就可以创建完整的交互,生成HTML原型时,Axure都会将这些交互转换为浏览器可识别的编码(JavaScript、HTML、CSS)。但是我们需要清楚的是,这些编码并不是产品级别的,不能作为真正的产品使用。它只是实现了前端的视觉交互,但背后需要的后台数据及相关服务,是无法提供给Axure使用的,这也是Axure最大的局限。
交互的定义
什么是交互?简单通俗的讲,就是谁在什么时候做了什么样的事情。这个主体谁其实就是对应原型的元件和页面;什么时候,狭义的理解是时间,在这里我们可以延伸理解为时机,对应原型中的事件;做了什么样的事情,这是一个动态变化的过程,在原型中对应着动作。根据交互的定义,我们可以看出交互是由元件、事件、动作这3个最基本的元素构成。
二、事件
Axure的事件可以分为自动触发的事件和手动触发的事件。
页面事件:是可以自动触发的,比如当浏览器加载页面时,滚动页面时。元件事件:页面中元件的交互效果,都是人为手动触发,比如单击某个按钮。
01页面交互
举例讲解
以页面载入时事件为例,向大家简单讲解页面事件的交互。
浏览器获取到一个加载页面的请求,可以是首次打开页面,也可以是从其他页面跳转过来。页面首先检查是否有页面加载时交互,页面加载时事件是附加在页面上的。如果存在“页面加载时”事件,浏览器首先会执行页面加载时的交互。如果页面加载时包含交互条件,浏览器会根据逻辑条件,执行对应的动作;如果页面加载时不包含条件,那么浏览器将直接执行动作。被请求加载的页面渲染完毕,页面载入时的交互执行完成。
页面交互说明Axure9.0页面交互事件
页面载入时:当页面启动加载时。窗口尺寸改变时:当浏览器窗口大小改变时。窗口向上滚动时:当浏览器窗口向上滚动时。窗口向下滚动时:当浏览器窗口向下滚动时。页面单击时:页面任意位置被鼠标点击时。页面双击时:页面中任意位置被鼠标双击时。页面鼠标右击时:页面中任意位置被鼠标双击时。页面鼠标移动时:当鼠标在页面任意位置移动时。页面按键按下时:当键盘上的按键被按下时。页面按键松开时:当键盘的按键释放时。自适应视图改变时:当自适应视图更改时。
02元件交互
举例讲解
鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以简书的主导航(发现/