Axure常用交互效果制作[2011-9-22]摘要：哈，这次就先分享这么多，希望大家能通过这两个小小的例子，能够更加熟悉Axure 中 Case Editor、Condition Builder 和 Set Value Editor 的使用方法如果有什么问题，欢迎大家交流指正 ~本文旨在分享一些在 Axure中，相对复杂但又常见的交互行为的制作方法，本期包含带提示的文本框 和拖拽效果1.带提示的文本框将提示信息放置于文本框内是一种常见的交互方式当文本框获得焦点时， 提示文字消失当文本框失去焦点时，提示文字重新显示出来现在就让我们看下这种控件的制作方法第一步:从widget库中拖出text field 控件双击控件在其中输入提示文字然后在 widgetproperties 面板里，为该 text field 写入标签：“ find people ”Find people第二步:双击widget properties 面板里的卜诂宀沦然后在打开的case editor中，点击Set设置如下图所示:Variable/Widgets value(s) 之后点击 Open Set Value Editortext on widget *find people■ equal tovalue点击“ OK"保存设置退出 Set Value Editor 和 Case Editor 。
第三步：双击widget properties 面板里的OnLcstFocu*，然后在打开的case editor中，点击Add Condition ，在 Condition Builder 里设置如下：「庖njth of widget 丫创诞 T 佃壮口品陣 *' I鸣倍歸th飭 ▼ I怕Ilk(该步骤的目的是，当用户在text field里面输入值之后，text field失去焦点时显示用 户输入的值，而不再显示提示文字)点击“ OK”保存设置并退出Condition Editor ，然后再Case Editor中，点击SetVariable/Widgets value(s) 之后点击 Open Set Value Editor 设置如下图所示：愴XT on Wid/t I tina psfipte ■ equal to 汩吹点击" OK"保存设置退出 Set Value Editor 和 Case Editor至此带提示的文本框的制作就结束了，按“ F5 "可在浏览器中查看效果2.拖拽在设计中应用拖拽，可以直观有趣的替代移动、复制、添加、删除等操作在 Axure中，拖拽效果的实现相对复杂。
具体如下：第一步:从widget库中拖出一个矩形，双击添加文字“拖拽物”在矩形上点击右键，选择Con vert -Con vert to Dyn amic Panel 然后在 widget properties 面板里，为该矩形写入标签：“拖拽物”第二步:中选择“交互选中该矩形，在软件右侧区域中的“组件属性 (Widgets Properties)(In teractio ns) "面板，双击“ On DragStaCase Editor 中设置如下：Step 1: DescriptionCase 1Add ConditionStep2: Add actionsStep 3: Organize actionsStep 4. C(Select th■ LinksOpen Link in Current Window□p-en Link in bleM' Windaw/TsbOptri Link in Popup rVindo VtOpen Link ir Parent -fVintiar,i□ow Current WindowOpen Link(Br in FrarneCs；Open Link in Pare nt Framej thn^rnit PanelsSet Panel stateis: to StatafEjShow Panels}Hide Panels}Toggle Visibility for Panel a]Mo;e Panfil s}[ 亦g咋n引⑸ A F「ont [Send Panels) to Back j VJidgets and VariablesSei Variable/Mdgei walue(s.Scroll to Image LI日p RegionEnable ■川id昶D«abl« V,idg&lisSet -.VidgetCs} ts Sslede-d State Set Focus on WidgetExpand Tre& Modei点击“ OK”后保存设置并退出Case Editor。
该步骤是为了保证在有多个拖拽物存在的 时候，被拖动的拖拽物总是在最前面，不会被其他的拖拽物所遮挡点击“ OK”后保存设置并退出Case Editor第三步:双击“ On Drag ”在Case Editor中设置如下:Step 1 D^scnpliDn 1 Add Ccndit cn3l弓p 2 Aid act km $Cla«Cwent Wlfidcw Open Lrikii)ifi Fiaiwis) Open Link in Pergnt Fra me■ D^noimij心 Pane IsSciPflFMtl 1o 3tate<31Shew Perfilfi)Hkl* Pauses}iD£gl» vitcMlcy fcr Pintl^f nr g »4n.t(5 ro Frcrf Sernd 刊哙林 * i o 3Q■ W1>ilyi*is 忖摘 冷HIE議 5etVaiiabh^ki^t>alucis> Scroll to Ina ye N ip Ptegicn 5詬怯 f7tiga(3t>Ditabln Wttg •如Set W-figcdL aJ 佃 Saloctcti 訣电忸 Set focus &n Wdg«t fckpind TrwCciept* ^r«» Ufrdtis.)J Miscfti*neousWdil Tli i?? I' l^OlhcrWt 咽 p J 01■。
昂 nizi?召匚 li nnsJ 託 Cue 1Slftp -4 Configure •冃idinnsiSelect the panels to nno'/e(Wove I tfritlh di&Q 書］Xi ||) y：〔Animae电伽色 ・注意此处在右下角的Move下拉菜单中默认是“ with drag "，也就是说拖拽物会完全跟随鼠标移动如果是选择with drag x "，则是跟随鼠水平）移动，垂直方向位置不变如果是选择with drag y "，则是跟随鼠标置）移动，水平方向位置不变第四步:双击“ OnDragDrop ”在Case Editor中设置如下:&：ep 1 Description Case 1 Add Condi onSi«p 2 Add deigns■w ' ^Jiin III ■ >■■ ft ■■ i rrw^W'"1ClcseCumsniwnaowOp«n UnkIB} n Frin#(«J■Open Lnk in Parent rrame4 Oynamitc ParaIicSot PimlSNwr PhRsKs)Hice Pan*il»Tog g Is 'vlsibilty lor 3nr cl(s£rmg Panel(B io Frart 5an-JP^nel(s Id E ackj Widgets snd 1/ariabNesSet Va ria.lbl&Y*Adg st vo. ue s) ScrQiito imam htau Rej ion Enable戕呼區 皿曲 c Widg?tl3i■Set A!Bdgp-( K：; to 百音 Feted 站貳事Set Facu3 gn Widjct EraardTrte 耳此电〔■〕 Colipt«Tr»« Neds t)■ 断冈C曰II副W»n ^fnei.nnsdttwrStep 3 Ckigdnize a匚ti^ns ji 畀 Cas-e IMove 植疫钿 wth dracStep 4 Configure actionsSelect :he panels to merveEj ffiSte (Dynamc Pan前 wrth d~egMaw [ x: |口 | y: |d |An(™：e non。
亍；=£ ..h■ > 产 j rri it&：ep 1 Description Case 1 Add Condi on&：ep 1 Description Case 1 Add Condi on注意此处在右下角的 Move下拉菜单中默认是“ to x,y beofore drag "，也就是说拖拽物在鼠标左键松开的时候，会回到起始位置如果此处选择“ with drag x "，则拖拽物停留于鼠标x轴坐标处如果是选择“ with drag y "，则拖拽物停留于鼠标的轴坐标处点击“ OK”后保存设置并退出Case EditorF5 ”可在浏览器中查看效果至此最简单的拖拽效果就已经实现了按“与在最后哈，这次就先分享这么多，希望大家能通过这两个小小的例子，能够更加熟悉 Axure中 Case Editor、Condition Builder 和 Set Value Editor 的使用方法如果有什么问题，欢迎大家交流指正 ~*玄已同步至 夏雨义的微博。