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

第7章 用Axure链接行为制作交互效果 课时内容 用Axure链接行为制作交互效果 课时 4 教学目标 掌握Axure的链接行为，理解自适应视图功能 教学重点 Axure的链接行为 教学难点 Axure的链接行为 教学设计 1.教学思路：通过实例引入链接行为的概念；通过多媒体演示和实机操讲解打开链接和关闭窗口、在内部框架中打开链接、滚动到元件（锚点链接）、设置自适应视图的方法。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 Axure之所以受到交互设计师、产品经理等的青睐，是因为使用其可以实现各种高级交互效果，能够最大程度上还原真实软件的操作，如打开链接、关闭窗口、在内部框架中打开链接、滚动到元件等行为。 打开链接交互效果 链接动作 7.1 打开链接和关闭窗口 实战演练 7.1.1当前窗口打开链接 实战演练 （1）把Page1页面重新命名为“当前窗口”，拖曳一个“按钮”元件到工作区域，将其重新命名为“当前窗口打开链接”；拖曳一个“矩形1”元件到工作区域作为本页面的内容，将其文本内容重新命名为“当前页面内容”。 当前窗口 （2）新建页面并重新命名其为“结果页面”，拖曳一个“矩形1”元件到工作区域，将其作为结果页面的内容，将矩形1的文本内容命名为“我是结果页面内容”。 结果页面 （3）回到“当前窗口”页面，给按钮元件添加鼠标单击时的触发事件，在添加事件面板选中“单击时”事件，在添加动作面板单击“打开链接”选项；该页面包括4种链接方式，这里选择第1种，即在设置动作面板的链接到下拉列表中选择“结果页面”，在打开在下拉列表中选择“当前窗口”链接方式打开结果页面。 设置在当前窗口打开结果页面的链接动作 （4）第2种链接方式——在设置动作面板的链接到下拉列表中选择“链接到URL或文件路径”能够将单击按钮的触发事件链接到外部URL或者文件路径，假如想打开京东商城的页面，输入京东商城的网址“”，就可以链接到京东商城的页面，或者输入本地文件路径可以打开本地文件。 打开URL或外部文件 （5）第3种链接方式能够重新载入当前页面，也就是刷新当前页面，第4种链接方式能够返回上一页。 刷新或者返回页面 （6）设置链接动作，单击按钮时能够在当前窗口打开结果页面。按F5键发布原型，检查效果。能够看到浏览器的标题是当前窗口，页面中包含一个打开结果页面的按钮和一个矩形元件，单击此按钮，浏览器在当前窗口打开结果页面，浏览器的标题和浏览器的内容都发生了变化。 发布原型 实战演练 7.1.2新窗口打开链接 实战演练 （1）进入到“当前窗口”页面，拖曳一个“按钮”元件到工作区域，将其命名为“在新窗口打开链接”。 在新窗口打开链接按钮 （2）为该按钮元件添加鼠标单击时触发事件，在“添加动作”面板选择“打开链接”动作，在设置动作面板链接到下拉列表中选择“结果页面”选项，在打开在下拉列表中选择“新窗口/新标签”选项。 在新窗口打开链接交互设置 （3）按F5键发布原型，单击“在新窗口打开链接”按钮，浏览器打开一个新的窗口，来显示结果页面内容。 新窗口打开页面 7.1.3弹出窗口打开链接 Axure可以在弹出的窗口中打开链接，下面来看看它是如何使用的。 实战 实战演练 （1）回到“当前窗口”页面，拖曳一个“按钮”元件到工作区域，将其命名为“弹出窗口打开链接”。 弹出窗口打开链接按钮 （2）为按钮添加鼠标单击时触发事件，在添加动作面板单击“打开链接”动作，在设置动作面板的链接到下拉列表中选择“结果页面”选项，在打开在下拉列表中选择“弹出窗口”选项，并对弹出窗口进行设置，包括弹出窗口的大小、位置以及是否居中。 弹出窗口交互设置 （3）发布原型检查效果，单击“弹出窗口打开链接”按钮，浏览器弹出一个新的窗口显示结果页面。 发布原型 可以根据自己的需要，对弹出窗口的属性进行设置，如果想让弹出窗口在屏幕中央显示，就勾选“居中”复选框，还可以设置弹出窗口的其他属性。通过为弹出窗口设置不同的属性，可以获得不同的弹出窗口的效果。 7.1.4父窗口打开链接 除了在当前窗口、新窗口以及弹出的窗口打开链接外，还可以在父窗口打开要显示的页面。 实战 实战演练 （1）新建页面并将其命名为“父窗口显示页面”，拖曳一个“矩形1”元件到工作区域，将其文本内容命名为“父窗口显示这个页面”。 父窗口显示页面 （2）进入“结果页面”，拖曳一个“按钮”元件到工作区域，将其文本内容命名为“父窗口打开链接”。 父窗口打开链接按钮 （3）为该按钮添加鼠标单击时触发事件，在添加动作面板单击“打开链接”选项，在设置动作面板的链接到下拉列表中选择“父窗口显示页面”选项，在打开在下拉列表中选择“父级窗口”选项。 父窗口交互设置 （4）按F5键发布原型检查效果，先单击“在新窗口打开链接”按钮，随