上一节教了如何向画布中拖拽组件,如何在一个页面中绘制流程图。
今天的课程主要教大家如何在组件上添加交互条件。在组件上添加了交互条件后,在用户做了相应的交互后,就会触发我们设计的事件(动作)。
交互条件编辑位置
讲解之前,我们先看一个交互的例子:
上面的例子中,用户鼠标进行了多种交互操作,除了写出的四种外,还有“按下”、“抬起”、“移动”等等。
在列出的四种操作中,豆子在上面加了一个事件,就是切换对应“绿灯”的隐藏和显示,看图:
具体的操作是红框从上至下。大家可以画个按钮和绿灯自己试试,操作并不难。
开始正题,今天是纯理论课程。
Axure中设计交互的流程是这样的:
我们今天只教大家如何“设定交互条件”,“子条件”和“执行动作”后面的章节讲解。
交互的触发有两种介质,一种是以组件为交互基础的交互流程,一个是以网页窗口为交互基础的交互流程。
注:有一部分组件拥有自己的交互属性,左图并不完全,但是基本囊括了大部分的交互条件。
详解组件交互条件:
组件交互条件可以分为几个部分
具体的触发条目大家按照具体的字面意思理解就可以了。
这里要注意的是在移动端和桌面端的交互条件是有一定区别的,例如移动端鼠标的移入移出;同样桌面端也没有移动端的交互条件,例如压力按。所以具体做设计的时候如果涉及到区别的地方,要注意触发条件的说明。
窗口交互条件
利用窗口交互条件我们可以做出很绚的视觉效果,让我们做原型的时候更有创造力。
图中字面意思已经说的比较清楚了,豆子就不一一解释了。
有了这些可调节的条件,即使我们不会前端,也一样能按照自己的意愿编辑页面的交互逻辑了。甚至说初级的前端人员还做不出这么全面的逻辑。
下一节我们会讲解在我们设定了交互触发条件之后,如何做我们想要执行的动作。
领取专属 10元无门槛券
私享最新 技术干货