《AxureRP9网站与App原型设计》教学教案—03用Axure元件库搭积木.docx

第3章用Axure元件库搭积木课时

课时
课时内容用Axure元件库搭积木 教学目标 掌握线框图、流程图元件的含义和使用，学会载入元件库和自定义元件库教学重点 线框图、流程图元件的含义和使用
教学难点 线框图、流程图元件的含义和使用1 .教学思路：通过实例引入元件的概念；通过多媒体演示和实机操讲解元件库的使用;
教x、几、+ 通过个人简历表实战进行各类元件的综合应用。
数于双计2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件
教学内容
Axure RP 9默认内置了线框图元件库、流程图元件库、图标元件库，除了使用内置的元件库, 也可以载入第三方元件库以及自定义元件库。
原型设计-Axure RP 9 Team Edition :已授权文件（…师取…机团（…工程（…而后（…友拓（…EPA 0-张号（…帮助（…

文件（…师取…机团（…工程（…而后（…友拓（…EPA 0-张号（…帮助（…
X Cutl—c
0 copy皿中回电
□ Paste
登录
Co umn 1
Co umn 2
Co umn 3
Default
口
二级标题
0.
H1
H2
H3
A_
A=
Lorem ipsum dolor sit amet, consectetur adipiscing eW Aenean euismod bibendum laoreet Proin gravida dolor sit amet lacus accumsan et viverra justo commodo Proin sodales pukinar sic tempor Sodis natoque penatibus et magnis dis parturient monies, nascetur ridiculus mus Nam fermentum, nuHa luctus pharetra vulputate. felis tellus mollis ord, sed rhoncus pconin sapien nunc accuan eget

用元件“搭积木”
3.1 绘制线框图所用的元件
分为4类：基本元件有20种，表单类
Axure RP 9原型设计软件里默认内置39种线框图元件, 元件有6种，菜单|表格元件有4种，标记元件有9种。
（4）单击“编辑多项”按钮，弹出编辑多项对话框，每行代表一个下拉菜单项选择项。
X编辑多项X输入选项值（每行一个）
1绿上海
山东河北
济南添加多个选项对话框
（5）如果想把某个选项作为默认显示的选项，只需要在复选框前面勾选，默认显示的就是当前 勾选的下拉菜单项选择项。
x编辑下拉列表X添加和组织列表选项。
勾选一项作为默认项，未勾选那么默认为第一项。
+添加-编辑多项 1上移 下移 X膻除□」保
□设置默认选项
（6）列表框的操作方式和下拉列表的操作方式一样，单击“添加”按钮同样可以新增菜单项选择项, 可以向上移动、向下移动、删除一个、或者多个下拉菜单项选择项，但是它允许默认允许选中多个选项。

列表框设置默认选项
3.复选框元件和单项选择按钮元件的使用
如果希望允许选择多个选项，这时可以使用复选框元件，如果每次只想选择一个选项，可以使 用单项选择按钮元件。
+ &
Default
复选框和单项选择按钮元件

3.13菜单|表格元件的使用
菜单I表格元件包括树元件、表格元件、水平菜单元件和垂直菜单元件。
菜单।表格▼白 喜 莺，
W表格水平菜单垂百菜单
菜单I表格元件
1 .树元件的使用
可以用树元件来设计树结构或其他有层次的结构，例如页面区域的页面结构。新增子节点、调 整树的层级关系以及删除子节点等等操作都是通过右键菜单里的选项来设置。
Default
左
树
水平菜单
垂百菜单
▼ Item 1
表格

编辑树属性（E）

添加g）►
移动（M）>
删除节点（D）

编辑图标（D

