张晓Axure图文案例教程01 文字超链接与页面跳转效果

Axure图文视频教程案例篇

——01 文本超链接和页面跳转

作者：张晓

从本节开始，我们以案例的形式介绍如何使用Axure来完成产品原型及其交互设计，如何快速有效地将原型呈现出来，表达自己的想法和目的，解决广大产品经理、原型设计师以及一些业务销售或运营人员日常工作中经常要碰到的一些问题。

通常情况下，我们需要描绘出一个比较完整、高仿真的原型，比如需要制作一个纯UI 的界面效果，我们的客户、研发、运营人员看到后能就能清晰地了解我们将来要实现的是一个什么样的产品或者功能。

一、实战篇课程预告

Axure实战篇教程为同学们准备了以下实例课程：

文本超链接与页面跳转效果

文本输入显示效果

文本校验效果

单选按钮群组互斥

下拉列表联动效果

制作tab页签效果

打开关闭弹出层（遮罩层）

轮播图效果

用户登录页面

中继器实现网上商城效果

二、文本超链接与页面跳转实例

原型软件：Axure RP Pro 7.0中文汉化版

实例：设计一个电商网站的首页，点击导航栏目“女装”、“男装”、“数码”等，实现对应页面的跳转。

（一）设计思路：

文字超链接（HyperLink）效果的实现方式：“鼠标悬停时”交互样式；

页面跳转的实现方式：“鼠标点击时”用例- ”定义链接“动作。

（二）操作步骤：

STEP1：页面布局。

在站点地图（Sitemap Pane）对页面名称进行重命名，然后将矩形（Renctangle）、标签（Label）控件（元件/部件）拖入主工作区（Wireframe Pane，线框图面板），并完成相应的页面布局。

STEP2：实现文字超链接（HyperLink）效果。

（1）选中“女装”标签控件，在【控件属性和样式面板】- 交互样式中双击“鼠标悬停时”；

（2）在打开的“设置交互样式”对话框中，对鼠标悬停时的字体颜色和下划线进行设置，确定后即完成文字超链接（HyperLink）效果。

（3）对“男装”、“数码”标签控件也进行相同设置。

STEP3：实现页面跳转效果。

（1）选中“女装”标签，在【控件交互和注释】面板中双击“鼠标单击时”用例；

（2）在打开的“用例编辑器”对话框的“点击新增动作”框中，选择“打开链接”，并在“配置动作”框中选择链接到“女装”页面，单击确定完成；

（3）链接设置完成后，标签的右上角会有蓝色的数字标记，表示该控件已添加交互用例，同时在【控件交互和注释】面板中可以看到新增的用例行为。

（4）按照如上步骤对“男装”、“数码”标签的设置。

（5）在【站点地图】（Sitemap Pane）中对相关页面进行设置，以便于识别。双击“女装”站点，将矩形（Renctangle）控件拖入工作区中，并在控件上编辑文字“欢迎来到女装页面！”，然后在控件库中将“HTML按钮（HTML Button）”拖入工作区中，并为其设置文字和“返回到首页”的交互事件。

（6）同样，对“男装”、“数码”页面进行设置。

二、下节课程预告

案例图文教程：第02节文本输入显示效果

谢谢！作者：张晓