Axure常用交互效果制作

本文旨在分享一些在Axure中，相对复杂但又常见的交互行为的制作方法，本期包含带提示的文本框和拖拽效果。

1.带提示的文本框

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

第一步：

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

第二步：

双击widget properties面板里的，然后在打开的case editor中，点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。 设置如下图所示：

点击“OK”保存设置退出Set Value Editor和Case Editor。

第三步：

双击widget properties面板里的，然后在打开的case editor中，点击Add Condition，在Condition Builder里设置如下：

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

点击“OK”保存设置并退出Condition Editor，然后再Case Editor中，点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。 设置如下图所示：

点击”OK”保存设置退出Set Value Editor和Case Editor。

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

2.拖拽

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

第一步：

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

第二步：

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

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

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

第三步：

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

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

第四步：

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

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

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

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

写在最后

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