《AxureRP9网站与App原型设计》教学教案—07用Axure链接行为制作交互效果.docx

第7章用Axure链接行为制作交互效果
课时内容
用Axure链接行为制作交互效果课时4
教学目标
掌握Axure的链接行为，理解自适应视图功能
教学重点
Axure的链接行为
教学难点
Axure的链接行为
教学设计
1 .教学思路：通过实例引入链接行为的概念；通过多媒体演示和实机操讲解翻开链接 和关闭窗口、在内部框架中翻开链接、滚动到元件（锚点链接）、设置自适应视图的方 法。
2 .教学手段：多媒体+计算机
3 .教学资料：教材、多媒体课件
教学内容
Axure之所以受到? 能够最大程度上还原真 件等行为。
yJD.蠹多“
史互设计师、产品经理等的青睐，是因为使用其可以实现各种高级交互效果， 实软件的操作，如翻开链接、关闭窗口、在内部框架中翻开链接、滚动到元
93 （ SHARP ） LCD-50V3A 50英寸安卓智藐液晶电视（黑色）
卜好.省卜H电t 1东东自豫，—6181即"♦妁！ 6月1880103虔要开场！无■金，明涧可*爱2,8
618元। ——"一
.市屈由a工京市价*2999.00 53
百页服装城荚
促 清口内买享受憾8
EZ3化价格不马1：8优秀呻取受

亶董工＞_ LCO:5QV3^ 5埔士京*翌庭播电商.（

立即将忠由京东发货，井费• 1110。三成下—十今日（06月15日任达
家用电器＞ 大京电/ ＞早屣"＞
翻开链接交互效果

关闭窗口
关闭窗口动作用来关闭浏览器窗口页面。
实战演练
(1)在“当前窗口”页面，拖曳一个“按钮”元件到工作区域，将其文本内容命名为“关闭窗
E nwwn
回金加而
P父■□型不5Hl
0
7Cft
he口翻开修搐在新■口翻开翎e驰出.口翻开仔搞笑团・口
当茄页面内古
Default

Default

关闭窗口按钮
(2)为该按钮添加鼠标单击时触发事件，在添加动作面板单击“关闭窗口”选项，在设置动作 面板中没有任何选项，即当单击该按钮时，可以把该按钮所在的页面关闭。
X
£1
关闭窗口交互

发布原型，当单击“关闭窗口”按钮时，会弹出“关闭窗口”对话框，单击“同意”按钮，就 可以关闭该窗口。
7.2在内部框架中翻开链接
Axurc的内部框架，可以在同一个浏览器窗口中显示多个页面，从而在该窗口中实现不同页面 的切换效果。就像在HTML网页代码中有iframe标签，iframe元素会创立包含另外一个文档的内联 框架，从而实现不同条件下的文档嵌入效果。
Axure的内部框架和iframe元素的功能相近，都能够实现不同条件下的文档嵌入效果。
内部框架元件到底是一个什么样的元件呢，该怎么使用内部框架元件呢？下面一起走近内部框 架元件。
7.2.1 内部框架实战演练
（1）新建页面才将其重新命名为“内部框架”，拖曳一个“内联框架”元件到工作区域，将其 命名为“内部框架显示区”：再拖曳两个“按钮”元件到工作区域，将其分别命名为“结果页面” “父窗口显示页面”。
程式交5道照
内部框架显示区忸

程式交5道照
内部框架显示区忸

（2）选中“结果页面”按钮，为其添加鼠标单击时触发事件，在添加动作面板单击”框架中打 开链接”选项，勾选“内部框架显示区”，在设置动作面板的链接到下拉列表中选择“结果页面” 选项。
x xssas
内部框架中翻开结果页面
（3）选中“父窗口显示页面”按钮，为其添加鼠标单击时触发事件，在添加动作面板单击“框 架中翻开链接”选项，在设置动作下面勾选“内部框架显示区”复选项，在设置动作面板的链接到 下拉列表中选择“父窗口显示页面”选项。
x交互爆
M
父示为面
父框架中翻开页面
（4）按F5键发布原型检查效果，单击“结果页面”按钮，可以看到结果页面在内部框架中显 示出来，单击“父窗I」显示页面”按钮，内部框架的显示内容发生变化，它显示出父窗口显示页面 的内容。
ol®1 2 j«- -> C © 饰.—:3J76

