学习【AxureRP9萌新修炼手册V2.2】笔记

有用连接

一、基本操作（Axure RP9）

（一）画布操作

（二）元件操作

二、元件库

（一）图标元件库（Icons）

（二）流程元件库（Flow）

1、连线的操作

2、连线的样式

3、元件的含义

（三）默认元件库（Default）

1、基本元件

2、表单元件

3、菜单表格元件

4、标记元件

有用连接

Axure RP 9 软件官网下载地址：https://www.axure.com/download
Axure RP 9 汉化文件下载地址：http://chanpinban.com/downloads/
AI研习社 https://ai.yanxishe.com/
获取原型页面尺寸的功能 http://chanpinban.com/get_dp/
阿里巴巴矢量图标库 http://iconfont.cn/

一、基本操作（Axure RP9）

绘制线框草图之前，我们先对一些基本操作进行了解。

（一）画布操作

打开画布：在页面模块中，双击任何一个页面，都可以打开相应的画布，同时画布区域上方出现对应的标签。
   关闭画布：点击标签上的关闭按钮，或者在画布标签上点击鼠标右键，通过在菜单中选择相应的关闭选项完成操作。
   画布排序：通过鼠标拖动画布标签进行排序。
   恢复原位：点击画布左上角的准星图标或者快捷键<Ctrl+9>键，即可让画布回到原点。
   移动画布：通过滚动条移动画布；或者，按住<空格>键不放，画布中的鼠标指针变为抓手形状，此时即可拖动画布进行移动；也可以通过鼠标滚轮垂直方向移动画布，按住<Shift>键不放，通过鼠标滚轮水平方向移动画布。
   缩放画布：在工具栏中通过改变显示比例缩放画布，或者按住<Ctrl>键不放，通过鼠标滚轮改变画布显示比例。

（二）元件操作

使用：如果想使用某个元件，我们只需要将它从元件库中拖入画布摆放即可。
   对齐：默认情况下，两个矩形元件并排摆放，中间的边框为两条边框的宽度，如果想保持一条边框的宽度，需要在【偏好设置】中，进行【元件对齐】的设置（见第一章第四节）。
   旋转：元件的旋转可以通过按下<Ctrl>键的同时，拉动元件任意一个边界点来实现。旋转之后，可以通过右键菜单【变换形状】-【重置文本到 0°】
   圆角：矩形元件可以编辑圆角，通过鼠标指针拖动矩形左上方的小三角形图标即可改变圆角的大小。
   改变形状：形状类元件都可以通过点击鼠标右键，在菜单中通过【选择形状】将当前形状改变为其他形状。
   改变尺寸：可以通过鼠标指针拖动元件的边界点任意改变
   元件的尺寸；也可以按住<Shift>不放，同时鼠标指针拖动元件边界点等比改变元件的尺寸。
   复制元件：通过鼠标右键菜单的【复制】与【粘贴】，或者使用通用快捷键<Ctrl+C>键与<Ctrl+V>键可以完成画布间或者软件间的复制粘贴操作；同一画布中，可以通过<Ctrl+D>键进行复制；或者，按住<Ctrl>键不放，拖动元件到新的位置松开，完成复制与摆放的操作。
   编辑文字：部分元件可以添加文字内容。在未开启单键快捷键功能时，直接输入即可替换当前文字内容；开启单键快捷键功能时，需要双击元件或者在元件上点击按下回车键进入文字编辑状态。

二、元件库

软件自带了三个官方元件库，分别是默认元件库（Default）、流程元件库（Flow）和图标元件库（Icons）。

（一）图标元件库（Icons）

那么，这里的图标如何在 Axure使用呢？
       将鼠标指针移入图标，会出现三个按钮，分别是添加添加入库、收藏以及下载图标。
       点击下载，就会出现编辑图标颜色以及不同格式的下载链接。
       我们无需在这里编辑颜色，只需要点击【SVG 下载】按钮下载图标即可。
       下载下来的 SVG 文件，可以拖入 AxureRP9 的画布中；或者，先从默认元件库中拖入图片元件，双击导入 SVG 文件。
       然后，在图标上点击鼠标右键，上下文菜单的【变换图片】选项中选择【转换 SVG 图片为形状】。
       此时的图标就变成了和 Icons 元件库中一样的形状图标，可以自由更改颜色和形状编辑

（二）流程元件库（Flow）

