Axure交互设计实例介绍

Axure 中级互动设计 1——控制 Dynamic Panel控制 Dynamic Panel 1. Axure RP 实现更丰富的互动设计 2. 认识 Dynamic Panel Widget 3. 编辑 Dynamic Panel 的状态 4. 预设 Dynamic Panel 的显示/隐藏 5. 示范-以 Click 来开关 Dynamic Panel 6. 教学影片
1. Axure RP 实现更丰富的互动设计 网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。 不管是 AJAX 或 JavaScript， 甚至是 Flash、 Silverlight、 JavaFX， 这些都被归类为 RIA(Rich Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机互动。 同时，这个趋势也挑战了传统的文书软体或绘图软体，当这些软体受限于仅能表现单一画面与单一状态的 情况下，您很难把心目中最友善的互动方式表达清楚并设计出来。 Axure RP 与其他的 wireframe 软体，最大的差异在于能够进行互动设计(Interaction Design)，且可以 立即将结果呈现于 prototype 上，而不是只有文字叙述。更棒的一点是，学习 Axure RP 的互动设计，您 并不需要学习 HTML 或 Java Script 语法，只要透过一些设定与操作，便可以完成多样而创新的互动介面 设计。 在 Axure RP 设计出来的 Prototype 中，最简单的互动设计是网页连结，透过滑鼠的 click 来串起使用者 与网站的互动流程。然而，真正发挥 Axure RP 在互动设计上的惊人特色，并不是只有连结这么简单的互 动，您可以藉由学习 Dynamic Panel (动态面板)物件的操作与控制，来做到更丰富更友善的互动介面设 计。 2. 认识 Dynamic Panel Widget Dynamic Panel (动态面板) 这种物件是专门用在设计 Prototype 动态功能的 Widget，Dynamic Panel 可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示 Dynamic Panel 来达成互动介面的整个表现。 就像其他 Widget 一样，Dynamic Panel 可以用拖放的方式从 Wireframe 窗格加入到画布中。
学习 Dynamic Panel 的互动设计之前，有 2 个重要的概念必须先认识： (1) Dynamic Panel (动态面板)： 一种透明的物件，本身可以包含很多个状态 (State)，而每个状态都是一个小网页。被放置在最上层的状 态就是该面板的长相。 (2) State (状态)： 每个状态都是一个小网页， 而这个小网页的边界与大小， 与所属的 Dynamic Panel 大小相同。 不同的 State 可以重叠在同一个 Dynamic Panel 里头，唯有被控制放在最上层的 State，才会呈现于 Prototype 的画 面中。 以 Axure RP 所设计出来的多样互动介面，大多藉由各种触发事件(Event)来控制 Dynamic Panel 显示 或消失，或控制哪个 State 在最上层来模拟出实际的互动介面。 3. 编辑 Dynamic Panel 的 State(状态) 已经摆放到画布中的 Dynamic Panel， 直接在上头快速点滑鼠左键两

下， 会开启 「Dynamic Panel State Manager」对话方块。在这个对话视窗中，您可以新增 State、更改 State 名称、调整 State 排序、移 除 State 与编辑 State。
在「Dynamic Panel State Manager」对话方块中选择一个 Panel State，然后按下【Edit State】钮， 会开启这个 Panel State 的 Wireframe 以供设计。或者您可以选择【Edit All States】钮，一口气把所 有的状态页面通通开启。 开启后，您就可以像设计其他 Wireframe 一样的设计状态页面(State)， 每个状态页面的侧边蓝色虚线 外框就表示 Dynamic Panel 的边界。 4. 预设 Dynamic Panel 的显示/隐藏
Dynamic Panel 可以预设为隐藏(Hidden)， 作法是在 Dynamic Panel 物件上按滑鼠右键， 并选择 「Edit
Dynamic Panel->Set Hidden」 ，这样就可以隐藏 Panel 的内容，而且 Dynamic Panel 的遮罩也会从 蓝色变成黄色。已经预设隐藏的 Dynamic Panel，可以选择「Edit Dynamic Panel->Set Visible」来 显示 Dynamic Panel。 Dynamic Panel 可以藉由接下来所介绍的互动模式，动态控制在 Prototype 中的显示或隐藏。 Axure RP 提供互动设计的实现方式，都在「Interaction Case Properties」对话方块中设定(请参考初级互动 设计)。 其中有 5 种互动方式(Action)是专门用来控制 Dynamic Panel 的，分别是: * Set Panel state(s) to State(s)：将某个 Dynamic Panel 的 State 设定为该 Panel 的显示状态 * Show Panel(s)：显示(设为 visible) 一或多个 Dynamic Panel * Hide Panel(s)：隐藏一或多个 Dynamic Panel * Toggle Visibility for Panel(s)：根据目前的显示状态来显示或隐藏 Dynamic Panel * Move Panel(s)：移动 Dynamic Panel，可根据绝对座标或相对座标来移动 5. 示范-以 Click 来开关 Dynamic Panel
要了解 Dynamic Panel 的互动控制，我们先来模拟一个 Click 的效果- 当滑鼠 Click 页面上的矩形时，会 出现一个讯息视窗，再 Click 一次时，又把讯息视窗隐藏起来。换句话说，我们将藉由滑鼠 Click 来控制 Dynamic Panel 的显示与隐藏。 首先我们先在画布上放一个矩形物件。接下来放置一个 Dynamic Panel，并且编辑这个 Panel 唯一的预 设状态(State1)。
在 State1(状态)的 wireframe 上，随意加入一些文字，以供辨认。
再把 Dynamic Panel 的显示状态，设定为隐藏(Hidden)。
然后， 在矩形物件上增加一个 OnClick 的 Interaction Case。 先选择矩形物件， 接着 click 两下“OnClick”， 弹出「Interaction Case Properties」互动设计的对话方块。 分别针对这个对话方块中的 Step 1- 3 做互动设计的设定：
step 1: Description - 预设为 Case 1，不用变更。 step 2: Select Actions - 勾选 Toggle Visibility for Panel(s)，此时在 step 3 会出现 Toggle Visibility for Panel。如下图：
接下来… step 3: Edit the Action description (click an underlined value to edit) - 这句

话的意思是，去点 选有加底线的项目进一步编辑。 于是我们接着 click Panel 这个单字， 然后会看到弹出一个 「Select Panels」 对话方块，里头只有一个叫做”My First Panel”的项目，把它勾选起来。此时在 step 3 会出现 Toggle Visibility for My First Panel。 (如下图)
如果您曾经给 Dynamic Panel 有意义的名称，就可以在 Select Panel 时看到被您命名过的 Panel。选择 Dynamic Panel 时，Dynamic Panel 会以 Annotations & Interactions 窗格中所给予的 Label 做为 识别，如果没有指定的话，Dynamic Panel 会预设标示为”Unlabeled”。 接下来，就可以输出 Prototype 了，按下 F5 或选择「Generate > Prototype」 ，将刚刚设计过的简易互 动介面，输出到浏览器上进一步检视，当滑鼠 click 时，您所设计的那个 Dynamic Panel 是否会消失/出 现(如下图)。
当您顺利完成这个 Dynamic Panel 的设定之后，非常恭喜！您已经成功进阶到 Axure RP 中级互动设计
了，随着 Dynamic Panel 的各种互动设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具 创意的互动介面。
Axure 中级互动设计 2—鼠标移入移出等的互动设计
1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)
2. 变换图像(Rollover Image)
3. 变换样式(Rollover Style)
1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)
在先前初级互动设计(Basic Interaction)一章中，介绍多种 Axure RP 支援的人机介面互动效果。这里我 们要介绍其中两个常见的触发事件 (Event)：
OnMouseEnter - 滑鼠的指标移动到物件之上
OnMouseOut - 滑鼠的指标移动出物件之外
有许多 Widget 可以使用 OnMouseEnter 和 OnMouseOut 触发事件，当滑鼠移到 Widget 上时会触发 OnMouseEnter 事件，OnMouseOut 事件则发生在滑鼠离开 Widget 时被触发。
最常见的运用方式，则是合并 Dynamic Panel 来控制比较复杂的功能时，例如：浮动选单、滑过特效和 自订 tooltips 等。
以左图的互动效果来当例子：当滑鼠移到图片上方时，会自动弹出说明文字框(Dynamic Panel)，当滑鼠 移出图片时，说明文字框就会消失。这个互动设计就可透过 OnMouseEnter 和 OnMouseOut 触发事件 结合 Dynamic Panel 的控制来达成，设计方式如下图所示。
2. 变换图像(Rollover Image)
Image Widget 以及 Button Shape Widget 可直接利用 Axure RP 的功能来设计 Rollover Image 和 Rollover Style，不需要使用到 OnMouseEnter、OnMouseOut 和 Dynamic Panel。
变换图像(Rollover Image)
想要建立变换影像的话， 请在 Image Widget 上按右键， 「Edit Image->Import Rollover Image」 选择 ， 然后选择一个影像当作变换影像，一旦影像选定后，您可以在 Wireframe 中，利用滑鼠滑过影像上的黑 白色方块来预览变换影像。
3. 变换样式(Rollover Style)
在 Axure RP 里头，Rect

