2、re使原型设计及和客户的交流方式发生了变革：进行更加高效的设计；让你体验动态的原型；更加清晰的交流想法；目前全球有很多大型公司和重要机构在使用Axure，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。产品原型(Demo)设计-Axure入门培训3Axure的工作环境(线框图面板、控件交互面板、控件注解面板）产品原型(Demo)设计-Axure入门培训4Axure的工作环境站点地图面板站点地图面板对所设计的页面进行添加、删除、重命名和组织组织的操作。可以直接拖动页面改变其层级结构。双击页面即可在主工作区打开页面进行设计。组件面板组件面板该面板中有线框图控件和流程图控件，用这些控件进行页
3、面框架框架和流程图的设计。可直接拖拽、拷贝控件到主工作区进行移动、改变尺寸操作。双击、右键点击控件可针对不同的控件进行编辑风格和属性的操作。模块面板模块面板模块是一种可以重复使用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织。如图示可以针对项目做页面模块，比如页头、页尾；也可制作所有项目的公用模板，比如切换标签样式或图形按钮。产品原型(Demo)设计-Axure入门培训5Axure的工作环境线框图面板线框图面板在线框图面板中可以进行页面线框图、流程图的设计，线框图面板也就是Axure的主工作区。在最上方以标签形式显示打开的多个页面。控件交互面板控件交互面板定义控件的交互，如：设定链
4、接、弹出、动态面板的显示和隐藏等。不同控件有不同的内建交互事件，如OnClick（鼠标点击）、OnMouseEnter（鼠标悬停）等，后面会有详细介绍。如果需要特殊说明的功能模块或有交互行为产生的控件一定要填写标签，如“个人信息提交按钮”、“选择商家等级下拉菜单”等等。产品原型(Demo)设计-Axure入门培训6Axure的工作环境控件注释面板控件注释面板对控件进行注释、定义和功能进行说明。里面的选项可以自定义，比如添加一个“功能说明”的项，并删除原有的项目。添加注释的控件在产品原型页面上会显示一个黄色便签的图标，点击可查看具体注释。汉化版的Axure不能修改下拉菜单注释，请避开此选项或者用
6、页面的注释和交互事件。页面注释和页面交互面板页面注释和页面交互面板--管理注释管理注释点击页面注释和页面交互面板顶部的箭头按钮，可以打开页面注释管理页面，可以添加不同的页面注释字段，如“页面说明”、“参与部门”等等，添加完成后，可点击箭头按钮为不同的字段添加说明。现在演示一下Axure的工作环境。产品原型(Demo)设计-Axure入门培训8基本交互设计控件交互面板中可以定义控件的交互，交互由事件（Events）、场景（Cases）和动作（Actions）组成：用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；每个事件可以包含多个场景，场
7、景也就是事件触发后要满足的条件；每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。事件、场景和动作的关系产品原型(Demo)设计-Axure入门培训9基本交互设计大多控件只具备常见的三种触发事件：OnClick、OnMouseEnter与OnMouseOut，一些特殊的控件可触发的事件有些不同：按钮控件只有OnClick单选按钮和复选框有OnFocus、OnLostFocus文本框、文本域、下拉菜单、列表框有OnKeyUp、OnFocus、OnLostFocus页面加载或模块被载入时发生OnPageLoad目前目前AxureRP5AxureRP5支持的事
8、件如下：支持的事件如下：OnClick：鼠标点击OnMouseEnter：鼠标的指针移动到对象上OnMouseOut：鼠标的指针移动出对象外OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnPageLoad：页面或模块载入页面或模块载入OnKeyUp：实时响应键盘输入实时响应键盘输入产品原型(Demo)设计-Axure入门培训10基本交互设计定义链接1.首先，拖拉一个按钮控件到线框图中，并选择这个按钮；2.然后，控件交互面板中鼠标双击“OnClick”这个事件，这时会出现“交互事件属性”对话窗，在这个对话框
11、象会有淡红或灰色的遮罩，执行菜单“线框图线框图-标记模块标记模块”可以移除遮罩。模块预设行为是“正常”，可以在模块面板中的模块上点鼠标右键，然后利用“行为”子菜单将它的行为修改为“作为背景”或“自定义组件”，修改完成后，模块的图标也会发生改变，以标识当前模块的作用。正常:模块可以被移动与放置在线框图中的任何地方，对模块修改后，所做的修改会在该模块的所有使用实例中反映出来。作为背景:模块应用在线框图中时，会处于线框图的最底层并被锁定，所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。自定义组件自定义组件:模块应用在线框图中时，模块中的控件与模块失去关联，模块中的控件可以像
12、一般控件一样进行编辑，就好像只是进行了复制。常用于创建具有自定义属性、注释和交互的自定义控件库，例如：具有白色文字的蓝色按钮。现在演示一下定义模块的不同行为，在线框图内的不同效果。产品原型(Demo)设计-Axure入门培训13生成原型文件什么是什么是HTMLHTML原型原型在Axure中设计了带注释的线框图并定义了交互之后，就可以产生一个可以互动的、基于浏览器的原型了。Axure原型是一些HTML和JavaScript文件，可以在IE6+浏览器中执行。配置和生成原型配置和生成原型点击主菜单“生成-原型(F5)”或工具栏上的“原型”按钮，可以配置和生成原型，在打开的“配置HTML原型”对话框
14、就可以看到更新的页面了。产品原型(Demo)设计-Axure入门培训14生成原型文件浏览和分发Axure输出的HTML原型的界面可分成三个区域：左侧:是一个页面导航列表，以层级形式展示原型中页面。底部:显示当前页面的备注说明，即页面备注。中间:显示线框图和流程图，线框图可以按照所设计的交互进行鼠标和键盘的互动。单击控件旁边的黄色便利贴小图标可以阅读控件注释。需要注意的是：我们通常会把原型分发给不同的部门（比如设计部、制作部、技术部），有些带交互功能的部分是没有明确提示“这里可以点击”，黄色便利贴图标是一个有效的标记，我们在制作原型时，有交互动作的部分一定要加注释有交互动作的部分一定要加注
16、程图其实也是页面，只要修改页面类型为流程图页面类型为流程图即可。在页面上点击右键，选择“图表类型-流程图”，这时在页面前图标会变为一个图标。注意：要创建流程图并不是一定强制要将页面指定为流程图，指定为流程图只是方便识别。在控件面板中的顶部工具栏上点击“流程图”按钮可以找到流程控件。Axure里面由于不涉及到具体的程序流程，所以有些标准的图形并没有提供，但可以支持基本的流程图，特殊的形状可以添加图片表示。要添加连接线，可以点击主工具栏上的“连接线模式(F11)”按钮，这时线框图面板会从指针状态切换到连接状态，再点击“指针选择模式(F9)”可以切换回到指针状态。在连接状态时，在流程图中点击和拖动
17、就可以绘制和添加连接线。例如，要连接两个流程控件，将鼠标放在一个流程控件的连接点上，点击和拖拉，然后鼠标在另一个目标流程控件的连接点上松开，就可以完成连接。点击和拖动连接线的尾部端点可进行重新连接。选择流程连接线，然后点击工具栏中的“线条样式”和“箭头样式”按钮可以修改连接线的形状和样式，如箭头、虚线。产品原型(Demo)设计-Axure入门培训16流程图与线框图控件相似，你可以拖拉流程图控件到线框面板中，可以通过工具栏和右键菜单来修改流程图形状的风格和属性。另外，已经绘制好的流程形状可以通过控件右键菜单中的“编辑流程形状”的子菜单进行流程图形状的转变。可以在流程图控件上分配一个引用页面分配
18、一个引用页面，如果流程图控件引用了一个页面，控件上的文本会变成页面的名称，修改页面的名称时流程图相应页面的名称也会变化。在原型中点击引用了页面的流程控件可以自动链接到页面中。在页面导航面板页面导航面板中拖拉页面到线框图或流程图中，将会创建一个引用了页面的流程图控件。流程图控件上所引用的页面可以通过在控件上的右键菜单“编辑流程图形状”进行编辑和清除。引用页面后，控件左上角会有一个“页面”图标进行标识。也可以根据页面导航面板中的页面层级关系自动产生流程图（在页面上点击右键，选择“生成流程图”），但所生成的流程图只是根据你所选择的页面和子页面的层级关系，并且会自动引用对应的页面。一些没有页面的流程
19、需要手动添加。现在演示一下流程图做法，并且在流程图内引用现有页面、拖拉页面进流程图。产品原型(Demo)设计-Axure入门培训右键页面类型1、wireframe：页面类型定为线框图，文件图标显示页面图标。2、flow：页面类型定位流程图，文件图标显示流程图标。由于页面有两种类型，wireframe与flow，所以要善于用这两种标记页面，从而让人理解你的意图。我总结大致这两种标记可以如下利用。flow图为父页面，wireframe图为子页面：先画流程图，然后根据流程图构建页面关系。这样在流程图的指引下结构页面关系，可以更清晰的理解页面框架。wireframe为父页面，flow为子页面：为页面线
20、框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。产品原型(Demo)设计-Axure入门培训18高级交互设计动态面板动态面板是我们经常使用到的动态效果展示控件，可以让你的原型中实现高级的动态交互功能。动态面板包含有多个状态（states），每个状态可包含一系列控件。任何时候都只有一个状态是可见的，或这整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像其它控件一样，可以在控件面板中拖拉动态面板控件，将动态面板控件添加到线框图中。在线框图中，双击动态面板可以打开一个“动态面板状态管理”对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板
21、的状态。第一个状态是动态面板的默认状态。在对话框中选中一个状态，然后点击“编辑状态”按钮，就可以中打开一个状态线框图进行状态设计。状态设计和线框图设计是一样的，状态线框图中的蓝色虚线外框表示动态面板的范围边界。产品原型(Demo)设计-Axure入门培训19高级交互设计动态面板可以设置动态面板在默认是隐藏状态，比如鼠标悬停在某一区域时，才显示此区域的详细内容，详细内容可以使用动态面板编辑，只有鼠标悬停在某一控件上时才触发显示，平时为隐藏状态。只要选择动态面板，右键菜单选择“编辑动态面板-设为隐藏”即可。这将会隐藏面板内容，动态面板的遮罩会由蓝色变为黄色。交互动作可以引发动态面板的交互。在“交互
22、事件属性”对话框中包含了以下可以引发动态面板交互的动作：选择其中一个动作后就可以和动态面板进行交互，并且可以在对话框下部的“编辑操作描述”选择一个要链接的状态。在控件注释和交互面板中，一定要在“标签”输入框中对动态面板进行标识，以后就可以引用这个动态面板。如果没有为动态面板指定标签名称，动态面板会被标识为“Unlabeled”。不光动态面板，所有会产生交互的控件都需要指定“标签”名称，以方便我们进行交互引用。产品原型(Demo)设计-Axure入门培训20高级交互设计动态面板现在我们演示一下使用动态面板实现如下效果：现在我们演示一下使用动态面板实现如下效果：1、点击某一控件，显示一个动态面板。
23、动态面板设关闭按钮，点击后，关闭（隐藏）动态面板。2、鼠标悬停某一控件，显示一个动态面板。鼠标移出此控件后，动态面板自动关闭（隐藏）。3、三则标签分别显示不同的内容，点击相应的标签显示相应内容，当前激活的标签加亮状态，未激活标签暗色状态。4、某浮动窗的收起、展开状态切换。5、鼠标悬停某一动态面板，切换显示另外一种状态。产品原型(Demo)设计-Axure入门培训21高级交互设计图片翻转刚才我们演示了“鼠标悬停某一动态面板，切换显示另外一种状态。”这是使用OnMouseEnter、OnMouseOut事件加动态面板实现的。不使用OnMouseEnter,OnMouseOut和动态面板，也可实
24、现图片翻转、按钮样式翻转。拖入图像控件到线框图中，右键菜单选择“编辑图片-导入轮换图片”，然后选择一张鼠标悬停后的图片。导入成功后，图片左上角会多一个“黑白”小方框。用鼠标移入到“黑白”小方框上进行效果预览。基本效果轮换效果矩形、占位符控件同样具备翻转样式的设定，把矩形控件拖到线框图中，右键菜单选择“编辑按钮形状编辑按钮形状-编辑轮换样式编辑轮换样式”，在设置翻转样式对话框中可以修改翻转的样式，比如字体、字色、填充样式等。应用样式后，在线框图中用鼠标移入到线框图中按钮左上角的“黑白”小方框上进行效果预览。现在演示一下图片形式的轮换效果和矩形控件的轮换样式。产品原型(Demo)设计-Axu
25、re入门培训22高级交互设计菜单菜单控件用于创建简单的弹出菜单。菜单控件分为垂直菜单和水平菜单，可以通过控件面板中拖拉菜单控件到线框图面板中创建菜单，默认情况下菜单带有3个菜单项。双击菜单项可以编辑菜单文本，通过工具栏可以对菜单加底色、字体和其它样式。右键单击选择编辑菜单，在弹出的菜单边距编辑器对话框中可设置边距。还可以增加、删减下级子菜单的操作。菜单的设计比较简单，需要注意的是，菜单也可以编辑轮换样式菜单也可以编辑轮换样式，不光针对菜单全局，还可以针对某一系列子菜单项设计单独的轮换样式。现在演示一下菜单的创建，以及在一级菜单、二级菜单内使用不同的翻转效果。产品原型(Demo)设计-Axure
26、入门培训23高级功能逻辑条件什么是逻辑条件：什么是逻辑条件：如果我们需要更强大、更高保真度的原型，就需要条件逻辑。可以在你设计的任何交互中添加条件逻辑，条件可以是基于原型中控件输入的值，如：复选框的选择值、文本框中的文本等；另外，条件也可以是基于变量值。要添加条件，首先要在交互面板中为某个事件添加一个场景。在交互事件属性对话框中的第一步中点击“添加条件”。产品原型(Demo)设计-Axure入门培训24高级功能逻辑条件这时会打开一个条件设置对话框，该对话框用于创建逻辑条件。在条件设置对话框中，可以添加多行条件。点击“+”按钮可以增加一行条件，点击“-”按钮可以删除一行条件。如果要求所有条件都需
27、要满足，则在满足下拉列表框中选择“所有”，即各个条件行之间是“And”关系；如果满足下拉列表框中选择为“任意”，则只要满足其中一个条件，即各个条件行之间是“or”关系。在一个条件语句中，有以下6种类型的值可以使用，不同值对应的条件也不同，大家可以慢慢去摸索。在条件设置对话框中点击确定按钮，回到交互事件属性对话框，这时就可以选择当条件满足时要执行的动作了。逻辑条件还有很多高级应用，主要是将原型做到更高保真度，有兴趣的话可以继续研究，这里只介绍到基本的应用，后面会结合其他高级功能一起做范例应用。产品原型(Demo)设计-Axure入门培训25高级功能OnChange事件什么是什么是OnChang
28、eOnChange事件：事件：OnChange事件可用于下拉列表和列表框控件。OnChange事件是在下拉列表或列表框的选项选择时发生。这在原型中以下拉框进行导航非常有用，即当选择下拉列表的某个选项时跳转到相应的页面上或显示相应的内容。在OnChange事件中的场景上也可以添加条件。在交互事件属性对话框中的第一步中点击“添加条件”，然后在条件设置对话框中设置条件。在OnChange事件的场景中，可以用“选择下属内容的属性”条件语句，进行下拉菜单或列表框中的值。演示1：使用下拉菜单模拟多个网页面跳转。演示2：当下拉菜单的选项变化时，在矩形区域显示不同的内容。产品原型(Demo)设计-Axure入
29、门培训26高级功能OnKeyUp事件什么什么OnKeyUpOnKeyUp事件：事件：OnKeyUp事件可用在输入框和输入域控件上，当用户在控件中进行输入、松开键盘按键时发生，常用于打字时的对键盘输入内容的响应。OnKeyUp事件常用于用户在表单中进行输入的实时校验。例如，验证输入的字符长度、用户名是否已经存在、验证码是否正确等，并在界面上进行动态信息提示。图例中对输入内容的字符数进行校验，达到18个字符数时提示正确信息，超出18个字符时提示错误信息。下图是在原型中的此事件的表现（身份证号码验证）。现在演示一下根据输入框输入的字符长度显示提示信息。产品原型(Demo)设计-Axure入门培训2
31、他高级功能：Axure还有很多高级功能，如变量、OnPageLoad事件、控制模块中控件、模块自定义事件，这些高级功能都可以辅助我们把原型做得更高保真。有兴趣的话可以继续研究。Axure还提供了多人协助共享工程、版本管理的功能，在做一些大型项目时、尤其是参与人数较多时我们可以使用这个功能。现在演示一下根据当光标焦点进入、离开文本输入框时提示不同的信息。产品原型(Demo)设计-Axure入门培训28生成Word文档设计完线框图后，就可以输出Word格式的需求书或功能性规格文件。默认的规格书生成器是Word2007(.docx文件)，需要安装Word2007以生成和阅读.docx文件（也可
32、以设置Word2000作为规格书生成器，后面会讲到）。如果没有安装Word2007，可以安装MicrosoftOfficeCompatibilityPack兼容包，然后就可以让Office2000/XP/2003打开、创建、编辑、保存2007文件格式了。如果你未安装2007或兼容包，它会和Axure一起安装。在设计线框图时，如果把需求说明或规格描述写在了页面备注或控件注释中，生成规格文件时，Axure会自动汇总这些文字和插图，按照顺序出现在Word文档中。打开“生成-定义(F6)”可以生成和配置生成的Word文档。产品原型(Demo)设计-Axure入门培训29生成Word文档注意事项
35、ootnote”换成“编号”；标签列标题的“Label”换成“功能点”。如果想在多个表格表现不同的内容，可以新增多个表格选择不同的项目生成，比如，第一个对象表格的章节标题命名为“功能列表”选择“Footnote”、“Label”，第二个对象表格的章节标题命名为“功能描述”选择“Label”、“说明”，就会在文档里生成2个表格，第一个是编号和功能点标签，第二个表格是功能点标签和详细注解。可根据项目的需求进行设定。产品原型(Demo)设计-Axure入门培训30生成Word文档注意事项6、组件：如果页面中有动态面板的效果出现时，“包括动态面板”和“在每个动态面板状态截图下放显示动态面板状态注解表
36、”两个选项一定要选择，会把动态面板作为独立的页面展示在文档里。其他选项可根据具体情况设定，比如，如果在原型内有下拉菜单，并且也设定好了下拉菜单的内容时，可将“包括下拉列表选项”打勾，这样文档内会把下拉菜单的内容罗列出来，不需要在文档内单独写明，并把章节标题的“Droplists”换成“下拉菜单”7、word模板：可以在生成文档前设定好word模板（标题、正文的字体、字号、缩进等等），也可以把常用的文档格式存为默认模板，在生成好的文档内选择、修改。8、更多生成器和配置：打开“生成-更多生成器和配置(F8)”，可以生成Word2000和Csv文件（Excel）的文件报告。产品原型(Demo)设计