科技网

当前位置: 首页 >IT

AXURE原型工具教程带提示的文本框和拖

IT
来源: 作者: 2019-01-10 16:06:46

本文旨在分享一些在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的使用方法。如果有什么问题,欢迎大家交流指正~

万众瞩目女妖新资料片结婚系统尝鲜登场
广东优化基本医疗卫生服务获民众认可
加部长更大投资预见性有助于中国经济增长

相关推荐