Axure交互设计教程:提示文本框和拖拽效果

Axure是现在交互设计师必不可少的交互原型设计工具,其实和任何一款工具一样,只要根据常用效果实例多练练,基本就会知道各个控件的使用。今天分享一些在Axure经常用到的交互实例:带提示的文本框和拖拽效果。
axure商城

Axure常用交互效果实例:提示文本框和拖拽效果

Axure是现在交互设计师必不可少的交互原型设计工具,其实和任何一款工具一样,只要根据常用效果实例多练练,基本就会知道各个控件的使用。今天分享一些在Axure经常用到的交互实例:带提示的文本框和拖拽效果。

实例下载:Axure常用交互效果实例

1.带提示的文本框

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

第一步:

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

第二步:

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

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

第三步:

双击widget properties面板里的OnLostFocus ,然后在打开的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”可在浏览器中查看效果,希望对各位有所帮助。

作者:leo

本文由 Axure中文网 作者:Axure中文网 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
15

评论:

8 条评论,访客:8 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. 母婴部落阁
    母婴部落阁发布于: 

    点击“OK”保存设置并退出Condition Editor,然后再Case Editor中,点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。找不到这个Open Set Value Editor 双击加载也没有楼主说的界面,请指导

  2. MILVUS
    MILVUS发布于: 

    Open Set Value Editor这个按钮老是找不到怎么办!!!!在线等!!急!!谢谢!!

  3. hellokit
    hellokit发布于: 

    实际模仿了一遍,发现当ondrag选择“拖动”时,则ondragdrop无论选择x或者y轴,被拖拽部件都是落在绝对位置上的。

  4. 车厘子
    车厘子发布于: 

    在Axure 6.5中,找不到length of widget value 这个,所以没实现保留用户输入内容的功能,请指教,谢谢!

    • vanilla
      vanilla发布于: 

      有的哦,不过我用的中文的~其实就是指这个元件的值,理解其意思,找到对应的,可能换了个名称

发表评论