互联网产品经理必备原型设计Word文件下载.docx

1、Axure的完整英文名是Axure RP Pro。Axure的英文发音是Ack-sure ，RP 是Rapid Prototyping的缩写，意思 为快速原型设计；Pro是Professional的缩写，意思是专业版。Axure RP Pro是美国Axure Software Solution 公 司的旗舰产品，是一个让负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web网站线框图、原 型、规格说明书的专业快速原型设计工具。Axure所针对的专家包括用户体验设计师（UX）、交互设计师（UI）、 业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。在Axur

2、e中设计线框图和原型会使你更加高效；可以让团队成员一起体验你的设计；向用户演示和交流以确认用 户需求；自动产生规格说明书；让团队进行多人协同设计和对版本进行管理控制；等等。 总之，Axure会使你以往的工作方式发生变革： 行更加高效的设计； 进 验到动态的原型； 体 晰有效的交流想法； 清2、Axure工作环境介绍Axure的可视化工作环境可以让你轻松快速的以鼠标拖曳的方式创建带有注释的线框图。不用进行编程，就可以 在线框图上定义简单链接和高级交互。在线框图的基础上，可以自动生成HTML原型和Word格式的规格说明书。以下是Axure RP工作环境的简要说明：1.主菜单和工具栏 执行常用操作，

3、如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。2.站点地图面板 对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。3.控件面板 该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图 和流程图的设计。 另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。4.模块面板 模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。5.线框图工作区（或叫页面工作区） 线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。6.页

4、面注释和交互区 添加和管理页面级的注释和交互。7.控件交互面板 定义控件的交互，如：链接、弹出、动态显示和隐藏等。8.控件注释面板 对控件的功能进行注释说明。第2节 线框图及注释现在我们来认识Axure中与设计线框图有关的各个区域和面板，说明如何设计线框图 和为线框图添加注释。站点地图面板在开始设计线框图（Wireframe）或流程图（Flow）之前，应该先考虑页面框架，决定信息内容与层次。明确页面框 架后，就可以利用站点地图面板来建立和管理所要设计的页面，添加、删除页面及对页面层次进行组织。添加和删除页面 在站点地图面板中， 点击面板工具栏上的Add Child Page按钮可以添加一个页面

5、； 点击面板工具栏上的 Delete Page按钮或在页面上点选右键菜单中的 Delete Page选项可以删除一个页面；在页面上点选右键菜单中的 Rename Page菜单项或鼠标缓慢双击页面可对页面进行重命名。组织页面层次 在站点地图面板中，用鼠标拖曳一个页面到另一个页面上或点击面板工具栏上的Move Up、Move Down、 Indent、 Outdent按钮，就可以组织页面的层次和顺序。打开页面进行设计 在站点地图面板中， 用鼠标在页面上进行双击或点击面板工具栏上的Design Page按钮， 打开该页面在线框图区 域中进行线框图设计。2、部件面板（控件面板）控件是用于设计线框图的用

6、户界面元素。在控件面板中包含有常用的控件库，如按钮、图片、文本框等。添加控件 从控件面板中拖动一个控件到线框图区域中，就可以添加一个控件。控件可以从一个线框图中被拷贝（Ctrl+C）， 然后粘贴（Ctrl+V）到另外一个线框图中。操作控件 添加控件后，可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小，还可以一次选择多个控件进行 移动和改变大小。另外，还可以组合、排序、对齐、平均间距（Distribute）和锁定控件。以上这些操作可通过在 控件上点击右键菜单进行，也可以通过选择菜单View-Toolbars-Object 调出的对象工具栏上的按钮进行。编辑控件风格和属性 有多种方法可以

7、编辑控件的风格和属性： 鼠标双击：鼠标双击某个控件，可以对控件的最常用的属性进行编辑。例如，双击一个图片控件可以导入一张 图片；双击一个下拉列表或列表框控件可以编辑列表项。 工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。 右键菜单： 通过在控件上点击右键菜单，编辑控件的一些特定属性，不同的控件这些属性也各不相同。查看和搜索控件 控件面板工具栏中，点击Wireframe会弹出一个下拉菜单，你可以查看所有控件库，或只看默认线框图或流程图 控件库，或只看已经被加载的控件库。另外，你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更 新控件库。点击Search这个搜索按钮，输入

