【Axure RP9】元件应用（图文并茂）----含登入，个人简历案例

目录 :

一，元件基本介绍

[1.1 元件概述](#1.1 元件概述)

[1.2 元件操作](#1.2 元件操作)

[1.3 快捷键大全](#1.3 快捷键大全)

二，基本元件的应用

[2.1 形状](#2.1 形状)

[2.2 图片](#2.2 图片)

[2.3 文本](#2.3 文本)

[2.4 线段原件](#2.4 线段原件)

[2.5 热区](#2.5 热区)

[2.5.1 热区应用](#2.5.1 热区应用)

[三, 表单型元件的应用](#三, 表单型元件的应用)

[3.1 文本框](#3.1 文本框)

[3.2 文本域](#3.2 文本域)

[3.3 下拉列表](#3.3 下拉列表)

[3.4 列表框](#3.4 列表框)

[3.5 复选框](#3.5 复选框)

[3.6 单选按钮](#3.6 单选按钮)

四，表单案例

[4.1 登入](#4.1 登入)

[4.1.1 组件](#4.1.1 组件)

[4.2 个人简历](#4.2 个人简历)

[4.2.1 组成元件](#4.2.1 组成元件)

---

一，元件基本介绍

1.1 元件概述

• 在Axure RP中，元件是构建原型图的基础模块。 将元件从元件库里拖拽到画布中，即可添加元件到你的原型图中。

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

1.2 元件操作

• 使用：如果想使用某个元件，我们只需要将它从元件库中拖入画布摆放即可。

• 旋转：元件的旋转可以通过按下<Ctrl>键的同时，拉动元件任意一个边界点来实现

• 圆角：矩形元件可以编辑圆角，通过鼠标指针拖动矩形左上方的小三角形图标即可改变圆角的大小

• 改变形状：形状类元件都可以通过点击鼠标右键，在菜单中通过【选择形状】将当前形状改变为其他形状。

• 改变尺寸：可以通过鼠标拖动指针拖动元件的边界点任意改变

• 元件的尺寸；也可以按住<Shift>不放，同时鼠标指针拖动元件边界点等比例改变元件的尺寸

1.3 快捷键大全

在使用Axure RP9元件前我们需要来学习相关的快捷键 ,在我们后面学习中可以提高效率和原型图质量

1. 隐藏工作区域网格：Ctrl+
2. 快速复制粘贴：Ctrl+D 或者单击拖拽+Ctrl
3. 选中图层移动到顶层: ctrl + shift + [
4. 保存项目：Ctrl+O
5. 新建工程：Ctrl+N
6. 查找：Ctrl+F
7. 替换：Ctrl+H
8. 复制：Ctrl+C
9. 剪切：Ctrl+X
10. 粘贴：Ctrl+V
11. 撤销：Ctrl+Z
12. 重做：Ctrl+Y
13. 全选：Ctrl+A
14. 组件定位: Ctrl+k
15. 原型预览：Fn+F5
16. 保存图片比例: Shift+单击拖拽
17. 回位画布: Shift+9
18. 另存为：Ctrl+Shift+S
19. 退出：Alt+F4
20. 打印：Ctrl+P
21. 拼写检查：Fn+F7

二，基本元件的应用

2.1 形状

包括了矩形、圆形、矩形的应用比较广泛，它可以用来做很多的工作，比如作为页面的背景，只需要将矩形填充相应的颜色即可

2.2 图片

使用方法，图片元件的操作比较简单，可以通过双击选择本地磁盘中图片，将图片载入到编辑区，axure会自动提示将大图片进行优化，以避免原型文件过大

提示: 图片可以添加文字内容，需要在元件上点击鼠标右键，从菜单中选择【编辑文本】进入文字编辑状态

2.3 文本

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

文本标签: 使用该文本标签默认不会在画布显示边框

文本段落: 文字输入一行会自动跨行 , 不能跨空格

一级标题: 相比其他标题更大

二级标题: 比三级标题大 比一级标题小

2.4 线段原件

水平线、垂直线。选择水平线或垂直线，可以作为表示页面一些区域分割时使用，比如在两块不同区域之间添加一条水平线，来明显的区分

使用方法：将水平线或者垂直线拖拽到右侧画布中，然后按下 Ctrl 键，将鼠标置于线段末端，进行旋转

2.5 热区

热区是一个透明的元件，通过属性设置就可实现类似超链接的功能。

常用操作：比如在一张图片中的两个位置上添加点击跳转的效果，就可以在这两个位置上放置两个热区，然后为热区添加点击跳转的交互

2.5.1 热区应用

1.可以添加成链接，用作链接跳转，在一定程度上减少工作量

2.跳转到层或区域，比如滑动网页时回到顶部（跳转）

3.可以添加交互，比如翻看网页时，自动加载

4.用作跳转，如果每个标题都需要添加一个跳转链接太繁琐，可以添加一个热区 ，通过热区来达到跳转

案例:

通过热区实现跳转不同页面

三, 表单型元件的应用

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

3.1 文本框

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

3.2 文本域

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

3.3 下拉列表

用于多个选项的单项选择，往往也会有多个下拉

想添加选项, 双击编辑即可

3.4 列表框

直接呈现选项的选择框，可以支持单选或多选

注意：列表框元件与文本域元件在画布中外观一样，但是功能不一样。在交互功能面板中会显示元件的类型，注意分辨

3.5 复选框

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

3.6 单选按钮

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

比如: 个人简历选择男女性别的时候单选按钮只能选择一个, 肯定是不能选择两个的, 那怎么去让它只能选择一个呢.

右击画布单选按钮----指定按钮单选的组---填写组名称

最后在另外一个单选按钮,右击画布复选框----指定按钮单选的组--下拉选择组名 这样就会默认这两个单选按钮为一组

四，表单案例

4.1 登入

4.1.1 组件

1个矩形 1张图片 1个圆形 4个线段 1个三级标题 2个文本标签 2个文本框 2个图标

1个主要按钮 2个链接按钮

4.2 个人简历

4.2.1 组成元件

2个矩形 6个文本标签 3个文本框 2个单选 4个下拉列表 2个按钮 1个三级标题 1张图片