Axure快速原型设计教程 - 图文

Axure快速原型设计教程 1：初识Axure RP 1.1 什么是Axure RP

Axure的发音是“Ack-sure”，RP则是“Rapid Prototyping”的缩写。Axure RP Pro是美国Axure Software Solution公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。

Axure能让你快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外，Axure还能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。

Axure使原型设计及和客户的交流方式发生了变革：

? ? ?

进行更加高效的设计； 让你体验动态的原型； 更加清晰的交流想法。

1.2 原型的作用和好处

“没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。Prototype不只可确认需求，它更可赢得顾客的心。” ——阿伦M.戴维斯 和 迪安A. 莱芬韦尔

《用需求管理快速交付高质量的软件》的作者（Rational软件公司/IBM）

根据调查报告显示，大约66%的软件开发不是失败，就是超预算、延期或交付缩水的功能。软件失败或亏损的前三大原因为： 1、缺乏使用者的参与；2、需求或规格不完整；3、需求或规格变更；

传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在，这些需求更是不适用于目前快速发展的环境。而制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。

快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。

目前全球有财富1000大的公司和重要机构在使用Axure RP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。 2：了解Axure的工作区

Axure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对Axure RP工作环境的简要说明：

1. 主菜单和工具栏（Main Menu & Toolbar）

执行常用操作，如文件打开、保存、格式化控件、输出原型、输出规格等操作。 2. 页面导航板（Sitemap Pane）

对所设计的页面进行添加、删除、重命名和组织。 3. 控件面板（Widgets Pane）

该面板中有线框图控件和流程图控件，用这些控件进行线框图和流程图的设计。 4. 模块面板（Masters Pane）

模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织。

5. 线框图面板（Wireframe Pane）

在线框图面板中可以进行页面线框图的设计，线框图面板也就是进行页面设计的工作区。

6. 控件交互面板（Interactions Pane）

定义控件的交互，如：链接、弹出、动态显示和隐藏等。 7. 控件注释面板（Annotations Pane） 对控件进行注释定义和对控件的功能进行说明。

8. 页面交互和注释面板（Pages Notes & Page Interactions Pane） 添加和管理页面的注释和交互。 2.1 页面导航面板 (Sitemap)

在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。

页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。

1. 页面的添加、删除和重命名

点击面板工具栏上的“Add Child Page”按钮可以添加一个页面，如图1所示。点击 “Delete Page”按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。

图1：添加新页面

2. 页面组织排序

在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次，如图2所示：

图2：移动页面

3. 打开页面进行设计

在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。 2.2 控件面板 (Widgets)

控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。其面板如图3所示：

图3：控件面板 1. 添加控件

从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。 2. 操作控件

添加控件后，在线框图中点选该控件，然后可以拖拉移动控件和改变控件的大小，还可以一次同时对多个控件进行选择、移动、改变尺寸。另外，还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行，也可在Object工具栏上的按钮进行。 3. 编辑控件风格和属性

有多种方法可以编辑控件的风格和属性：

?

鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。例如，双击一个图片控件可以导入一张图 片；双击一个下拉列表或列表框控件可以编辑列表项。

? ?

工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。 右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。

2.3 模块面板(Master) 1. 什么是模块？

模块是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块，在所有页面中引用这个模块的模块实例也会随即全部跟着变化。

模块的概念犹如PowerPoint中母版、Dreamveawer中模板的概念，熟练掌握

模块可以大大提高原型设计的效率，并易于维护管理。 2. 模块的操作

在模块面板中可进行模块的管理。

?

要添加模块，单击模块面板顶部的工具栏上的“Add Master”按钮；或在面板中点鼠标右键，选择“Add Master”。

?

模块面板中可利用文件夹(Folder)来组织模块，然后通过工具栏、快捷菜单或是拖拉的方式重新排列模块。

?

在模块上双击鼠标打开模块，像设计页面一样拖拉控件到线框图面板中进行模块设计。

3. 在页面中使用模块

只要拖拉模块面板中的模块到线框图中，就可以在页面或另外模块中应用模块。拖入到线框图中后，根据模块特性，模块对象会有淡红或灰色的遮罩，执行菜单 “Wireframe->Mask Masters”可以移除遮罩。

模块预设行为（Behavior）是“Normal”，可以在模块面板中的模块上点鼠标右键，然后利用“Behavior”子菜单将它的行为修改为“Place In Background”或“Custom Widget”。

模块的行为说明如下：

Normal：模块可以被移动与放置在线框图中的任何地方，对模块修改后，所做的修改会在该模块的所有使用实例中反映出来。

Place in Background：模块应用在线框图中时，会处于线框图的最底层并被锁定，所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。 Custom Widget：模块应用在线框图中时，模块中的控件与模块失去关联，模块中的控件可以像一般控件一样进行编辑，就好像只是进行了复制。常用于创建具有自定义属性、注释和交互的自定义控件库，例如：具有白色文字的蓝色按钮。 2.4 控件交互面板(Annotations & Interactions)

