Axure RP 入门教程

总结了下学校软工课上用的PPT上的内容以及网上一些教程内容。看完基本入门Axure RP了。第一次学感觉还是蛮有用的。图片发不出来。。

附上软件下载地址以及PPT地址：

http://pan.baidu.com/s/1i3sZxy9

入门篇

 

第一章  介绍以工具栏工具(widgets)绘制示意图(Wireframe)

第二章  流程图（FlowDiagrams）撰写网页说明(Page Notes)

第三章  高级交互设计（RichInteraction）

第四章实例

 

第一章介绍

第1节  认识 Axure RP

第2节  线框图及其注释

第3节  基本交互设计

第4节  使用模块（Master）

第5节  HTML 原型

第6节  输出规格说明

 

第一章软件介绍

第1节  认识Axure RP

1 . Axure RP

Axure 的发音是“Ack-sure”， RP 则是“RapidPrototyping”的缩写。 Axure RP Pro

是美国 Axure Software Solution公司的旗舰产品， 是一个快速的原型工具， 主要是针对负

责定义需求、定义规格、 设计功能、 设计界面的专家， 包括用户体验设计师、 交互设

计师、业务分析师、 信息架构师、 可用性专家和产品经理。 

 

Axure能让你快速的进行线框图和原型的设计， 让相关人员对你的设计进行体验和验证，

向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外， Axure还

能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。 

Axure使原型设计及和客户的交流方式发生了变革： ?进行更加高效的设计；   让你体验动态的原型； ? 更加清晰的交流想法；

2 .  原型的作用和好处

制作 Prototype 是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富 1000 大的公司和重要机构在使用 Axure RP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。

 

3、Axure 的工作环境

Axure 的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。

无需编程就可以在线框图中定义简单链接和高级交互。 Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。以下是对 Axure RP 工作环境的简要说明：

 

?    1主菜单和工具栏（Main Menu & Toolbar） 执行常用操作，如文件打开、保存、格式化控件、输出原型、输出规格等操作。

?    2页面导航板（Sitemap Pane）对所设计的页面进行添加、删除、重命名和组织。

?    控件面板（WidgetsPane）该面板中有线框图控件和流程图控件，用这些控件进行线框图和流程图的设计。

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

?    4线框图面板（Wireframe Pane）在线框图面板中可以进行页面线框图的设计，线框图面板也就是进行页面设计的工作区。

?    5控件交互面板（Interactions Pane）定义控件的交互，如：链接、弹出、动态显示和隐藏等。

?    6控件注释面板（Annotations Pane）对控件进行注释定义和对控件的功能进行说明。

?    7页面交互和注释面板（Pages Notes & Page Interactions Pane） 添加和管理页面的注释和交互。

 

1. 页面导航面板（Sitemap） 在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。

明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。

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

点击面板工具栏上的“Add Child Page”按钮可以添加一个页面，点击“Delete Page”按钮可以删除一个页面。

右键单击选择“Rename Page”菜单项可对页面进行重命名。

页面组织排序

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

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

2.控件（Widgets）

控件是用于设计线框图的用户界面元素。

在控件面板中包含有常用的控件，如按钮、图片、文本框等。

添加控件

从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件。

控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。

操作控件

添加控件后，在线框图中点选该控件，然后可以拖拉移动控件和改变控件的大小，还可以一次同时对多个控件进行选择、移动、改变尺寸。

另外，还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行，也可在 Object 工具栏上的按钮进行。

编辑控件风格和属性

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

?         鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。

例如，双击一个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。

?         工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。

?         右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。

 

3. 注释（Annotations）

可以为控件添加注释，以说明控件的功能。

添加注释

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

自定义字段（Fields）

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

4. 页面备注（Page Notes）

页面备注可是对页面进行描述和说明。

添加页面备注

在线框图下面的 Page notes 面板中可以添加页面备注内容。

第3节基本交互设计

 

1.   控件的交互

控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的 RIA 行为，所定义的交互都可以在将来生成的原型中进行操作执行。

在控件交互面板中可以定义控件的交互，交互事件（Events）、场景（ Cases）和动作（Actions）组成：

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

?    每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；

?   每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。

事件场景和动作的关系

 

以下是 Axure RP支持的事件如下：

?     OnClick：鼠标点击

?     OnMouseEnter：鼠标的指针移动到对象上 ?

?     OnMouseOut：鼠标的指针移动出对象外 ?

?     OnFocus：鼠标的指针进入文字输入状态（获得焦点） ?

?     OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点） ?

?     OnPageLoad：页面或模块载入

?     大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与 OnMouseOut，

 一些特殊的控件可触发的事件有些不同： ?

?     按钮控件只有OnClick ?

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

