AxureRP8实战手册

基础操作篇

本篇包含56种常见的基础操作，初学者应在掌握本篇内容后再进行实战案例篇的学习，以免产生学习障碍。同时，建议具备一定基础的读者学习本篇中相对生疏的内容，并加以掌握。

第1章 使用元件

本文目录

基础1. 添加元件到画布

基础2. 添加元件名称

基础3. 设置元件位置/尺寸

基础4. 设置元件默认角度

基础5. 设置元件颜色与透明

基础6. 设置形状或图片圆角

基础7. 设置矩形仅显示部分边框

基础8. 设置线段/箭头/边框样式

基础9. 设置元件文字边距/行距

基础10. 设置元件默认隐藏

正文

基础1. 添加元件到画布

在左侧元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置上松开。（图1-1）

基础2. 添加元件名称

在检视面板的元件名称文本框中输入元件的自定义名称，建议采用英文命名。

建议格式：PasswordInput01或Password01

名称含义：序号01的密码输入框

格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。（图1-2）

基础3. 设置元件位置/尺寸

元件的位置与尺寸可以通过鼠标拖拽调整，也可以在快捷功能或元件样式中进行输入调整。（图1-3）

x：指元件在画布中的x轴坐标值。

y：指元件在画布中的y轴坐标值。

w：指元件的宽度值。

h：指元件的高度值。

在输入数值调整元件尺寸时，可以在样式中设置，让元件【保持宽高比例】。（图1-4）

基础4. 设置元件默认角度

方式一：选择需要改变角度的元件，按住<Ctrl>键的同时，用鼠标拖动元件的节点到合适的角度。（图1-5）

方式二：在元件样式中进行角度的设置，元件的角度与元件文字的角度可以分开设置。（图1-5）

基础5. 设置元件颜色与透明

选择要改变颜色的元件，点击快捷功能区中的背景颜色设置按钮，选取相应的颜色，或者在元件样式中进行设置。（图1-6）

基础6. 设置形状或图片圆角

可以通过拖动元件左上方的圆点图标进行调整，也可以在元件样式中设置圆角半径来实现。（图1-7）

基础7. 设置矩形仅显示部分边框

在Axure RP 8的版本中，矩形的边框可以在样式中设置显示全部或部分。（图1-8）

基础8. 设置线段/箭头/边框样式

线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。（图1-9）

基础9. 设置元件文字边距/行距

在元件样式中可以设置元件文字的【行间距】与【填充】。（图1-10）

行间距：是指文字段落行与行之间的空隙。

填充：是指文字与形状边缘之间填充的空隙。

基础10. 设置元件默认隐藏

选择要隐藏的元件，在快捷功能或者元件样式中勾选【隐藏】选项。（图1-11）

本文目录

基础21.     设置元件默认选中/禁用

基础22.     设置单选按钮唯一选中

基础23.     设置元件不同状态时的样式

基础24.     设置图片文本

基础25.     切割/裁剪图片

基础26.     嵌入多媒体文件/页面

基础27.     调整元件的层级

基础28.     组合/取消组合元件

基础29.     转换元件为图片

基础30.     载入元件库

正文

基础21.   设置元件默认选中/禁用

元件的属性中可以对一些元件的默认状态进行设置，可以设置的状态包括【选中】和【禁用】，默认状态的设置，可以触发属性中设置的交互样式。比如设置某个元件在浏览器中默认为禁用的灰色，就需要勾选【禁用】（复选框），并设置【禁用】的交互样式。（图1-22）

除了禁用与选中个别元件还具有【只读】的设置。例如：文本框与多行文本框。

基础22.   设置单选按钮唯一选中

全选所有的单选按钮，在元件属性中{设置单选按钮组名称}，即可实现唯一选中的效果。（图1-23）

基础23.   设置元件不同状态的交互样式

点击元件属性中各个交互样式的名称，即可设置元件在不同状态时呈现的样式。这些样式在交互被触发时，就会显示出来。（图1-24）比如设置元件默认状态为禁用，在浏览原型时，页面打开后就会显示该元件被禁用的样式。（图1-22）

基础24.   设置图片文本

设置图片文本需要在图片上点击<鼠标右键>，选择【编辑文本】，方可进行图片上的文字编辑。（图1-25）

基础25.   切割/裁剪图片

在图片的元件属性中，设有切割和裁剪功能的图标，点击即可使用相应功能。元件上点击<鼠标右键>，菜单中也有相应的选项。（图1-26）

切割：可将图片进行水平与垂直的切割，将图片分割开。