Iterr Iterr Iterr
树元件
2 .表格元件的使用
表格元件，用来显示数据的记录，是使用频率比拟高的一个元件，它通过右键菜单里的选项来 完成操作。
表格元件3.水平菜单和垂直菜单元件的使用
水平菜单和垂直菜单元件，是用来制作导航菜单的元件，它可以制作横向或纵向的菜单元件, 它通过右键菜单里的选项来完成设计操作的。
王Q + & ：
Default
I1菜单库格▼
三曲树表格
水平和垂直菜单元件标记元件的使用
标记元件包括快照元件、水平箭头元件、垂直箭头元件、便签1元件、便签2元件、便签3元 件、便签4元件、圆形标记元件和水滴标记元件。
gRS
水平箭头垂亘箭头•2随3谕4省形标记水薪记标记元件
快照元件，是把页面通过快照的方式完整地显示出来。例如在index页面，分别添加一级标题、 二级标题、三级标题元件；然后在pagel页面里拖曳快照元件并双击，引用index页面；可以看到快 照元件里显示的是index页面的内容，并且可以调整快照元件显示的页面大小。

空
Q+33

空
Q+33
8
Default
一级标题
二级标题
三级标题
快照元件

水平箭头元件和垂直箭头元件经常被用作水平或垂直方向上的箭头；便签元件经常用来给页面 添加便签说明；圆形标记和水滴标记常被用作标记。
3.2 绘制流程图所用的元件
AxureRP9原型设计软件默认内置37种流程图元件，常用的元件有矩形、菱形、文件、括弧、 半圆形、三角形、梯形、圆形、六边形、平行四边形、角色、数据库、快照等元件。
空Q —…@ ：
Flow流程图元件库
口
□
O
Q
O
◊
□
□
[]
4

斜角矩形

文件
文件组

△
O
O
O
O
今
0
O
D

三角形
悌形
以形

平行四边形
角色
鼓塞库
子程序领定义
砌

O
D
d
a
E
V
O

X
0
多文档

手塞
数据存信
内部存储(RAM)
离线存信

排序

求和连接
e
Q

a
O
g
*

穿孑血
穿孔卡片

快照
图片

流程图元件都代表着自己的特点和意义，在使用流程图元件之前，要知道常用的元件所代表的 意思，才能画出规范的流程图。
• 矩形元件：代表要执行的处理动作，用作执行框。
• 圆角矩形元件：代表流程的开始或者结束，用作起始框或者结束框。
• 菱形元件：代表决策或者判断，用作判别框。
• 文件元件：代表 个文件，用作文件的输入或者输出。
• 括弧元件：代表说明一个流程的操作或者特殊行为。
• 平行四边形元件：代表数据的操作，用作数据的输入或者输出操作。
• 角色元件：代表流程的执行角色，角色可以是人也可以是系统。
• 数据库元件：代表系统的数据库。
• 快照元件：用来显示其他页面内容。
实战演练
大家在上学的时候，经常会参加一些在线考试，下面使用流程图元件来绘制考试的过程。
如果考试时间大于 12吩钟,系统将 自动提交试卷。

如果考试时间大于 12吩钟,系统将 自动提交试卷。

在线考试系统流程图
（1）把当前工程保存起来，将其命名为“在线考试系统流程图”，把index页面重新命名为“在 线考试系统流程图”，删除其他页面。选择流程图元件库，拖曳一个“圆角矩形”元件作为流程的 开始，将圆角矩形的文本内容重新命名为“开始”。
在线考试系笫流程图 xj由曲伞 200,
Q□ CJ回在线考试系统流程图|

Flow ▼
选择流程图元件库
（2）拖曳一个“角色”元件到工作区域，代表参加考试的人员。选择连接模式，将圆角矩形元 件和角色元件连接起来，可以给连接线添加向右的箭头并设置样式。然后拖曳一个“矩形”元件到 工作区域，将其文本内容重新命名为“访问网站”，用连接线把角色元件与矩形元件连接起来。

访问网站
（3）接着进行登录网站设置。拖曳一个“矩形”元件到工作区域，将其命名为“登录网站”，登录时，需要输入用户名和密码，系统会将用户名和密码与数据库里的信息比对，来决定用户是否 能登录到系统里，用连接线把“访问网站”和“登录网站”连接起来。

登录网站

（4）拖曳一个“数据库”元件到工作区域，用其来代表数据库。将登录时输入的用户名和密码 与数据库进行比对，比对完成后数据库会返回用户能否登录的信息，这是一个双向的操作，需要一 个双向箭头。