«- -> C © 饰.—:3J76

发布原型
（5）页面刚加载时，内部框架内不会显示内容，但不应该为用户展示一个空白页面，应该默认 显示结果页面按钮对应的内容。在内部框架上双击，在弹出的内部框架“链接属性”对话框中，选 中“结果页面”，单击确定按钮，将该页面作为内部框架的默认显示页面。
用Axux便接行为制信交互效奥• Axurc RP $ Team 6d<tcn已授权
父m il wan-刈日l i
期回、
2WX Z
0揍目标
⑥磔的环
络最RI
a父・cAim
9 sente
B父窗口药mi
S收・c
内部框架显示区

丽一^ 谢URL«女林CMault

CMault

设置默认显示页面
（6）再发布原型，可以看到内部框架默认显示的是“结果页面”的内容。单击“父窗口显示页 面”按钮同样可以实现切换效果。
DE程4**+6 J C <D : jWi O 0 ：
«8•£S|父・匚殳示貂
发布原型
从图中可以看到内部框架中出现滚动条，而单击“父窗口显示页面”按钮，内部框架又没有滚 动条，这是因为结果页面中内容的高度高于内部框架的高度，使内部框架不能完全显示出结果页面 的内容，这时内部框架就会出现滚动条，而父窗口显示页面的内容在内部框架中可以完全展示出来, 因此不需要滚动条。
那滚动条是怎么设置的呢？可不可以不显示滚动条呢？
（7）在内部框架上右键单击，在弹出的快捷菜单中可以看到滚动栏选项，该选项又包含3个子 选项，分别为按需滚动、始终滚动、从不滚动，其默认勾选按需滚动，如果不想显示滚动条，那么选 择第3个选项。
an

an
mt
内部程架后示区

