1、axure详细教程Axure学习笔记软件中有不完善的地方，要靠自己的经验来规避和克服，还算好用。熟练了Axure，对软件设计文档的编写大有帮助，因为可以有一些界面图出来。画界面图时多用Axure，画流程图时多用Visio，为的是熟练Axure，并且Axure画界面要简便许多，节约时间。（四）范本复用masters和sitemap面板很相似，文档操作也一样，它们的本质区别是，sitemap里的档是最终展示页面，masters里的文件却只是一个模块，是页面的一个部分。masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。masters的文件，是页面中重复的模块，由于在不同
2、页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。这个功能类似于网页程序开发中的程序复用，不同页面中调用同一段程序，一般把这段程序单独做成一段页面程序，然后用include命令进行调用。 master的档就相当于这段被调用的页面程序。dreamweaver也有类似的功能，就是template，可以参照理解。一、功能条master的功能条功能基本和sitemap一模一样，功能也基本一样。唯一不同的是master可以创建档夹，可以通过档夹收纳不同的档，因此唯一不同的就是第一个功能按钮，功能作用是增加一个档夹。behavior是行为的意思，这个功能是axure升级到4版本
3、后加入的，是针对master的不同使用情况而添加的一个功能，也是要重点介绍的功能。1、normal：普通档。就是一般的复用档。是默认创建的复用文件。2、place in background：定位的复用模板，这类模板的特点是定位于页面的底层，并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。3、custom widgets behavior：自定义模块。这类模块就类似于自创了一个widgets。这类模块与其它类型的复用模块的不同在于，其它模块与复用到页面的模块是完全相同的，模块的功能设置是什么，功能说明是什么，页面中的模块
4、设置和功能说明就是什么。而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块的功能和位置，但是进入到特定的页面中，模块中的各自部分的说明和功能可以重新定义。充分理解三种不同类型的复用模块的区别，根据不同环境有效的选择，也是非常重要的。四、右键单击文件其它1、2、3功能都是文文件文文件操作功能，和sitemap一样，分别是删除、重命名和编辑master。4、5功能是对应的。前者是将所选范本文件批量运用于页面，后者是将所选范本文件，批量从页面中去除。通过选择此功能，会弹出sitemap文件的树形目录，你可以通过选择需要添加模板的页面，从而完成模板使用或移除。check all：选择所
5、有页面uncheck all：所有页面都不选择check all children：选择所选页面以及其所有子页面uncheck all children：不选择所选页面以及其所有字页面在4中有特殊的position设置和options命令，position中有两个命令place in blackground：将档至于页面背景specify location：是特殊定位，可以通过设置距离左侧和上边的距离，来将模板文件放入特定的位置。options里的多选框的意思是“只有页面中没有此模板时才置入”，默认是选择的。如果不选择而置入页面，就会出现如果页面中已经有模板，模板被再次置入的情况。当然如果有特
6、殊需要的模块，就可以这么使用了。6、usage report：使用报告，点击后弹出面板，显示所有使用了此复用模板的列表，显示的是文件名称，通过双击文件名，可以在工作区打开，直接编辑。（五）widgets工具-上Axure RP的widgets工具栏，就是我们用来画线框图wireframe、流程图flow的工具，也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木，这些工具就是组装积木里的一个个小部件，组成什么？组合得怎样？完全依靠个人的经验和智慧。因此，熟悉每一个工具的用法和用途，才能随心所欲的画出脑海中的图形。Widgets工具栏，下分两类工具：wireframe线框图工具：基本
7、上对应着web页面中的各种图形。针对页面中交互行为的表达，Axure RP专门增加了image map region 图像映像区、dynamic panel动态面版、menu（vertical/horizontal）水平/垂直菜单等几个特殊的工具。Flow工具：流程图所需的基本图形框架。我们先谈wireframe线框图工具。学习这部分工具，如果事先有html基础，或者对web页面元素有比较充分的理解，就很容易入手。以下我根据图片中的编码，依次讲解。1、image图片：给wireframe中插入一个图片站位，也可以直接置入真实的图片。2、text panel文本：插入文本。相当于插入了一个标签。
8、是不带链接的文本。但是其实也可以带链接，在interactions中我们会提到。3、hyperlink超链接：插入带链接的文本。相当于插入了一段带卷标的文字。但其实在Axure中它与普通文本除了外型不同，没有本质区别。之所以将两类文字区分开来，目的还是为了在视觉表达中让人直观的理解链接文本和普通文本，而这对于设计人员理解也非常重要，因此建议画图时尽量标准的区分链接文本和普通文本。4、rectangle矩形：插入一个矩形。可以对其进行图形样式编辑。此图形通常被用来表达板块的边界。5、placeholder占位符：插入一个占位符。占位符通常用来表达在页面中某些特殊区域，比如情况复杂，或者在系统升级
9、中不需要修改，又或者无关紧要的区域等等。作者需要结合说明文字，进行对应的详细表达。6、button按钮：插入一个按钮，相当于卷标。按钮一般结合窗体使用，当然也可以作为强化的提示链接使用。7、 teble表格：插入一个表格。Axure的表格使用起来不是很方便，增加行、列，修改行、列宽度都不方便，算是一个败笔。期待在下一个版本的时候能够有更好的进步。与标准化制作网页一样，表格的使用在画wireframe的时候就应该明确其作用，是用来作为数据列表展示使用，而不是作为网页布局的控件。8、text field文本输入框：结合窗体使用。一般用作窗体中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作
10、字段提交或单行数据提交。9、text area文本区：结合窗体使用。一般用作大段文字编辑、提交。比如文章编辑、留言等板块。10、droplist下拉列表框：结合窗体使用。一般用作下拉菜单或者下拉列表选项，比如在搜索中，可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接，可以通过下拉选择直接进行页面跳转。11、listbox列表选择框：结合窗体使用。通过文本框列表选项，通常使用在多项列表选择，比如在填写简历表的时候，选择你所感兴趣的行业，会提供列表选择框。不过列表选择框都会结合按钮使用。12、checkbox多项选择：多项选择通常使用在窗体中，以提供多项选择。比如在有些有些注册要求用
11、户选择兴趣爱好，会提供十多个选项，因为选项可以并列进行，因此使用的是多项选择。13、raido button单项选择：在一组选择中选择适合选项，选项关系非此即彼。比如在填写性别的时候提供男女选择，用户非男即女，只取一项。当然，不排除再多提供一个双性选择，这样就是三选一，但是同样是非此即彼的单一选择。14、15、horizontal line水平线、vertical line垂直线：用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线，为了系统生成用于演示的html档，特将两种线条分开使用。16、button shape形状按钮：相当于图形按钮，多用于导航，或者多帧切换的版面切换按
12、钮。可进行边角编辑。17、 image map region图像映像区：它用于在web页面中制造一片不可见的区域，一般是图片的部分区域，相当于图片的热区，从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮，而图像映像区就可以用来说明这个区域的的功能和互动内容。18、inline frame框架：类似于html中的对象。用于在页面中制造页面框架，每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏，一般都是使用了框架，左侧加载的是导航页面，右侧是加载的管理页面。Axure的缺点是，暂时不支持百分比，因此iframe都是按像素度量的，和实际页面效果还是有差距。19、 dy
13、namic panel动态面版：是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。它是不同的state迭加的一个动态区域，默认显示其中一个state，当用户触发按钮、图片或者下拉列表等时，可以设置相应动态面版切换到不同的state。不同state的关系，类似于 photoshop的层，也类似于html中的css属性layer。我们可以通过右击dynamic panel进行state编辑，然后通过打开对应state进行编辑，编辑方式和编辑页面相同。20、21、menu（vertical/horizontal）水平/垂直菜单：用于制作水平或者垂直的菜单，可以添加漂浮
14、的的子菜单，添加方法很简单，就是选择所要添加的菜单项，添加submenu。（六）widgets工具-下对于画流程图，是我们经常会遇到的问题。我们和程序工程师沟通，用再多的口水，也无法挑明的事情，画一张简明的流程图，就能很直白的说明关键问题。有时候你可能会懊恼，因为程序员的思维犹如计算机，你告诉他为什么没有用，你就告诉他该怎么做，是左是右，是0是1就好了。这个时候，产品经理需要的是理性思维，清晰的思路，如果你不清晰，工程师大多数会跟着你的思路乱做一团。所以多画几个流程，多根据页面需求画清晰的流程，就能解决实际的问题。话不多说，本章主要介绍flow里面的工具，因为图形其实很好介绍，简单的英文翻译就
15、好了，所以也顺带说说这些图形在流程里的作用。方式还和以前一样，编号，对号入座，咱们来一个萝卜，一个坑：1、rectangle：矩形作用：一般用作要执行的处理（process），在程序流程图中做执行框。在axure中如果是画页面框架图，那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程中做说明，这个时候将两类不同的矩形做色彩区别，然后做说明就好了。2、rounded rectangle：圆角矩形或者扁圆作用：表示程序的开始或者结束，在程序流程图中用作为起始框或者结束框。3、beveled rectangle：斜角矩形作用：斜角矩形我几乎不使用，可以视情况自行定义。或者在其它的流程图
16、中，有特殊含义，暂不知晓，也希望有识之士指点一二。4、diamond：菱形作用：表示决策或判断（例如：If.Then.Else）,在程序流程图中，用作判别框。5、file：文件作用：表达为一个档，可以是生成的档，或者是调用的档。如何定义，需要自己根据实际情况做解释。6、bracket：括号作用：注释或者说明，也可以做条件叙述。一般流程到一个位置，做一段执行说明，或者特殊行为时，我会用到它。7、semicircle：半圆形作用：半圆在使用中常作为流程页面跳转、流程跳转的标记。8、triangle：三角形作用：控制传递，一般和线条结合使用，画数据传递。9、trapezoid：梯形作用：一般用作手动
17、操作。10、ellipse：椭圆形或圆形作用：如果画小圆，一般是用来表示按顺序数据的流程。如果是画椭圆形，很多人用作流程的结束。如果是在use case用例图中，椭圆就是一个用例了。11、hexagon：六边形作用：表示准备之意，大多数人用作流程的起始，类似起始框。12、parallelogram：平行四边形作用：一般表示数据，或确定的数据处理。或者表示数据输入（Input）。13、actor：角色作用：来自于use case 用例，模拟流程中执行操作的角色是谁。需要注意的时，角色并非一定是人，有时候是机器自动执行，有时候也可是是模拟一个系统管理。14、database：数据作用：就是指保存我
18、们网站数据的数据库。15、image：图片作用：表示一张图片，或者置入一个已经画好的图片、流程或者一个环境。基本上，axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中，模糊了流程图的区别，而尽量贴近交互设计时的工作内容。流程图无疑只是一个表达的工具，我们在使用的时候应该根据自己的实际情况使用，而不应该死钻牛角尖，非要知道某个图形的通用标准。理解和沟通是第一位的。而对于某些具有标准性含义的图形，大家人所共知，则我们应该遵循共同的准则，这样就能达到表达的目的。其实axure里面由于不涉及到具体的程序流程，所以有些标准的图形并没有提供，如不规则
19、图形、侧面双矩形等，大家可以自己google一下或者baidu 一下很容易就知道。大多数情况下，还是自己自定义一下自己的符号标准，就跟prd文档加上名词解释一样，才是解决方法。（七）注释annotationsAxure rp将interaction交互与annotations注释说明功能放在了一个面版上，同时又针对整个页面有一个交互与注释说明。交互功能设置的是用户通过不同方式触发页面中元素或者加载页面时，发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互，与针对页面中某个元素的说明与交互在文档表现和生成的不同，而被分开，但是他们的实际功能是一致的
20、，可以一起来说。针对页面和针对页面元素的功能，分别默认处于软件接口的右侧和底侧。如下面两张图片所示：底部右侧对于交互与注释说明，有必要分开讲述。这一节主要讲述annotations，即注释说明。首先，我定义一下对交互与注释说明的解释。Interaction：交互功能，用以设置页面中的交互事件，如页面跳转、面版跳转。从而实现框架图中不同对象的实际功能。在生成html框架页面时，产生相应的对象功能，用以演示操作。Annotations：注释说明，用以对页面或页面中的特定对象进行说明注释。可以根据实际情况分类编写说明内容。比如优先级、功能类型、交互效果、说明等。让程序在开发的时清楚了解该对象或该页面
21、的程序实现详情与细节。那么，现在重点来说注释。1、自定义注释与说明你也许看到e文会头大，你也许第一次看到annotations面版中specification、status、benefit、effect等一连串的英文单词脑袋发晕，那么我告诉你，你完全不用在意这些单词和选项的意义，因为也许它们根本就不适合你，而你可以自定义一套自己的说明选项。生成word文档：我们也可以生成word的文档的说明文件，这样的档甚至可以当作PRD文档使用，而说明则会根据label的标签以及编号，对应生成table说明文档。生成word的快捷键是F6，生成specification说明书。综上所述，运用好了annota
22、tions，就可以解决好prd文档中最重要的工作，即功能说明。至于设置怎样的注释，完全就靠你自己来掌控了。Ps：页面notes更加简单，因为针对页面的说明只能有一段文本，不存在特殊说明字段的编辑。（八）交互interactions（上）Axure RP Pro5终于发布了，直观操作上，最明显的变化之一就是在命令行多了“share.分享”，其次所有窗口可以以浮动形式编辑了。为了与时俱进，以后的教程将以Axure RP Pro5为基础来继续写。我们来对它添加交互行为。我把交互分为三个部分的：交互触发、交互条件、交互行为。这样的区分，其实是参考程序编程的结构而做的，这就把程序构成人性化、语义化了。这
23、章我着重讲解交互触发与交互行为中的快速链接，详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做出名词解释。交互触发：是发生交互的导火索，说明引起交互的触发动作是什么。以此文字链为例，交互的触发原因，是“点击文字链”。交互条件：是达成我们目标行为的前提条件。如果目标行为只有一个，对触发没有任何条件限制，交互条件则可以被忽略。再以此文字链接为例，如果对查看文章列表没有任何限制，则不设置交互条件，用户点击文字链，直接发生交互行为。如果对查看文章列表有权限限制，只允许作者查看，则触发交互行为的条件就是“以文章作者hawking的身份登录”。 PS：有条件本身，就必然会有条件的反面。或
24、者有多个条件，就会有多个条件之外的例外情况。在写文档的时候，必须考虑进去，说明清楚，这一点最容易疏漏，而造成程序员在开发的时候想当然，或者再回来问你。针对这个例子，条件的反面就是“登录者不是hawking，或没有登录”。交互行为：是机器依据触发事件与条件，做出的反应动作或行动。此文字链接的的交互行为，就是“页面跳转到hawking 的 axure rp 5 文章列表页面”。一、交互触发触发主要有两种，一种是页面加载触发，一种是鼠标行为触发。1、页面加载触发，针对的对象就是我们所编辑的页面，axure将其放在了page notes&page interactions面版中。如下图所示，就是pag
25、e interactions。Axure暂时仅支持一种页面触发条件，就是OnPageLoad当页面载入时。如图所示，针对我们设置的case事件，axure提供了三个功能。Add case：给所选对象增加事件。Edit case：编辑所选事件。（功能前提，选择你索要编辑的事件，比如鼠标选择case 1）。Delete case：删除所选事件。（功能前提，选择你索要编辑的事件，比如鼠标选择case 1）。2、鼠标行为触发是当用户使用鼠标操作接口时，引发交互。Axure支持的鼠标触发行为根据你所选择的对象不同而不同，选择图形、文字、链接会出现三种触发行为：Onclick：当鼠标点击目标时，触发交互行
26、为。OnMouseEnter：当鼠标移入目标热区时，触发交互行为。OnMouseOut：当鼠标从目标热区移出时，触发交互行为。如果选择的是输入框、多选框等则会出现对应功能的触发行为：OnKeyUp：Fires when the user releases a key.当释放键盘时触发交互行为。OnFocus：当鼠标选择、聚焦到对象时，触发交互行为。OnLostFocus：当鼠标失去对目标对象的选择、聚焦时，触发交互行为。特别的，选择下拉列表、列表框会出现：Onchange：当所选项被更改时，触发交互行为。而选择我们所编辑的对象后，如果对象之前没有编辑过交互事件，则有两个选项Add case：给
27、所选对象增加事件。Quick link：快速添加链接。如果曾经编辑过交互事件，则有三个功能，和页面加载触发是一样的，这里也就不再累述。二、交互行为快速链接选择好交互触发后，在对交互没有特定条件设置的前提下，我们可以直接设置此次触发引起的交互行为。由于链接跳转是网页中最常用的交互行为，因此axure特意提供了一个快速链接的功能。选择对象后，点击快速链接则会弹出如下link properties 链接属性面版：如图所示，此面版中有四条可选命令：1、link to a page in this design：链接到这个项目中的某一特定页面。你可以通过鼠标点击，选择你想要跳转的，树型目录中的相应页面。
28、2、link to an external url or file：链接到一个外部链接或者文件。你可以通过在hyperlink框中输入链接地址，完成链接导向。注意：链接最好是绝对链接地址，不然就容易出错。3、reload current page：重新加载当前页面。Variable changes are applied变量变化生效。4、back to previous page：返回浏览前一页面。Varable changes are not applied变量变化不生效。（八）交互interactions（中）本章要介绍的是交互条件。交互条件是axure的学习中的难点，也是axure高段进
29、阶功能。其实我们不设置条件，直接靠文字说明，也可以完成我们的思想传达，如果你设计的原型文档，能模拟真实的交互环境，当然就非常优秀了。但是，我要强调一点观点，传达思想是首要的工作，传达思想也是有成本的，如果为了传达思想要耗费更多无意义的劳动，损耗更多的时间，增加更多的沟通难度，不要也罢！我个人觉得，我们在做原型设计的时候，有没有必要把页面模拟到和真实情况一模一样，这个还值得探讨。言归正传，开始来说设置交互条件。一、进入交互条件设置当我们选择好了交互触发，通过双击选择促发动作，或者点击add case ，就会弹出interaction case properties 交互事件属性窗口。通过这个面板
30、，我们要表达我们伟大的交互行为。面板告诉了我们三步策略：Step1 description 描述描述后的input输入框，可以编写事件的名称，或者事件的描述文字，以供生成html页面展示时标注此事件，也供生成需求文文件的时候辨识此功能功能。Add condition （if necessary）增加条件（如果需要的话）。这就是这章所要说的重点内容，为我们要创建的交互事件，设置前提条件。我想，axure在这里添加这么一句话，也许同样是在提醒我们，我们把交互做到如此之细，是否真的必要？思考清楚了目的，考虑准确了我们需要投入的精力，再开始做这一步。我想会清晰很多。Step2 select actio
31、n 选择动作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、设置具体