控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的RIA行为，所定义的交互都可以在将来生成的原型中进行操作执行。在控件交互面板中可以定义控件的交互，交互由事件（Events）、场景（ Cases）和动作（Actions）组成：

?

用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；

? ?

每个事件可以包含多个场景，场景也就是事件触发后要满足的条件； 每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。

事件、场景及动作的关系图 1. 事件名称

目前Axure RP 5支持的事件如下：

? ? ? ? ? ?

OnClick：鼠标点击

OnMouseEnter：鼠标的指针移动到对象上 OnMouseOut：鼠标的指针移动出对象外

OnFocus：鼠标的指针进入文字输入状态（获得焦点） OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点） OnPageLoad：页面或模块载入

大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与OnMouseOut，一些特殊的控件可触发的事件有些不同：

? ? ?

按钮控件只有OnClick

单选框和复选框则具有OnFocus、 OnLostFocus

文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、

OnLostFocus

?

页面加载或模块被载入时则发生OnPageLoad

2. 动作名称

以下是 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：显示动作的文字说明

3. 场景

一个触发事件可以包含有多个场景，根据条件执行流程或互动。

场景图例

例如，可以在一个按钮的OnClick触发事件中加入两个场景，第一个场景可以加入一个条件说明(“If Yes”)并执行第一个动作；第二个场景则可加入另一个条件说明(“If No”)并执行第二个动作，如下图所示：

按钮图例

当在原型中按下按钮时，会显示出这两个条件说明(“If Yes”和“If No”)，点选其中一个条件说明，就会执行该条件所关联的动作。

使用条件说明可以有效操作条件流程，但如果需要建立一个高保真的原型，则必需在条件中定义条件逻辑：根据控件的值或变量值执行动作。 2.5 控件注释面板(Annotations) 可以为控件添加注释，以说明控件的功能。 1. 添加注释

在线框图中选择控件，然后在控件注释和交互（Annotations and Interactions）面板中编辑字段中的值，即可为控件添加注释。面板顶部的Label字段是为控件

添加一个标识符，如图1所示。

图1

2. 自定义字段（Fields）

通过主菜单Wireframe->Customize Annotation Fields and Views或点击面板上Annotations头部的“Custommize Fields and Views”，如图2所示，然后在弹出的Custommize Fields and Views对话框中可以添加、删除、修改、排序注释字段，如图3所示。

图2

图3

3. 脚注（Footnotes）

在控件上添加注释后，控件的右上角会显示一个黄色方块，称为脚注。脚注号码可以增大和减小，可通过控件右键菜单按钮或工具栏上的图标按钮进行修改。 2.6 页面交互和注释面板(Page Notes & Page Interactions Pane) 页面备注可是对页面进行描述和说明。 1. 添加页面备注

在线框图下面的Page notes面板中可以添加页面备注内容,如图1所示：

图1

2. 管理页面备注

另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用例”、“操作说明”等不同类别的页面备注。当输出规格文件时，可以指定哪些页面备注要输出。其界面如图2所示：

图2

要添加页面备注，点击主菜单“Wireframe->Manage Page Notes”或点击页面备注面板上的“Page Notes - Default”旁边的箭头按钮，然后选择“Manage Page Notes”，将出现页面备注对话框，然后就可以添加、删除、重命名、排序备注字段。其界面如图3所示：

图3

要在备注字段间进行切换，可以点击“Page Notes – Default”旁边的箭头按钮，然后选择要添加备注的字段。

呵呵，前面七小节简要介绍了Axure中各大区域的基本操作，以后，我们将会有针对性的讲其有特色的操作，希望能不断进步吆！ 3. 流程图(Flow Diagrams) 3.1 流程图和连接线 1. 什么是流程图

一个流程图可用于展示各种各样的处理流程，包括用例流程、商业流程、页面流程等。在Axure中，流程图常用于提供一个高保真的、能通过所设计的页面来完成的任务视图。一张简明的流程图，能促进和其它设计师、开发工程师的交流，节约口头沟通的成本，并且能点出一些关键性问题。流程图能使思路清晰、逻辑清楚，并且有助于程序的逻辑实现和有效解决实际问题。

流程图其实也是页面，只要修改页面类型为流程图即可。在页面上点击右键，选择“Diagram Type->Flow”，这时在页面前图标会变为另一个图标。其界面如图1所示：

图1

注意：要创建流程图并不是一定强制要将页面指定为流程图，指定为流程图只是方便识别。 2. 流程控件

在控件面板中的顶部工具栏上点击“flow”按钮可以找到流程控件，这些流程控件用于表达流程中的步骤。Axure里面由于不涉及到具体的程序流程，所以有些标准的图形并没有提供，如不规则图形、侧面双矩形等，如果这些流程控件不满足你的流程需要，可由图片控件进行合成。

