Axure 7.0清空输入框效果

本文中介绍这种带清空键的搜索框的设计思路和制作方法,供大家参考。
我们先来分析一下这种搜索框的交互逻辑。搜索框在获得和失去焦点时,清空键都将被隐藏;在搜索框中输入文字时,清空键将被显示,点击清空键,搜索框中文字被清空。

 

第一步:设置Text Field控件和Image控件

Widgets库中分别将Text Field控件和Image控件拖到工作区域,然后在Widget Properties面板里,分别将两个控件的标签命名为:Text Field_SearchImage_Clear。如下图所示:

69cecf07gc62a2e8c7924amp69

第二步:设置清空键的三种交互状态

双击Image_Clear控件,添加灰色图片作为清空键的默认状态,右键点击Image_Clear控件,在列表中分别选择Edit Image中的Edit Rollover ImageEdit Mouse Down Image,通在打开的设置对话框中,添加红色图片和黑色图片分别作为清空键的悬停状态和鼠标按下状态后进行保存。如下图所示:

69cecf07g7a376ddae781amp69

 

第三步:设置“点击清空键,搜索框中文字被清空”的交互行为

选中Image_Clear,在Widget Properties面板里,双击OnClick,打开Case Editor对话框之后,添加Set Variable/Widgets value(s)行为,然后点击Open Set Value Editor打开行为配置对话框,进行如下图所示的设置:

69cecf07gc62a37e82f23amp69

完成上面后不要退出Case Editor对话框,这里还需要添加Set Focus to Widget行为,并在Configure Actions中勾选Text Field_Search(Text Field)后进行保存。如下图所示:

69cecf07gc62a3abc1b86amp69

PS: 为什么在文字被清空后要将焦点给到搜索框,感兴趣的朋友可以去思考一下

第四步:将Image_Clear控件转换成Dynamic Panel,并将其状态设置为隐藏

右键点击Image_Clear控件,在列表中选择Convert中的Convert to Dynamic Panel将其转换为动态面板,并在Widget Properties面板里,将其命名为Dynamic Panel_Clear,然后右键点击Dynamic Panel_ClearKeyEdit Dynamic Panel中选择Set Hidden。如下图所示:

69cecf07g7a376c91c7cdamp69

第五步:设置“在搜索框中输入文本时,清空键将被显示”的交互行为

选中Text Field_Search,在Widget Properties面板里,双击OnKeyUp,打开Case Editor对话框之后,完成添加Show Panel行为,并在Configure Actions中勾选Dynamic Panel_ClearKey(ClearKey)并进行保存。如下图所示:

69cecf07g7a376cf50a77amp69

第六步:设置“搜索框在获得和失去焦点时,清空键都将被隐藏”的交互行为

(两者在设计和操作步骤上极其相似,这里只介绍搜索框获得焦点时的操作)

选中Text Field_Search,在Widget Properties面板里,双击OnFocus,打开Case Editor对话框之后,点击Add Condition进入条件创建对话框,按照下图所示进行设置并保存:

69cecf07g7a376d3c4489amp69

然后在Case Editor对话框中完成添加Hidden Panel行为,并在Configure Actions中勾选Dynamic Panel_ClearKey(Dynamic Panel)并进行保存。如下图所示:

69cecf07gc62a46577ab1amp69

到这里,带清空键的搜索框就制作好了。

转自新浪博客

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/6635/

(0)
iouedioued
上一篇 2015-06-29 14:56
下一篇 2015-06-29 23:22

相关推荐

  • 从零开始学Axure原型设计(入门篇)

    如果说Sketch是最美、最简洁的设计软件,那么Axure就是最强大的原型制作软件。Axure不仅能制作静态的视觉稿、页面,还能添加交互动作,是进行原型设计的最佳软件之一。虽然Axure的学习曲线比较陡峭,但是掌握之后可…

    2016-01-06
  • 【译】Axure RP 8 Beta 官方教程 - 钢笔工具

    From: Learn Axure RP 8 Beta: Pen Tool(http://www.axure.com/c/blog/160-learn-axure-rp-8-beta-pen-tool.html)   Axure RP 8 引入了一个新的钢笔工具功能用来绘制自定义形状。自定义形状是基于矢量的,这…

    2015-09-08
  • Axure icons 64x64 for Axure rp|Axure 图标库 64x64

    干货分享,需要的下载吧。 适用版本:Axure7.0/axure6.5 资源名称:Axure 图标元素库;64x64的Axure元件库;axure图标库 64x64 更新时间:2015年5月28日09:27 下载地址:https://www.iamue.com/wp-content/uploads/…

    Axure 2015-05-28
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 【译】学习Axure RP 8 Beta - 编组功能

    原文标题《【译】学习Axure RP 8 Beta - 编组功能》 From: Learn Axure RP 8 Beta: Groups 在Axure RP 7中,当多个部件被编组后,点选编组中的某个部件时,选中的是整个编组。而在Axure RP 8中,编组中的部件可通过…

    2015-08-19
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key!

    #交互学堂##Axure#RP8.0.0.3318更改授权验证机制,旧的授权名以及密码将会失效。 划重点:个人用户除了购买正版软件,也可以暂时维持当前版本不做升级,当然这也是以失去软件的稳定性为代价。这也就意味着一段时间…

    2016-10-31
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • axure元件下载:Axure 7.0 ios8元件库1.2最新版

    axure 元件下载 注意事项: 1、本元件库中的字体图标以及部分元件使用时,需要双击安装1.2版本的压缩包中的TFF字体文件,并重新启动Axure,否则拖进编辑区不能正常显示。 2、如果在本机演示原型,无需进行其他设置…

    2015-07-20