8、想要查找的控件名称，会在面板内列 出所有符合条件的控件。创建自定义控件库 默认的两套控件库（Wireframe和Flow）可能还不能满足你的要求， 那么现在你可以开始创建你自己的控件库了。 在 控件面板中点击下拉菜单的Create library选项， 这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存， Axure会立刻启动另一个执行程序并打开这个刚建好的 .rplib文件。在新的Axure程序界面中，原本站点地图面板 的位置会被控件库面板（Widget Library Pane）所取代。你可以像页面一样对控件进行新增、删除、排序。像创建页面一样，你可以利用现有的控件来绘制新创建

9、的控件。Axure启动时，如果已经把创建好的自定义控件库（.rplib文件）放在Windows文件夹的我的文件 My Axure RP Libraries目录中，则该控件库会被自动加载到控件面板中。另外，你也可以手动选择你所指定的 .rplib 文件进行 控件库加载。使用自定义控件库 新建立的自定义控件库的操作方式就如同其它的默认控件库一样，以拖放（Drag&Drop）的方式将控件放到画布上 进行画面的绘制。控件注释可以为控件添加注释，以说明控件的功能。添加注释 在线框图中选择控件，然后在控件注释面板中为各个注释项（如Specification、Status等）输入文本， 即可为控 件添加注释

10、。面板顶部的Label输入框是为控件添加一个标识符（即控件在线框图中的命名）。自定义注释项 通过主菜单Wireframe-Customize Annotation Fields and Views或点击注释面板头部的 Custommize Fields and Views 或， 然后在弹出的自定义字段和视图（Custommize Fields and Views）对话框中可以添加、删除、 修改、排序控件的注释项。建立新注释视图 在自定义字段和视图对话框中，你还可以建立新的注释视图。你可在对话框底部的Add new view后的输入框中输 入新视图的名称，点击Add按钮即可添加新的注释视图。你可

11、以点击Edit按钮，为新的注释视图建立注释项：然后在Axure主界面的注释面板中，可以看到新建立的注释视图和注释项。脚注（Footnotes） 脚注用于对于线框图和规格书中的控件进行编号标识。在控件上添加注释或动作后，会在控件的右上角会显示一 个带数字的黄色方块，称为脚注。脚注号码可以增大和减小， 可通过控件右键菜单的Footnotes菜单项或工具 栏上的 和 按钮进行修改。页面注释（Page Notes）页面注释是对页面进行详细描述和说明。添加页面注释 在线框图区域下的页面注释面板中可以添加页面注释内容。管理页面注释 另外，可以自定义页面注释项，为不同的利益相关者和团队成员提供不同的页面描述

12、说明，以满足不同需要。比 如可以新增 设计师、老板等不同类别的页面注释项。当输出规格文件时，可以指定哪些页面注释项要输出。要添加页面注释项，点击主菜单Wireframe-Manage Page Notes或点击页面注释面板上的Page Notes Default旁边的箭头按钮，然后选择Manage Page Notes，将出现页面注释对话框，然后就可以添加、删除、重 命名、排序页面注释项。要在各个注释项间进行切换，可以点击Page Notes Default旁边的箭头按钮，然后选择想要的注释项进行页面 注释。第3节 固定图片的边角固定图片边角的功能，允许你放大缩小图片时，只对中间的某个区域进行

13、缩放，保持图片的边角不变形。 对于图形控件界面， 这种效果会使得图片放大缩小后，仍有效保持视觉上的合理性。 要调整图片的边角固定范围，在图片以鼠标右键选择Edit Image-Preserve Corners。进入调整边角固定范围的编辑模式之后，在控件的上方及左方个出现两个小箭头，调整这两个箭头位置（上下或 左右），就可以决定这个图片控件被放大缩小时的边角固定范围。指定好图片的边角固定范围后，即使将该窗口图片控件放大或缩小，我们还是可以看到一个很合理的窗口，边角 的呈现不致于因图片本身放大缩小而失真。第4节 Axure5.5绘图功能的加强以圈选模式选取控件（类似Visio/PowerPoint

14、模式） Axure RP默认选取控件的模式是交叉选区模式，也就是鼠标指标点选拖曳所到之处，只要被这个范围碰触到的 控件，就会被选取。现在增加了一个新的选取模式全选模式，使得只有那些完全被鼠标指标所画出的矩形区域 包围者才会被选取。这种软件操作模式就跟操作Visio或PowerPoint一样。想要改变选取模式，点选工具列的Select Contained Mode按键（如图），或直接按 CTRL-F9。选取群组内的控件 （Deep Selection in Groups） 当控件被群组（Group）起来以后，新版Axure RP 5.5允许你针对群组中的单一控件进行编辑，增加批注，或设计交 互表

