最近在做一个项目，大致的业务逻辑是在APP中绑定车辆和银行卡信息，从而实现车辆的无感知加油；今天的主角是搜索功能，所以业务逻辑就不多说了，直接往里切~ 

在项目的UIUE设计过程中都很顺利，直到开发问了我一个搜索交互的问题，我才意识到，大意了！每一个组件其实都有自己完整的交互流程，即使他是一个不起眼的搜索功能，也有完整的一套交互流程，在日常的UI设计中很容易就忽视掉这些交互细节；今天就和大家聊聊我在做搜索功能时的心路历程！ 

默认状态

本次例举的搜索功能为地图地点的搜索功能，在首页点击搜索框，输入相应的加油站地点名称进行搜索，点击搜索结果进入导航；这是当前业务要求的完整搜索流程。

进入地图的默认状态，根据文档要求要有搜索框功能、显示地图定位；这么一看是不是太简单了，随便在高德或者百度地图找一张图片作为背景，画上定位标识，显示定位名称，然后悬浮一个搜索框搞定。

稍微思考下，就会发现问题，既然这里的搜索功能是对加油站地点的搜索，那么在进入默认状态页面时是不是可以增加定位周边加油站位置信息显示呢？这样一来既可以方便用户在非搜索输入情况下用点击的方式直接选择加油站，又可以使页面下方的大面积空白区域得到充分利用。丰富页面内容的同时，提升用户在使用APP时的便利程度，默认状态的页面就变成下面这样。

这里为方便后期开发适配小屏机型，地址列表的卡片要给最大高度值，地址列表信息在卡片内上下滑动。 

获取输入光标

点击搜索框，当搜索框获取输入光标时，底部弹出输入键盘，输入加油站的地址或者名称，点击键盘的确定按钮开始搜索。

总感觉还是少点东西，思考一下~用户正在进行搜索的动作，那会不会出现用户当下搜索的目的地是他之前搜索过得地址呢？很有这个可能吧，那么当他要进行搜索这个动作时，把用户之前搜索过的目的地以列表的形式展示在搜索框的下方，这样是不是可以避免文字输入浪费掉的时间，让搜索更便捷、智能。 

那么这个历史搜索列表何时触发呢？如果用户已经输入文字那它的作用就不大了，所以在输入框获取光标的同时，展开历史搜索列表，只要用户没有进行文字输入，那就一直展示，像下面这样。 

出现了列表展示信息，那么每一列的信息展示就会有先后顺序，这个顺序可以是时间顺序、首字母顺序，这里更合适的显然是时间顺序。 

文字输入

用户在历史搜索记录中如果没有找到自己的目的地，进入下一步，键盘输入地址。

增加模糊搜索功能；用户在做搜索时，可能知道准确的目的地，也有很大的可能性是只模糊的记得几个字，记得的这几个字还有可能只是谐音字，并不准确。在生活的场景中，其实后者的出现频率可能更高，那有没有一种办法可以通过只言片语就能把相关的地址信息全部展示出来，当然有，这个就是模糊搜索功能。

当搜索框输入文字时，历史搜索记录列表消失，取代的是根据输入文字进行模糊搜索的列表。

设计到这一步，整个流程已经过半了，没什么毛病吧！我开始也这么认为的，但是只是正流程没问题，反流程呢？考虑了嘛？

这里的搜索框，点击进入没问题，当我输入文字的过程中突然想取消这个动作，该怎么做？这里并没有给用户留下中断操作的按钮，这样一分析又要返回到输入框获取光标的那一步。

无论输入框有没有输入文字，点击右侧的文字按钮，中断搜索操作，返回到地图首页；

当输入框有文字输入时增加一键删除按钮，当用户输入的文字很长的时候，你总不能让他完全依赖键盘的删除键一个一个字的删除。点击一键删除按钮，清空输入文字，模糊搜索列表变成历史搜索列表；

闭合流程

当我们点击模糊搜索列表中的任何一个选项时，进入此选项的详情页面，并同时在地图上进行位置信息标记。

按说到这一步，点击导航整个流程就结束了，但是不能大意，如果我问你：那你怎么返回首页呢？不会要一步一步点击左上角的返回吧？对，还是反流程，这个确实很重要，时刻要记得！

我是这样做的，继续向下看；

点击底部卡片右上方的退出按钮，返回到地图首页，至此整个搜索流程闭合； 

小结

没想到一个小小的搜索流程这么麻烦吧，起初我也是忽视了这一点，结果让开发小哥狠狠的打了脸；

放眼组件库的每一个组件，他们都有自己独特的样式和交互方式，每一个都值得细细琢磨；

OK，今天就这些，希望文章对你有帮助~

原创文章编写
作者：Experiencer~体验者

Powered by Froala Editor