数据库

（5）拖曳一个“菱形”元件到工作区域，用作登录的验证。登录验证有两种情况，验证通过和 验证不通过。如果用户名和密码都输入正确，就可以登录到系统里进行在线考试，拖曳一个矩形元 件，将其文本内容重命名为“开始考试”；如果登录校验失败，就需要重新登录。

登录验证
（6）考试完需要提交试卷。拖曳一个“矩形”元件到工作区域，将其文本内容重命名为“提交 试卷”，然后添加一段说明文字，使用“括弧”元件加以说明：“如果考试时间大于120分钟，系 统将自动提交试卷”。

提交试卷

（7）提交完试卷，系统会进行批改。拖曳一个“平行四边形”元件到工作区域，将其作为数据 的输入，批改的时候也需要与数据库打交道，因此其与数据库的连接线也是双向的。

批改试卷
(8)提交试卷后导出试卷。批改完试卷之后，需要输出汇总的分数，同样拖曳一个“平行四边 形”元件，将其作为数据的输出，把它重命名为“汇总分数”，汇总分数后可以导出试卷，使用“文 件”元件来代表导出的试卷，最后拖曳一个“圆角矩形”元件到工作区域，结束流程。
结束流程

结束流程
如果考试向大于 120捌,系统招 自动提交成与

(9)按F5键发布原型，通过绘制在线考试系统的流程图，就可以清晰地表述在线考试系统的 操作流程，这样在绘制线框图的时候，设计思路就会很清晰，可以高效、快速地绘制原型。

发布原型
3.3 丰富的图标元件库图标元件库把常用的一些图标放置在图标元件库里，包括通讯录图标、箭头指向图标、电池电 量图标等。在绘制原型的时候，可以使用该元件库里的图标，而不需要到其他地方去寻找。
Q— + 3：
IconsWeb应用▼
D ®
通讯录通讯录-空
水平箱头垂亘的头
血iihi
SJS
里・-2格电M-3格
▲A
龄声龄声-空
闪电母
E。
扩音超E6
地址卡地址卡-空校正美语手语种*锚
幻穿*@4
手澹小 辅助听力系统星号文特吉辎虻
血 Illi II
条形图-空条形码功能浴室浴红
B)
»s
@
书
Q
□
电■-空
必
»s-e
R
书签
a
出租车
B)
名・-洱
况
自行车
□
书筌-空
卜“] Hffl
计S3同
BS：
D
电量-1M
4 4 4 思
生日破慈
包
◎
日历•对号
葡
日历
直M中
存档面枳图箭头样式
a酝0
汽车天忤禁止
■)□O
电池电量-36电量-1格
①g・
电量-3/4床1S酒
t0$
百人益牙盾鹫牙
某园图
臭电―建筑-空
目匕笛
日天-■号日历•空日历-加号

图标元件库载入元件库和自定义元件库
Axure在元件管理区域默认提供线框图元件库、流程图元件库和图标元件库，但是在制作原型 的过程中，这3类元件库并不能完全满足设计原型的需求。如果设计移动应用软件，需要使用Andriod 元件库或者iOS元件库；设计其他的软件，可能使用其他的元件库；有时候甚至现成的元件库还是 不能满足需求，需要自己来制作元件库，即自定义元件库。
341载入元件库
在Axure元件区域，单击选择元件库，可看到默认的线框图元件库、流程图元件库和图标元件 库，局部元件库的名称翻译并不是很完善。
搜索元件库Q全部元件库
DefaultFlow
Icons如果设计移动应用软件,
实战演练

如果设计移动应用软件,
实战演练
元件库
要用到Andriod元件库，就需要添加一个Andriod元件库到软件里。
(1)寻找元件库有3种方式：第1种是到Axure官网上下载，官网上提供的元件库都是以 plib”为后缀名的；第2种是网上搜索，很多原型论坛或者原型爱好者都会发布一些元件库；第3种 是可以自己制作元件库，制作自己想要的、常用的元件。
(2)单击“添加元件库”按钮，弹出“文件选择库”窗口，找到事先准备好的元件库，单击打
开，就可以将元件库载入到软件里。
Default
基本元件^
□
旗1就2
BUTTON
■O
旗3喷
BUTTONH1
铤鳏钮TR标题
添加元件库|
*区1
图片占位符
H2 H3
A, 空
水和 垂直爱
添加元件库
熟区动态面板
7U^
Q