angle，Placeholder，Button Shape 这三种 Widget 可以直接设定变换样式 (Rollover Style)，而不需要去特别指定 OnMouseEnter / OnMouseOut 的触发事件，就可以做到变换
样式。
想要建立变换样式的话，请在 Rectangle / Placeholder / Button Shape 上按右键，选择「Edit Edit Button Shape->Edit Rollover Style」 。
此时会开启「Set Rollover Style」对话方块，您可以在这里选择变换样式，勾选「Preview」核取方块 来预览设定在 Button Shape 的变换样式。
变换的样式(如下图)包括：
* 字型 Font
* 字体大小 Font Size
* 粗体 Bold
* 斜体 Italic
* 底线 Underline
* 文字颜色 Font Color
* 填色 Fill Color
* 线条颜色 Line Color
* 线宽 Line Width
* 线条样式 Line Style
套用了变换样式之后， 您可以选择 Preview 提早预览效果。 也可以在 Wireframe 中， 利用滑鼠滑过 Widget 左上角的黑白色方块来预览变换状态。
Axure 中级互动设计 3—设计多层选单
设计多层选单 1. 认识选单物件 (Menu Widget) 2. 编辑选单物件 3. 设定选单的变换样式 (Rollover Style) 4. 秘技 (Quick Tips) 1. 认识选单物件 (Menu Widget) 选单物件(Menu widgets) 常被用来建立简单的多层选单(Flyout Menus)。
您可以在 Widgets 窗格中找到两种选单物件： * Menu (Vertical) - 垂直选单 * Menu (Horizontal) - 水平选单 将你所需要的选单物件从 Widgets 窗格中拖曳到 Wireframe 就可轻松建立， 新的选单会先设置 3 个选单 选项(Menu Item)。 下图展示的动画则是已经完成设定的多层选单：
2. 编辑选单物件 编辑选单和选单项目的文字与格式的方法就像编辑其他 Widget 一样，您可以在选单项目上连续按滑鼠左
键两下编辑文字，也可以利用工具列来编辑选单和选单项目的色彩、字型和其他样式。 选单物件的编辑功能有这些项目： * Edit Menu Padding - 选项间距设定 * Edit Rollover Style - 设定变换样式 * Add Menu Item After - 往后新增选项 * Add Menu Item Before - 往前新增选项 * Delete Menu Item - 删除选项 * Add Submenu - 新增子选单(如果已经有子选单，则会显示 Delete Submenu - 删除子选单) 在 Menu Widget 的选项上，按滑鼠右键会出现如下图功能选单：
增加或移除选单项及子选单 想要增加或移除选单项目的话，请在选单项目上按滑鼠右键，选择「Add Menu Item」和「Delete Menu Item」指令。 想要在选单项目下加入子选单的话，请在选单项目上按滑鼠右键，选择「Add Submenu」 。在 Axure RP 的画布区域，通常 Submenu 会自动缩回，要去点一下上层选单，才能再看到前新增的 Submenu。如下 动画：
设定选项间距 (Padding) 若是想要编辑选单项目之间的间距(Padding)，请在选单或选单项目上按滑鼠右键，选择「Edit Menu Padding」 。
3. 设定选单的变换样式 (Rol

lover Style) 就像 Button Shape Widget 一样， 变换样式(Rollover Style)也可套用在 Menu Widget 的选单项目上。 想要编辑选单的变换样式，请在选单或选单项目上按滑鼠右键，选择「Edit Rollover Style」 ，此时会开 启「Set Rollover Style」对话方块，您可以在这里选择单一选单项目、选单上的所有选单项目，或是选 单和子选单上的所有选单项目的变换样式。 勾选「Preview」核取方块来预览套用在选单上的变换样式。 套用了变换样式之后，您可以在 Wireframe 中，利用滑鼠滑过选单项目左上角的黑白色方块来预览变换 样式。
4. 秘技 (Quick Tips) 秘技 1. 优先设定母选单(Root Menu)的样式： 当子选单(Submenu)建立了以后，会自动套用母选单(Root Menu)的样式，您可以在建立子选单之前先 将母选单样式设好，以节省时间。
(版权声明：欢迎引用及复制 Axure RP 中文教学内容，必须注明出处为悠识数位顾问有限公司及原始文 章网址 dc2a31b19e314332396893a7)
Axure 高级互动设计 1—设定逻辑条件
设定逻辑条件 1. 认识 Condition (逻辑判断) 2. 认识 Condition Builder (逻辑判断编辑器) 3. 用 Condition Builder 建立逻辑判断 4. 秘技(Quick Tips)
1. 认识 Condition (逻辑判断) 虽然可以用文字来描述 Prototype 操作的动线或互动方式，但有的时候，您还是会需要一个更逼真(High Fidelity)、更互动、更有亲和力的 Prototype 。比如，当您在操作 Prototype，模拟会员登入帐号，如 果能在按下登入按钮时，直接显示登入成功或失败的讯息。是不是比您口头解说或文字描述，还要来得清 楚明白呢？ 在 Axure RP 的互动设计中， 「逻辑判断」是最有挑战性，但是也最有趣的一件事情。因为当您在设计网站 Prototype 时， 可以不用寻求程式设计师或 Flash 设计师的协助， 就可以独立完成您想要表达的互动效果。 清楚的逻辑观念胜过互动设计技巧 学习 Axure RP 的条件逻辑设计之前，您必须先知道一个重要的观念： 成为称职的网站企划人员，不一定要学会 Axure RP 的高级互动设计技巧，却一定要有清楚的逻辑观念。 否则， 不只造成网站开发工作上的困扰， 更严重的还会造成糟糕的网站使用者经验。 只有清楚的逻辑观念， 才能带来准确合理的互动设计。
如果您不想学这些高级互动设计技巧，绝对无损于您利用 Axure RP 进行网站企划及 Prototype 设计。 换言之，即使您学会 Axure RP 的高级互动设计，但是您的逻辑观念如果不清楚，仍然无法成为一位优秀 的网站企划。 要是您希望将 Prototype 拿来进行 Usability Test，或者在各种沟通讨论会议上，让大家更充分理解操作 的互动效果，那么透过 Axure RP 提供的逻辑判断设定，可以让 Prototype 更进一步接近真实完