裁剪：可将图片中的某一部分取出。裁剪分为几种，分别是裁剪、剪切、和复制。其中：裁剪只保留被选择的区域；剪切是将选取的部分从原图中剪切到系统剪贴板中；复制是将选取的部分复制到系统剪贴板中，复制的方式对原图没有影响。

基础26.   嵌入多媒体文件/页面

基本元件中的内联框架可以插入多媒体文件与网页。双击元件或者在属性中点击【框架目标页面】，在弹出的界面中选择【链接到url或文件】，填写{超链接}，内容为多媒体文件的地址（网络地址或文件路径）或网页地址。在这个界面中也可以选择嵌入原型中的某个页面。（图1-27）

图中嵌入的优酷视频地址：http://player.youku.com/player.php/sid/XMTM2MDA3NDA0OA==/v.swf

基础27.   调整元件的层级

元件的层级可以通过点击快捷功能中的图标或者右键菜单的【顺序】选项进行调整，也可以在页面内容概要中通过拖动进行调整。概要中层级顺序为由上至下，最底部的元件为最顶层。（图1-28）

基础28.   组合/取消组合元件

通过快捷功能图标或右键菜单可以将多个元件组合到一起，达到共同移动/选取/添加交互等操作。组合/取消组合的快捷键为< Ctrl+G>键/<Ctrl+Shift+G>键。（图1-29）

基础29.   转换元件为图片

形状/文本标签/线段等元件可以通过点击<鼠标右键>，选择将元件【转换为图片】。例如，使用少量特殊字体或者图标字体时，即可将元件转换为图片，避免在未安装字体的设备上浏览原型时不能正常显示。（图1-30）

基础30. 载入元件库

除了使用软件自带的默认元件库与流程图元件库，用户还可以加载自定义元件库。加载自定义元件库只需点击功能图标，在列表中选择【载入元件库】。（图1-31）

本文目录

基础31.     切换元件库

第2章          页面设置

基础32.     设置页面居中

基础33.     设置页面背景（图片/颜色）

基础34.     设置页面颜色（草图/黑白）

第3章          设置条件

基础35.     添加条件判断

基础36.     设置条件限制

基础37.     用例条件转换

第4章          使用变量/公式

基础38.     全局变量设置

基础39.     局部变量设置

基础40.     公式的格式及类型

正文

基础31.   切换元件库

在元件库功能面板中，可以通过点击元件库列表，选择不同的元件库进行使用。（图1-32）

第2章    页面设置

基础32.   设置页面居中

在页面【样式】设置中选择页面居中的按钮。页面居中是指在浏览器中查看原型时页面内容居中显示。（图2-1）

基础33.   设置页面背景（图片/颜色）

在页面【样式】中可以编辑页面的背景颜色以及背景图片。（图2-2）

基础34.   设置页面颜色（草图/黑白）

在页面的【样式】中，可以将当前页面的显示为草图效果，同时可以将页面颜色在彩色与黑白之间转换。（图2-3）

第3章    设置条件

基础35.   添加条件判断

在用例编辑界面中点击添加【条件按钮】进行添加条件。（图3-1）

比如：判断当前元件上的文字包含“@”。（图3-2）

基础36.   设置条件逻辑关系

设置执行一个动作必须同时满足多个条件，或者仅需满足多个条件中的任何一个，需要在添加条件的界面中进行设置。（图3-3）

基础37.   用例条件转换

为多个用例改变条件判断关系时，只需要在相应的用例名称上点击<鼠标右键>，选择【切换为<If>或<Else If>】。（图3-4）

第4章    使用变量/公式

基础38.   全局变量设置

全局变量是一个数据容器，就像一个U盘，可以把需要的资料存入，随身携带，在需要的时候读取出来使用。全局变量的设置在【项目】-【全局变量】中。（图4-1）

基础39.   局部变量设置

局部变量在编辑值/文本的界面中进行创建，通过在【插入变量或函数…】列表中选取使用。

局部变量能够在创建时获取多种类型的数据。（图4-2）

基础40. 公式的格式及类型

公式在编辑值/文本的界面中进行编辑，格式为“[[公式内容]]”。公式内的内容可以进行运算，例如：“[[3*15]]”获取的结果为“45”；公式运算结果自动与公式外的内容连接到一起，形成一个字符串，例如：“[[3*15]]个”获取的“45个”。变量与函数需要在写入在公式的“[[]]”中才能够正确获取变量值或者函数运算结果。（图4-3）

本文目录

第5章          功能设置

基础41.     设置形状并排显示细边框

基础42.     设置画布中的遮罩阴影

