AxureRP8交互原型设计案例教程第7章事件课件

1、第7章 事件Axure RP 8 交互原型设计案例教程第1页，共42页。Axure RP 中的交互就是指把静态线框图变成可用鼠标单击的交互式HTML 原型的功能。一个完整的Axure RP 交互通常是由三部分内容构成的。 什么情况下发生交互？ 在什么地方发生交互？ 交互将产生什么结果？例如，在网页浏览器中单击网页中的某个文本链接时，画面会切换到另一个网页中，如图7-1所示。这是一个非常简短但非常完整的交互。具体分析如下。该交互是在什么情况下发生的？是在鼠标单击时发生的。又是在什么地方发生的交互？是在文本上发生的。这个交互产生了什么样的结果？结果就是画面跳转到了另一个页面。Axure RP 8

2、交互原型设计案例教程第7章事件7.1 交互基础7.1.1 交互三要素第2页，共42页。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.1 交互三要素图 7-1 单击页面跳转第3页，共42页。（1）从【元件库】面板中拖动一个“主要按钮”到页面中。（2）选择页面上的按钮元件，在【检视】【属性】子面板中双击“鼠标单击时”事件，如图7-2 所示。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.2 一分钟学会交互图 7-2 添加事件第4页，共42页。（3）在弹出的【用例编辑】对话框中单击“打开链接”左侧的三角标志展开隐藏的动作，单击“当前窗口”，在

3、【配置动作】栏中的“超链接”文本框中输入网址“”，如图7-3 所示。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.2 一分钟学会交互图 7-3 添加动作第5页，共42页。（4）按【F5】键在网页浏览器中打开这个最简单的原型预览交互效果。在打开的网页浏览器中，将鼠标指针放在按钮上，鼠标指针会变成手形标志，表示该处可产生交互行为，如图7-4 所示。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.2 一分钟学会交互第6页，共42页。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.2 一分钟学会交互图 7-4 鼠标指

4、向按钮第7页，共42页。单击按钮时，页面会跳转到指定的网站（），如图7-5 所示。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.2 一分钟学会交互图 7-5 打开的网站第8页，共42页。1. 鼠标指向该样式是指在浏览器中浏览网页时，当鼠标指向某个对象时，该对象外观变化的结果。例如，在页面中添加一个矩形元件，将该矩形的填充色设置为蓝色。选择该矩形，在【属性】子面板中单击“鼠标指向”交互样式，打开【交互样式设置】对话框，这时会发现，交互样式的内容与前面学过的元件样式的内容基本相同。在该对话框中不但可以设置“鼠标指向”交互样式，而且可以设置其他三个交互样式，在此，先设置

5、“鼠标指向”交互样式，将其填充颜色设置为橙色，添加外部阴影，其他参数保持默认。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.3 交互样式第9页，共42页。设置完成后，单击【确定】按钮，然后按【F5】键在浏览器中预览交互样式效果，当鼠标不指向矩形对象时，该对象显示为蓝色，当鼠标指针指向该对象时就变成了橙色，如图7-6 所示。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.3 交互样式图 7-6 预览鼠标指向交互样式第10页，共42页。2. 鼠标按下该样式是指在浏览器浏览网页时，当鼠标指向某个对象并按下左键时，该对象的外观变化的结果。我们接

6、着进行上面的操作。选择蓝色矩形，在【属性】子面板中单击“鼠标按下”交互样式，打开【交互样式设置】对话框，将“鼠标按下”的填充颜色设置为绿色，其他参数保持默认。设置完成后，单击【确定】按钮，然后按【F5】键在浏览器中预览交互样式效果，当鼠标指针不指向矩形对象时，该对象显示为蓝色，当鼠标指针指向该对象时就变成了橙色，当鼠标指针指向矩形对象并且按下左键时，矩形就变成了绿色，如图7-7 所示。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.3 交互样式第11页，共42页。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.3 交互样式图 7-7 预览

7、鼠标按下交互样式第12页，共42页。3. 选中该样式只有在对象被选中的状态下方可显示出来。选中普通元件可以在“选中”交互样式设置参数栏的下方勾选“选中”项实现，也可以通过事件触发【选中】动作实现（关于事件的知识请参阅7.2 节）。4. 禁用该样式需要在对象被禁用的状态下方可显示出来，与上面的“选中”交互样式一样，禁用普通元件主要通过事件触发禁用的动作实现。禁用后的元件将无法产生任何交互效果。Axure RP 8 交互原型设计案例教程第7章事件7.1 交互基础7.1.3 交互样式第13页，共42页。Axure RP 中包括元件事件和页面事件两大类。选择页面上的元件时，在【检视】【属性】子面板中会

8、列出元件的事件，如图7-8 所示。不选择页面上的任何元件对象时，表示选择了当前页面，此时【属性】子面板中列出页面的事件，如图7-9 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.1 事件类型第14页，共42页。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.1 事件类型图 7-8 元件的事件 图7-9 页面的事件第15页，共42页。元件事件包含的内容很多，不同元件包含的事件内容也会有所不同。图7-10 列出了普通图形、群组对象、单选按钮以及表格元件的事件，其中，普通图形元件中的事件内容最多。Axure RP 8 交互原型设计案例教

9、程第7章事件7.2 元件事件7.2.2 元件事件详解第16页，共42页。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-10 不同类别元件的事件第17页，共42页。1. 鼠标事件首先认识现在通用的光电鼠标的三个按键：左键、右键和中键滚轮，如图7-11 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-11 光电鼠标第18页，共42页。2. 元件自身事件元件自身事件通常需要先使用其他元件的事件执行某个动作，然后再由该动作触发该元件自身的事件。例如，Axure RP 页面上有图形A 和图像B

