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

第7章用Axure链接行为制作交互效果

课时内容

用Axure链接行为制作交互效果课时4

教学目标

掌握Axure的链接行为，理解自适应视图功能

教学重点

Axure的链接行为

教学难点

Axure的链接行为

教学设计

.教学思路：通过实例引入链接行为的概念；通过多媒体演示和实机操讲解翻开链接和关闭窗口、在内部框架中翻开链接、滚动到元件（锚点链接）、设置自适应视图的方法。

.教学手段：多媒体+计算机

.教学资料：教材、多媒体课件

教学内容

Axure之所以受到?能够最大程度上还原真件等行为。

yJD.蠹多“

史互设计师、产品经理等的青睐，是因为使用其可以实现各种高级交互效果，实软件的操作，如翻开链接、关闭窗口、在内部框架中翻开链接、滚动到元

93（SHARP）LCD-50V3A50英寸安卓智藐液晶电视（黑色）

卜好.省卜H电t1东东自豫，—6181即?妁！6月1880103虔要开场！无■金，明涧可*爱2,8

618元?——一

.市屈由a工京市价*2999.0053

百页服装城荚

促清口内买享受憾8

EZ3化价格不马1：8优秀呻取受

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

立即将忠由京东发货，井费?1110。三成下—十今日（06月15日任达

家用电器＞大京电/＞早屣＞

翻开链接交互效果

关闭窗口

关闭窗口动作用来关闭浏览器窗口页面。

实战演练

(1)在“当前窗口”页面，拖曳一个“按钮”元件到工作区域，将其文本内容命名为“关闭窗

Enwwn回金加而P父■□型不5Hl

Enwwn

回金加而

P父■□型不5Hl

0

7Cft

he口翻开修搐在新■口翻开翎e驰出.口翻开仔搞笑团?口

当茄页面内古

Default

Default

Default

关闭窗口按钮

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

X￡1关闭窗口交互

X

￡1

关闭窗口交互

发布原型，当单击“关闭窗口”按钮时，会弹出“关闭窗口”对话框，单击“同意”按钮，就可以关闭该窗口。

7.2在内部框架中翻开链接

Axurc的内部框架，可以在同一个浏览器窗口中显示多个页面，从而在该窗口中实现不同页面的切换效果。就像在HTML网页代码中有iframe标签，iframe元素会创立包含另外一个文档的内联框架，从而实现不同条件下的文档嵌入效果。

Axure的内部框架和iframe元素的功能相近，都能够实现不同条件下的文档嵌入效果。

内部框架元件到底是一个什么样的元件呢，该怎么使用内部框架元件呢？下面一起走近内部框架元件。

内部框架实战演练

（1）新建页面才将其重新命名为“内部框架”，拖曳一个“内联框架”元件到工作区域，将其命名为“内部框架显示区”：再拖曳两个“按钮”元件到工作区域，将其分别命名为“结果页面”“父窗口显示页面”。

程式交

程式交5道照

内部框架显示区忸

程式

程式交5道照

内部框架显示区忸

（2）选中“结果页面”按钮，为其添加鼠标单击时触发事件，在添加动作面板单击”框架中打开链接”选项，勾选“内部框架显示区”，在设置动作面板的链接到下拉列表中选择“结果页面”选项。

xxssas

内部框架中翻开结果页面

（3）选中“父窗口显示页面”按钮，为其添加鼠标单击时触发事件，在添加动作面板单击“框架中翻开链接”选项，在设置动作下面勾选“内部框架显示区”复选项，在设置动作面板的链接到下拉列表中选择“父窗口显示页面”选项。

x交互爆M父示为面父框架中翻开页面

x交互爆

M

父示为面

（4）按F5键发布原型检查效果，单击“结果页面”按钮，可以看到结果页面在内部框架中显示出来，单击“父窗I」显示页面”按钮，内部框架的显示内容发生变化，它显示出父窗口显示页面的内容。

ol?12j?--C?

?--C?饰.—:3J76

?--C?

?--C?饰.—:3J76

发布原型

（5）页面刚加载时，内部框架内不会显示内容，但不应该为用户展示一个空白页面，应该默认显示结果页面按钮对应的内容。在内部框架上双击，在弹出的内部框架“链接属性”对话框中，选中“结果页面”，单击确定按钮，将该页面作为内部框架的默认显示页面。

用Axux便接行为制信交互效奥?AxurcRP$Team6dtcn已授权父m

用Axux便接行为制信交互效奥?AxurcRP$Team6dtcn已授权

父milwan-刈日li

期回、

2WXZ

0揍目标

⑥磔的环

络最RI

a父?cAim

9sente

B父窗口药mi

S收?c

内部框架显示区

丽一^谢URL?女林CMault

CM