Axure第一书作者马克

QQ:16877770微博: /utbdAXURE第一书-Axure6.0新手自学手册前言4第一章 初识Axure51.1 Axure的历史51.2 为什么要用Axure71.3 Axure的特点9第二章 Axure 6.0的下载/安装/启动/卸载102.1 安装Axure 6.0的系统需求102.2下载102.3 安装122.4启动Axure162.5 卸载17第三章 Axure新手上路203.1 Axure的总体界面203.2Menu&Toolbars(主菜单和工具栏)213.3线框图绘制区323.4Sitemap(站点地图)333.5Wireframe(部件)343.6Masters(母版)343.7Page Properties(页面属性)353.8Widget Properties(部件属性)363.9Dynamic Panel Manager(动态面板管理)38第四章 Axure老手养成39第五章 Axure高手出世48第六章 Axure军规49后记52前言我在学习Axure时,发现网络上流传着各种原型,技巧,范例,也有不少专门介绍Axure的网站,论坛,博客和视频, ,很多产品设计人员都是通过自学,提问和讨论的方式学习,成本很高，这使得我开始萌发出写这本书的念头我从接触Axure到比较熟练的使用，花费不少时间，希望我的分享可以减少其他Axure爱好者的学习成本这本书可以作为初学者自学Axure的第一书，对于已经熟悉Axure的朋友，可以直接学习本书的第五章书写过程描述不直观时,可以参看范例的RP源文件，如果还有某些地方无法理解的，随时可以到新浪微博我，我的微博/utbd本书为PDF电子版本，完全免费，欢迎大家分享传播（转载请注明原出处），让更多的人可以方便的学习Axure，。关于Axure的使用，我也只是知道一星半点，行文中难免漏洞百出、请大家批评指正。第一章 初识Axure1.1 Axure的历史Axure正确的英文发音应该是(ak shr)，如果用中文来读是（爱克硕儿），其中的最后一个硕可以有点儿化音。完整的AXURE应该是Axure Rapid Prototyping（AXURE快速原型设计）Axure诞生在2002年5月的加利福尼亚大学伯克利分校，由Victor Hsu（维克多许） and Martin Smith（马丁史密斯）共同研发，前者是一名电气工程师转向软件开发再转向产品经理，后者则是一位经济学家和自学成才的黑客（不知道学习黑客的经济学家是不是为了黑银行啊，呵呵，玩笑），两人最初尝试用PowerPoint，Visio和Word的构建软件原型，后来由于使用效率较低，两人决定寻找更好的办法，这也就是Axure诞生的缘由Axure的第一个版本诞生在2003年的1月，是同类第一个专为基于浏览器的应用程序的原型之一，到现在将近9年过去了，Axure已经推出到6.0版，这个软件已经被数以万计的用户体验、业务分析、产品设计等人员使用，在中国，很多知名企业（百度、新浪、搜狐、淘宝、腾讯）的招聘，已经将掌握Axure作为必备技能，。如今，两位创始者居住在圣地亚哥，享受者美味的拉面和煎饼（很中国的口味），继续着Axure伟大的开发旅程。天下没有免费的午餐，对于Axure，目前的需要购买许可证才能长期使用，否则就只有30天的免费试用期，有财力的朋友可以花149美元购买许可授权。至于在中国使用的朋友，有很多仁人志士发明了汉化版，也有长期破解使用的方法，这个不在本文介绍的范围,请找古哥或者度娘（Google&Baidu）。本文以Axure在Windows平台下的Ver. 900的官方英文版为介绍版本,原因有几个：1、汉化版有时可能会有不兼容的地方；2、本文撰写不想涉嫌到侵权官方；3、Axure的英语不难，多熟悉，未来版本升级会轻松自如的多；4、统一版本号为2900，避免介绍的内容，会因为不同的版本而出现差异。Axure也有MAC版本，界面我并没有接触过，不知是否和Windows一致，希望也能对MAC有借鉴，请大家自行研究。1.2 为什么要用Axure在正式介绍Axure RP之前，大家先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。 纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。 Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。 PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。 Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。 Photshop/Fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。 Dreamweave：操作难度大，需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。 以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做产品原型的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。 比如纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感，也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法；word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达，更可通过画use case 获取用户需求。PS/FW是图片处理的工具DW则是所见即所得的网页开发软件。这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。 其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。但是不同的工具都有自己的工作领域，在其他领域它并不擅长。而以上的软件在创造的初期，并非为了帮助产品经理、ue完成产品原型设计，因此他们都不能在原型设计这件工作上得心应手。而Axure RP正是在互联网产品大张其道的前提下，为满足原型设计创建的需求，应运而生。 1.3 Axure的特点网站构架图(Site Structure) AxureRP可以快速绘制树状的网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应网页。 示意图(Wireframe) Axure RP内建了许多会经常使用到的widget元件，例如：按钮(Button)、图片(Image)、文字面板(Text Panel)、选择钮(Radio Button)、下拉式菜单(Droplist)。 流程图(Flowchart)AxureRPFlowDiagram快速建立流程图就像建立wireframe一样容易，Flow Widget中有设计流程图时会经常用到的形状，您可以轻松在流程之间加入连接线并设定连接的格式。 交互设计(InteractionDesign) 大多数的widget可以对一个或多个事件产生动作，包括OnClick、OnMouseOver和OnMouseLeave等 自动输出网站原型(HTML Prototype): AxureRP可以将wireframe，输出成符合InternetExplorer或Firefox等不同浏览器的HTML prototype。 自动输出word格式规格文件(Specification) Axure RP可以输出Word的格式的文件，规格文件包含了目录、网页清单、网页和附有注解的Master、Annotation、Interaction和Widget特定的资讯，以及结尾文件(例如：附录)，规格的内容与格式也可以依据不同的阅读对象来变更。第二章 Axure 6.0的下载/安装/启动/卸载2.1 安装Axure 6.0的系统需求操作系统：Windows 2000/ Windows XP/ Windows 2003 Server/ Windows Vista/ Windows 7内存：1 GB RAMCPU：1 GHz Processor硬盘空间：60 MB disk产出的规格说明书需要Office版本：Microsoft Office Word 2000, XP, 2003, 2007, or 2010原型浏览器： IE 6.0+, Firefox, Safari, or Chrome（注：国内的大部分第三方浏览器都可以顺利的打开Axure生成的原型文件，我个人用的是360浏览器）2.2下载l 打开浏览器并进入Axure官方网站（），点击Download页面,l 输入邮箱并选择PC版本下载2.3 安装l 双击安装程序图标l 系统开始自动安装（有的系统会出现乱码，不影响安装）l 进入安装首页，选择Next（下一步），l 点击I Agree(同意协议), 选择Next（下一步），l 选择安装路径后，选择Next（下一步），l 选择用户，一般用默认就好，选择Next（下一步）l 安装前最后确认，选择Next（下一步）、l 显示安装进度条l 安装完成后，提示可以Finish（完成）安装程序并Run Axure RP Pro 6 now（运行Axure6.0）2.4启动Axurel 点击桌面Axure快捷图标l 程序启动过程出现Loading页l 完整主界面2.5 卸载l 点击开始菜单-Axure目录-Uninstall Axuer RP Pro 6卸载安装包程序l 在卸载首界面,选择Uninstall（卸载），选择Next（下一步）l 卸载确认，选择Next（下一步）l 显示卸载进度条l 点击Finish（完成）卸载第三章 Axure新手上路3.1 Axure的总体界面主菜单和工具栏用于打开，保存Axure原型文件，对于原型设计的基本操作，基本可以在菜单项和工具栏找到对应的操作线框图绘制区这是你绘制原型的工作区，你可以在这里对拖曳到工作区的部件、母版等进行组合、拼装、加工、编辑站点地图可以对你设计的页面复制、添加，删除，重命名、排序等，也方便对各个页面的管理部件库拖放常用部件如按钮，图像，文本框和形状来设计你的页面。也可以创建并加载自定义部件库。母版区母版可以理解为一种特殊的部件，可以在页面中重复利用，比如一个网站的导航，页眉页脚等，同样你可以对自己设计的母版复制、添加，删除，重命名、排序等页面属性区可以对页面进行相关注释、也可以对页面初始交互，设置页面基础样式部件属性区对存在的部件进行注释、交互动作，格式设置，Axure的交互主要就是在这里完成的。动态面板管理区对动态面板进行添加、删除、管理。对于整个操作界面的内容不必强行记忆，有印象就好，未来随着原型的交互做的熟练，自然而然就记住了各自的功能和作用。3.2Menu&Toolbars(主菜单和工具栏)在选择菜单时，会发现有某些命令是灰色不可点，是因为还没有触发相应的动作，比如选内容部件，才会有复制粘贴,在原型设计中，主菜单的使用并不太多，往往通过右键、工具栏、左右的编辑区基本就完成了原型大部分的设计工作File（文件）菜单命令依次为：New(新建)Open(打开)Open Recent(最近使用文档)-None(无)-Clear Menu(清除菜单)Save(保存)Save As(另存为)Import from RP file(导入RP文件)New Shared Project(新建共享工程)Get and Open Shared Project(获取并打开共享工程)Export Shared Project to File(导出共享工程为文件)Print(打印)Print All Pages(打印所有页面)Export to Image(导出为图像)Export All Page to Image (将所有页面导出为图像)Bagkup Settings (备份设置)Recover File from Backup(从备份中恢复文件)Exit(退出)Edit（编辑）菜单命令依次为：Undo(撤销)Redo(重做)Cut(剪切)Copy(复制)Paste(粘贴)Find(查找)Replace(替换)Select All(全选)Delete(删除)View（视图）菜单命令依次为：Toolbars(工具栏) -Main(常用) -Share(共享) -Generate(生成) -Text Formatting(文本格式) -Rectangle Formatting(矩形格式) -Editor(编辑器) -Table(表格) -Object(对象) -Location and Size(位置和尺寸)Reset View(重置视图)Share Project Banner(共享工具栏)Widgets(部件)Dynamic Panel Manager(动态面板管理器)Sitemap (站点地图)Masters(母版)Widget Properties(部件属性)Page Properties(页面属性)Wireframe（线框图）菜单命令依次为：Customize Annotation Fields and Views(自定义标注字段和视图)Manage Page Notes(管理页面注释)Manage Variables(管理变量)Clear All Annotation(清除所有注释)Renumber All Annotation(重置所有注释编号)Reflow All Connectors(重新摆放所有连接符)Manage Raised Events(Masers Only) (管理触发事件(仅限母版)Widget Style Editor(部件样式编辑器)Page Style Enitor(页面样式编辑器)Grid and Guides(网格和辅助线) -Hide Grid(隐藏网格) -Snap to Grid(对齐网格) - Grid Settings(网络设置) -Hide Global Guides(隐藏全局辅助线) - Hide Page Guides(隐藏页面辅助线) -Lock Guides(锁定辅助线) - Snap to Guides(对齐辅助线) -Create Guides(创建辅助线) -Delete All Guides(删除所有辅助线)Show Footnotes(显示脚注标号)Show Selection Halo(显示选择光环)Show Loacation and Size ToolTip(显示位置和尺寸提示)Mask Masters(显示母版遮罩)Mask Image Map Regions(显示图像热区遮罩)Mask Dynamic Panels(显示动态面板草图)Show Skerch Effects(显示手绘草图)Show Background(显示背景)Close Wireframe (关闭线框图)Object（对象）菜单命令依次为：Grouping(组合) -Group(组合) -Ungroup(取消组合)Order(排序) -Bring to Font(置顶) -Send to Back(置底) -Bring Fonward(上移一层) -Send Backward(下移一层)Align(对齐) -Align Left(左对齐) - Align Center(居中对齐) - Align Right(右对齐) - Align Top(顶端对齐) - Align Middle(中部对齐) - Align Bottom(底端对齐)Distribute(分散) - Distribute Horizontally(水平分散) - Distribute Vertically(垂直分散)Footnotes(脚注编号) -Decrement Footnote(减小脚注编号) -Increment Footnote(增大脚注编号)Locking(锁定) -Lock Location and Size(锁定位置和尺寸) -Unlock Location and Size(解除锁定位置和尺寸)Convert(转换) -Convert To Master(转换成母版) - Convert To Dypamic Panel(转换成动态面板)Generate（生成）菜单命令依次为：Prototype(原型)Specification(规格说明书)More Generators and Configurations(更多生成和配置选项)Regenerate Current Page to Prototype(在原型重新生成当前页面)Share（共享）菜单命令依次为：Create Share Project from Current File(从当前文件创建共享工程)Get and Open Shared Project(获取并打开共享工程)Get All Changes from Shared Directory(从共享目录获取全部更新)Send All Changes to Shared Directory (向共享目录提交全部更新)Check Out Everything(全部检出)Check In Everything(全部检入)Undo All Check Outs(撤销全部检出内容)Get Changes from Shared Directory (从共享目录获取更新)Send Changes to Shared Directory (向共享目录提交更新)Check Out(检出)Check In(检入)Undo Check Out(撤销检出)Manage Shared Project(管理共享工程)Brower Shared Project History (浏览共享工程历史记录)Repoint to Move Shared Directory(重新定位移动后的共享目录)Clean Up Local Copy (清理本地副本)Help（帮助）菜单命令依次为：Online Help(在线帮助)Welcome Screen and Licensing(欢迎屏幕和许可信息)Submit Feedback(提交反馈)Reset License Key (重置序列号)About Axure RP(关于Axure RP)Thanks(感谢)工具栏Axure的工具栏是方便绘制线框图使用，相关的内容相当于菜单中命令的快捷图标，当鼠标悬停在可以点击的图标时会有内容描述，这一块的内容不在做过多的介绍，图标的样式很直观，基本可以知道使用结果3.3线框图绘制区分割线上方是标签页的名称，打开多少标签就显示多少名称分割线下方依次命令是：Close Tab(关闭标签页)Close All Tabs(关闭所有标签页)Close Other Tabs(关闭其他标签页)双击左侧Sitemap(站点地图)的页面,就会在线框图绘制区打开相应的页面。当打开多个页面时，会形成多个标签每一个页面，就是绘制原型的工作区域。3.4Sitemap(站点地图)红框框住的图标从左到右依次是：添加子页面上移页面下移页面降级页面位置升级页面位置删除页面设计页面搜索3.5Wireframe(部件)3.6Masters(母版)红框框住的图标从左到右依次是：添加目录添加母版上移母版下移母版降级母版位置升级母版位置删除母版设计母版搜索3.7Page Properties(页面属性)Page Notes(页面注释)，是对整个页面的整体注释，方便观看者理解页面Page Interactions(页面交互)，页面初始的交互动作Page Formatting(页面格式)，整个页面的样式3.8Widget Properties(部件属性)Annotations(标注)：这里主要是可以对原型中的部件进行注释，方便观看者阅读，也可以在导出Interactions(交互)，部件的具体动作和交互案例都是在这里操作完成的Formatting(格式)，可以设置部件的样式、包括位置、大小、尺寸、字体，颜色、样式等3.9Dynamic Panel Manager(动态面板管理)红框框住的图标从左到右依次是：编辑添加面板状态上移下移删除编辑所有面板包括母版此处菜单参看30页3.1菜单的Object（对象）第四章 Axure老手养成到目前为止，大家对于Axure6.0的各个界面和菜单已经有了一个整体的了解，现在将进入Axure中用到最多的地方，开始画带有交互功能的线框图，对于写文章，大家知道有基本四要素，时间、地点、人物、事件；对于Axure的交互，同样牢记四要素“部件、条件、动作、案例”，连贯起来记忆，就是用什么样的部件、在什么条件下、通过什么动作、完成什么案例最终达到交互的需要现在这么说，可能大家有些不理解，随着制作的范例会逐渐明白这个意思。在AXURE中画线框图的部件22个，动作15个、条件11个、案例24个，我们通过四者的结合熟悉部件、条件、动作、案例的使用22个基本部件（不包括画流程图的部件）基本动作15个(下图是把15个动作合并在一起截的图，实际没有哪一个部件同时支持15个动作)不同的部件选择条件会略有不同，最多在AXURE中基本条件有11个24个基础案例，案例可以多次添加部件是画原型必不可少的，可以没有条件、没有动作、没有案例，但一定会有部件，纯粹用部件就可以完成静态的线框图。而加上条件、动作、案例就会形成动态的交互原型。关于这一章的内容，我写了多次也删除了多次，有一回将写了几十页的范例步骤又全部删掉，主要是发现无论是以文字描述步骤、还是文字配合截图描述动作都不是很直观，最后决定直接将源文件附上，源文件包括所有基础的动作、条件、案例都各做一个范例，方便大家自行研究 考虑到看源文件时往往已经是制作完成，对于很多新手，可能还不知道如何完成制作过程，这里给出标准通用的制作步骤，这样再看范例源文件就会轻松的多。设计交互原型标准步骤：1、 添加页面，这是你交互动作的舞台l 新建页面l 双击打开编辑页面2、 选择部件，这是交互的主角l 鼠标拖曳选择部件到页面l 可以对部件进行文字、大小、颜色、样式等调整，有一些部件还需要右键点击部件后，做一些操作选择，如图片部件、动态面板部件3、 给页面初始添加动作（如果不需要页面加载的初始动作可以不设置）4、选择动作、这是赋予主角的动作4、 给动作设置条件（如果不需要条件可以不设置） 5、 给动作选择案例6、 按F5生成演示文件(有些效果需要生成IE才能看到)7、 预览演示文件预览演示文件有时会弹出如下提示，右键允许组队内容，确定后，就可以预览文件页面左侧的小方形窗口，可以展开和隐藏左侧导航区源文件范例列表Open Link in Current Window (在当前窗口打开链接)Open Link in New Window/Tab (在新窗口/新标签页 打开链接)、Open Link in Popup Window (在弹出窗口打开链接)Open Link in Parent Window (在父窗口打开链接)Close Current Window (关闭当前窗口)Open Link(s) in Frame(s) (在内部框架打开链接)Open Link in Parent Frame (在父框架打开链接)Set Panel State(s) to State(s) (设置动态面板到指定状态)Show Panel(s) (显示动态面板)Hide Panel(s) (隐藏动态面板)Toggle Visibility for Panel(s) (切换动态面板可见性)Move Panel(s) (移动动态面板)Bring Panel(s) to Front (动态面板置于顶层)Send Panel(S) to Back (动态面板置于底层)Set Variable/Widget value(s) (设置变量/部件值)Scroll to Image Map Region (滚动到图片热区)Enable Widget(s) (启用部件)Disable Widget(s) (禁用部件)Set Widget(s) to Selected State (设置部件为选中状态)Set Focus on Widget (设置部件获取焦点)Expand Tree Node(s) (展开树节点)Collapse Tree Node(s) (折叠树节点)Wait Time(ms) (等待时间(毫秒)Other (其他)OnClick (鼠标单击时)OnMouseEnter (鼠标移入时)OnMouseOut (鼠标移出时)OnChange (选项改变时)OnFocus (获取焦点时)OnLostFocus (失去焦点时)OnKeyUp (键盘输入时)OnPageLoad (页面加载时)OnMove (移动动态面板时)OnShow (显示动态面板时)OnHide (隐藏动态面板时)OnPanelStateChange (动态面板状态改变时)OnDragStart (开始拖放动态面板时)OnDrag (拖动动态面板时)OnDargDrop (结束拖放动态面板时)is checked of (选中于)selected option of (选中项于)value of variable (变量值)length of value variable (变量的长度值)text on widget (文字在部件)length of widget value (部件的长度值)state of panel (动态面板的状态)visibility of panel (动态面板的可见性)text on focused widget (文字在焦点部件)drag cursor (拖放图标)area of widget (部件的范围)第五章 Axure高手出世通过前面几章的介绍，我相信大家应该对Axure轻车熟路了，可以自由应用，同时，在第四章提到的这段话“对于Axure的交互，同样牢记四要素“部件、条件、动作、案例”，连贯起来记忆，就是用什么样的部件、在什么条件下、通过什么动作、完成什么案例最终达到交互的需要。”，相信大家已经可以完全理解，请大家树立一个正确的观点“作为产品设计，Axure只是工具，只要你驾驭的了，任何平台的原型，它绝对都可以做到出神入化。”更多观点可以参看第九章Axure20条军规现在大家可以下载我制作的最棒的Axure原型的1-6季的源文件，分别研究，下载地址：/s0qljynweq，我的建议是如果你希望提高自己的Axure水平，那么请尽量先不要看源文件，而是只生成预览文件，看完交互动作后，自己尝试着做出效果（在Axure中有很多时候，同样的交互表现可能用到的是不同的方式，只要你实现了一样的效果，完全不必非要模仿的我的实现步骤），如果的确无法想通，可以研究源文件，这样你对Axure才会有深刻的了解。掌握正确的学习方法，将基础学牢，学会举一反三，发挥主观能动性，多动手研究，多模仿作品，减少习惯性问答案的依赖性，谁都可以轻松成为Axure高手。第六章 Axure军规对于很多学习或者使用Axure的朋友，总会有一些对于Axure该怎么画原型更合适的想法，也有对Axure做原型到多深程度的争论，对于这些，我有一些自己的总结，抛砖引玉。第一条：原型设计的最终目的是为了准确、方便、快捷的表达产品设计人员的产品设计意图；第二条：原型的观看者往往不是同一类对象，因此原型的设计不可避免的会有多种表现形态，每一种形态的原型都是为设计服务，没有高低之分；第三条：如果按照产出方式，有手绘产出、软件产出之分,如果按照表现形式，有纸质、低保真、高保真之分；第四条：如果你的产品设计周期中，原型设计时间过长，可能你需要停一下，站得远些重新审视一下自己原型设计的初衷；第五条：原型是否要做到高交互、高仿真取决于观看者的需求和设计者的时间，如果简洁的原型已经完全满足观看者的需求，应该首选交互少的低保真原型，