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

第8章用Axure元件行为制作交互效果

课时内容

用Axure元件行为制作交互效果

课时

6

教学目标

掌握Axure的元件行为，学会使用元件行为制作交互效果

教学重点

Axure的元件行为

教学难点

Axure的元件行为

教学设计

.教学思路：通过实例引入元件行为的概念；通过多媒体演示和实机操讲解显示/隐藏、设置文本和设置图片、设置选中、设置列表选中项、启用/禁用、移动/旋转、置于顶层/底层、获取焦点和展开/收起树节点等元件行为。

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

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

教学内容

Axure除了可以使用链接行为制作交互效果，同时也可以使用Axure元件行为来完成交互效果的制作，包括元件的显示/隐藏、设置文本、设置图片、设置选中、设置列表选中项、启用/禁用、移动

/旋转、置于顶层/底层、获取焦点、展开/收起树节点等行为，通过元件动作的交互效果，可以制作出

高级交互效果。

＞；交互编辑器口添加事件

＜选择交互明牛开始创立交互.

显示/I意藏tSM面板状态

设W本设置图片

设置选中设置列表造中项

启用/禁用移动设置尺寸

设置不透明我取焦点

展开做起树节点中继器动作

添力谢序移除排序

渤瞒选取消

取消

取消确定Axure元件动作

取消

显示/隐藏元件的显示/隐藏行为是经常会用到的一种交互效果，常用于二级菜单的显示与隐藏交互效果,

下面一起来学习显示与隐藏行为。

切换方式控制元件显示隐藏实战演练

;交互编辑器序MW*夕-渗IDS）

;交互编辑器

序MW*夕-渗IDS）作

链接动作

打市统

关闭窗口

框架中打枪按

濠动到元件元件动作

显示/百箍面板状态

|片］

设置选中

设置列选中项

启用噤用

移动

的

设置尺寸

置于顶后底层

设置不法明荻取焦点

组织动作

▼单击时

设置图片

image为image鼠标悬停到image,鼠标按下toimage

设置动作

目标

image，

iCXXrUKDt

图片_0舞

更妥选项，

设造I扇B停用片

图片/「频.

设查京既按下列图片

图片:用［演

设百旃阕片

图片：「口［选择

￡Z￡JBBn

图片

选择

设置图片

发布原型，当单击“设置图片”按钮时，显示设置好的默认图片，当鼠标悬停时，图片切换成新图片，当鼠标按键按下时，图片又进行了更换，从而实现了设置图片的效果。

设置图片的效果一般为，中选中某个东西的时候，显示出一个对号；禁用某个东西的时候，显示出一个差号。或者淘宝网站页面上的商品，默认显示的是一个小的预览图片，当鼠标悬停在预览图片上时会显示一个较大尺寸的图片，这些效果都可以通过设置图片行为来完成。

设置选中

设置选中行为常用于单项选择按钮元件和复选框按钮元件的选中与未选中以及选中和未选中状态的切换。下面一起来看看它们的使用。

单项选择按钮选中行为

一般给单项选择按钮和复选框添加这样交互行为。下面一起来看看他的使用。

I实战演练

di拖曳二个“单项选择按钮”元件到工作区域，将其文本内容命名为“我是单项选择按钮”，将其标签命名为“单项选择”；拖曳3个“按钮”元件到工作区域，将其文本内容分别命名为“选中”“未选中”“切换选中”。

页尚目显示与除S行为

页尚

目显示与除S行为

a设置文频为

目设置图像行为

目单项选择按?选中行为

单项选择按钮选中行为页面

（2）单击“选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选中”

选项，勾选“单项选择”复选项，设置它的值为真。

X交互编辑器

涉DW*夕*索DOS柞

腼砒

Q

链JS动作

翻开筵接

关闭窗口

框架中翻开链接

港动到元件

元件动作

▼单击时

设置选中

单项选择为.真?

」

设置面板状态

设置图片

|iggg中|

设置列表选中项

启用朦用

移动

螃

设置尺寸

5T丽曲

设置不透明

我取焦点

选中行为

（3）单击“未选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选中”选项，勾选“单项选择”复选项，当未被选中的时候，设置它的值为假。

:交互编辑看S8

S8贬祚

S8贬祚翻开链接关闭窗口框架中翻开链接

S8贬祚

翻开链接

关闭窗口

框架中翻开链接

潦动到

元件动作

显示博S

设置面板状态

设置文本

设匿图片

|i^^中|

迨吉列表法中项

启用噤用

移动

蚓

设置尺寸

置于顶层/底层

设宜不透朗荻取焦点

?单击时

设置选中

单项选择为“假”

取消确定未选中行为

取消

（4）单击“切换选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选中”选项勾选“单项选择”选项，设置它的值为“切换二

;交互编辑器夕.瀚DS)作组级动作▼单击时链接动作打市统关闭窗口框架中打枪按

;交互编辑器

夕.瀚DS)作

组级动作

▼单击时

链接动作

打市统

关闭窗口

框架中打