流程元件库中包含了一些绘制流程图的元件。我们只需要将这些元件拖入到画布，并添加连接线，即可进行流程图的绘制。

1、连线的操作

点击工具栏中的“连接”图标就会进入连线模式。
一般元件都会有四个“×”连接点。我们在起始元件的连接点上按下鼠标左键拖动，到结束元件的连接点上松开，即可完成连线的操作。

2、连线的样式

连接线的线段颜色、类型、线宽以及箭头样式可以在工具栏中进行设置。
另外，在样式模块中也有关于连线的样式设置。

3、元件的含义

流程图元件库中有一部分元件，通过名称即可了解含义。

（三）默认元件库（Default）

这个元件库是最常用的元件库，包含了 4个分类。分别是：基本元件、表单元件、菜单表格元件和标记元件。

1、基本元件

基本元件中包含了常用的形状、图片、线段以及文本类型的元件。还有一些具有特别用途的元件，包括热区、内联框架、动态面板以及中继器。

（1）形状

形状元件包含了多个预设样式，矩形、圆形、占位符以及按钮，它们之间通过样式的更改可以互相转换。我们还可以通过在元件上点击鼠标右键，通过菜单中的【选择形状】，让矩形变为圆形或占位符。
另外，形状元件还可以通过上下文菜单【变换形状】选项中的【转换为图片】，将形状元件转换为图片元件。在Axure RP 9中，我们还可以为形状添加背景图片。形状元件一般用于页面中的背景、边框、按钮、分割线等。

（2）图片

图片元件拖入画布后可以表示一张图片，也可以通过双击元件，导入本地的图片素材。
如果需要批量添加图片，可以通过多选本地磁盘中的图片素材文件并拖入的方式添加到 Axure RP 9 的画布中。
【提示】图片可以添加文字内容，需要在元件上点击鼠标右键，从菜单中选择【编辑文本】进入文字编辑状态。

（3）文本

文本元件包括文本标签、文本段落、一级标题、二级标题和三级标题，用来表示页面中的一些文字内容。
实际上文本元件也是形状元件，给文本元件添加边框，就变成了矩形元件。

（4）热区

热区元件是一个透明元件，并且不可编辑文字。它的透明特性，让我们可以将它覆盖在其他元件上实现一些交互的需求，也可以用来做页面滚动的定位。

（5）内联框架

内联框架用于向页面中嵌入内容，包括：
           项目中的其他页面
           URL 指向的外部页面
           浏览器支持播放的多媒体文件（mp3、mp4、avi、pdf 等类型的文件）。

（6）动态面板

动态面板是一个允许添加多状态（层）的容器元件。
动态面板默认只有一个状态（层），可以根据需求添加多个状态（层）。
并且，在每一个状态（层）中都可以放入一个或多个元件（包括其他动态面板）。

（7）中继器

中继器是一个模拟列表的元件，例如商品列表、邮件列表、用户列表和标签列表等。并且，中继器可以通过添加交互模拟对列表项的添加、删除、更新、排序以及筛选的操作

2、表单元件

表单是需要用户填写的，所以表单元件都是用于获取用户输入数据的元件。

（1）文本框

用于输入一行文字内容。比较常见的使用场景是用户登录功能中用户名与密码的输入框。

（2）文本域

文本域，也叫多行文本框，用于大量文字段落的输入。

（3）下拉列表

用于多个选项的单项选择，往往也会有多个下拉
       列表联合选择的出现。

       （4）列表框

直接呈现选项的选择框，可以支持单选或多选。
注意：列表框元件与文本域元件在画布中外观一样，就像女装大佬，虽然长得像女人，但是功能不一样。在交互功能面板中会显示元件的类型，注意分辨

（5）单选按钮

用于多个选项的单项选择，有些时候可以用下拉列表替代。

（6）复选框

用于一个或多个选项的选择，可以选中和取消选中状态。

3、菜单表格元件

菜单和表格元件都是绘制线框图的元件，方便易用。但是，因为样式编辑受限，所以高保真原型中很少使用。这些元件在画布中的很多操作基本通过右键菜单中完成，例如：行、列、节点、菜单项的添加、删除、移动等操作。

4、标记元件

快照元件可以通过双击设置引用页面，呈现被引用页面的图像。它结合连线和其他标记元件非常适合进行项目、页面以及模块的注释
说明。除了快照元件以外的标记元件都是预设了样式的形状元件。【提示】关于标记元件的详细介绍与示例在产品原型应用部分有具体
的介绍与示例。