Axure

Axure 7.0清空输入框效果

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

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

转自新浪博客

最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?
【原译】致终将逝去的“网页设计”