nA
Default滚动条设置
内部框架的边框很不美观，影响用户体验的效果，在内部框架上右键单击，在弹出的快捷菜单 中单击“切换边框”可以显示或者隐藏边框。
内部框架是用来进行引用的功能，它可以将特定的页面内容引入到内部框架中显示，内部框架 还可以引入如下内容。
• 引入视频，Axurc中没有媒体控件的，要在原型里播放本地或者网页上的视频文件就用到 内部框架，通过在链接属性填写视频文件的绝对路径地址，就可以将视频引入到内部框架里。
• 引入本地文件，在超链接里填写要引用的本地文件的地址（包括文件名和后缀名），这样该文件就会在内部框架内翻开，本地文件可以为pdf文档、图片、音乐文件，但不能是Office格式 的文件。
• 引用网页，在超链接里输入网址就可以引用网页。需要注意两点：一是超链接地址要带上 ://；二是内部框架的大小要设置好，显示网页时默认从左上角开始显示的。
父框架实战演练
(1)在“结果页I”里添加一个按钮元件，将其命名为“父框架翻开链接”，新增一个页面， 重新命名其为“父框架显示页面”，拖曳一个“矩形I”元件到工作区域，将其填充背景色为绿色 (#008000)。
下，W |
B ««口£希81
S
H内MK
+ e
Default
父框架翻开链接按钮
员百匿要
QQ D
叵
叵雄聚直面
叵父■□显示页面
E关闭■口
叵内部檀爱
叵父《1黑^军公司
父框架显示页面

(2)回到“结果页面”里，选中“父框架翻开链接”按钮，w劲:其添加鼠标单击时触发事件， 在添加动作面板中单击“框架中翻开链接”选项，可以看到当前页面没有可用的内部框架，勾选“父 级框架”及选项，在设置动作面板的链接到下拉列表中选择“父框架显示页面”选项。
父框冬显示亚
父框架翻开页面
(3)发布原型，单击“父框架翻开链接”按钮，可以看到父框架显示页面被翻开，如图7.31 所示。
发布原型

可以根据个人习惯选择内部框架，如果能够用动态面板完成的功能建议不要使用内部框架，因 为内部框架与动态面板相比，不是很灵活;效率也不高。并且使用内部框架完成交互的设置会比拟 复杂一些，实际上动态面板除不能引用视频、本地文件和网页，其他工作都能很好地完成。
7.3滚动到元件(锚点链接)
经常会接触到这样的页面，其右侧会悬浮一块区域，单击悬浮区域里的链接，页面会滚动到链 接指定的位置，例如页首或者页尾，Axure同样也能实现这样的功能。
实战演练
(1)在页面区域上新建一个页面“滚动到元件行为”，拖曳两个“矩形1”元件到工作区域， 将其宽度均设置为7()(),高度均设置为1(X),文本内容分别命名为“我是顶部” “我是尾部”，标 签命名为“top” “bottom”，坐标位置分别设置为(0,0)、(0,1000) <.
I ■
H
O 100%
Default
滚动到元件行为页面
蟀式
78 w • 100
Box 1

（2）拖曳两个“矩形1”元件到工作区域，右键单击其中一个矩形I元件，在弹出的快捷菜单 中选择形状菜单项选择项，在子菜单中选择向上三角形从而制作向上的箭头，运用同样的方式，制作一 个向下的箭头。
eoo元件
Default向上向下箭头
（3）拖曳一个“热区”元件到工作区域，将其放置在向上的箭头上，为其添加鼠标单击时触发 事件，在添加动作面板单击“滚动到元件”选项，勾选“lop”复选项，在设置动作面板单击“垂直” 按钮使其垂直方向滚动，也可以为其设置滚动动画。
None
«n
<MMA
*MB

滚动到顶部
Fx-交互编X-
椁
3 500 ,
二百a
bacmm
入
3"出
•口
Q日口
B关比・口
B内纳«
B父D显例如
E41国无锹彷
+ O I
Default
□
□»<wra>
转换为动态面板

（4）拖曳一个“热区”元件到工作区域，将其放置在向下的箭头上面，为其添加鼠标单击时触 发事件，在添加动作面板单击“滚动到元件”选项，勾选“boitom”复选项，在设置动作面板单击 “垂直”按钮使其垂直方向滚动。
酝也3
六i2*S 中
a用雪用WB)
滚动到底部
（5）同时选中向上箭头和向下箭头，将它们转换为动态面板元件，动态面板的名称为“快速定 位”，状态重新命名为“定位”。
（6）转换为动态面板后，在动态面板上右键单击，在弹出的对话框中勾选“固定到浏览器窗口” 复选框，在水平固定选项组中选择“右侧”单项选择项，在垂直固定选项组中选择“居中”单项选择项，这 样在浏览器窗口滚动的时候，此动态面板被固定到浏览器上。
X固定到浏览器X
国定动态面板在浏览一中的3Hs持不变. （仅浏览＞■中收鼓）
□ tti^wsaaa ^♦Blil*I
O左情 o居中 © M: 0
•AMT C EM® @中部 g 必距：o
□ 一«持防（仅次丽3）设置动态面板在浏览器中的位置
（7）按F5键发布制作的原型。按向上箭头按钮可以滚动到页面顶部，按向下箭头按钮会滚动 到页尾。

滚动到首部
7.4设置自适应视图
现在进行原型设计的时候，要考虑多终端问题，电脑、平板、手机等不同设备具有不同的尺寸, 其显示侧重点也有所不一样。
电脑：可以全面考虑所有内容，然后渐进地为更小的屏幕设计。
平板：为用户使用平板而设计。
手机：为更小的屏幕设计，能够确保为智能手机用户设计关键功能和内容，并考虑到更小屏幕 和一些不可预知的网络连接问题。
Axure提供自适应视图功能，在设计原型的时候，可以考虑多尺寸设置，在哪种终端下显示什 么内容，或者在不同尺寸下显示不同内容。比方淘宝网在1200分辨率和1024分辨率下显示的内容 是不一样的，红色线框圈出的内容，是在两个分辨率下显示出的不同内容。
淘宝网
Taobao
wz
•EQ歌・ 8・W 4 jurat ■«
120()分辨率
«MK • *Mtt • ♦* UttX 0*< - UM -，RKM淘宝网
Taobao