7U^
Q
iOS8 UI Kit
Cancel Blue
App Icon App Icon2 书签
O① home screeninfo
Message3

Message3
Message4
microphone
RecordRecord ingrefresh

iOS8 UI Kit元件库
（3）还有一种载入元件库的方式是，先关闭Axure软件，然后翻开Axure的安装目录，找到 Libraries文件夹，把需要载入的元件库直接拷贝到Libraries文件夹里，重新翻开Axure软件，可以 看到IOS7_icon元件库被载入到软件中，如图3.51、图3.52所示。

元件库路径
7Uft
iOS7 icon
B
0
a
由
里
R
㊂
同

n€w
MW
rww
download
upload
bookmark
drawer
mailbox
fold«r
@
El
p
⑥
Q
☆
㊉

contact
mail
flag
eye
search
star

earth
alarm
①
o
o
ffl
囱
㊀
o
公

stopwatch
timer
dock
trash
not-allow
remove
cloud
cloud
camera
B
0
1
①
o
ooo ooo ooo
g
F
o
windows
plane
calculator
information
back
dots
voice
flashlight
heart
QO
>
«
»
@
®

0
n
voicebox
P*ay
backward
forward
sound*
sound-
playlist
airplay
time-machine
<x>
jobs
㈢
message
© chat
® help
0 checked
fi
locked
s
lock
list
1H
control

iOS7_icon ▼
iOS7_icon元件库
自定义元件库
在设计原型的时候，如果在现有元件库中没有找到需要的元件，可以自定义元件库。设计一些 特别的或者常用的元件，例如增加、删除、修改、搜索、红灯、黄灯、绿灯图标，然后把它们放在 自定义元件库里。
实战演练
（1）选中iOS8 UI Kit元件库，选择“编辑元件库”命令，进入元件的编辑区域，在这里可以 自定义元件。
index x
2900
300
获取元件库…（G）
i0S8 UI Kit
编辑元件库（E）
Icons ▼
翻开源目录9）
移除元件库（R）
CallO uts
①
info
App Icon
App Iccxi2
菜单
书筌
取消
homescreen
Message2
Message3
编辑元件库
Q 球. + 3 ：
Defaulto•vnoN|

•vnoN|
思区
—5A基本元件
•unoNHI- * *1 / J I I
主要接招TS例
礴蒯 内^器
＞表单元件
基本元件,□■ o 0区
哪1矩形2矩形3团形ffiR占位符H2H3A_空一I
二S沃思三级旅8文本标生文本段落水平线垂直线表单元样，
国 宴 曷 国 M ®文云§文。下拉列表列表框 夏谈 学晨钮
菜单।表格.
左笆，-＞菜单|表格元件品表珞水旧单垂亘菜些
标记元件,0 T I■■■♦0►标记元件
快黑水平SJ头垂直的头便爸1便签2®33竭4鄙标记水滴标记线框图元件库
基本元件的使用基本元件包括矩形1元件、矩形2元件、矩形3元件、 按钮元件、主要按钮元件、链接按钮元件、一级标题元件、 签元件、文本段落元件、水平线、垂直线元件、热区元件、

基本元件包括矩形1元件、矩形2元件、矩形3元件、 按钮元件、主要按钮元件、链接按钮元件、一级标题元件、 签元件、文本段落元件、水平线、垂直线元件、热区元件、
元件。最后3个元件，由于使用比拟复杂, 绍。
交互效果丰富,
椭圆形元件、图片元件、占位符元件、 二级标题元件、三级标题元件、文本标 动态面板元件、内部框架元件、中继器 使用频率非常高，后面的章节将详细介
□
喇
成2
■
O
图片
H2
H3
A_
空
■ , “■

三级标题
文皿隆
文本段落
水程

