Hawking’s Axure RP Pro 5原创教程：（九）交互interactions（中）

作者:hawking 日期:2008-09-02

字体大小: 小中大

本章要介绍的是交互条件。交互条件是axure的学习中的难点，也是axure高段进阶功能。其实我们不设置条件，直接靠文字说明，也可以完成我们的思想传达，如果你设计的原型文档，能模拟真实的交互环境，当然就非常优秀了。

但是，我要强调一点观点，传达思想是首要的工作，传达思想也是有成本的，如果为了传达思想要耗费更多无意义的劳动，损耗更多的时间，增加更多的沟通难度，不要也罢！我个人觉得，我们在做原型设计的时候，有没有必要把页面模拟到和真实情况一模一样，这个还值得探讨。

言归正传，开始来说设置交互条件。

一、进入交互条件设置

当我们选择好了交互触发，通过双击选择促发动作，或者点击add case ，就会弹出interaction case properties 交互事件属性窗口。

通过这个面板，我们要表达我们伟大的交互行为。面板告诉了我们三步策略：

Step1 description 描述
描述后的input输入框，可以编写事件的名称，或者事件的描述文字，以供生成html页面展示时标注此事件，也供生成需求文档的时候辨识此功能功能。

欢迎转载，但请注明原文出处www.2tan.net

Add condition （if necessary）增加条件（如果需要的话）。这就是这章所要说的重点内容，为我们要创建的交互事件，设置前提条件。我想，axure在这里添加这么一句话，也许同样是在提醒我们，我们把交互做到如此之细，是否真的必要？思考清楚了目的，考量准确了我们需要投入的精力，再开始做这一步。我想会清晰很多。

Step2 select action 选择动作
Step3 edit the actions description（click an underlined value to edit）编辑动作描述，你可以通过点击有下划线的文字，编辑动作的具体参数。

第二步与第三步，就是我下一章要说的交互行为，或者叫交互动作也可以。第二步是选择我们要进行的动作，第三步则是为我们的动作设置具体的参数。这些我们稍后再看，还是先来了解下，我们可以怎么设置条件。

二、条件设置的功能与细节

点击step 1 后面带下划线的文字，add condition，弹出condition builder条件设置窗口

条件设置窗口也分三个部分：

A、满足条件类型选择与条件清理

   我们可以同时设置多个条件，但是我们是需要满足所有条件，还是仅仅满足其中一个条件就可以了呢？
    在satisfy “any / all”of the following 中就提供了这个选择。
         选择all，则需要满足我们设置的所有条件；假设，你设置了条件a、b、c，则你需要同时满足条件a、b、c，才能产生最后的交互。
         选择any，就是需要满足我们设置的任一条件。假设，你设置了条件a、b、c，则你需要满足a、b、c中任何一个条件，就能产生最后的交互。

另外，如果我们对我们设置的众多条件都不满意，想全部删除重新设置，clear all 就是为了满足我们这一需要的按钮。

B、设置具体条件

a)增加条件与删除条件。
初始默认我们只有一个条件，通过点击条件末尾的“-”、“+”按钮，我们可以删除、添加新的条件。

b)条件设置

注意：在设置条件前，需要给条件所涉及的widgets对象设置label名称，因为条件设置，需要用label定位widgets。

条件设置分五个部分，但是其实只需要将其看做三个部分。为什么这么说呢？这是我的深刻教训，我在写这篇攻略的时候走了一段比较长的弯路，最后才发现自己的错误，所以也非常希望朋友们不走我一样的弯路。下面且听我道来。

我最开始把条件设置看做5个部分，1是作为条件类型的设置，则2是设置要比较的对象，3是比较方式，然后根据你选择的对象，后面4、5会分别出现不同的可比较条件或设置条件。这样理解是没有错的，但是就绕了一个非常大的弯路，而且表述起来要逐条罗列，非常繁琐。所以一开始，我根据1可能出现的六种类型，画了6个大表格，企图把所有的情况囊括，做了很多无用功。

现在我们尝试把它理解为三个部分，那么怎么理解呢？
细心的人可能发现了，3是设置的比较方式，可以是等于，也可以是不等于，或者是大于小于。而左右两边是被比较的两个对象。