流程控件的使用有一些约定习惯，但是Axure并没有对如何使用这些形状进行强制约束。一般地，你应该以其他人能够理解的方式进行使用。你可以自己自定义一套符号标准，进行使用。其界面如图2所示：

图2

?

rectangle：矩形

作用：一般用作要执行的处理（process），在程序流程图中做执行框。在Axure中如果是画页面框架图，那么也可以指代一个页面。你可把页面和执行命令放在同一个流程中做说明，这个时候将两类不同的矩形做色彩区别，然后做说明就好了。

?

rounded rectangle：圆角矩形或者扁圆

作用：表示程序的开始或者结束，在程序流程图中用作为起始框或者结束框。

?

beveled rectangle：斜角矩形

作用：斜角矩形我几乎不使用，可以视情况自行定义。或者在其他的流程图中，有特殊含义，暂不知晓，也希望有识之士指点一二。

?

diamond：菱形

作用：表示决策或判断（例如：If…Then…Else）,在程序流程图中，用作判别框。

?

file：文件

作用：表达为一个文件，可以是生成的文件，或者是调用的文件。如何定义，需要自己根据实际情况做解释。

?

bracket：括弧

作用：注释或者说明，也可以做条件叙述。一般流程到一个位置，做一段执行说明，或者特殊行为时，我会用到它。

?

semicircle：半圆形

作用：半圆在使用中常作为流程页面跳转、流程跳转的标记。

?

triangle：三角形

作用：控制传递，一般和线条结合使用，画数据传递。

?

trapezoid：梯形

作用：一般用作手动操作。

?

ellipse：椭圆形或圆形

作用：如果画小圆，一般是用来表示按顺序数据的流程。如果是画椭圆形，很多人用作流程的结束。如果是在use case用例图中，椭圆就是一个用例了。

?

hexagon：六边形

作用：表示准备之意，大多数人用作流程的起始，类似起始框。

?

parallelogram：平行四边形

作用：一般表示数据，或确定的数据处理。或者表示资料输入（Input）。

?

actor：角色

作用：来自于use case 用例，模拟流程中执行操作的角色是谁。需要注意的时，角色并非一定是人，有时候是机器自动执行，有时候也可是模拟一个系统管理。

?

database：数据

作用：就是指保存我们网站数据的数据库。

?

image：图片

作用：表示一张图片，或者置入一个已经画好的图片、流程或者一个环境。 3. 流程连接线

流程图控件和线框图控件的不同点在于流程控件可以通过连接线进行连接。 要添加连接线，可以点击主工具栏上的“Connector Mode button (F11)”按钮，这时线框图面板会从指针状态切换到连接状态，再点击“Pointer Mode button (F9)”可以切换回到指针状态，如图3所示：

图3

在连接状态时，在流程图中点击和拖动就可以绘制和添加连接线。例如，要连接两个流程控件，将鼠标放在一个流程控件的连接点上，点击和拖拉，然后鼠标在另一个目标流程控件的连接点上松开，就可以完成连接。点击和拖动连接线的尾部端点可进行重新连接。

选择流程连接线，然后点击工具栏中的“Line Pattern ”和“ Line Ends”按钮可以

修改连接线的形状和样式，如箭头、虚线。 4. 创建流程图

与线框图控件相似，你可以拖拉流程图控件到线框面板中，可以通过工具栏和右键菜单来修改流程图形状的风格和属性。另外，已经绘制好的流程形状可以通过控件右键菜单中的“Edit Flow Shape”的子菜单进行流程图形的转变。 5. 流程图中引用页面

可以在流程图控件上分配一个引用页面，如果流程图控件引用了一个页面，控件上的文本会变成页面的名称。在原型中点击引用了页面的流程控件可以自动链接到页面中。

在页面导航面板中拖拉页面到线框图或流程图中，将会创建一个引用了页面的流程图控件。流程图控件上所引用的页面可以通过在控件上的右键菜单 “Edit Flow Shape->Edit Reference Page”进行编辑和清除。其界面如图4所示：

图4

引用页面后，控件左上角会有一个“页面”图标进行标识，其界面如图5所示：

图5

3.2 自动生成流程图

可以根据页面导航面板中的页面层级关系自动产生流程图： 1、首先，创建一个流程图页面，并双击打开；

2、然后，在页面导航面板中你想要生成流程图的分支根节点上点击右键，然后选择“Generate Flow Diagram”，你将看到两个选项：Standard digram 或Right Hanging。选择其中一个就可以在线框图面板中产生一个流程图。其界面如图6所示：

图6

所生成的流程图是根据你所选择的页面和子页面的层级关系，并且会自动引用对应的页面。可以像一般的流程图一样编辑修改自动生成的流程图。

本文来源：https://www.bwwdw.com/article/ahe3.html