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实现更丰富互动设计
网站开发技术越越丰富正历程未趋势
AJAXJavaScript甚 FlashSilverlightJavaFX类RIA(Rich Internet Application)技术够网站介面更丰富展现更优质机互动
时趋势挑战传统文书软体绘图软体软体受限仅表现单画面单状态情况您难心目中友善互动方式表达清楚设计出
Axure RPwireframe软体差异够进行互动设计(Interaction Design)立结果呈现prototype文字叙述更棒点学Axure RP互动设计您需学HTMLJava Script语法透设定操作便完成样创新互动介面设计
Axure RP设计出Prototype中简单互动设计网页连结透滑鼠click串起者网站互动流程然真正发挥Axure RP互动设计惊特色连结简单互动您藉学Dynamic Panel (动态面板)物件操作控制做更丰富更友善互动介面设计
2 认识Dynamic Panel Widget
Dynamic Panel (动态面板) 种物件专门设计Prototype动态功WidgetDynamic 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 StateWireframe供设计者您选择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 PanelState设定该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)
然矩形物件增加OnClickInteraction 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
接输出PrototypeF5选择「Generate > Prototype」刚刚设计简易互动介面输出浏览器进步检视滑鼠click时您设计Dynamic Panel否会消失出现(图)
您利完成 Dynamic Panel设定非常恭喜您已成功进阶Axure RP中级互动设计
着Dynamic Panel种互动设计技巧熟练您越越心欲设计出种丰富兼具创意互动介面
Axure中级互动设计2—鼠标移入移出等互动设计
1 滑鼠移入移出(OnMouseEnterOnMouseOut)
2 变换图(Rollover Image)
3 变换样式(Rollover Style)
1 滑鼠移入移出(OnMouseEnterOnMouseOut)
先前初级互动设计(Basic Interaction)章中介绍种Axure RP支援机介面互动效果里介绍中两常见触发事件 (Event)：
OnMouseEnter 滑鼠指标移动物件
OnMouseOut 滑鼠指标移动出物件外
许WidgetOnMouseEnter 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 ImageRollover Style需OnMouseEnterOnMouseOutDynamic Panel
变换图(Rollover Image)
想建立变换影话请Image Widget右键选择「Edit Image>Import Rollover Image」然选择影作变换影旦影选定您Wireframe中利滑鼠滑影黑白色方块预览变换影
3 变换样式(Rollover Style)
Axure RP里头RectanglePlaceholderButton 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 设定选单变换样式 (Rollover 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 中文教学容必须注明出处悠识数位顾问限公司原始文章网址UserXpercom)
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种数值供应：
* CheckboxRadio Button核取状态
* Droplist Listbox选取值
* Text FieldText Area中文字
* Text FieldText 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 InteractionsInteraction 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 CheckboxRadio Button Widget核取状态
* selected option of Droplist Listbox Widget选取值
* value of variable 定变数值
* length of variable value 定变数值长度
* text on widget 输入Text FieldText Area中文字
* length of widget value 输入Text FieldText 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 中文教学容必须注明出处悠识数位顾问限公司原始文章网址UserXpercom)
Axure高级互动设计2——示范 登入逻辑判断
逻辑判断示范
旅游网站企划 (httpuserxpercomblogarchives36 ) 例说明「会员登入页面」应Condition Builder建立逻辑判断
会员登入做功：果登入成功（帐号密码输入正确）导回首页显示招呼讯息果登入失败（帐号密码输入正确）出现错误讯息
旅游网站Prototype「范例2进阶版首页」点登入钮进入会员登入页面设计两种登入操作状况：
状况1 输入错误密码：出现登入错误讯息
状况2 输入正确密码：登入成功立导回首页显示招呼讯息时登入文字连结变成登出
您Axure RP绘制流程图(图)解释功设计逻辑判断
接开始设计页面操作互动：
1) Widget命名：针操作相关栏位钮动态面板Interactions窗格Label填入名称利续设定识
2) 新增Case：针登入Button WidgetInteractions窗格中新增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 Deion
实际完成Prototype互动设计图动画：
Axure锚点跳转Title提示
做原型时候锚点跳转Title提示功事HTML问实现昨天篇文章举注册表单中Title 提示示例问实现发现原忽视axure中常组件——图片图映射区域（image map region）
组件名称：image map region图片图映射区域
组件介绍：web页面中制造片见区域相图片热区添加说明互动现实网页中常会张图中某区域触发钮图映射区说明区域功互动容
实现功：链接Title提示图片Alt提示锚点跳转类动态面板功
1Title提示Alt提示功实现
链接Title提示图片Alt提示功相较简单实简单说家明白时没注意罢
图示选择图映射区域组件覆盖映射图方右键点击编辑工具提示输入Title文容OK
中否该控件加注标签选项果加注标签系统默认名称unlabeled果需锚点跳转功话需加注标签中英文皆指定锚点跳转位置位置判定该标签名称准
PS：ALtTitle提示功动态面板实现较笨重需设置mouse onmouse out两交互动作
2页面锚点跳转
图示先加入锚点方添加图映射区域（操作方法例1）图映射区域必须加注标签实现跳转链接加交互动作动作选
择：滚动图片映射区域然选择跳锚点位置拉菜单中选择刚加注标签名称考虑选择滚动方式OK
中必须图映射区域加注标签页面长度定足够锚点跳转果页面够长跳
3页面间锚点跳转
图示里包含2方面交互：A页面组件a交互B页面（跳转页面）页面交互程中需助中间变量（新增变量1）
点击线框图理变量新增变量（例1）——锚点链接添加交互属性离开页面A时候需先变量赋值——跳转页面（B）中添加页面交互（OnPageLoad中添加）：滚动图片映射区域注意组件交互页面交互OK
程流程样：点击链接a时候带入变量1a动作完成果B页面存满足变量1交互动作继续执行滚动图映射区域
4页面间切换层状态锚点跳转
需求样点击页面A中链接a跳转页面B中Tab模块T中第二tab 2中
实际实现原理样页面B页面交互条件中添加设置动态面板状态跳转时条件变成时满足：变量值1 and 设置动态面板状态转换Ttab2 and 滚动图片映射区域
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
控制Dynamic Panel
1 Axure RP实现更丰富互动设计
2 认识Dynamic Panel Widget
3 编辑Dynamic Panel 状态
4 预设Dynamic Panel显示隐藏
5 示范Click开关Dynamic Panel
6 教学影片
1 Axure RP实现更丰富互动设计
网站开发技术越越丰富正历程未趋势
AJAXJavaScript甚 FlashSilverlightJavaFX类RIA(Rich Internet Application)技术够网站介面更丰富展现更优质机互动
时趋势挑战传统文书软体绘图软体软体受限仅表现单画面单状态情况您难心目中友善互动方式表达清楚设计出
Axure RPwireframe软体差异够进行互动设计(Interaction Design)立结果呈现prototype文字叙述更棒点学Axure RP互动设计您需学HTMLJava Script语法透设定操作便完成样创新互动介面设计
Axure RP设计出Prototype中简单互动设计网页连结透滑鼠click串起者网站互动流程然真正发挥Axure RP互动设计惊特色连结简单互动您藉学Dynamic Panel (动态面板)物件操作控制做更丰富更友善互动介面设计
2 认识Dynamic Panel Widget
Dynamic Panel (动态面板) 种物件专门设计Prototype动态功WidgetDynamic 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 StateWireframe供设计者您选择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 PanelState设定该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)
然矩形物件增加OnClickInteraction 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
接输出PrototypeF5选择「Generate > Prototype」刚刚设计简易互动介面输出浏览器进步检视滑鼠click时您设计Dynamic Panel否会消失出现(图)
您利完成 Dynamic Panel设定非常恭喜您已成功进阶Axure RP中级互动设计
着Dynamic Panel种互动设计技巧熟练您越越心欲设计出种丰富兼具创意互动介面
Axure中级互动设计2—鼠标移入移出等互动设计
1 滑鼠移入移出(OnMouseEnterOnMouseOut)
2 变换图(Rollover Image)
3 变换样式(Rollover Style)
1 滑鼠移入移出(OnMouseEnterOnMouseOut)
先前初级互动设计(Basic Interaction)章中介绍种Axure RP支援机介面互动效果里介绍中两常见触发事件 (Event)：
OnMouseEnter 滑鼠指标移动物件
OnMouseOut 滑鼠指标移动出物件外
许WidgetOnMouseEnter 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 ImageRollover Style需OnMouseEnterOnMouseOutDynamic Panel
变换图(Rollover Image)
想建立变换影话请Image Widget右键选择「Edit Image>Import Rollover Image」然选择影作变换影旦影选定您Wireframe中利滑鼠滑影黑白色方块预览变换影
3 变换样式(Rollover Style)
Axure RP里头RectanglePlaceholderButton 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 设定选单变换样式 (Rollover 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 中文教学容必须注明出处悠识数位顾问限公司原始文章网址UserXpercom)
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种数值供应：
* CheckboxRadio Button核取状态
* Droplist Listbox选取值
* Text FieldText Area中文字
* Text FieldText 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 InteractionsInteraction 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 CheckboxRadio Button Widget核取状态
* selected option of Droplist Listbox Widget选取值
* value of variable 定变数值
* length of variable value 定变数值长度
* text on widget 输入Text FieldText Area中文字
* length of widget value 输入Text FieldText 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 中文教学容必须注明出处悠识数位顾问限公司原始文章网址UserXpercom)
Axure高级互动设计2——示范 登入逻辑判断
逻辑判断示范
旅游网站企划 (httpuserxpercomblogarchives36 ) 例说明「会员登入页面」应Condition Builder建立逻辑判断
会员登入做功：果登入成功（帐号密码输入正确）导回首页显示招呼讯息果登入失败（帐号密码输入正确）出现错误讯息
旅游网站Prototype「范例2进阶版首页」点登入钮进入会员登入页面设计两种登入操作状况：
状况1 输入错误密码：出现登入错误讯息
状况2 输入正确密码：登入成功立导回首页显示招呼讯息时登入文字连结变成登出
您Axure RP绘制流程图(图)解释功设计逻辑判断
接开始设计页面操作互动：
1) Widget命名：针操作相关栏位钮动态面板Interactions窗格Label填入名称利续设定识
2) 新增Case：针登入Button WidgetInteractions窗格中新增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 Deion
实际完成Prototype互动设计图动画：
Axure锚点跳转Title提示
做原型时候锚点跳转Title提示功事HTML问实现昨天篇文章举注册表单中Title 提示示例问实现发现原忽视axure中常组件——图片图映射区域（image map region）
组件名称：image map region图片图映射区域
组件介绍：web页面中制造片见区域相图片热区添加说明互动现实网页中常会张图中某区域触发钮图映射区说明区域功互动容
实现功：链接Title提示图片Alt提示锚点跳转类动态面板功
1Title提示Alt提示功实现
链接Title提示图片Alt提示功相较简单实简单说家明白时没注意罢
图示选择图映射区域组件覆盖映射图方右键点击编辑工具提示输入Title文容OK
中否该控件加注标签选项果加注标签系统默认名称unlabeled果需锚点跳转功话需加注标签中英文皆指定锚点跳转位置位置判定该标签名称准
PS：ALtTitle提示功动态面板实现较笨重需设置mouse onmouse out两交互动作
2页面锚点跳转
图示先加入锚点方添加图映射区域（操作方法例1）图映射区域必须加注标签实现跳转链接加交互动作动作选
择：滚动图片映射区域然选择跳锚点位置拉菜单中选择刚加注标签名称考虑选择滚动方式OK
中必须图映射区域加注标签页面长度定足够锚点跳转果页面够长跳
3页面间锚点跳转
图示里包含2方面交互：A页面组件a交互B页面（跳转页面）页面交互程中需助中间变量（新增变量1）
点击线框图理变量新增变量（例1）——锚点链接添加交互属性离开页面A时候需先变量赋值——跳转页面（B）中添加页面交互（OnPageLoad中添加）：滚动图片映射区域注意组件交互页面交互OK
程流程样：点击链接a时候带入变量1a动作完成果B页面存满足变量1交互动作继续执行滚动图映射区域
4页面间切换层状态锚点跳转
需求样点击页面A中链接a跳转页面B中Tab模块T中第二tab 2中
实际实现原理样页面B页面交互条件中添加设置动态面板状态跳转时条件变成时满足：变量值1 and 设置动态面板状态转换Ttab2 and 滚动图片映射区域
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档