□
喇
成2
■
O
图片
H2
H3
A_
空
■ , “■

三级标题
文皿隆
文本段落
水程

区

•UTTOM
H1
占位符
技出
主妾按田
链接按近
一级殛
I
T
S
□
EEB H | j 1 ;曲
垂直线
热区
动态面板
内联框桀
中驱器

基本元件
1.矩形元件和占位符元件、
椭圆形元件的使用

矩形元件和占位符元件可以用来做很多工作，在本质上这两种元件没有太大的区别，这两种元 件都可以用来制作一个横向、纵向的菜单，或者制作一个背景图。这两种元件的区别在于占位符元 件更强调占位作用，如果想表达页面区域某个位置放什么，可以放一个占位符，清晰明了表达该区 域的含义。椭圆形元件的使用和矩形元件的使用方式一样，只不过形状不同。
实战演练渣
Q0 D▼ ■ Icons
s ♦国 App Icon
国 App Icon2目 Bookmark
国 Button元件编辑区域
渣
Q国门
► ■目定义元件库
国登录
► ■ Icons
► ■ APPS
► ■ Settings
渣
Q+ 3 3
DefaultC
基本元
□
§：
样式 交互 说明
1 1 - [ ]，, / X, , |_ 1
丽 I - I W
赣色 图片
1
可见性
2
内部
（2）设计一个登录的按钮。新建“自定义元件库”文件夹，在文件夹中建立一个名为“登录” 页面，拖曳一个“矩形1”元件到工作区域，将其高度设置为50,圆角半径设置为10,填充设置为 绿色，文本内容为“登录”，文字颜色设置为白色，加粗，字号为20号。

自定义登录按钮
（3）再制作一个“搜索”元件，一般使用放大镜来代表搜索。拖曳一个“圆形”元件到工作区 域，将其高度和宽度都设置为30。再拖曳一个“矩形1”元件到工作区域，将其作为放大镜的把手, 调整矩形元件的大小，将其旋转45度，并将矩形置于圆形元件的下层。
Tun
Write
100
200
样式
说明
▼ ■目定义元件库
®使用缩略图O目定义图标
国登录
目搜索
► ■ Icons
4- (5>
Default
提示信息（S示在元件功蜴区）
基本元件，
自定义搜索按钮
（4）制作完两个自定义元件后，关闭制作元件的页面，制作好的元件就在自定义元件库中显示 出来。

iOS8 UI Kit
自定义元杵庵▼
Icons ▼
App Icon
App Icon2
书恁
CallOuts
Cancel Blue
bom«screen
info
其单
Message2
iOS8 UI Kit
|自定义元杆阵▼
—0
Icons ▼
App Icon
App Icon2
书卷
CallOuts
自定义元件库
index
100
300
8:
8
re
登录
自定义元件使用
自定义元件库与其他元件库一样，可以继续编辑，也可以被卸载，但线框图元件库、流程图元件库、图标元件库不可被卸载。
3.5实战
制作“个人简历表，，

找工作的时候，需要投递简历，现在很多的网站都支持在线投递简历，例如前程无忧、智联招
聘。各个网站都需要专门的界面接收用户的个人信息录入。下面制作“个人简历表”，来设计简历
的个人信息模块。
个人简历
个人信息保存

保存
重苜
个人简历
（1）翻开AxureRP9原型设计工具软件，将当前工程保存为“个人简历表单”，将index页面 修改为“个人简历”；拖曳一个“矩形1”元件到工作区域，将其宽度设置为704,高度设置为42, 颜色填充为灰色（#D7D7D7）,文本内容命名为“个人简历”，32号字，加粗。
个人简历表单-Axure RP 9 Team Edition :已授权
文件（…编辑（…视图（…工程（…布局（…发布（…团队（…账号（…帮助（…X Cut © Copy □ Paste

X Cut © Copy □ Paste
r--n r1।-)
□□a 年 ^
a.
q幽” »弱
硼5 共享

鳗：
个人筒历X目个人简历