15、现，甚至可以移动或缩放群组中的控件尺寸与位置。要选择群组中的控件是很简单的，只要以鼠标左键去点 选你要的控件即可。位置与尺寸设定面板（Location and Size Pane） 位置与尺寸设定面板（Location and Size Pane）取代了先前版本的位置与尺寸对话窗（Location and Size dialog）。 要开启这个窗格，以鼠标右键在控件上选择View-Location and Size即可。 当你在绘制画面时，这个面板现在可以维持出现在画面上不会消失，方便随时调整位置与尺寸大小的数值。这个 新功能可以针对单一控件或多个控件一次性的调整，当你想要对齐一群相同特性的控

16、件时，这个功能让你更快设 定控件等宽或等高 ，更容易对齐控件位置。第5节 基本交互设计本节介绍了设计低保真原型所需要的简单的交互行为，解释了Axure中进行交互设计的基本方法。1、控件的交互控件交互面板用于定义线框图中控件的行为，包括定义简单的链接和复杂的RIA 行为，所定义的控件交互可以在 将来生成的HTML原型中进行操作。在控件交互面板中可以定义的控件交互由事件（Events）、场景（ Cases）和行为（Actions）组成： 用户操作界面时就会触发事件， 如鼠标的OnClick、OnMouseEnter和OnMouseOut； 每个事件可以包含一个或多个场景，场景就是事件触发后出现的一

17、种情况，如点击一个按钮后可以出现两种场 景：一种是进入页面1；另一种是进入页面2； 每个场景中可执行多个行为，例如：打开链接、显示面板、隐藏面板、移动面板。事件、场景和行为的关系如下：目前Axure RP 5.5 支持的事件如下： OnClick：鼠标点击 OnMouseEnter：鼠标的指针移动到对象上 OnMouseOut：鼠标的指针移动出对象外 OnFocus：鼠标的指针进入文字输入状态（获得焦点） OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点） OnChange：下拉框或列表框中的选项改变 OnPageLoad：页面或模块载入 OnKeyUp：按下然后松开键盘上的键

18、大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与OnMouseOut。某些控件可触发的事件有些 不同： 单选框和复选框则具有OnFocus、 OnLostFocus 事件； 文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件； 下拉框和列表框具有OnChange事件； 页面加载或模块被载入时则发生OnPageLoad ；2、定义一个链接下列步骤说明如何在按钮控件上定义一个链接： 1. 2. 首先，拖拉一个按钮控件到线框图中，并选择这个按钮； 然后，控件交互面板中鼠标双击OnClick这个事件，这时会出现Interacti

19、on Case Properties对话窗，在这个对话框中可以选择要执行的动作； 3. 4. 在Step 2中，勾选Open Link in Current Window动作； 在Step 3中，点击Link，在弹出的Link Properties 对话框中可以选择要链接的页面或其它网页地址 。除了上面的步骤，定义一个链接的最快捷的方法是单击控件交互面板顶部的 Quick Link ，在弹出的Link Properties 对话框中选择要链接的页面。3、定义行为除了定义简单的链接之外，Axure还提供了许多丰富的行为，可以在任何所触发事件的场景中执行这些行为。以下是目前 Axure5.5所支持

20、的行为： Open Link in Current Window：在当前窗口打开一个页面 Open Link in Popup Window：在弹出的窗口中打 开一个页面 Open Link in Parent Window：在父窗口中打开一个页面Close Current Window：关闭当前窗口 Open Link in Frame：在Frame框架内打开一个页面 Open Link in Parent Frame：在父页面的嵌框架中打开一个页面 Set Panel state（s） to State（s）：为动态面板设定要显示的状态 Show Panel（s）：显示面板 Hide Pa

21、nel（s）：隐藏面板 Toggle Visibility for Panel（s）：切换（显示/隐藏）面板的显示状态 Move Panel（s）：根据绝对坐标或相对坐标来移动动态面板 Bring Panel（s） to Front：将动态面板移至最上层，让Dynamic Panel能够不被其它图层覆盖 Set Variable and Widget value（s） equal to Value（s）：设定变量的值或控件的值 Scroll to Image Map Region：滚动页面到Image Map所在位置 Enable Widget（s）：把对象状态变成可用状态 Disable W

22、idget（s）：把对象状态变成不可用状态 Set Widget（s） to Selected State：指定控件选择后的样式 Set Focus on Widget：设定焦点在指定的控件上 Wait Time（s）：等待多少毫秒（ms）后再进行这个动作 Other：显示动作的文字说明4、定义多个场景（场景说明）一个事件可以包含有多个场景，以传达多个不同的流程或交互。例如，可以在一个按钮的 OnClick事件中加入两 个场景，第一个场景为如果成功并执行第一个动作；第二个场景为如果失败并执行第二个动作。当在HTML原型中点击按钮时，会显示出这两个场景说明（如果成功和如果失败），点选其中一个场景

