Axure：从简单搜索到联想搜索的部件制作

导读：最近一直都在整理原型部件，要说准备的最有感触的，当属搜索框无疑。搜索框的整理，前后加起来共耗时两天多。从最开始的按钮和文本框，到后来的图示，提示和联想查询。耗费了不少的心血，有必要总结一下，留个纪念。

一、演变过程

1，原始部件

说明：最开始的时候，没有想太多，就觉得查询嘛，有个文本框输入条件，然后有个查询按钮，有个更多查询按钮，就够了。当时，觉得一样大小挺好的，真好！

2，增添图标

说明：当时是想到了英语学习，小孩儿只看图就知道是什么了，那么对于一类人来说，只有字是不够的，加上图标会更好。

3，省略按钮

说明：不知道大家有没有注意到在一些影视搜索，或者是位于边角处的搜索框，为了节约面积，或者说是页面布局，它的搜索框是没有按钮的，仅仅是在文本框中有一个图标。

4，增添提示

说明：一个文本框，一个按钮，但我怎么知道那个文本框要干嘛，我怎么知道要填什么，难道要一个一个去试吗？所以，由此产生了在文本框里增添提示的想法，就是，你希望用户在此文本框中输入什么，就事先进行提示说明。（灵感来源于百度）

5，改变布局

说明：首先是对提示文字的改变，提示文字不应该那么亮的，会鸠占鹊巢。在此页面，突出的应该是查询，也就是主功能。而当查询和更多，一样的大小，一样的分布的时候，我会分不清主次。但实际上，是希望用户直接应用查询这个按钮的，而不是更多。更多只是少数需要精确查询的人使用，所以，就通过大小、布局，来体现这么一个主次关系。

6，联想搜索

说明：首先，这是我耗时最多的一个原型部件。夸张一点说，我都觉得我是用原型写了一遍联想查询的代码。我是觉得我作为一个用户，有可能我这回搜索了这个条件的东西，我下回还要用到。或者说别人搜索过的条件，我也需要用到。我在想，我能不能讲搜索过的条件重复利用。（灵感来源于网页搜索）

现在做出来的联想搜索原型，能够实现使用过的条件再次利用（可以想象成模糊匹配或者智能搜索），当文本框失去焦点时，进行搜索提示，当获得焦点时，不再提示。可以一键删除输入条件。

另外：我能不能主推一下这个联想搜索的原型部件，真心是费了我好多脑细胞的。使用了Panel容器，Repeater转发器，填写函数增加用例，修改属性设置格式。其实，这个玩意儿做出来了之后，我很佩服自己的。

二、转变原因

刚开始没想到这么多的，师姐给了个网址EasyUI，上面也没有涉及到这一块的内容，但是在实际生活运用中，确实是用到这方面的东西了。觉得真的有必要添加上去，所以，这一步一步的转变就有了。

我做好了之后给人家看过，并且问过他们的感受，我问他们觉得哪一种更好，如果他们来使用的话，会更愿意使用哪一种。其实结果有很多的，有好几个人都喜欢第三种，就是不要按钮的。其实我很理解的，因为当时我做出来的时候，我也挺喜欢的。但如果是要将其运用到整页的正中央的话，大概就不适合了。比如说：将百度的首页做成这样，想想那时什么感受。但如果将处于边角的搜索做成百度那样，想想，那又会是什么感受。

大家的不同反应，都给了我一定的动力和灵感去进一步的做好这个搜索的原型部件。一个原型的制作，或者说是一个UI界面的设计，不是由于哪一个人的喜好来决定的。网页的整体风格，单页要凸显的内容，使用人群的总体偏好，用户的便捷性，都能限制住页面的设计。

三、个人感受

之前对于原型部件库的理解，就只是限于将已经有的部件收拾收拾，美化美化就行了。但做完这个搜索后，觉得其实原型部件的制作整理真的很重要。原型是一个一个的部件构成，部件的风格和交互体验度，直接决定了整个UI界面的风格。

所以，重视原型、重视UI。