目个人简历
100
200
300
400
500
700
600
8
伞Default
个人简历标题
（2）拖曳一个“矩形1”元件到工作区域，将其宽度设置为704,高度设置为483,作为边框; 拖曳一个“标题2”元件到工作区域，将其文本内容重新命名为“个人信息”，作为个人信息的标 题；拖曳一个“水平线”元件到工作区域，将其宽度设置为704,线条样式设置为第4个样式。
个人信息
个人信息标题以及边框
（3）拖曳一个“矩形1”元件到工作区域，将其宽度设置为680,高度设置为416,颜色填充 为灰色（#D7D7D7）,作为个人信息的背景；拖曳一个“文本标签”元件到工作区域，将其文本内 容命名为“姓名”，字号为16号；拖曳一个“文本框”元件到工作区域，将其宽度设置为260,高 度设置为25,作为姓名的输入框。
个人简历X
个人信息
8-
姓名输入框
（4）拖曳一个“标签”元件到工作区域，将其文本内容命名为“性别”，字号为16号；拖曳 两个“单项选择按钮”元件到工作区域，将其分别命名为“男”和“女”，同时选中这两个单项选择按钮， 右键单击，在弹出的快捷菜单中选择“指定单项选择按钮的组”命令，在弹出的“选项组”对话框的组 名称文本框中输入“性别组”组”，这样每次只能选中一个性别。
13
Normal个人筒历
中 工.

个人筒历
中 工.
X选项组
500
600
700
个人信A
选择已有的组名称或者输入新的组名称。
组名称性^组
性^ 世男
取消

性别设置
（5）拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“出生日期”，字号为16 号；拖曳3个“下拉列表”元件到工作区域，分别双击，添加年、月、日下拉选项。
个人简历
寺
史
§
出生日期
（6）拖曳3个“文本标签”元件到工作区域，将其分别命名为“电子邮箱”“手机号码”“现 居住地”，字号为16号字；拖曳3个“文本框”元件到工作区域作为输入框，宽度均设置为260, 高度均设置为50o个人简历X

电子邮箱、手机号码、现居住地输入框

（7）拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“工作年限”，字号为16 号字；拖曳一个“下拉列表”元件到工作区域，将其宽度设置为200,高度设置为22。

工作年限
（8）拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“期望工作性质”，字号为16号字；拖曳3个“复选框”元件到工作区域，将其分别命名为“全职”“兼职”“实习”。
个人信息|期望工作性底J全职 匚|兼职 口实习

|期望工作性底J全职 匚|兼职 口实习
期望工作性质
(9)拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“期望月薪”，字号为16 号字；拖曳一个“下拉列表”元件到工作区域，将其宽度设置为200,高度设置为22。
>;编辑下折列表
添加和组织列表选项.
勾选一项作为默认项，未勾选那么默认为第一项.
十添加=编辑多项
个人
□请选择
□ 1000元/月以下
□ 1000-2000元/月
□ 2001-4000元月
□ 4001-600词月
□ 6001-80007t/^
□ 8001-10000十月
□ 10001-15000元月
□ 15000-250001月
□ 2 6000以上
面议
已授权
Q 100%
.4pq
500
共享
700
1B
确定

确定
取消
工作年限

工作年限
期望工作性质
口兼职
□实习

□ □□
期望月薪算蟒
期望月薪
(10)拖曳一个“按钮”元件到工作区域，将其宽度设置为200,高度设置为30,文本内容命 名为“保存”；拖曳一个“文本标签”元件到工作区域，文本内容为“重置”，为其添加下划线， 字号为16号字。
保存按钮

（11）拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“钎'，字号设置为20号 字，字体颜色设置为红色（#FF0000）,复制该元件8次，分别将其放置在表单标签的前面，作为必 填项的提示；拖曳一个“图片”元件到工作区域，将其宽度设置为125,高度设置为122,作为头像 照片。
个人13历x |令200400600
I个内顺I
个人信息

必填项和头像
（1）掌握线框图元件的含义和使用，包括通用元件、表单元件、菜单表格元件以 及标记远见的使用。
（2）掌握流程图元件的含义和使用，学会使用流程图元件绘制流程图。
（3）学会载入元件库和自定义元件库。
练习
个人简历表除了个人信息模块内容，还有教育经历、工作经验等模块内容，通过 使用Axure元件库，绘制教育经历、工作经验表单内容。