23、说明，就 会执行这个场景中包含的行为。使用场景说明虽然也可以表达出交互流程，但如果需要建立一个高保真的原型，则必需在场景中定义逻辑条件： 根据控件中的值或变量值执行行为。 （见第四章中关于逻辑条件的详细描述）5、页面事件: OnPageLoadAxure支持一个页面级的触发事件：OnPageLoad，这个事件在原型载入页面时被触发。 页面OnPageLoad 事 件在页面交互面板中定义，为页面OnPageLoad 事件添加场景的方式与在控件事件中相同。 （见第四章中关于 OnPageLoad事件的详细描述）第6节 模块1、什么是模块模块（Maste）是可以重复使用特殊页面。一些常用模块如页首（

24、Header）、页尾（Footer）与导航（Navigation）。模 块可用在页面中或是其他模块中。只要修改模块，在所有引用这个模块的页面中的模块也会相应跟着同步更新。 模块的概念犹如PowerPoint 中母版、 Dreamveawer中模板的概念，熟练掌握模块可以大大提高原型设计的效率， 并使原型易于管理维护。2、添加、设计和组织模块在模块面板中可进行模块的管理。 要添加模块，单击模块面板顶部工具栏的Add Master按钮或在面板中点鼠标 右键，选择Add Master。 可以使用文件夹（Folder）来组织模块，然后通过工 具栏、右键菜单或是拖放的方式重 新排列组织模块。 在模块上双

25、击可打开模块，像设计页面一样拖放控件到线框图中进行模块设计。3、页面中添加模块拖动模块面板中的模块到线框图中，就可以在页面或其它模块中添加模块。模块添加到线框图中后，根据模块行 为会有淡红或灰色的遮罩。 选择菜单 Wireframe-Mask Masters，取消该菜单的勾选，就可以移除颜色遮罩。模块的默认行为（Behavior）是Normal ，可以在模块上点击鼠标右键，使用Behavior菜单项将模块行为修改 为Place In Background或Custom Widget。模块有以下3种行为： 普通行为（Normal）：模块可以被移动与放置在线框图中的任何地方，对模块所做的修改会在所

26、有模块实例 中同时更新。 背景行为（Place in Background）：模块应用在线框图中时，会处于线框图的最底层并被锁定。模块实例中 所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。 自定义控件行为（Custom Widget）： 模块应用在线框图中时，模块实例中的控件与原模块失去关联，模块 实例中的控件可以像一般控件一样可以进行编辑，就好像只是进行了复制和粘帖操作。常用于创建具有自定义 属性、注释和交互的自定义控件库，例如：具有白色文字的蓝色按钮。第7节 HTML原型1、什么 HTML原型在 Axure中设计了带注释的线框图并定义了交互之后，就可以产生一个可以基于浏

27、览器的、可互动的原型了。 Axure 原型是一些HTML和 JavaScript 文件，可以在IE6+、Mozilla、Firefox浏览器中运行。2、配置和生成原型点击主菜单Generate-Prototype （F5）或工具栏上的Prototype按钮，在打开的 Configure HTML Prototype对话 框中，可以对原型进行配置和生成。生成原型的配置选项分为以下部分： 常规（General）：在Destination Folder位置输入 HTML原型的存放位置。由于Axure HTML原型包含多个文 件，最好指定一个单独文件夹专门存放这个原型。 页面注释（Notes）：对想要

28、显示在 HTML原型中的页面注释项进行选择和排序。 控件注释（Annotations）：对想要显示在HTML 原型中的控件注释项进行选择和排序。 定交互行为（Interactions）：设置是否需要总是显示场景描述（case），或是只在多个场景存在的情形才显示场 景描述。 发布（Distribution）：选择是否发布生成chm文件。 高级（Advanced）：选择是否将Text Panel转换成图片，这是旧版本的一个功能，很少使用。配置完毕后，就可以点击Generate按钮生成原型。3、重新生成页面当 Axure工程会越来越大时，输出HTML原型所耗费的时间也会越来多， 导致速度变慢。如果只是调整其中一个 页面，却要等待整个原型重新全部输出，那就太浪费时间了。 这时为了提高效率，可以只对当前修改的页面进 行重新生成。要对一个页面重新生成，只打开这个页面，然后选择主菜单Generate-Regenerate Current Page to Prototype（CTRL+F5） ，回到 HTML原型中刷新就可以看到更新的页面了。4