?     文本框、文本域、下拉框、列表框则具有 OnKeyUp、OnFocus、OnLostFocus ? 页面加载或模块被载入时则发生 OnPageLoad

 

2、定义链接

下列步骤说明如何在按钮控件上定义一个链接：

1. 首先，拖拉一个按钮控件到线框图中，并选择这个按钮；

2. 然后，控件交互面板中鼠标双击“OnClick”这个事件，这时会出现“InteractionCase Properties”对话窗，在这个对话框中可以选择要执行的动作；

3. 在“Step 2”中，勾选“OpenLink in Current Window”动作。

4. 在“Step 3”中，点击“Link”，在弹出的 LinkProperties 对话框中可以选择要链接的页面或其它网页地址。

 

除了上面的步骤，加入一个链接的最快的方法是单击控件交互面板顶部的“Quick Link” ，在弹出的Link Properties 对话框中选择要链接的页面。

 

1.      设置动作

除了简单的链接之外，Axure 还提供了许多丰富的动作，这些动作可以在任何触发事件的场景中执行。

以下是 Axure 所支持的动作： 

Open Linkin Current Window：在当前窗口打开一个页面?

Open Linkin Popup Window：在弹出的窗口中打开一个页面?

Open Linkin Parent Window：在父窗口中打开一个页面

CloseCurrent Window：关闭当前窗口?

Open Linkin Frame：在框架中打开一个页面?

Set Panelstate(s) to State(s)：为动态面板设定要显示的状态

ShowPanel(s)：显示动态面板?

HidePanel(s)：隐藏动态面板?

ToggleVisibility for Panel(s)：切换动态面板的显示状态（显示/隐藏）?

MovePanel(s)：根据绝对坐标或相对坐标来移动动态面板

SetVariable and Widget value(s) equal to Value(s)：设定变量值或控件值 ?

Open Linkin Parent Frame：在父页面的嵌框架中打开一个页面

Scroll toImage Map Region：滚动页面到

Image Map所在位置

EnableWidget(s)：把对象状态变成可用状态?

DisableWidget(s)：把对象状态变成不可用状态?

WaitTime(s)：等待多少毫秒(ms)后再进行这个动作?

Other：显示动作的文字说明

 

4.多个场景（条件）

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

5. 页面上的事件: OnPageLoad

 

Axure 支持一个页面层级的触发事件：OnPageLoad，这个事件在原型载入页面时触发。

页面 OnPageLoad 事件在页面备注面板中的 Interactions子面板中定义， OnPageLoad 为事件添加场景的方式与控件事件相同

 

实例―用户登录

 

第一步，添加一个点击事件

选中登陆按钮，双击鼠标点击时新增一个用例，在弹出的用例编辑器中点击新增条件。

第二步，添加条件

在条件生成器中，配置 如果部件 "username" 文本框的内容 = “jinwu”
我们这个案例要做的效果是，对用户登陆名和密码进行判断，如果正确就打开新页面，如果失败就提示错误。
这个条件的意思就是，如果输入的用户名 = jinwu

 

第三步，添加第二个条件

在条件生成器中，点击条件表达式右侧的 + 号，添加一个条件。
配置：如果部件 “pwd” 文本框的内容 = “laoshi”
此条件的意思就是 如果 输入的密码 = laoshi

要注意的是，在条件生成器的左上角，我们使用的是满足全部以下 条件，也就是and状态。
意思就是要同时满足我们添加的两个条件才执行动作。

第四步，给用例添加动作

当要添加的条件定义完毕后，我们就要添加当条件被满足后所要执行的动作了。

第四步，给用例添加动作

当要添加的条件定义完毕后，我们就要添加当条件被满足后所要执行的动作了。

在用例编辑器左侧，点击 当前窗口 选择 successed 页面。点击确定，关闭该对话框。

第五步，添加第二个用例else if

现在我们已经添加了 登陆成功 时的用例，让我们来继续添加 登陆失败时 的用例。
双击鼠标单击时事件或者点击 新增用例， 注意 else if true 会自动添加到第二个用例中。
默认情况下，第二个用例是设定在第一个用例不被满足的情况下执行的。
在这个例子中，我们就不需要给第二个用例添加条件了。（因为没有其他条件，如果登陆不成功，就是失败。）

第六步，添加显示动作

当登陆失败时，我们想让他在登陆按钮下面显示一条错误提示，我们添加一个 文本标签，并输入内容：“用户名或密码错误，请重新登陆！”
给该文本部件命名为 ErrorMessage 并将其设置为 隐藏。
在第二个用例中点击 显示 动作，并 选择 ErrorMessage 设置为 显示。

 

第七步，使用 F5 键 快速预览效果！

 

学习资料

 

?     http://www.axure.com/learn

 

 

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