教育经历

工作经验
制作灰色背景图
调整形状
Default
基本元林^□
郎1O
区Wd
H1一公忸s
A,K号集
(2)矩形元件可以设计成各种各样的形状，如果想把上图中的正方形灰色背景，制作成圆形的 灰色背景，在正方形背景图上右键单击，在弹出的快捷菜单中选择形状命令，会弹出用矩形可以制 作的各种形状，选中圆形图标，原正方形背景就变为一个圆形灰色背景。
除了圆形，可以根据自己需要，把矩形元件调整为其他形状，比方向上三角形、五角星、水滴、 方括号等形状。
(3)利用“矩形1”元件制作导航菜单，拖曳4个“矩形1”元件到工作区域，将其水平放置, 分别双击4个元件重命名为“菜单一”“菜单二”“菜单三”“菜单四”。使用CW+A组合键，全 选4个矩形元件，通过工具栏按钮设置每个矩形元件的高度为40,宽度为100。
菜单一菜单二菜单三菜单四
矩形元件制作导航菜单
2.
片元件的使用

图片元件，可以用来进行图片占位。在设计软件原型的时候，往往会包含一些图片的展示，包 括图标或者某个商品图片，但是还没有想好应该放什么图片，或者等待ui设计人员来设计图片，这 时可以使用图片元件，来表达在软件的某个区域要使用图片来显示。
实战演练I
(1)拖曳“图片”院件到工作区域，双击图片，选择要插入的图片，如果插入的图片过大, Axure会弹出提示对话框“图片太大会导致程序运行缓慢，是否进行优化？ ”，如图3.8所示。
警告3图像太大会导致程序运行缓慢，是否进行优化？
ICY) | 否 3)
图像太大提示

(2)在对话框中，单击“是”按钮，对图片进行优化，降低图片的画质。否那么图片将以原质量 显不。

插入图片

(3)调整图片的尺寸大小有两种方式：一种是在图片上单击，图片出现边框，通过上下左右拖 动边框调整图片尺寸；另一种方式是在工具栏的W和H框里设置图片的大小，调整其他元件的尺寸 大小也是同样的方式。

调整图片尺寸大小
(4) Axure提供分割图像功能，在图片上右键单击选择分割图像命令，可以对选中的图片进行分割操作，包括十字切割、横向切割、纵向切割3种切法。

分割图像

当仅需要图片的某一区域或者某一局部的时候，可以使用分割图像功能，把想要的区域分割出 来。
3 .按钮元件的使用
按钮元件分为按钮元件、主要按钮元件以及链接按钮元件，根据需求在不同场合使用不同按钮 元件。
index x I
变企, 一 ,TpQ+ （51 I
Default0 昱谷本元传▼
□■ i剧丑旗 1台 2o|

按钮元件
4 .标题元件的使用
标题元件可以用来作为一段文字的标题，也可以用来作为某个区域的说明文字，一般设计简历 的时候，常把个人信息、教育经历、工作经验这类文字加粗起强调作用，这时就可以使用标题元件。
Axure提供一级标题、二级标题、三级标题3个元件，一级标题元件是32号字、加粗、黑色 （#333333）；二级标题元件是24号字、加粗、黑色（#333333）；三级标题元件是18号字、加粗、 黑色（#333333） o
一级标题、二级标题和三级标题元件
5 .文本标签元件和文本段落元件的使用
文本标签元件是单行文本元件，文本段落元件是文本域元件，如果只有一行文本选择文本标签 元件，如果有多行文本可以使用文本段落元件。
index专|9

Default&
H1
H2
H3
一级标遏
水踞£
I 整 率金
垂亘线熟区动百面板Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis ord, sed rhoncus pronin sapien nunc accuan eget.

文本标签和文本段落元件
6 .水平线和垂直线元件的使用
水平线和垂直线是两个很灵活的元件，用它们可以设置一条水平线或者垂直线.可以利用工具栏 快捷按钮编辑这两个元件的颜色、线框、线条样式和箭头方向。
Default
H1
A,
T
垂直统

