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官方原版教材(英文)

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

    2015-06-11
  • 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
  • 电子书阅读APP原型设计解析

    我是比较喜欢纸质书的,一本好书,我总愿意买本纸质书,放在家里可以随意翻看,或一遍,或多遍,偶尔也会当花瓶放着。 阅读纸质书是视觉,听觉,触觉,嗅觉的享受,甚至连带着回忆都是美好的。 柔和不刺眼的纸张带…

    2015-06-11
  • 【Axure原型设计】手机APP微信读书原型设计

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

    2015-10-14
  • 【译】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 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原型

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

    2015-05-28
  • 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 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