互联网产品经理必备原型设计

互联网产品经理必备Axure快速原型设计AxureRP可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档，它比任何当前其它创建静态原型的工具如Visio,Omnigraffle、Illustrator、Photoshop、Dreamweaver,VisualStudio、FireWorks、GUIStudio等都要快速、高效，因为它才是真正的专门原型设计工具，并且支持多人协作设计和版本控制管理。设计师们渴望有一个专门的原型设计利器，而Axure正是为此目的而精心打造。AxureRP已经被一些财富1000大公司采用，成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。为什么要进行原型设计1、原型的作用和好处―没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。Prototype不只可确认需求，它更可赢得顾客的心。‖——阿伦M.戴维斯和迪安A.莱芬韦尔《用需求管理快速交付高质量的软件》的作者（Rational软件公司/IBM）根据调查报告显示，大约66%的软件开发不是失败，就是超预算、延期或交付缩水的功能。软件失败或亏损的前三大原因为：1、缺乏使用者的参与；2、需求或规格不完整；3、需求或规格变更；传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在，这些需求更是不适用于目前快速发展的环境。而制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（RapidPrototyping）是一种有效且高效的以用户为中心（User-CenteredDesign）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富1000大的公司和重要机构在使用AxureRP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。基础篇在基础篇中，你将完整的学习到关于Axure的基本和高级功能。第一章介绍让你初步认识Axure。第1节认识AxureRP1、什么是Axure？Axure的完整英文名是AxureRPPro。Axure的英文发音是―Ack-sure‖，RP是―RapidPrototyping‖的缩写，意思为快速原型设计；Pro是―Professional‖的缩写，意思是专业版。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一个让负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web网站线框图、原型、规格说明书的专业快速原型设计工具。Axure所针对的专家包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。在Axure中设计线框图和原型会使你更加高效；可以让团队成员一起体验你的设计；向用户演示和交流以确认用户需求；自动产生规格说明书；让团队进行多人协同设计和对版本进行管理控制；等等。总之，Axure会使你以往的工作方式发生变革：行更加高效的设计；进验到动态的原型；体晰有效的交流想法；清2、Axure工作环境介绍Axure的可视化工作环境可以让你轻松快速的以鼠标拖曳的方式创建带有注释的线框图。不用进行编程，就可以在线框图上定义简单链接和高级交互。在线框图的基础上，可以自动生成HTML原型和Word格式的规格说明书。以下是AxureRP工作环境的简要说明：1.主菜单和工具栏执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。2.站点地图面板对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。3.控件面板该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。4.模块面板模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。5.线框图工作区（或叫页面工作区）线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。6.页面注释和交互区添加和管理页面级的注释和交互。7.控件交互面板定义控件的交互，如：链接、弹出、动态显示和隐藏等。8.控件注释面板对控件的功能进行注释说明。第2节线框图及注释现在我们来认识Axure中与设计线框图有关的各个区域和面板，说明如何设计线框图和为线框图添加注释。1.站点地图面板在开始设计线框图(Wireframe)或流程图（Flow）之前，应该先考虑页面框架，决定信息内容与层次。明确页面框架后，就可以利用站点地图面板来建立和管理所要设计的页面，添加、删除页面及对页面层次进行组织。添加和删除页面在站点地图面板中，点击面板工具栏上的―AddChildPage‖按钮可以添加一个页面；点击面板工具栏上的―DeletePage‖按钮或在页面上点选右键菜单中的―DeletePage‖选项可以删除一个页面；在页面上点选右键菜单中的―RenamePage‖菜单项或鼠标缓慢双击页面可对页面进行重命名。组织页面层次在站点地图面板中，用鼠标拖曳一个页面到另一个页面上或点击面板工具栏上的―MoveUp‖、―MoveDown‖、―Indent‖、―Outdent‖按钮，就可以组织页面的层次和顺序。打开页面进行设计在站点地图面板中，用鼠标在页面上进行双击或点击面板工具栏上的―DesignPage‖按钮，打开该页面在线框图区域中进行线框图设计。2、部件面板（控件面板）控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件库，如按钮、图片、文本框等。添加控件从控件面板中拖动一个控件到线框图区域中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。操作控件添加控件后，可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小，还可以一次选择多个控件进行移动和改变大小。另外，还可以组合、排序、对齐、平均间距（Distribute）和锁定控件。以上这些操作可通过在控件上点击右键菜单进行，也可以通过选择菜单―View-Toolbars-Object‖调出的对象工具栏上的按钮进行。编辑控件风格和属性有多种方法可以编辑控件的风格和属性：鼠标双击：鼠标双击某个控件，可以对控件的最常用的属性进行编辑。例如，双击一个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单：通过在控件上点击右键菜单，编辑控件的一些特定属性，不同的控件这些属性也各不相同。查看和搜索控件控件面板工具栏中，点击―Wireframe‖会弹出一个下拉菜单，你可以查看所有控件库，或只看默认线框图或流程图控件库，或只看已经被加载的控件库。另外，你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更新控件库。点击―Search‖这个搜索按钮，输入想要查找的控件名称，会在面板内列出所有符合条件的控件。创建自定义控件库默认的两套控件库(Wireframe和Flow)可能还不能满足你的要求，那么现在你可以开始创建你自己的控件库了。在控件面板中点击下拉菜单的―Createlibrary‖选项，这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存，Axure会立刻启动另一个执行程序并打开这个刚建好的.rplib文件。在新的Axure程序界面中，原本站点地图面板的位置会被控件库面板(WidgetLibraryPane)所取代。你可以像页面一样对控件进行新增、删除、排序。像创建页面一样，你可以利用现有的控件来绘制新创建的控件。Axure启动时，如果已经把创建好的自定义控件库(.rplib文件)放在Windows文件夹的―我的文件MyAxureRPLibraries‖目录中，则该控件库会被自动加载到控件面板中。另外，你也可以手动选择你所指定的.rplib文件进行控件库加载。使用自定义控件库新建立的自定义控件库的操作方式就如同其它的默认控件库一样，以拖放(Drag&Drop)的方式将控件放到画布上进行画面的绘制。3.控件注释可以为控件添加注释，以说明控件的功能。添加注释在线框图中选择控件，然后在控件注释面板中为各个注释项（如Specification、Status等）输入文本，即可为控件添加注释。面板顶部的Label输入框是为控件添加一个标识符（即控件在线框图中的命名）。自定义注释项通过主菜单‖Wireframe-CustomizeAnnotationFieldsandViews―或点击注释面板头部的―CustommizeFieldsandViews‖或，然后在弹出的自定义字段和视图（CustommizeFieldsandViews）对话框中可以添加、删除、修改、排序控件的注释项。建立新注释视图在自定义字段和视图对话框中，你还可以建立新的注释视图。你可在对话框底部的Addnewview后的输入框中输入新视图的名称，点击Add按钮即可添加新的注释视图。你可以点击Edit按钮，为新的注释视图建立注释项：然后在Axure主界面的注释面板中，可以看到新建立的注释视图和注释项。脚注（Footnotes）脚注用于对于线框图和规格书中的控件进行编号标识。在控件上添加注释或动作后，会在控件的右上角会显示一个带数字的黄色方块，称为脚注。脚注号码可以增大和减小，可通过控件右键菜单的―Footnotes‖菜单项或工具栏上的和按钮进行修改。4.页面注释（PageNotes）页面注释是对页面进行详细描述和说明。添加页面注释在线框图区域下的页面注释面板中可以添加页面注释内容。管理页面注释另外，可以自定义页面注释项，为不同的利益相关者和团队成员提供不同的页面描述说明，以满足不同需要。比如可以新增―设计师‖、―老板‖等不同类别的页面注释项。当输出规格文件时，可以指定哪些页面注释项要输出。要添加页面注释项，点击主菜单―Wireframe-ManagePageNotes‖或点击页面注释面板上的―PageNotesDefault‖旁边的箭头按钮，然后选择―ManagePageNotes‖，将出现页面注释对话框，然后就可以添加、删除、重命名、排序页面注释项。要在各个注释项间进行切换，可以点击―PageNotes–Default‖旁边的箭头按钮，然后选择想要的注释项进行页面注释。第3节固定图片的边角固定图片边角的功能，允许你放大缩小图片时，只对中间的某个区域进行缩放，保持图片的边角不变形。对于图形控件界面，这种效果会使得图片放大缩小后，仍有效保持视觉上的合理性。要调整图片的边角固定范围，在图片以鼠标右键选择―EditImage-PreserveCorners‖。进入调整边角固定范围的编辑模式之后，在控件的上方及左方个出现两个小箭头，调整这两个箭头位置（上下或左右），就可以决定这个图片控件被放大缩小时的边角固定范围。指定好图片的边角固定范围后，即使将该窗口图片控件放大或缩小，我们还是可以看到一个很合理的窗口，边角的呈现不致于因图片本身放大缩小而失真。第4节Axure5.5绘图功能的加强以圈选模式选取控件(类似Visio/PowerPoint模式)AxureRP默认选取控件的模式是―交叉选区模式‖，也就是鼠标指标点选拖曳所到之处，只要被这个范围碰触到的控件，就会被选取。现在增加了一个新的选取模式―全选模式‖，使得只有那些完全被鼠标指标所画出的矩形区域包围者才会被选取。这种软件操作模式就跟操作Visio或PowerPoint一样。想要改变选取模式，点选工具列的―SelectContainedMode‖按键(如图)，或直接按CTRL-F9。选取群组内的控件(DeepSelectioninGro