成的网站 介面与动线。 物件值(Value of Widget) / 变数值(Value of Variable)
接下来，您要学习使用变数值/物件值，这两种类型的数值应用于逻辑判断：
a. 物件值(Value of Widget) - 使用 Widget 本身的值来进行逻辑判断，有 4 种不同的数值可供应用： * Checkbox 或 Radio Button 的核取状态 * Droplist 或 Listbox 的选取值 * Text Field 或 Text Area 中的文字 * Text Field 或 Text Area 的文字的长度 b. 变数值(Value of Variable) - 使用自定变数的值来进行逻辑判断，有 2 种： * value of variable - 自定变数的值 * length of variable value - 自定变数值的长度 附带补充，Axure RP 本身存在一个全域预设变数(Global Default Variable) - OnLoadVariable，除此 之外，变数名称可以自订，最多可以有 25 个自订变数。您可以透过主选单 Wireframe > Manage Variables 来检视并编辑所有的自订变数。
您可以在 Prototype 设计里，将物件值及变数值的逻辑判断加入互动设计，在操作 Prototype 时，将会 根据 Web Form Widget 所输入的数值，或是变数的值来进行判断。比如，当使用者登入帐号时，自动检 查输入的帐号或密码，登入成功则导到欢迎页面，登入失败则显示错误讯息。 表单型态的物件 (Web Form Widgets) 由于逻辑判断牵涉到不同物件值的判断，因此经常与表单型态的物件结合运用。 Axure RP 的表单型态的 物件(Web Form Widgets) 如下图。
2. 认识 Condition Builder (逻辑判断编辑器) 如果您具有程式设计的基础，要学习 Axure RP 的变数或逻辑判断，一点都不困难。毕竟 Axure RP 不是 程式开发工具，并没有太多的程式语言要学习。 为了让没有程式设计基础的 Axure RP 使用者也可以设计逻辑判断，因此 Axure RP 透过三个不同的功能 视窗，来协助使用者设定变数以及逻辑判断，这些功能视窗包括：
* Annotation and Interactions (互动设计) * Interaction Case Properties (互动状况设定器)
* Condition Builder (逻辑判断编辑器) 这三个功能视窗的关连及开启顺序如下图： 为了让没有程式设计基础的 Axure RP 使用者也可以设计逻辑判断，因此 Axure RP 透过三个不同的功能 视窗，来协助使用者设定变数以及逻辑判断，这些功能视窗包括：
其中，Annotation and Interactions，以及，Interaction Case Properties，这二个视窗在学习初级 互动设计就使用到了。只有 Condition Builder 对话窗对于学习高级互动设计的人是陌生的，我们就来认 识一下这个特殊的功能。 Condition Builder 逻辑判断编辑器的操作介面 Condition Builder 是用来设定逻辑判断的工具，只要透过下拉选单及一些按键，就可以完成一长串复杂 的逻辑判断叙述，不需记忆，也不用自行撰写逻辑判断程式。 您可以在 Interactions Case Properties 视

