第六章 原型开发一、Axure RP 介绍软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及到程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。在现代社会中，软件应用于多个方面。典型的软件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等 。同时，各个行业几乎都有计算机软件的应用，如工业、农业、银行、航空、政府部门等。这些应用促进了 什么是原型设计产品原型设计(Prototype Design)最基础的工作，就是结合批注、大量的说明以及流程图画框架图WireFrame，将自己的产品原型完整而准确的表述给 UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改 Prototype 直至最终确认，开始投入执行。简单的说就是产品设计成形之前的一个简单框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。  普通设计工具现在大致有哪些普通的工具可以使用进行原型设计，分析他们的利弊何在？纸笔：简单易得，上手难度为零。有利于瞬间创意的产生与记录，有利于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。Word：上手难度普通。可以画 WireFrame，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。Dreamweave：操作难度大，需要基础的 html 知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。 Word 则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是 Word 最擅长的工作。PPT 自然是演示时更好。Visio 则可以适用于各种流程图、关系图的表达，更可通过画 USE CASE 获取用户需求。PS/FW是图片处理的工具，DW 则是所见即所得的网页开发软件，这些是设计师的看家本领，需要耗费太多的精力去掌握。 其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。以上这些工具，经常会使用到的，但是从根本上来说，这些工具都不是做 Prototype Design 的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的 。市面产品原型设计的软件工具有很多，大家普遍认可，使用频率最多，最高效，交互效果最好的原型工具是 Axure RP。 什么是 Axure RPAxure RP 是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国 Axure 公司；RP 则是Rapid Prototyping（快速原型）的缩写。Axure RP 是美国 Axure Software Solution 公司旗舰产品，是一个专业的快速原型设计工具，让负责定义 需求和规格、设计功能和界面的专家能够快速创建应用软件或 Web 网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。Axure 的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的线框图。不用进行编程，就可以在线框图上定义简单连接和高级交互。在线框图的基础上，可以自动生成 HTML（标准通用标记语言下的一个应用）原型和 Word 格式的规格。 Axure RP 工作环境(1).主菜单和工具栏执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。(2).站点地图面板对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次。(3).控件面板该面版包含线框图控件和流程图控件，另外，你还可以载入已有的部件库（*.rplib 文件）创建自己的部件库。(4).模块面板一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。(5).线框图工作区线框图工作区也叫页面工作区，线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。(6).页面注释和交互区添加和管理页面级的注释和交互。(7).控件交互面板定义控件的交互，如：链接、弹出、动态显示和隐藏等。(8).控件注释面板对控件的功能进行注释说明。  界面功能(1).导航面板在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。页面的添加、删除和重命名点击面板工具栏上的“Add Child Page”按钮可以添加一个页面，点击 “Delete Page” 按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。页面组织排序在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。(2).控件控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。添加控件从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。操作控件添加控件后，在线框图中点选该控件，然后可以拖拉移动控件和改变控件的大小，还可以一次同时对多个控件进行选择、移动、改变尺寸。另外，还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行，也可在 Object 工具栏上的按钮进行。编辑控件风格和属性有多种方法可以编辑控件的风格和属性：鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。例如，双击一个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。(3).注释可以为控件添加注释，以说明控件的功能。添加注释在线框图中选择控件，然后在控件注释和交互（Annotations and Interactions）面板中编辑字段中的值，即可为控件添加注释。面板顶部的 Label 字段是为控件添加一个标识符。自定义字段（Fields）通 过 主 菜 单 Wireframe->CustomizeAnnotation Fields and Views 或 点 击 面 板 上 Annotations 头 部 的“CustommizeFields and Views” 然后在弹出的 CustommizeFields and ， Views 对话框中可以添加、删除、修改、排序注释字段。脚注（Footnotes）在控件上添加注释后，控件的右上角会显示一个黄色方块，称为脚注。(4).页面备注页面备注可对页面进行描述和说明。添加页面备注在线框图下面的 Page notes 面板中可以添加页面备注内容。管理页面备注通过自定义页面备注，可以为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用 例”操作说明”等不同类别的页面备注。  .交互设计(1).控件的交互控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的 RIA 行为，所定义的交互都可以在将来生成的原型中进行操作执行。在控件交互面板中可以定义控件的交互，交互事件（Events） 、场景（ Cases）和动作（Actions）组成：用户操作界面时就会触发事件，如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut；每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。(2).定义链接下列步骤说明如何在按钮控件上定义一个链接：1.首先，拖拉一个按钮控件到线框图中，并选择这个按钮；2.然后，控件交互面板中鼠标双击“OnClick”这个事件，这时会出现“Interaction Case Properties”对话窗，在这个对话框中可以选择要执行的动作；3.在“Step 2”中，勾选“Open Link in Current Window”动作。4.在“Step 3”中，点击“Link”，在弹出的 Link Properties 对话框中可以选择要链接 的页面或其它网页地址 。除了上面的步骤，加入一个链接的最快的方法是单击控件交互面板顶部的“QuickLink” ，在弹出的Link Properties 对话框中选择要链接的页面。(3).设置动作除了简单的链接之外，Axure 还提供了许多丰富的动作，这些动作可以在任何触发事件的场景中执行，以下是 Axure 所支持的动作：Open Link in Current Window：在当前窗口打开一个页面Open Link in Popup Window：在弹出的窗口中打开一个页面Open Link in Parent Window：在父窗口中打开一个页面Close Current Window：关闭当前窗口Open Link in Frame：在框架中打开一个页面Set Panel state(s) to State(s)：为动态面板设定要显示的状态Show Panel(s)：显示动态面板Hide Panel(s)：隐藏动态面板Toggle Visibility for Panel(s)：切换动态面板的显示状态（显示/隐藏）Move Panel(s)：根据绝对坐标或相对坐标来移动动态面板Set Variable and Widget value(s) equal to Value(s)：设定变量值或控件值Open Link in Parent Frame：在父页面的嵌框架中打开一个页面Scroll to Image Map Region：滚动页面到Image Map 所在位置Enable Widget(s)：把对象状态变成可用状态Disable Widget(s)：把对象状态变成不可用状态Wait Time(s)：等待多少毫秒(ms)后再进行这个动作Other：显示动作的文字说明(4).多个场景一个触发事件可以包含有多个场景，根据条件执行流程或互动。(5).事件Axure 支持一个页面层级的触发事件：OnPageLoad，这个事件在原型载入页面时触发。 页面 OnPageLoad 事件在页面备注面板中的 Interactions 子面板中定义， OnPageLoad 为事件添加场景的方式与控件事件相同。