基础43.     显示/隐藏交互与说明编号

基础44.     显示/隐藏两侧的功能面板

基础45.     展开/收起/弹出/停靠功能面板

基础46.     关闭/恢复功能面板

基础47.     文件备份与恢复

基础48.     设置自适应视图

第6章          查看原型

基础49.     快速预览查看原型

基础50.     生成HTML查看原型

正文

第1章    功能设置

基础1.   设置形状并排显示细边框

在【菜单】-【项目】的选项列表中，选择【项目设置】；在弹出的面板中进行{边界对齐}的设置。选择【边框重合】时，两个形状中间的边框为细边框；选择【边框并排】时，两个形状中间的边框为粗边框。（图5-1）

基础2.   设置画布中的遮罩阴影

在【菜单】-【视图】-【遮罩】的选项列表中，取消相应的勾选。比如画布中隐藏的元件不显示淡黄色的阴影，则取消【隐藏对象】的勾选。（图5-2）

基础3.   显示/隐藏交互与说明编号

在【菜单】-【视图】的选项列表中，取消【显示脚注】的勾选。（图5-3）

基础4.   显示/隐藏两侧的功能面板

点击快捷功能中的图标即可关闭开启相应的功能面板。（图5-4）

基础5.   展开/收起/弹出/停靠/关闭功能面板

如果某个功能面板需要更大的操作空间，可以将其弹出或者收起其它面板。当完成操作后再进行还原。面板弹出后可将其关闭。（图5-5）

基础6.   关闭/恢复功能面板

面板可以在弹出状态下点击【×】将其关闭（图5-5），也可以在【视图】-【功能区】菜单中进行关闭或开启。如果需要将功能区所有面板恢复默认。可以在【视图】中通过【重置视图】来完成。（图5-6）

基础7.   文件备份与恢复

开启软件的自动备份功能，可以有效的帮助我们降低因误操作、软件崩溃、断电等异常时，未保存或者损坏文件的风险。文件的备份与恢复在【文件】菜单中进行相关操作。（图5-7）

基础8.   设置自适应视图

自适应视图是指编辑多种分辨率的原型，设备中查看时，系统会根据自身分辨率，自动与分辨率相适合的原型进行匹配，并显示出来。自适应视图在【项目】-【自适应视图】中进行设置。（图5-8）

第2章    查看原型

基础9.   快速预览查看原型

预览原型的快捷键为<F5>键。或者，点击快捷功能中的预览图标进行预览。导航菜单【发布】-【预览设置】中进行预览的设置。（图6-1）

基础10. 生成HTML查看原型

生成原型的快捷键为<F8>键。或者，点击快捷功能中的生成图标，选择【生成HTML文件】进行生成。还可以通过导航菜单【发布】-【生成HTML文件…】中进行生成。（6-2）

生成时，需要选择保存HTML文件的文件夹。查看设置与预览设置相同。（图6-3）

本文目录

基础51.     生成部分原型页面

基础52.     为原型添加标志

基础53.     发布原型到AxShare

基础54.     重新生成当前页面

基础55.     移动设备设置

基础56.     Web字体设置

正文

基础51.   生成部分原型页面

发布原型时，如果不需要将所有页面生成或发布，可以在生成HTML的设置中打开【页面】的设置，取消【生成所有页面】的勾选，则可以设置生成指定的页面。注意，子级页面无法单独发布，勾选子级页面时会自动勾选父级页面。如果需要单独发布子级页面，需要在页面管理面板中将子级页面的级别调整到一级页面。（图6-4）

基础52.   为原型添加标志

在生成HTML的设置中有【标志】的设置，可以为原型添加图片标识或文字标题。原型发布后会显示在工具栏的页面面板中。（图6-5）

基础53.   发布原型到AxShare

发布原型到AxShare是指将做好的原型发布到Axure官方提供的空间中，通过自动生成的网址进行访问。发布到AxShare的快捷键为<F6>键。发布到AxShare需要预先注册AxureShare账号，注册地址：https://share.axure.com/。（图6-6）

发布完成后，将会自动生成一个网址。可以通过在PC或手机浏览器中打开该网址查看原型。（图6-7）

基础54.   重新生成当前页面

修改某个页面无需将整个原型HTML文件都重新生成一遍，只需要在【发布】的选项列表中，选择【在HTML文件中重新生成当前页面】即可。（图6-8）

基础55.   移动设备设置

制作移动设备原型需要遵循规范将原型制作成标准尺寸。移动设备原型尺寸计算工具：http://www.iaxure.com/share/yxcc/（个别移动设备可能会有出入，仅供参考！）