窗的右上角，点一下 Add Condition (或 Edit Condition)
的文字连结，就会开启「Condition Builder」视窗。 在「Condition Builder」视窗中，可以建立一行或多行的逻辑判断，只要按下右方的「 」钮，就可以增 加一行，按下「-」钮，则会移除一行。 如果所有的逻辑判断都必须满足， 可以在「Satisfy」下拉选单中选择「Satisfy all of the following」 ， 就会以”and”来连结各个逻辑判断；若是选择「any」 ，则会以”or ” 来连结。
在逻辑判断中，检查值共有六种型态： * check state of - Checkbox 或 Radio Button Widget 的核取状态 * selected option of - Droplist 或 Listbox Widget 的选取值 * value of variable - 自定变数的值 * length of variable value - 自定变数值的长度 * text on widget - 输入在 Text Field 或 Text Area 中的文字 * length of widget value - 输入在 Text Field 或 Text Area 中的文字长度 3. 以 Condition Builder 建立逻辑判断 您可以自行建立一个 Case 的逻辑判断，比如： If text on Widget 帐号栏位 equals ‘guest’ and text on Widget 密码栏位 equals ‘12345′ “ （如果「帐号栏位」输入的是’guest’ ，而且「密码栏位」输入的是“12345” ） 这个逻辑判断将会在您操作 Prototype 时，自动判断是否要执行 Case 所指定的动作。 完成逻辑判断的设定之后，按下【OK】钮回到「Interaction Case Properties」视窗，就能指定当符合 这个 Case 的逻辑判断时，要执行哪些动作。 注意：当您增加 Case 的逻辑判断，Interactions 窗格中的 Case 名称后面会自动加入一个以“If” 开头 的逻辑判断描述。同时，这个 Case 的图示会变成绿色，强调这个 Case 使用了逻辑判断。
一旦在 Case 中定义了逻辑判断，同一个触发事件的其他 Case 名称后面，也会自动加入以“Else If” 开 头的逻辑判断描述。如果这些 Case 没有另外设定逻辑判断的话，那么就会直接标示“Else If True” 。 在预设的情况下，Prototype 只会执行第一个标示为”True” 的 Case。
在 Interactions 窗格中的案例上按下右键并选择「Change to IF」 ，可以将“Else If” 改为“If” ， 这么做将可允许在多个状况同时成立的情况下执行多个动作。 4. 秘技 Quick Tips 秘技 1. 为 Widget 命名： 为逻辑判断使用到的 Widget 命名，可以方便在建立逻辑判断时做识别。想要替 Widget 命名的话，只要 选择 Widget 并在 Annotations & Interactions 窗格中的「Label」栏位输入名称就可以了。 秘技 2. 绘制流程图： 逻辑判断和流程可以设计得十分复杂，建立一个流程图 (Flowchart)可以帮助您组织与传达使用者可能涉 及的各种动线。 (版权声明：欢迎引用及复制 Axure RP 中文教学内容，必须注明出处为悠识数位顾问有限公司及原始文 章网址 UserXper.

com)
Axure 高级互动设计 2——示范: 登入的逻辑判断
逻辑判断示范 以旅游网站的企划 (dc2a31b19e314332396893a7/blog/archives/36 ) 为例，说明「会员登入页面」如何应用 Condition Builder 建立逻辑判断。 这个会员登入要做到的功能是：如果登入成功（即帐号、密码输入正确） ，则导回首页，并显示招呼讯息。 如果登入失败（即帐号、密码输入不正确） ，则出现错误讯息。 来到旅游网站 Prototype 的「范例 2-进阶版首页」 ，点一下”登入”按钮，就进入会员登入的页面。设计 以下两种登入的操作状况： 状况 1 输入错误的密码：出现登入错误的讯息。 状况 2 输入正确的密码：登入成功之后，立即导回首页，并显示招呼讯息，同时将登入的文字连结变成登 出。
您可以用 Axure RP 绘制流程图(如下图)，来解释这个功能设计的逻辑判断。
接下来，开始设计页面的操作互动：
1) Widget 命名：针对操作相关的栏位、按钮、动态面板，在 Interactions 窗格的 Label 一一填入名称， 以利后续的设定识别。
2) 新增 Case：针对”登入”这个 Button Widget，在 Interactions 窗格中新增 OnClick (点击时触发) 的 Case，并在「Interaction Case Properties」视窗中点一下「Add Condition?」连结。
3) 设定 Condition： 在开启的 「Condition Builder」 视窗中， 您可以使用下拉选单建立如下的逻辑判断：
当您在设定时，下方的 Descritpion 区块会自动产生逻辑判断的描述： If text on widget Username Field equals “UserXper” and text on widget Password Field equals “12345” （如果「Username Field」输入的是“UserXper” ，而且「Password Field」输入的是“12345”。 ） 4) 选择 Action：按下「Condition Builder」视窗的【OK】钮，回到「Interaction Case Properties」 ， 再选择当符合这个逻辑判断时，所要执行的动作。比如：导回网站首页、显示招呼语，登入的文字连结变 为登出。 当您设定了 Case 的逻辑判断，您会发现 Interactions 窗格中的 Case 名称后面会自动加入一个以“If” 开头的逻辑判断描述。同时，这个 Case 的图示会变成绿色，强调这个 Case 使用了逻辑判断。 Axure RP Interactions De.ion 最后，实际完成的 Prototype 互动设计如下图动画：
Axure 之锚点跳转与 Title 提示
最近在做一个原型的时候用到锚点跳转与 Title 提示功能，同事看到 HTML 之后问我这个是怎么实现的； 昨天又看到一篇文章举了个注册表单中的 Title 提示示例，问这个是如何实现的，我才发现原来很多人都 忽视了 axure 中一个很常用的组件——图片/图像映射区域（image map region） 。
组件名称：image map region，图片/图像映射区域
组件介绍：在 web 页面中制造一片不可见的区域，相当于图片

