首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 范文大全 > 正文

    Axure交互效果实例：提示文本框和拖拽效果_实际应用中交互设备整合应用的实例

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站
    Axure交互效果实例：提示文本框和拖拽效果1

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

    实例下载：Axure常用交互效果实例.rar

    1.带提示的文本框

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

    第一步：

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

    Axure交互效果实例：提示文本框和拖拽效果2

    第二步：

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

    Axure交互效果实例：提示文本框和拖拽效果3

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

    第三步：

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

    Axure交互效果实例：提示文本框和拖拽效果4

    (该步骤的目的是，当用户在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中设置如下：

    Axure交互效果实例：提示文本框和拖拽效果5

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

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

    第三步：

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

    Axure交互效果实例：提示文本框和拖拽效果6

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

    第四步：

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

    Axure交互效果实例：提示文本框和拖拽效果7

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

    点击“OK”后保存设置并退出Case Editor，按“F5”可在浏览器中查看效果，希望对各位有所帮助。

    作者：leo

    文章来源：365ucd.com

    • Axure交互效果实例：提示文本框和拖拽效果_实际应用中交互设备整合应用的实例 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文Axure交互效果实例：提示文本框和拖拽效果_实际应用中交互设备整合应用的实例由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.