淘宝网
Taobao
IB巾场
女*/K髯/内衣
«</
■9/・M
«»/AF/««.V.
ntr/w«/4A
户外/乐” uH/端・，田彼 m*/iH/ra
方艮/方冉/，优
气手，二于方，・丛
♦公/DIV/%金电;
“▲梅 0P1 口0 04 “■ M±*t IM 田* 科现 B* tf
:啪向th»M利好中由意
的仇中国
T ,伍*
UTMi
切
一块去玛皮的皂
口缄建像.
Q 9M
品牌放价新降甥
树鸟掠T Tfi
wfEettaott^
C3
的依
1024分辨率
下面利用Axure RP9原型工具来设计淘宝网这两种分辨率下的原型显示。
实战演练
(1)在菜单栏的工程菜单下，单击“自适应视图”选项，弹出“自适应视图设置”对话框，默 认选择的是“高分辨率，平板横向”视图，单击“添加”按钮可以添加不同分辨率的视图。
X交互缰偈窘《辜夕 祁m如s动柞否研
5^ ■一妈美丽口
E军中行刑缥原动5标姓
黑示"设置而装伏至
女比B片B・比中
发■列制中审自用型用
*动8m
寸■于赃定后
弱«不蝴链接动作

链接动作
[ 确 ：
7.1 翻开链接和关闭窗口
7.1.1 当前窗口翻开链接实战演练
把Pagel施重新命名为“当前窗口”，拖曳一个“按钮”元件到工作区域，将其重新命 名为“当前窗口翻开链接”；拖曳一个“矩形1”元件到工作区域作为本页面的内容，将其文本内 容重新命名为“当前页面内容”。
5M 口 x■■99
当前窗口
T ”.卢 回考前■口 猫 Q+ 。！
Default 皿向， □ *W2（2）新建页面并重新命名其为“结果页面”，拖戋一个“矩形1”元件到工作区域，将其作为 结果页面的内容，将矩形1的文本内容命名为''我是结果页面内容”。

自适应视图
（2）设置两种自适应视图,在预设下拉列表里,选择"Large Display（1200 x任何）”选项，将 其名称命名为“高分辨率”，单击“确定”按钮。再单击“添加”按钮，预设下拉列表里选择“Landscape Tablet（1024 x任何）"，将其名称命名为“平板横向”，单击“确定”按钮。这样就设置了 1200和 1024两种尺寸的分辨率，并且平板横向视图是继承于高分辨率视图的。
x自适应视图x

确定
两种尺寸视图
<3）在页面区域新建一个页面“自适应视图”，在检视区域单击”编辑自适应视图”链接添加 刚才新建的视图，从而在工作区域上方显示设置的两种视图，如果不启用视图，这个功能是隐藏的。
页・e要▼* xs 的一毒分，不去横向匚膨.所E!一
Q日口 争…，即「一 m -回日洒向如H高洲《 （1200 x /
1200 w制口但融
默认
« 口巨Default- 1配"
添加编辑自适应视图
（4）设置高分辨率（1200x任何）视图的显示内容，拖曳3个“图片”元件到工作区域，分别
用“状态栏” “导航” “1200内容”图片替换图片元件。
淘宝网
Taobao
RfIK 匕CW Jlr*r假工At
高分辨率视图内容显示

自适皮救网• Axure RP 9 Team 6dftK>n已授权
又祥c・・moi 咬口 l we- 发rtf Ao-和e・・
淘宝网
Taobao
■J/l gw
住的团,，1堂
m我it epi an »?”■ n “r im e* arxe hr”
统色中国
代录 I >im I Jitfb
〜 财 处 台 公第
问中巴之心它!体不阳中忌窥inniB
8）©*（8）
充有¥»W
平板横向视图内容显示
⑶的
•好・金尼餐修城会;员■¥・

（5）设置平板横向视图（1024 x任何）视图的显示内容，单击“平板横向”页签，进入到“平 板横向”视图，把状态栏的宽度调整为1024,把“1200内容”隐藏起来，拖曳一个图片元件到工作 区域，用“1014内容”图片替换图片元件。

f曲场三攵U/巩n/内次
Kih/ftn•KURZ >
tttfuII*/■■/ f A
/户外/乐31 >
«t/iw/wa m正/m，农前 >*艮/*痛,'军妫 >
（6）添加页面载入时触发事件，在添加动作面板选择“设置自适应视图”动作，在设置动作面 板的自适应范围下拉列表中有3种视图可以选择。一种是自动，这种方式是根据浏览器窗口尺寸自 动决定显示哪个视图的内容，还有两种就是高分辨率和平板横向视图，可以指定这两种视图，一旦 指定视图，不管浏览器窗口怎么变化，它只会显示当前设置的视图内容。在这里选择“Auto”，让 页面自动来显示视图内容。
X交互娘.8x
I 血 ।
设置自适应视图

设置完自适应视图后，发布原型，调整浏览器窗口大小，可以看到页面会根据浏览器窗口的尺 寸来显示高分辨率（1200 x任何）视图的内容或者平板横向分辨率（1024 x任何）视图的内容，这样就实现了且适应视图效果。
（1）学会Axure的翻开链接和关闭窗口行为，包括当前窗口、新窗口、弹出窗口、 父窗口、关闭窗口链接行为。
小结
（2）学会在内部框架中翻开链接行为，了解什么是内部框架元件，并学习内部框 架和父框架的使用。
（3）学会使用滚动到元件行为，这是一个经常会用到的一个功能，在很多网站上 都会用到这样的功能。
（4）理解自适应视图功能，Axure提供多视图设计以使电脑、平板、手机等不同 尺寸的终端显示不同的内容。
练习

dim
+ O I
Default
我是结的面内容
结果页面
(3)回到“当前窗口”页面，给按钮元件添加鼠标单击时的触发事件，在添加事件面板选中“单 击时”事件，在添加动作面板单击“翻开链接”选项；该页面包括4种链接方式，这里选择第1种, 即在设置动作面板的链接到下拉列表中选择“结果页面”，在翻开在下拉列表中选择“当前窗口” 链接方式翻开结果页面。
HRU1W中翻开・»
显示2"09馒状0
役it班中 GPMQIG 信用■中够就 蚪
1ft■尺寸 ■于员£砺 "不透明设置在当前窗口翻开结果页面的链接动作
(4)第2种链接方式一一在设置动作面板的链接到下拉列表中选择“链接到URL或文件路径” 能够将单击按钮的触发事件链接到外部URL或者文件路径，假如想翻开京东商城的页面，输入京东 商城的网址“ jd ”，就可以链接到京东商城的页面，或者输入本地文件路径可以翻开本地 文件。
X交互编BINx
Q
双£VT
仅区投下打 依标即J
.MAW
iittiMdlW
。盲长候句 明函下叼
ttwej
尺寸改划
Rf句
工
▼ ♦出附 nna»
色・动T
修镇到URSt件磊发
(MBITS Mini

B巴餐・口 8

IM/u川侬*O»&

mtA口侬《 近圆上一穴
翻开URL或外部文件
（5）第3种链接方式能够重新载入当前页面，也就是刷新当前页面，第4种链接方式能够返回 上一页。
• 5立时
BR»
页面
X交互编辑商x
双切■ME 吟队
ECFTTarwn 尺寸33封
n万句 Mm刷新或者返回页面
（6）设置链接动作，单击按钮时能够在当前窗口翻开结果页面。按F5键发布原型，检查效果。 能够看到浏览器的标题是当前窗口，页面中包含一个翻开结果页面的按钮和一个矩形元件，单击此 按钮，浏览器在当前窗口翻开结果页面，浏览器的标题和浏览器的内容都发生了变化。
|o@l 笈 T
C (D ：nt-387M■当0HnZMc・l
■前窗口翻开健展
发布原型

7.1.2 新窗口翻开链接实战演练
(1)进入到“当前窗口”页面，拖曳一个“按钮”元件到工作区域，将其命名为“在新窗口打 开链接”。
在twarr开便懵
田■ ■■ 回 Q ”如Q +01
Defaultww
□E*
在新窗口翻开琏接按钮
(2)为该按钮元件添加鼠标单击时触发事件，在“添加动作”面板选择“翻开链接”动作，在 设置动作面板链接到下拉列表中选择“结果页面”选项，在翻开在下拉列表中选择“新窗口/新标签” 选项。

（3）按F5键发布原型, 结果页面内容。
亘1回1上J
☆ e ：

在新窗口翻开链接交互设置
单击“在新窗口翻开链接”按钮，浏览器翻开一个新的窗口，来显示D当前苗口x d a索页面x +
々今。 ① 127.0.0.1:32767/06.68.41/ft*^|S. htal新窗口翻开页面
7.1.3 弹出窗口翻开链接
Axure可以在弹出的窗口中翻开链接，下面来看看它是如何使用的。
实战演练
（1）回到“当前窗口”页面，拖曳一个“按钮”元件到工作区域，将其命名为“弹出窗口翻开 链接”。
AHCP
QB C]
a g
神
Q + o !
Default 0
□
5】■

AHCP
QB C]
a g
神
Q + o !
Default 0
□
5】■
弹出窗口翻开链接按钮
(2)为按钮添加鼠标单击时触发事件，在添加动作面板单击“翻开链接”动作，在设置动作面 板的链接到下拉列表中选择“结果页面”选项，在翻开在下拉列表中选择“弹出窗口”选项，并对 弹出窗口进行设置，包括弹出窗口的大小、位置以及是否居中。
X交互势HI苕xl
12Mk 役量班中信用■中
够就蚪
1ft■尺寸 ■于员£砺"不透明
弹出窗口交互设置
(3)发布原型检杳效果，单击“弹出窗口翻开链接”按钮，浏览器弹出一个新的窗口显示结果 页面。

发布原型

可以根据自己的需要，对弹出窗口的属性进行设置，如果想让弹出窗口在屏幕中央显示，就勾 选“居中”复选框，还可以设置弹出窗口的其他属性。通过为弹出窗口设置不同的属性，可以获得 不同的弹出窗口的效果。
7.L4父窗口翻开链接
除了在当前窗口、新窗口以及弹出的窗口翻开链接外，还可以在父窗口翻开要显示的页面。
实战演练
(1)新建页面并将其命名为“父窗口显示页面”，拖曳一个“矩形1”元件到工作区域，将其 文本内容命名为“父窗口显示这个页面”。

父窗口显示页面

(2)进入“结果页面”，拖曳一个“按钮”元件到工作区域，将其文本内容命名为“父窗口打 开链接”。
父■口复示题
俗0
B 0
我是结臬页面内容
S刍前分口
：=皤W
0 父■口!!示5HH
父■口翻开翎e
X培•万百X |为R口 X .
二i】PQ ■・I.1・・1晒・・I・・・・law

nwit
父■口防8■在父■■口
父窗口翻开链接按钮
(3)为该按钮添加鼠标单击时触发事件，在添加动作面板单击“翻开链接”选项，在设置动作 面板的链接到下拉列表中选择“父窗口显示页面”选项，在翻开在下拉列表中选择“父级窗口”选 项。
x交互编建器|rm»|
MH】开整哂小
•状方«®EK
为越中理
向翎祭用
女・不明父窗口交互设置
(4)按F5键发布原型检查效果，先单击“在新窗口翻开链接”按钮，随后在翻开的结果页面 中单击“父窗I」翻开链接”按钮，可以看到父窗口的页面内容在父窗口显示页面中显示出来。

发布原型