的热区，从而添加说明与互动。在现 实的网页中经常会有一张大图中有某个区域是触发按钮，而图像映射区就可以用来说明这个区域的的功能 和互动内容。
可实现功能：链接的 Title 提示、图片的 Alt 提示、锚点跳转。类动态面板功能。
1、Title 提示和 Alt 提示功能实现
链接的 Title 提示和图片的 Alt 提示功能相对比较简单，其实只要简单说一下大家就都能明白了，只 是 了 。 平 时 没 有 注 意 罢
如上图所示，选择图像映射区域组件，覆盖在要映射的图像上方，右键点击“编辑工具提示” ，输入 Title 的文本内容，OK。
其中，是否给该控件加注标签为可选项，如果不加注标签，则系统默认名称为“unlabeled” ，不过， 如果你需要使用锚点跳转功能的话则需要加注标签，中英文皆可。因为你要指定锚点的跳转位置，这个位 置的判定就是以该标签的名称为准的。
PS：ALt 和 Title 提示这个功能也可以用动态面板来实现，不过比较笨重，需要设置 mouse on 和 mouse out 两个交互动作。
2、同一页面内锚点跳转
如上图所示，先在要加入锚点的地方添加一个图像映射区域（操作方法如例 1） ，这个图像映射区域必 须要加注标签；在要实现跳转的链接上加到交互动作，动作选 择：滚动到图片映射区域；然后选择你要跳 到的锚点位置，在下拉菜单中选择你刚才加注的那个标签名称；可以考虑选择滚动的方式；OK。
其中，必须要对图像映射区域加注标签；页面的长度一定要足够锚点跳转，如果页面不够长他跳了你 也看不到。
3、不同页面之间的锚点跳转
如上图所示，这里包含了 2 个方面的交互：A 页面的组件 a 的交互、B 页面（跳转到的页面）的页 面交互。这个过程中我们需要借助一个中间变量（新增的变量 1） 。
点击线框图，管理变量，新增一个变量（例如 1）——给锚点链接添加交互属性，也就是在离开页 面 A 的时候需要先给变量赋值——在跳转到的页面（B）中添加页面交互（在 OnPageLoad 中添加） ：滚 动到图片映射区域【注意，不是组件交互而是页面交互！，OK。 】
这个过程的流程是这样的：点击链接 a 的时候也带入了一个变量 1，当 a 动作完成后，如果在 B 页
面还存在满足变量 1 的交互动作则继续执行，滚动到图像映射区域。
4、不同页面之间的切换层状态锚点跳转
这个需求是这样的，点击页面 A 中的链接 a 跳转到页面 B 中 Tab 模块 T 中的第二个 tab 2 中。
实际实现原理还是一样的，只不过是在对页面 B 的页面交互条件中再添加一个“设置动态面板状态 跳转”就可以了，此时的条件变成同时满足：变量值为 1 and 设置动态面板状态

转换到 T 的 tab2 and 滚 动到图片映射区域。


本文来源：https://www.bwwdw.com/article/qxhl.html