Axure基本使用指南

Axure基本使用指南目录原型工具的选择...............................................................................................................1axure文件的使用.............................................................................................................2axure文件的制作与生成.................................................................................................4文档管理(Document)........................................................................................................6模板复用(Templates)......................................................................................................10Widget工具....................................................................................................................14注释annotations.............................................................................................................19交互interactions.............................................................................................................26AxureRPPro5.5中文翻译教程....................................................................................30原型工具的选择纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。Excel：上手难度普通。易于画表单类的页面，易于做批注，但演示效果一般。PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。Dreamweave：操作难度大，需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototypedesign的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。而excel在处理表单类和包含计算公式类的报表页面时，较其它工具方便。而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达，更可通过画usecase获取用户需求。PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。axure文件的使用一个最简单的axure原型可能会产生如图中所示的几个文件点击红框中的两个文件都会打开同一个页面。如下图。由三个区域组成，1、文档结构区。显示所有你设计的页面。点击closeframes可以关闭。2、主操作区。所有的设计只能在在这个区域显示。3、pagenotes。对当前区域的解释说明，可以由用户自行添加文字，默认显示当前页面的名称。一个设计实例点击closeframe之后的效果。当然，closeframe起到了个导航的作用，帮助你进行页面切换。实际上，当你点击closeframe是跳转到了另外一个页面，一个非index.html，和当前页面_start.html之外的页面，即当前页面.html。axure文件的制作与生成你需要到axure的官网上下载一个最新的axure文件（）目前最高版本5.6。但是如果没有注册码，使用的版本只可以使用15天。所以你还需要在网上搜索一个注册码，这个很多，而且一个注册码可以适用于多个版本。安装过程很简单，下一步就行，有安装不上的朋友请联系我。打开axure，你看到的界面上的区域可以如图从左到右，从上到下的被划分为：1、工具栏2、文档结构区：以树形结构来表达层级关系3、组件面板：最常用的区域之一，所以的控件全部都摆放在这儿了。你可以通过这个面板把组件拖拽到主操作区中。4、模板面板：模板可以说是自定义的组件区域。你可以通过组件之间的排列组合得到你自己的常用的设计，把它保存到模板区域，就可以多次复用了。5、主操作区。摆放你设计的地方。6、面板注释及动作区：不是特别常用的一个区域，基础操作完全可以收起。事实上，我们也不经常在这个区域添加注释。但是可能会需要直接在页面上而不是组件上添加动作。7、交互动作面板：也是最重要最常用的区域。这个面板的所有的动作都需要加载到组件上。也就是这个面板必须与组件（条目3）配合使用。8、注释说明面板：也不是特别常用。除非你需要在组件上添加说明文字，但是没办法收起它。除非关闭动作面板。9、动态图层面板：最重要面板之三。但是你需要先了解axure比较复杂的一个组件dynamicpanel才能使用这个面板。ctrl+s保存axure文件，选择一个目录，就可以生成一个.rp文件。但是真正的原型文件是前文介绍过的html文件。.rp文件只不过是生成那个html文件的源文件。下面介绍如何生产html文件。如图所示，你必须单击F5或者单击图中所示的图标，之后弹出下面的这个页面选择你本机的任何一个文件，之后点击generate，出现如图的页面，生成完毕后，浏览器会自动打开这个html文件，然后你可以检查自己的设计。恭喜你，完成这步，你就可以开始你的axure原型之旅了。文档管理(Document)开章要说的是文档管理。文档管理看似简单，但是这是从操作功能上来说的，而我在说功能上的时候，想把我对文档管理的理解也一并说一下。文档管理的目的，其实是为了有一个清晰的产品思路。刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不例外。没有好的整理习惯，这直接导致每次寻找先前的文档都要花费相当长的时间，甚至不小心误删，如果恰好有事请假，别的同事也无法接手工作。所以，做一个prototype需要首先构建一个清晰的文档关系，这样一方面能够让自己清楚文件关系与位置，更主要的是让开发者与接受者能清晰理解你的思路，生成更合理的产品说明word文档。AxureRP的sitemap，与windows的树形目录相似，是以父子关系构建页面关系的，每个页面既可以是一个页面page，也可以是一个流程图flow。一、工具功能条1、增加一个子页面：为所选择的页面创建一个子页面。2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。6、删除页面：将所选页面删除，同时删除其子页面。7、编辑页面：在工作区打开所选择页面，进行编辑。二、右键—增加为鼠标右击文件所显示命令，下同。1、增加一个子页面：同一，1。（表示和第一大点，第1小点功能相同，以下同此）2、在所选页面之上增加一个同等级页面。3、在所选页面之下增加一个同等级页面。三、右键—移动1、页面上移：同一，2。2、页面下移：同一，3。3、页面降序：同一，4。4、页面升序：同一，5。四、右键—复制1、复制页面：复制所选页面，作为同级页面显示在所选页面下方。不包含所选页面子页面。2、复制分支：复制所选页面以及子页面，作为同级分支显示在所选页面分支下方。五、右键—页面类型1、wireframe：页面类型定为线框图，文件图标显示页面图标。2、flow：页面类型定位流程图，文件图标显示流程图标。六、右键—其他1、删除页面：同一、6。2、重命名页面：为所选页面重命名。3、编辑页面：同一、7。4、生成流程表：将所选页面以及其子页面关系，生成流程图。生产图有两种页面布局方式可选。标准模式，页面按照父子关系从上自下排列；阶梯模式，页面按照父子关系从左上至右下，以阶梯方式进行排列。5、复制页面链接到剪切板。以上就是sitemap所有命令，其实这些命令都很简单，也很容易理解，关键在于怎么去使用。由于页面有两种类型，wireframe与flow，所以要善于用这两种标记页面，从而让人理解你的意图。我总结大致这两种标记可以如下利用。flow图为父页面，wireframe图为子页面：先画流程图，然后根据流程图构建页面关系。这样在流程图的指引下结构页面关系，可以更清晰的理解页面框架。wireframe为父页面，flow为子页面：为页面线框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。当然，这两种结构方式要活学活用，在复杂的产品页面结构中，他们完全是你中有我，我中有你的。模板复用(Templates)masters和sitemap面板很相似，文档操作也一样，它们的本质区别是，sitemap里的文件是最终展示页面，masters里的文件却只是一个模块，是页面的一个部分。masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。masters的文件，是页面中重复的模块，由于在不同页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。这个功能类似于网页程序开发中的程序复用，不同页面中调用同一段程序，一般把这段程序单独做成一段页面程序，然后用include命令进行调用。master的文件就相当于这段被调用的页面程序。dreamweaver也有类似的功能，就是template，可以参照理解。一、功能条master的功能条功能基本和sitemap一模一样，功能也基本一样。唯一不同的是master可以创建文件夹，可以通过文件夹收纳不同的文件，因此唯一不同的就是第一个功能按钮，功能作用是增加一个文件夹。二、右键单击文档——增加增加功能的功能模块功能除了增加文件夹其他和sitemap相同，大家可以参考教程三中的二大条。而masters的文档组织结构主要依靠文件夹完成，页面文件之间不存在父子关系。这是文档操作与组织中与sitemap的最大不同。三、右键单击文档——移动文件移动功能基本上也和sitemap完全相同，但是父子