AxureRPPro中高级交互实例教程.pdf
《AxureRPPro中高级交互实例教程.pdf》由会员分享，可在线阅读，更多相关《AxureRPPro中高级交互实例教程.pdf（22页珍藏版）》请在冰点文库上搜索。
Axure中级互动设计1控制DynamicPanal1.AxureRP实现更丰富的互动设计实现更丰富的互动设计网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。
不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA（RichInternetApplication）的技术，能够让网站介面更丰富，展现更优质的人机互动。
同时，这个趋势也挑战了传统的文书软体或绘图软体，当这些软体受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的互动方式表达清楚并设计出来。
AxureRP与其他的wireframe软体，最大的差异在于能够进行互动设计（InteractionDesign），且可以立即将结果呈现于prototype上，而不是只有文字叙述。
更棒的一点是，学习AxureRP的互动设计，您并不需要学习HTML或JavaScript语法，只要透过一些设定与操作，便可以完成多样而创新的互动介面设计。
在AxureRP设计出来的Prototype中，最简单的互动设计是网页连结，透过滑鼠的click来串起使用者与网站的互动流程。
然而，真正发挥AxureRP在互动设计上的惊人特色，并不是只有连结这么简单的互动，您可以藉由学习DynamicPanel（动态面板）物件的操作与控制，来做到更丰富更友善的互动介面设计。
2.认识认识DynamicPanelWidgetDynamicPanel（动态面板）这种物件是专门用在设计Prototype动态功能的Widget，DynamicPanel可以包含一或多个状态（State），每个状态本身是一个小页面，藉由控制状态（State）的顺序或隐藏/显示DynamicPanel来达成互动介面的整个表现。
就像其他Widget一样，DynamicPanel可以用拖放的方式从Wireframe窗格加入到画布中。
学习DynamicPanel的互动设计之前，有2个重要的概念必须先认识：
（1）DynamicPanel（动态面板）：
一种透明的物件，本身可以包含很多个状态（State），而每个状态都是一个小网页。
被放置在最上层的状态就是该面板的长相。
（2）State（状态）：
每个状态都是一个小网页，而这个小网页的边界与大小，与所属的DynamicPanel大小相同。
不同的State可以重叠在同一个DynamicPanel里头，唯有被控制放在最上层的State，才会呈现于Prototype的画面中。
以AxureRP所设计出来的多样互动介面，大多藉由各种触发事件（Event）来控制DynamicPanel显示或消失，或控制哪个State在最上层来模拟出实际的互动介面。
3.编辑编辑DynamicPanel的的State（状态状态）已经摆放到画布中的DynamicPanel，直接在上头快速点滑鼠左键两下，会开启DynamicPanelStateManager对话方块。
在这个对话视窗中，您可以新增State、更改State名称、调整State排序、移除State与编辑State。
在DynamicPanelStateManager对话方块中选择一个PanelState，然后按下【EditState】钮，会开启这个PanelState的Wireframe以供设计。
或者您可以选择【EditAllStates】钮，一口气把所有的状态页面通通开启。
开启后，您就可以像设计其他Wireframe一样的设计状态页面（State），每个状态页面的侧边蓝色虚线外框就表示DynamicPanel的边界。
4.预设预设DynamicPanel的显示的显示/隐藏隐藏DynamicPanel可以预设为隐藏（Hidden），作法是在DynamicPanel物件上按滑鼠右键，并选择EditDynamicPanel-SetHidden，这样就可以隐藏Panel的内容，而且DynamicPanel的遮罩也会从蓝色变成黄色。
已经预设隐藏的DynamicPanel，可以选择EditDynamicPanel-SetVisible来显示DynamicPanel。
DynamicPanel可以藉由接下来所介绍的互动模式，动态控制在Prototype中的显示或隐藏。
AxureRP提供互动设计的实现方式，都在InteractionCaseProperties对话方块中设定（请参考初级互动设计）。
其中有5种互动方式（Action）是专门用来控制DynamicPanel的，分别是:
*SetPanelstate（s）toState（s）：
将某个DynamicPanel的State设定为该Panel的显示状态*ShowPanel（s）：
显示（设为visible）一或多个DynamicPanel*HidePanel（s）：
隐藏一或多个DynamicPanel*ToggleVisibilityforPanel（s）：
根据目前的显示状态来显示或隐藏DynamicPanel*MovePanel（s）：
移动DynamicPanel，可根据绝对座标或相对座标来移动5.示范示范-以以Click来开关来开关DynamicPanel要了解DynamicPanel的互动控制，我们先来模拟一个Click的效果-当滑鼠Click页面上的矩形时，会出现一个讯息视窗，再Click一次时，又把讯息视窗隐藏起来。
换句话说，我们将藉由滑鼠Click来控制DynamicPanel的显示与隐藏。
首先我们先在画布上放一个矩形物件。
接下来放置一个DynamicPanel，并且编辑这个Panel唯一的预设状态（State1）。
在State1（状态）的wireframe上，随意加入一些文字，以供辨认。
再把DynamicPanel的显示状态，设定为隐藏（Hidden）。
然后，在矩形物件上增加一个OnClick的InteractionCase。
先选择矩形物件，接着click两下“OnClick”，弹出InteractionCaseProperties互动设计的对话方块。
分别针对这个对话方块中的Step1-3做互动设计的设定：
step1:
Description-预设为Case1，不用变更。
step2:
SelectActions-勾选ToggleVisibilityforPanel（s），此时在step3会出现ToggleVisibilityforPanel。
如下图：
step3:
EdittheActiondescription（clickanunderlinedvaluetoedit）-这句话的意思是，去点选有加底线的项目进一步编辑。
于是我们接着clickPanel这个单字，然后会看到弹出一个SelectPanels对话方块，里头只有一个叫做”MyFirstPanel”的项目，把它勾选起来。
此时在step3会出现ToggleVisibilityforMyFirstPanel。
（如下图）如果您曾经给DynamicPanel有意义的名称，就可以在SelectPanel时看到被您命名过的Panel。
选择DynamicPanel时，DynamicPanel会以Annotations&Interactions窗格中所给予的Label做为识别，如果没有指定的话，DynamicPanel会预设标示为”Unlabeled”。
接下来，就可以输出Prototype了，按下F5或选择GeneratePrototype，将刚刚设计过的简易互动介面，输出到浏览器上进一步检视，当滑鼠click时，您所设计的那个DynamicPanel是否会消失/出现（如下图）。
当您顺利完成这个DynamicPanel的设定之后，非常恭喜！
您已经成功进阶到AxureRP中级互动设计了，随着DynamicPanel的各种互动设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的互动介面。
Axure中级互动设计2鼠标移入移出等的互动设计1.滑鼠移入移出滑鼠移入移出（OnMouseEnter/OnMouseOut）在先前初级互动设计（BasicInteraction）一章中，介绍多种AxureRP支援的人机介面互动效果。
这里我们要介绍其中两个常见的触发事件（Event）：
OnMouseEnter-滑鼠的指标移动到物件之上OnMouseOut-滑鼠的指标移动出物件之外有许多Widget可以使用OnMouseEnter和OnMouseOut触发事件，当滑鼠移到Widget上时会触发OnMouseEnter事件，OnMouseOut事件则发生在滑鼠离开Widget时被触发。
最常见的运用方式，则是合并DynamicPanel来控制比较复杂的功能时，例如：
浮动选单、滑过特效和自订tooltips等。
以左图的互动效果来当例子：
当滑鼠移到图片上方时，会自动弹出说明文字框（DynamicPanel），当滑鼠移出图片时，说明文字框就会消失。
这个互动设计就可透过OnMouseEnter和OnMouseOut触发事件结合DynamicPanel的控制来达成，设计方式如下图所示。
2.变换图像变换图像（RolloverImage）ImageWidget以及ButtonShapeWidget可直接利用AxureRP的功能来设计RolloverImage和RolloverStyle，不需要使用到OnMouseEnter、OnMouseOut和DynamicPanel。
变换图像（RolloverImage）想要建立变换影像的话，请在ImageWidget上按右键，选择EditImage-ImportRolloverImage，然后选择一个影像当作变换影像，一旦影像选定后，您可以在Wireframe中，利用滑鼠滑过影像上的黑白色方块来预览变换影像。
3.变换样式变换样式（RolloverStyle）在AxureRP里头，Rectangle，Placeholder，ButtonShape这三种Widget可以直接设定变换样式（RolloverStyle），而不需要去特别指定OnMouseEnter/OnMouseOut的触发事件，就可以做到变换样式。
想要建立变换样式的话，请在Rectangle/Placeholder/ButtonShape上按右键，选择EditEditButtonShape-EditRolloverStyle。
此时会开启SetRolloverStyle对话方块，您可以在这里选择变换样式，勾选Preview核取方块来预览设定在ButtonShape的变换样式。
变换的样式（如下图）包括：
*字型Font*字体大小FontSize*粗体Bold*斜体Italic*底线Underline*文字颜色FontColor*填色FillColor*线条颜色LineColor*线宽LineWidth*线条样式LineStyle套用了变换样式之后，您可以选择Preview提早预览效果。
也可以在Wireframe中，利用滑鼠滑过Widget左上角的黑白色方块来预览变换状态。
Axure中级互动设计3设计多层选单1.认识选单物件认识选单物件（MenuWidget）选单物件（Menuwidgets）常被用来建立简单的多层选单（FlyoutMenus）。
您可以在Widgets窗格中找到两种选单物件：
*Menu（Vertical）-垂直选单*Menu（Horizontal）-水平选单将你所需要的选单物件从Widgets窗格中拖曳到Wireframe就可轻松建立，新的选单会先设置3个选单选项（MenuItem）。
下图展示的动画则是已经完成设定的多层选单：
2.编辑选单物件编辑选单物件编辑选单和选单项目的文字与格式的方法就像编辑其他Widget一样，您可以在选单项目上连续按鼠左键两下编辑文字，也可以利用工具列来编辑选单和选单项目的色彩、字型和其他样式。
选单物件的编辑功能有这些项目：
*EditMenuPadding-选项间距设定*EditRolloverStyle-设定变换样式*AddMenuItemAfter-往后新增选项*AddMenuItemBefore-往前新增选项*DeleteMenuItem-删除选项*AddSubmenu-新增子选单（如果已经有子选单，则会显示DeleteSubmenu-删除子选单）在MenuWidget的选项上，按滑鼠右键会出现如下图功能选单：
增加或移除选单项及子选单想要增加或移除选单项目的话，请在选单项目上按滑鼠右键，选择AddMenuItem和DeleteMenuItem指令。
想要在选单项目下加入子选单的话，请在选单项目上按滑鼠右键，选择AddSubmenu。
在AxureRP的画布区域，通常Submenu会自动缩回，要去点一下上层选单，才能再看到前新增的Submenu。
如下动画：
设定选项间距（Padding）若是想要编辑选单项目之间的间距（Padding），请在选单或选单项目上按滑鼠右键，选择EditMenuPadding。
3.设定选单的变换样式设定选单的变换样式（RolloverStyle）就像ButtonShapeWidget一样，变换样式（RolloverStyle）也可套用在MenuWidget的选单项目上。
想要编辑选单的变换样式，请在选单或选单项目上按滑鼠右键，选择EditRolloverStyle，此时会开启SetRolloverStyle对话方块，您可以在这里选择单一选单项目、选单上的所有选单项目，或是选单和子选单上的所有选单项目的变换样式。
勾选Preview核取方块来预览套用在选单上的变换样式。
套用了变换样式之后，您可以在Wireframe中，利用滑鼠滑过选单项目左上角的黑白色方块来预览变换样式。
4.秘技秘技（QuickTips）秘技1.优先设定母选单（RootMenu）的样式：
当子选单（Submenu）建立了以后，会自动套用母选单（RootMenu）的样式，您可以在建立子选单之前先将母选单样式设好，以节省时间。
（版权声明：
欢迎引用及复制AxureRP中文教学内容，必须注明出处为悠识数位顾问有限公司及原始文章网址UserX）Axure高级互动设计1设定逻辑条件1.认识认识Condition（逻辑判断逻辑判断）虽然可以用文字来描述Prototype操作的动线或互动方式，但有的时候，您还是会需要一个更逼真（HighFidelity）、更互动、更有亲和力的Prototype。
比如，当您在操作Prototype，模拟会员登入帐号，如果能在按下登入按钮时，直接显示登入成功或失败的讯息。
是不是比您口头解说或文字描述，还要来得清楚明白呢？
在AxureRP的互动设计中，逻辑判断是最有挑战性，但是也最有趣的一件事情。
因为当您在设计网站Prototype时，可以不用寻求程式设计师或Flash设计师的协助，就可以独立完成您想要表达的互动效果。
清楚的逻辑观念胜过互动设计技巧学习AxureRP的条件逻辑设计之前，您必须先知道一个重要的观念：
成为称职的网站企划人员，不一定要学会AxureRP的高级互动设计技巧，却一定要有清楚的逻辑观念。
否则，不只造成网站开发工作上的困扰，更严重的还会造成糟糕的网站使用者经验。
只有清楚的逻辑观念，才能带来准确合理的互动设计。
如果您不想学这些高级互动设计技巧，绝对无损于您利用AxureRP进行网站企划及Prototype设计。
换言之，即使您学会AxureRP的高级互动设计，但是您的逻辑观念如果不清楚，仍然无法成为一位优秀的网站企划。
要是您希望将Prototype拿来进行UsabilityTest，或者在各种沟通讨论会议上，让大家更充分理解操作的互动效果，那么透过AxureRP提供的逻辑判断设定，可以让Prototype更进一步接近真实完成的网站介面与动线。
物件值（ValueofWidget）/变数值（ValueofVariable）接下来，您要学习使用变数值/物件值，这两种类型的数值应用于逻辑判断：
a.物件值（ValueofWidget）-使用Widget本身的值来进行逻辑判断，有4种不同的数值可供应用：
*Checkbox或RadioButton的核取状态*Droplist或Listbox的选取值*TextField或TextArea中的文字*TextField或TextArea的文字的长度b.变数值（ValueofVariable）-使用自定变数的值来进行逻辑判断，有2种：
*valueofvariable-自定变数的值*lengthofvariablevalue-自定变数值的长度附带补充，AxureRP本身存在一个全域预设变数（GlobalDefaultVariable）-OnLoadVariable，除此之外，变数名称可以自订，最多可以有25个自订变数。
您可以透过主选单WireframeManageVariables来检视并编辑所有的自订变数。
您可以在Prototype设计里，将物件值及变数值的逻辑判断加入互动设计，在操作Prototype时，将会根据WebFormWidget所输入的数值，或是变数的值来进行判断。
比如，当使用者登入帐号时，自动检查输入的帐号或密码，登入成功则导到欢迎页面，登入失败则显示错误讯息。
表单型态的物件（WebFormWidgets）由于逻辑判断牵涉到不同物件值的判断，因此经常与表单型态的物件结合运用。
AxureRP的表单型态的物件（WebFormWidgets）如下图。
2.认识认识ConditionBuilder（逻辑判断编辑器逻辑判断编辑器）如果您具有程式设计的基础，要学习AxureRP的变数或逻辑判断，一点都不困难。
毕竟AxureRP不是程式开发工具，并没有太多的程式语言要学习。
为了让没有程式设计基础的AxureRP使用者也可以设计逻辑判断，因此AxureRP透过三个不同的功能视窗，来协助使用者设定变数以及逻辑判断，这些功能视窗包括：
*AnnotationandInteractions（互动设计）*InteractionCaseProperties（互动状况设定器）*ConditionBuilder（逻辑判断编辑器）这三个功能视窗的关连及开启顺序如下图：
为了让没有程式设计基础的AxureRP使用者也可以设计逻辑判断，因此AxureRP透过三个不同的功能视窗，来协助使用者设定变数以及逻辑判断，这些功能视窗包括：
其中，AnnotationandInteractions，以及，InteractionCaseProperties，这二个视窗在学习初级互动设计就使用到了。
只有ConditionBuilder对话窗对于学习高级互动设计的人是陌生的，我们就来认识一下这个特殊的功能。
ConditionBuilder逻辑判断编辑器的操作介面ConditionBuilder是用来设定逻辑判断的工具，只要透过下拉选单及一些按键，就可以完成一长串复杂的逻辑判断叙述，不需记忆，也不用自行撰写逻辑判断程式。
您可以在InteractionsCaseProperties视窗的右上角，点一下AddCondition（或EditCondition）的文字连结，就会开启ConditionBuilder视窗。
在ConditionBuilder视窗中，可以建立一行或多行的逻辑判断，只要按下右方的钮，就可以增加一行，按下-钮，则会移除一行。
如果所有的逻辑判断都必须满足，可以在Satisfy下拉选单中选择Satisfyallofthefollowing，就会以”and”来连结各个逻辑判断；若是选择any，则会以”or”来连结。
在逻辑判断中，检查值共有六种型态：
*checkstateof-Checkbox或RadioButtonWidget的核取状态*selectedoptionof-Droplist或ListboxWidget的选取值*valueofvariable-自定变数的值*lengthofvariablevalue-自定变数值的长度*textonwidget-输入在TextField或TextArea中的文字*lengthofwidgetvalue-输入在TextField或TextArea中的文字长度3.以以ConditionBuilder建立逻辑判断建立逻辑判断您可以自行建立一个Case的逻辑判断，比如：
IftextonWidget帐号栏位equalsguestandtextonWidget密码栏位equals12345（如果帐号栏位输入的是guest，而且密码栏位输入的是“12345”）这个逻辑判断将会在您操作Prototype时，自动判断是否要执行Case所指定的动作。
完成逻辑判断的设定之后，按下【OK】钮回到InteractionCaseProperties视窗，就能指定当符合这个Case的逻辑判断时，要执行哪些动作。
注意：
当您增加Case的逻辑判断，Interactions窗格中的Case名称后面会自动加入一个以“If”开头的逻辑判断描述。
同时，这个Case的图示会变成绿色，强调这个Case使用了逻辑判断。
一旦在Case中定义了逻辑判断，同一个触发事件的其他Case名称后面，也会自动加入以“ElseIf”开头的逻辑判断描述。
如果这些Case没有另外设定逻辑判断的话，那么就会直接标示“ElseIfTrue”。
在预设的情况下，Prototype只会执行第一个标示为”True”的Case。
在Interactions窗格中的案例上按下右键并选择ChangetoIF，可以将“ElseIf”改为“If”，这么做将可允许在多个状况同时成立的情况下执行多个动作。
4.秘技秘技QuickTips秘技1.为Widget命名：
为逻辑判断使用到的Widget命名，可以方便在建立逻辑判断时做识别。
想要替Widget命名的话，只要选择Widget并在Annotations&Interactions窗格中的Label栏位输入名称就可以了。
秘技2.绘制流程图：
逻辑判断和流程可以设计得十分复杂，建立一个流程图（Flowchart）可以帮助您组织与传达使用者可能涉及的各种动线。
（版权声明：
欢迎引用及复制AxureRP中文教学内容，必须注明出处为悠识数位顾问有限公司及原始文章网址UserX）Axure高级互动设计2示范:
登入的逻辑判断逻辑判断示范逻辑判断示范：
以旅游网站的企划（http:
/ConditionBuilder建立逻辑判断。
这个会员登入要做到的功能是：
如果登入成功
升级会员 