除了制作成标准原型尺寸，还需要在生成HTML文件配置中，进行【移动设备】的设置，让生成的HTML文件【包含视口标签】，这样才能够正常显示。（图6-9）

基础56.   Web字体设置

当原型使用一些特殊字体时，在没有安装该字体的设备上将无法正常显示。Web字体可以较好地解决这个问题。Web字体的使用包含两种方式。

方式一、链接“.CSS”文件（图6-10）

优点：设置简单。

缺点：需要网络以及在线CSS文件支持。

以FontAwesome字体为例。在Web字体设置中，点击【+】添加新的配置，勾选【链接到“.CSS”文件】选项，将该字体官方网站提供的“.CSS”文件地址填入超链接中即可。这样只要浏览原型时有网络支持，即可正常显示字体。

图中为Fontawesome4.4.0字体的配置方法。该字体CSS文件的官方链接地址为： https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

方式二、@font-face（图6-11）

优点：支持本地字体与在线字体

缺点：设置略有复杂

仍以FontAwesome字体为例。新建Web字体配置后，选择【@font-face选项】并填写代码。

在线字体代码如下：

font-family:FontAwesome;

src:url('http://7xl7jg.com1.z0.glb.clouddn.com/fontawesome-webfont.ttf') format('truetype');

本地字体代码如下：

font-family:FontAwesome;

src:url('fontawesome-webfont.ttf ') format('truetype');

注意:使用本地字体需要将字体文件（.ttf）拷贝到生成的HTML文件夹中。

通过以上方式处理后，未安装该字体的设备中查看原型时即可正常显示字体。

注意：在Axure RP 8的元件库中，提供了FontAwesome图标元件库，该元件库可以直接使用，无需进行上述设置。但是，官方提供的FontAwesome图标元件库与上述元件库有很大区别，官方元件库中的图标并不是文字，而是形状。在之后的案例中，我们需要将一些图标字体放入文本编辑界面进行编辑 ，这是官方元件无法做到的。

---

AxureRP8实战手册-案例1（文本框：带图标文字提示）

本篇包含110种实战案例，案例内容均来自互联网知名网站或应用。案例中所包含的基础操作不做详细介绍，如有疑问请参考基础操作篇。

本篇内容由浅至深。前四章围绕基础知识点结合案例进行讲解；最后两章，挑选了Web端与APP端相对典型的案例，对知识点进行综合的应用，并着重加强实现思路的分析。

本篇内容建议初学者按顺序学习，理解实现的过程、思路与技巧，并以能够独立完成案例为学习目标。

第1章      元件案例

本章主要讲解主要元件的使用方法及应用场景。

在本章的案例中，大家能够看到，常见的一些网页都能够通过各种基本形状的组合模拟出来。

案例1.   文本框：带图标文字提示

案例来源:

淘宝首页-搜索框

案例效果：

• 输入文字前：（图1-1）

• 输入文字后：（图1-2）

元件准备：

• 页面中（图1-3）

案例描述：

在搜索框里面，文本框中的文字提示包含图标。

思路分析：

文本框可以添加文字提示，而图标字体中的图标也是文字。那么案例中的搜索图标，我们就可以使用图标字体来实现。

操作步骤：

1、双击安装FontAwesome字体文件，载入FontAwesome4.4.0图标字体元件库；

2、切换到FontAwesome4.4.0图标字体元件库；

3、从元件库中找到图标，拖放到画布；

4、双击图标，复制里面的图标文字；

5、将复制的内容粘贴到文本框属性的{提示文字}中，并输入其它文字；（图1-4）

6、点击【提示样式】，在样式设置界面中设置提示文字字体为“FontAwesome”，字体颜色为灰色。（图1-5）

7、参考“基础56”，在web字体设置中添加FontAwesome字体的设置方案。

补充说明：

• 本案例需要结合特殊字体元件：FontAwesome4.4.0图标字体元件库。该元件库在本书的配套资料中。
• 使用FontAwesome4.4.0图标字体元件库，除了要参考“基础30”载入元件库，还要安装相应的字体文件。安装字体文件时，请先关闭Axure，安装完字体文件后，打开Axure方可正常使用。

备注：本站中FontAwesome图标字体元件库已升级为4.5.0版本，使用方法相同。

---

AxureRP8实战手册-案例2（文本框：边框变色）

案例2.   文本框：边框变色

案例来源:

百度-登录界面

案例效果：

• 光标进入文本框时：（图1-6）

案例描述：

在登录界面中，包含用户名与密码的输入框。当焦点进入输入框时，输入框边框与内部图标变为蓝色；失去焦点时，恢复灰色。

