Axure从入门到精通-第2课,交互触发条件

上一节教了如何向画布中拖拽组件,如何在一个页面中绘制流程图。

今天的课程主要教大家如何在组件上添加交互条件。在组件上添加了交互条件后,在用户做了相应的交互后,就会触发我们设计的事件(动作)

交互条件编辑位置

讲解之前,我们先看一个交互的例子:

上面的例子中,用户鼠标进行了多种交互操作,除了写出的四种外,还有“按下”、“抬起”、“移动”等等。

在列出的四种操作中,豆子在上面加了一个事件,就是切换对应“绿灯”的隐藏和显示,看图:

具体的操作是红框从上至下。大家可以画个按钮和绿灯自己试试,操作并不难。

开始正题,今天是纯理论课程。

Axure中设计交互的流程是这样的:

我们今天只教大家如何“设定交互条件”,“子条件”和“执行动作”后面的章节讲解。

交互的触发有两种介质,一种是以组件为交互基础的交互流程,一个是以网页窗口为交互基础的交互流程。

注:有一部分组件拥有自己的交互属性,左图并不完全,但是基本囊括了大部分的交互条件。

详解组件交互条件:

组件交互条件可以分为几个部分

具体的触发条目大家按照具体的字面意思理解就可以了。

这里要注意的是在移动端和桌面端的交互条件是有一定区别的,例如移动端鼠标的移入移出;同样桌面端也没有移动端的交互条件,例如压力按。所以具体做设计的时候如果涉及到区别的地方,要注意触发条件的说明。

窗口交互条件

利用窗口交互条件我们可以做出很绚的视觉效果,让我们做原型的时候更有创造力。

图中字面意思已经说的比较清楚了,豆子就不一一解释了。

有了这些可调节的条件,即使我们不会前端,也一样能按照自己的意愿编辑页面的交互逻辑了。甚至说初级的前端人员还做不出这么全面的逻辑。

下一节我们会讲解在我们设定了交互触发条件之后,如何做我们想要执行的动作。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180619G0NDF700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券