水平线和垂直线元件
7 .热区元件的使用
在购物网站上，经常可以看到组合装或者套装的商品，它们是一体图片，单击商品图片显示的 是整体的商品信息，如果只想知道上衣的商品信息，或者裤子的商品信息，可以使用热区元件。
分别在上衣和裤子上添加热区元件，也就是增加两个单击的锚点，单击热区元件就可以显示不 同的商品信息。
热区元件
热区元件用到的频率非常高，特别是在做一些移动App的时候。
表单元件的使用
微课视频
□
□
□
表单元件,
abcl
H邕
下拉列表列表电
表单型元件 !的使用
表单元件是在设计表单时候经常会用到的元件，比方设计登录表单、注册表单等表单， 使用表单型元件来设计表单。表单型元件包括文本框元件、文本域元件、下拉列表元件、歹 件、复选框元件、单项选择按钮元件。

表单元件
1 .文本框元件和文本域元件的使用
文本框元件用于收集表单内容，其形式为单行输入文本框；文本域元件，可以实现多行文本的 输入。
index4-

4-
2g L
300
400
Default
表单型元件是用在设计表单时聘常会用到的元件

label |
3
列表率
500
Default
abc：］
5^1
下拉列表
3
列表唯
霆
表格
水平槊单
垂直票单
标记元件，
送择元件,
□
剪切（D
有元件W

复制（O

就占⑹

撷占选项>

设为隐藏

懈9)►

编辑文本

缺翘
文本
编辑最大长度
密码
V交互样式..一
曲箱
只读
数字
禁用

■提交的
URL
工具提示.一
搜索
组合⑹Ctrl+G
文件
院⑻►
日期
转换为母版W）
月份
转换为动态面板（D）
时间

200
300
400
表单型元件是用在设计表单时购常会用到的元, 件，比方设计S录表单、注册表单等表单，就可 以使用衰华型元件来设计衰单.裳单型元件包括 文本框元件、多行文本框元件、下拉列表框元 件、列表框元件、复选框元件、单项选择按钮元件
文本框和文本域元件
在登录网站的时候，经常会在输入框里看到“请输入用户名、手机号或者邮箱”等提示信息。 文本框元件同样可以填写提示信息，在文本框输入内容时，提示文字会自然消失。右键单击文本框 远见，在弹出的菜单里可以设置文本框的输入类型，可以设置成文本、密码、邮箱、数字等类型。
ind«x文本框类型
在文本框里可以设置提示文字的样式，比方提示文字为“请输入用户名”，字体颜色为浅灰色 (#CCCCCC),可以在检视区域选择交互面板，在提示选项组中设置文字样式，在提示属性里设置 提示文字。
index
:禁用
:砺
6元用铉Form Hint
9字色
♦司试355
说明•
tit
娓示文本除蒙提示
请输入用户名输入
未指定提交按钮
□禁用
口只读

提示样式及提示文字
可以设置文本框元件可以输入的最大文字数，同时也可以设置文本框为只读或者禁用，可以根 据自己的需要来设置。
^S.
"0
断讣ew跖
请输入用户名输入 C
工具提示
未指定提交按钮
SXKfi 4
□禁用
□只读文本框属性
在检视面板同样可以设置文本域元件的提示文本、只读属性和禁用属性，但是不能设置文本域 内的输入类型以及最大文字数。
消
Q+ & ：
Default
(^3
文本框
SH
下拉列表列一
M⑥
样式交互说明
应本域名称)tit
提示文本总置提示
输入二
未指定提交按钮
□舒
口只读
文本域元件设置

2 .下拉列表元件和列表框元件的使用
下拉列表元件，是经常用到的下拉菜单，它只能显示一个下拉菜单项选择项；而列表框元件，是可 以显示多个下拉菜单项选择项的元件。如果页面区域有限，可以使用下拉菜单元件；如果页面区域比拟 大，仅放置一个下拉列表，会空留很多地方，页面整个布局不美观，就可以使用列表框元件。
index xQ +，