元件准备：

• 页面中：（图1-7）

包含命名：

• 矩形（用于账号输入边框）：Border01
• 矩形（用于密码输入边框）：Border02

思路分析：

• 输入框的样式在两种不同状态下切换，可以通过交互样式来实现；（操作步骤1）
• 文本框获取焦点时，呈现选中的样式（操作步骤2~3）；
• 文本框失去焦点时，呈现未选中的样式（操作步骤4~5）。

操作步骤：

1、设置元件“Border01”与“Border02”的选中时交互样式为淡蓝色边框与文字；（参考“基础23”）

2、设置账号输入文本框【获取焦点时】，【选中】元件“Border01”；

• 事件交互设置：（图1-8）

• 用例动作设置：（图1-9）

3、参考上一步，设置密码输入文本框【获取焦点时】，【选中】元件“Border02”；

4、设置账号输入文本框【失去焦点时】，【取消选中】元件“Border01”；

• 事件交互设置：（图1-10）

• 用例动作设置：（图1-11）

5、参考上一步，设置密码输入文本框【失去焦点时】，【取消选中】元件“Border02”。

补充说明：

• 本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容，而非文本框元件。
• 本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。（参考案例1的补充说明）

---

AxureRP8实战手册-案例3（图片：变换样式的按钮①）

案例3.   图片：变换样式的按钮（1）

案例来源:

花瓣网-登录界面

案例效果：

• 初始状态：（图1-12）

• 鼠标进入图标时：（图1-13）

案例描述：

使用第三方账号登录时，鼠标移入图标和在图标上按下时，显示不同状态的图片。

元件准备：

• 页面中：（图1-14）

思路分析：

元件的属性中包含【鼠标悬停】与【鼠标按下】的交互样式，在用户进行这两个动作时，能够触发显示预先设置好的交互样式。

操作步骤：

1、设置每个图标【鼠标悬停】的交互样式，可参考基础23；（图1-15）

2、设置每个图标【鼠标按下】的交互样式，可参考基础23。（图1-15）

补充说明：

• 本书电子资料中附带的本案例图片素材，需要进行切割/裁剪；（参考基础25）
• 预览原型，在浏览器中将各个裁剪后的图标另存到本地，然后导入原型中使用。
• 本案例中的关闭按钮为矩形元件，元件文字为输入法中的特殊符号“×”。

特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

---

AxureRP8实战手册-案例4（图片：自定义复选框①）

案例4.   图片：自定义复选框（1）

案例来源:

唯品会-注册界面

案例效果：

• 未选中时：（图1-16）

• 鼠标进入时：（图1-17）

• 被选中时：（图1-18）

案例描述：

案例中的复选框在未选中时、鼠标进入时以及选中时，呈现不同的样式。

元件准备：

• 页面中：（图1-19）

思路分析：

• 使用图片作为复选框，与“案例3”相似，在元件的鼠标移入和选中时指定不同的图片；（操作步骤1）
• 鼠标点击复选框时，要切换元件的选中状态。（操作步骤2）

操作步骤：

1、设置元件属性中【鼠标悬停】和【选中】的交互样式为不同的图片，可参考基础23；（图1-20）

2、为图片的【鼠标点击时】事件添加“用例1”，动作为【切换选中状态】“当前元件”。

• 事件交互设置：（图1-21）

• 用例动作设置：（图1-22）

补充说明：

单选按钮的制作也可以参考本案例。不同的是，需要给单选按钮在元件属性中{设置选项组名称}。

---

 AxureRP8实战手册-案例5（形状：变换样式的按钮②）

案例5.   形状：变换样式的按钮（2）

案例来源:

花瓣网-登录界面

案例效果：

• 初始状态：（图1-23）

• 鼠标进入按钮时：（图1-24）

案例描述：

登录面板中的登录按钮在鼠标移入时和鼠标按下时，显示不同的颜色。

元件准备：

• 页面中：（图1-25）

思路分析：

元件的属性中包含【鼠标悬停】与【鼠标按下】的交互样式，在用户进行这两个动作时，能够触发显示预先设置好的交互样式。

操作步骤：（图1-26）

1、设置矩形的【鼠标悬停】的交互样式，改变填充颜色，颜色代码#EB5055。（参考基础23）

2、设置矩形的【鼠标按下】的交互样式，改变填充颜色，颜色代码#DA3539。（参考基础23）

补充说明：

设置颜色时可以直接在界面中输入颜色代码选取颜色。（图1-27）

特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

http://www.iaxure.com/4312.html