对了，这就是关键，1、2设置的是条件的比较方，我们把它看做a，4、5是条件的被比较方，我们把它看做b，而3就是比较方式。而我们要做的工作就是设置a与b的关系。

但是设置比较关系是有原则的，就是数值可以和数值比较，区域选择状态可以和区域选择状态比较。我们不可能设置让一个变量，等于一个区域被选择的状态。所以根据a的不同，b的可选项也会相应的改变，但是他们的内容基本上是一致的。

比较对象类型	比较针对目标	注意
check state of 多项/单项选择框的选择状态	多项选择（checkbox）、单项选择（radio button）。注意：这里会显示页面上的多项选择、单项选择的label名称，所以做页面工作的时候，要保持有效命名label的好习惯，以下不再累述。	此项目只能与选择状态比较，或者value of variable变量值比较，不能与其他类型的对象比较。这是最特殊的一项，以下不再做强调。
selected option of 所选择的菜单	下拉菜单条droplist或者list box列表文本框。这里也是显示你所设置的label名称
value of variable 变量的值	Onloadvariable系统默认的变量
	Add new..自己新增一个变量
	如果你设置了其他变量，这里会提供选择
length of variable value 变量值的长度	同上
check state of多项/单项选择框的选择状态	这里会提供文本输入框input、文本框text供你选择
length of widget value 图形原件上的文字长度	提供文本输入框input、文本框text、下拉菜单条droplist或者list box列表文本框的label名称选择
Value值	当a比较对象是list时，这里是选择状态，当a的比较对象是数值时，这个数值由用户自定义设置。	此选项根据条件设置情况只出现在b。

以上列出了可操作的对象情况，大家可以自行研究一下，写得有点不太形象，有机会我再专门做实例来说明。其实很简单，朋友们可以自己做一两个例子，把所有的wigets拖到页面里，并根据各自的情况命名label，然后一条条的选择，操作一下就清楚了，我这里主要提的是一个理解的方法，条件含义的说明。

当然，不能忘了说明一下，3比较方式有哪些，如下：
3.1 equals 对象的值等于
3.2 does not equals 对象的值不等于
3.3 is less than 对象的值小于
3.4 is greater than 对象的值大于
3.5 is less or equals 对象的值小于等于
3.6 is greater or equals 对象的值大于等于
3.7 is 对象是，需要注意的是，这里不是关注的值，而是关注的对象组成的内容

以上内容，大家可以对照着参考学习。

C、自动生成对条件的文字描述

条件的第三部份基本上不需要我们手动设置，在进行第二步条件设置的时候，这里会自动生成描述性的英文。即便是可以选择的部分，也会提示链接，让我们点击链接，手动选择。所以这里的重点意义，在于生成prd文档的时候，会生成条件的说明文字。

三、综合谈一谈设置合理的条件。

好了，交互条件设置基本上说完了，可能会有一些不清楚，因为这里的条件设置会涉及到部分的程序的内容，而且条件设置有点绕，有点晕。但是大家没有必要那么着急，一方面因为如果你针对我的文字多对应操作一下，就很容易了解，另一方面因为我现在要说的，还是条件设置不重要。

为什么条件设置不重要？我要提出我的几点理由：

1、设置过于复杂的条件，做成的展示文件，可能根本没有用途。
程序员可能根本不看，即便看也容易遗漏细节，仍然需要你与他沟通。

2、你需要花费过多的时间。
这无形中提高了你的开发成本，对于你的项目是不利的。

3、花哨的展示，脱离了产品策划的精髓。
我相信，我们可以想象到的交互效果，要用现在的axure做出来，肯定是不可能完全达到的，这也才是我们创造力的价值体现。而那些可以达到的效果，也没有必要我们费劲心机的让它在策划阶段就实现。作为交互设计师，更多应该关注功能是否满足用户需求，提高用户使用效率；作为产品经理应该更多的关注产品的生命线、竞争力。

由上，所以我一再强调，除非必要，真的不用研究得太深，表现得太细致，这只是个工具。可能你不太同意，那也没关系，我们可以交流，提出你的思想，让我们碰出火花！