Aure常用交互效果制作.docx

Axure常用交互效果制作[2011-9-22]

摘要：哈，这次就先分享这么多，希望大家能通过这两个小小的例子，能够更加熟悉Axure中CaseEditor、ConditionBuilder和SetValueEditor的使用方法。如果有什么问题，欢迎大家交流指正~

本文旨在分享一些在Axure中，相对复杂但又常见的交互行为的制作方法，本期包含

带提示的文本框和拖拽效果。

带提示的文本框

将提示信息放置于文本框内是一种常见的交互方式。当文本框获得焦点时，提示文字消失。当文本框失去焦点时，提示文字重新显示出来。现在就让我们看下这种控件的制作方法。

第一步：

从widget库中拖出textfield控件。双击控件在其中输入提示文字。然后在widgetproperties面板里，为该textfield写入标签：“findpeople”。

第二步：

双击widgetproperties面板里的

双击widgetproperties面板里的

，然后在打开的caseeditor中，点击Set

Variable/Widgetsvalue(s)之后点击OpenSetValueEditor 。设置如下图所示：

双击widgetproperties面板里的，然后在打开的caseeditor中，点击点击“OK”保存设置退出SetValueEditor 和CaseEditor。

双击widgetproperties面板里的

，然后在打开的caseeditor中，点击

AddCondition，在ConditionBuilder里设置如下：

（该步骤的目的是，当用户在textfield里面输入值之后，textfield失去焦点时显示用户输入的值，而不再显示提示文字。）

点击“OK”保存设置并退出ConditionEditor，然后再CaseEditor中，点击SetVariable/Widgetsvalue(s)之后点击OpenSetValueEditor 。设置如下图所示：

点击”OK”保存设置退出SetValueEditor 和CaseEditor。

至此带提示的文本框的制作就结束了，按“F5”可在浏览器中查看效果~

拖拽

在设计中应用拖拽，可以直观有趣的替代移动、复制、添加、删除等操作。在Axure中，拖拽效果的实现相对复杂。具体如下：

第一步：

从widget库中拖出一个矩形，双击添加文字“拖拽物”。在矩形上点击右键，选择Convert–ConverttoDynamicPanel。然后在widgetproperties面板里，为该矩形写入标签：“拖拽物”。

第二步：

选中该矩形，在软件右侧区域中的“组件属性(WidgetsProperties)”中选择“交互(Interactions)”面板，双击“OnDragStart”,在CaseEditor中设置如下：

点击“OK”后保存设置并退出CaseEditor。该步骤是为了保证在有多个拖拽物存在的时候，被拖动的拖拽物总是在最前面，不会被其他的拖拽物所遮挡。

点击“OK”后保存设置并退出CaseEditor。第三步：

双击“OnDrag”,在CaseEditor中设置如下：

注意此处在右下角的Move下拉菜单中默认是“withdrag”，也就是说拖拽物会完全跟随鼠标移动。如果是选择“withdragx”，则是跟随鼠标x轴（水平）移动，垂直方向位置不变。如果是选择“withdragy”，则是跟随鼠标y轴（处置）移动，水平方向位置不变。

第四步：

双击“OnDragDrop”,在CaseEditor中设置如下：

注意此处在右下角的Move下拉菜单中默认是“tox,ybeoforedrag”，也就是说拖拽物在鼠标左键松开的时候，会回到起始位置。如果此处选择“withdragx”，则拖拽物停留于鼠标x轴坐标处。如果是选择“withdragy”，则拖拽物停留于鼠标的y轴坐标处。

点击“OK”后保存设置并退出CaseEditor。

至此最简单的拖拽效果就已经实现了。按“F5”可在浏览器中查看效果。

写在最后

哈，这次就先分享这么多，希望大家能通过这两个小小的例子，能够更加熟悉 Axure

题，欢迎大家交流指正~已同步至夏雨义的微博中CaseEditor、ConditionBuilder 和

题，欢迎大家交流指正~

已同步至夏雨义的微博