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 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新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

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

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

    2016-10-31
  • Axure RP 8 BETA

    新一代的Axure 8.0 现在推出 beta版本   [button type="danger" text="官网下载beta版本" url="http://www.axure.com/beta" open_new_tab="true"] 快速下载地址: Win版下载地址:http://pan.baidu.com/s/1o6p…

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

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

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

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

    2016-01-06
  • 在手机上演示axure原型

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

    2015-05-28
  • 在线预览Axure文件,使用新浪SAE发布在线Axure文档

      俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT 行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:…

    2016-01-07
  • Axure RP 8.0 + 汉化包下载

    官方下载地址: FOR WINDOWS BETA FOR Mac BETA 网盘下载地址: Win版下载地址 Mac版下载地址 Axure RP 8.0 汉化包下载: Win自动汉化Axure RP 8.0 安装文件 通用Axure RP 8.0 汉化文件 注意:Win自动汉化程序只支…

    2015-08-24
  • axure官方原版教材(英文)

    AxureCoreTraining axure rp 官方教程,PDF免费下载 推荐阅读英文版,翻译的毕竟有些差异的。   点我下载AxureCoreTraining 

    2015-06-11