10、 两个元件，如图7-12 所示。要实现的交互效果是：单击图形A 时，隐藏图像B，图像B 被隐藏时，页面跳转到一个网站中。具体操作步骤如下。（1）选择图形A，在【检视】【属性】子面板中双击“鼠标单击时”，如图7-13 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解第19页，共42页。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-12 页面上的图形和图像元件图 7-13 添加事件第20页，共42页。（2）在打开的【用例编辑】对话框中，添加动作为“隐藏”，在【配置动作】栏中选择图像B 元件，如图

11、7-14 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-14 给图形添加动作第21页，共42页。（3）完成图形A 的用例设置后，再选择页面中的图像B元件，在【检视】【属性】子面板中单击“更多事件”，从弹出的下拉列表中选择“隐藏时”，如图7-15 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图7-15 添加隐藏时事件第22页，共42页。（4）在弹出的【用例编辑】对话框中，添加动作为“当前窗口”，在【配置动作】栏中输入超链接的网址：，如图7-16 所示。Axure RP 8 交互原型设

12、计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-16 给图像添加动作第23页，共42页。（5）完成图像的用例设置后，按【F5】键预览网页效果，此时，在打开的网页浏览器中，使用鼠标单击图形按钮时，图像被隐藏，接着弹出指定的网站首页。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解第24页，共42页。例如，单击图形A 会移动图像B，图像B 被移动会导致一个网页打开。用上面的操作案例说明，设置图7-13 所示的参数为如图7-17 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-1

13、7 给图形添加【移动】动作第25页，共42页。选择图像元件B 并添加【移动时】事件，如图7-18 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-18 对图像添加【移动时】事件第26页，共42页。在打开的【用例编辑】对话框中，添加【打开链接】动作，在【配置动作】栏中输入超链接为，如图7-19 所示。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解图 7-19 添加并配置【打开链接】动作第27页，共42页。3. 键盘按键事件Axure RP 提供了【键盘按键按下时】和【键盘按键松开时】两个键盘按

14、键事件。（1）键盘按键按下时。是指打开网页浏览器时，只有按下键盘上的任意一个按键并且不能松开才可以产生交互，这种交互是针对已经获取焦点的元件。（2）键盘按键松开时。是指打开网页浏览器时，只有按下键盘上的任意一个按键再松开才可以产生交互。这种交互同样是针对已经获取焦点的元件。Axure RP 8 交互原型设计案例教程第7章事件7.2 元件事件7.2.2 元件事件详解第28页，共42页。前面学习了元件事件，接下来学习页面事件就会比较简单了。要获取页面事件，只需要不选择页面中的任何对象元件，在【检视】【属性】子面板中会列出所有的页面事件。Axure RP 8 交互原型设计案例教程第7章事件7.3 页

15、面事件7.3.1 关于页面事件第29页，共42页。Axure RP8 包括12 项页面事件，下面对这些事件进行详细说明。1. 【页面载入时】事件【页面载入时】事件是指当页面在浏览器中打开时能导致产生什么样的结果。当然，这个结果需要通过动作来实现。例如，打开页面时，过2 秒会显示一段祝福语。新建一个Axure RP 文档，无需创建任何元件，直接在【属性】子面板中双击【页面载入时】事件进入【用例编辑】对话框，设置参数如图7-20 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解第30页，共42页。Axure RP 8 交互原型设计案例教程第7章事件

16、7.3 页面事件7.3.2 页面事件详解图 7-20 添加【等待】动作第31页，共42页。不要关闭上面打开的【用例编辑】对话框，接着添加第二个动作【其他】，在右侧的【配置动作】栏中输入“页面事件，你好！”的字样，如图7-21 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解图 7-21 添加【其他】动作第32页，共42页。2. 【窗口调整尺寸时】事件3. 【窗口滚动时】事件4. 【窗口向上滚动时】事件5. 【窗口向下滚动时】事件6. 【页面鼠标单击时】事件7. 【页面鼠标双击时】事件8. 【页面鼠标右击时】事件9. 【页面鼠标移动时】事件10.

17、 【页面键盘按键按下时】事件11. 【页面键盘按键松开时】事件Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解第33页，共42页。该事件表示在浏览器中，按下键盘上的任意键之后再释放键盘会导致发生某种结果。下面使用页面键盘交互事件设计一个简单原型：按下键盘按键时显示一幅图片，松开键盘按键时隐藏该图片。（1）在页面中放置一幅图像并将其命名为“键控图片”，如图7-22 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解图 7-22 添加的图片元件第34页，共42页。（2）取消图像元件选择状态，添加一个【页面载

18、入时】事件，给该事件添加一个【隐藏】动作，目的在于载入页面时，该图片是被隐藏的，如图7-23 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解图 7-23 给【页面载入时】事件添加【隐藏】动作第35页，共42页。（3）添加【页面键盘按键按下时】事件，给该事件添加一个【显示】动作，目的在于按下键盘按键时，显示隐藏的图片，如图7-24 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解图 7-24 给【页面按键按下时】事件添加【显示】动作第36页，共42页。（4）添加【页面键盘按键松开时】事件，给该事件添加一个【隐藏】动作，目的在于键盘按键松开时，隐藏显示的图片，如图7-25 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解图 7-25 给【页面按键松开时】事件添加【隐藏】动作第37页，共42页。至此，在页面中添加了3 个页面事件，如图7-26 所示。Axure RP 8 交互原型设计案例教程第7章事件7.3 页面事件7.3.2 页面事件详解图 7-26 页面添加的3 个事件第38页，共42页。12. 【自适应视图改变时】事件当自适应视图改变时会导致产生什么样的结果。自适应视图主要是针对不同分辨率的屏幕