如上所述，常见的过滤筛选的设计形式有下拉列表，Tab选项卡，Segmented Controls控制项，弹窗形式（包括弹窗/侧边栏/浮层等），标签，多选，单选，toggle标签按钮等，通过这些筛选过滤的形式来展现和不同维度的约束条件即可对搜索结果进行筛选和过滤。值得注意的点是，筛选过滤的设计形式不能对搜索结果展示造成影响，即搜索结果的展示是主体，筛选过滤是辅助功能，一般而言，过滤筛选区域位于搜索结果列表的头部，所占区域不能过大，当过滤筛选的结构逻辑和操作比较复杂时，可以采用弹窗/侧边栏/浮层的形式，将一些精细的过滤筛选隐藏转移到次级结构结构中，用户需要时点击入口展示筛选过滤条件即可。

（7）提示引导信息

大体上提示引导信息有两大类，第一类是帮助用户操作或使用产品的说明信息，如搜索框中hint提示用户「输入关键词」，这类信息相对比较固定，引导用户操作和使用产品功能，用户基本上不会反感；第二类是向用户传递不是用户所预期的「诱导」信息，如搜索框中hint提示「京东618 大牌距惠」，这类信息多半是定制的，一般来说带有「商业利益」的性质，如果使用不当，可能会让用户产生反感。提示引导信息是与用户的操作是相关联的，有操作的地方就可以有提示引导信息。

a. 搜索前——提示引导信息

搜索前用户的操作路劲是从搜索入口进入搜索页面，因此可以在这两个地方向用户提供一定的「信息」，提示引导用户。

对于搜索入口来说，如果是独立的搜索入口形式，如搜索图标，那么基本上无法有提示引导「信息」，毕竟样式简单，空间有限；如果是搜索框的形式，那么可以利用文本框的hint提示，向用户传递「信息」，这也是普遍的做法了。

搜索页面是单独的页面，布局逻辑相对比较复杂，因此是提示引导信息很好的载体。通过搜索框的hint提示向用户传递提示引导信息，当然这些「信息」的类型可能不一样，有些应用为用户提供的操作引导，比如音乐搜索中提示「可以通过歌词来搜索歌曲」，这是第一类提示引导信息；有些可能是定制化的「信息」，例如用户最近在淘宝上浏览过滑鼠相关的信息，那么搜索框的hint提示信息可能就是「罗技新滑鼠」，这种「信息」是动态的，定制的；另外有些应用会向所有的用户展示相同的信息，比如hint提示都是「xxx软体管家」，后面两种都属于第二类提示引导信息。有一点需要注意，就是「信息」的形式和量。推荐使用纯文本字元标签或简单颜色图标的形式，而不要使用图片或大色块复杂的图标或banner等。此外搜索时输入法键盘会调起，为避免信息被键盘遮挡，最好将主要的提示引导信息布局在页面上半部分。如下图红色所示为网易云音乐的搜索推荐，使用了纯文本字元标签的形式，即向用户传达了「热搜」信息，引导用户搜索「热搜关键词」，又不会过分引起用户注意力而干扰用户的搜索行为。

b. 搜索中——提示引导信息

在搜索中，用户主要操作集中在搜索框中输入关键词和过滤筛选搜索结果。

用户输入关键词的过程中，上文已经分析的实时匹配结果就是一种提示引导信息，实时匹配结果可以为用户提供「关键词」相关的提示引导信息，甚至还可以提供部分不相关的信息，当然不建议这么做，毕竟会大大损害用户体验。

常见应用常见还会在搜索结果中插入相关或不相关的提示引导信息。如下左图所示为在用淘宝中搜索「罗技键盘」，在搜索列表中会出现「提示引导信息」的关键词（红色框区域），其中「双飞燕键盘」「雷蛇游戏键盘」已经完全不属于用户预期的搜索范畴，其目的是用了引导用户去购买或者对比该品牌的键盘，当然这样的「提示引导」不仅可以引导用户购买其他品牌的键盘，还可以完善用户整个购物体验，算是很「完美」的设计。小米应用商店的搜素模块的设计就比较直接了，如下右图所示为在小米商店搜索「淘宝」时给出的搜索结果，排在第一位的却是拼多多（红色框区域），虽然将视觉样式做了一些区分，但这种提示引导的「广告气息」太重。此外针对网易考拉的展现形式也不是标准的列表形式，而添加了更为丰富的缩略图列表样式（红色框区域）来吸引「户注意力」，也是很明显的「诱导」提示信息。

c. 搜索后——提示引导信息

用户确定搜索结果后大多数应用都会跳转到其他模块的页面，比如淘宝会跳转到商品详情页，所以在搜索后的这个过程中，很难向用户展示引导提示信息。就算有提示引导信息也是与其他模块页面紧密相连，比如购物类app在下单完成后会根据用户购买的实际情况在页面出现一些商品推荐，比如买一个碗，会推荐一些其他的厨房用品。当然从严格的产品逻辑结构上讲，这些「信息」已经不属于搜索模块了，但从用户完整的使用流程上讲，还是有关联的。

产品的目的从来都不仅仅是为了服务用户，还需要考虑产品的「目的」（如利润或是用户数），只有将用户需求和产品目的相结合才能让产品长远的发展。 虽然搜索模块中的商业性质的提示引导信息可以带来一些商业利益，但要把握一个度，如何在合适的地方、在合适的时机为用户展示这些「信息」需要深思，如果随便展示这些「信息」，那就会对用户的使用体验造成非常大的负面影响。在这一点，淘宝的搜索模块做的很好，将「信息」与用户的搜索操作关联起来，不仅不会干扰用户正常的搜索操作和流程，还会提升用户的购物体验，值得借鉴和深思。

（8）搜索记录

搜索记录或称为历史搜索，保存了用户搜索过的关键词，主要目的是为了方便用户重复搜索时无需重新输入关键词。搜索记录一般展示在搜索页面中（页面初始状态，输入关键词后不展示），其形式多为标签或列表。如下左图所示为淘宝搜索模块中的搜索记录，淘宝还提供了清除搜索记录的功能，点击删除按钮则删除所有搜索记录。如下右图所示为网易乐音乐的搜索记录，每一个搜索关键词都是单独一行，并在关键词右边展示删除「X」按钮，点击则可以删除该条搜索记录。搜索记录对于产品而言是用户大数据的一部分，产品可以针对用户的搜索行为与记录，为用户提供个性化服务，因此条件允许的话，在产品前期中就可以做一些规划和埋点。

淘宝和网易云音乐的搜索记录设计是2种比较典型的设计，其中设计模式都是「历史搜索关键词」+「删除搜索记录」，形式不一样但本质是一样的。至于搜索记录放在什么位置可以根据实际情况决定，一般都会在搜索页面首屏中，在提示引导信息之后或者之前都是可以的。

6. 普适性搜索模块设计模式归纳

通过上述的分析和归纳，针对搜索模块，可以归纳出一种的较为普适性的「设计模式」，该设计模式包括搜索模块的主要页面路径以及页面布局，如下图所示，其中的设计形式是综合考虑所有因素（包括产品，技术，用户，成本，使用体验等）的结果，在实际中可以根据产品自身的需要采用不同的布局和实现方式（如上文中一些常见的主流设计形式），比如该设计模式中认为通过返回按钮（Up Button）来实现完成或放弃搜索回到原页面是最简单最有效也是最为普适性的方式，但实际中依然可以采用其他设计方案来实现同样的功能。

该设计模式将搜索模块分为搜索入口和搜搜页面，其中搜索的主要流程都是在搜索页面中通改变页面的内容和状态来完成的，即搜索页面是单一页面和结构，上图中第2，3，，4，5屏页面都属于同一页面的不同状态。搜索模块的设计模式中有些功能元素是一定需要的，有些功能元素是可选，在实际中，可根据产品的实际需要来选择。

7.总结

单独从搜索本身来讲，搜索功能并不复杂，但是如何做好产品的搜索功能也不是一件容易的事，在设计过程中是需要选择一种最适合自身产品的搜索形式。可以从以下几个方面进行思考和分析：

（1）产品分析

产品特点（如定位和发展策略）会影响具体的设计方案。比如产品包含大量的信息，那么在整个产品架构中搜索模块的重要性就非常高，而产品中对搜索功能需要程度不同，那么就需要采用不同的搜索形式和设计方案。每个产品的特点都是不同的，甚至同一产品在不同时期的产品特点都是不同的，这些特点都会影响设计方案，所以在设计中需要考虑这些特点。

（2）用户分析

任何设计都是为用户服务的，产品是为满足用户需求而存在的，搜索模块也是一样如此。在设计方案前最好对使用搜索的用户进行深入的分析，包括用户使用场景，用户特征，用户搜索目标特征以及用户使用流程特征等等。在设计方案过程中，应该根据用户的「需求和特征」来进行设计，并在最终的设计方案中体现这些用户特点。

（3）用户体验和产品目标之间的平衡

做为合格的设计师要懂得如何平衡用户体验和产品的目标，既要保证用户使用产品的体验，又要保证产品的目标。这两者之间的平衡是一种良性循环，好的使用体验能够实现更多的产品目标，更多产品目标的实现更好的设计。在设计前期就需要对各方面进行深入的分析和研究，比如产品定位，产品目标，用户需求，用户特征，具体功能需求等，只有在前期将这些所有相关的「利益因素」分析透彻，才能在具体的方案中体现这种平衡。建议利用雷达图去分析各个「利益因素」，简单高效。

（4）设计方案的拓展性和延续性

罗马不是一天建成的，同样优秀的产品和设计都需不断的改进和迭代。因此在设计方案的时候需要考虑方案在后期迭代中的拓展性和延续性，尤其是成熟产品，并不能每一次需求都可以给予设计师天马行空设计的机会，因此在设计方案前期就需要针对性的进行考虑，保证方案的拓展性和延续性，这样既能保证用户的体验也能保证产品的长远发展。

写在最后

这次文章不是很满意。我之前一直在想，一定要写的有理有据，因此在文中尽量将所有的相关点都写出来了，最终却导致文章结构有点乱，行文也是啰里八嗦的，写完后，在想要不想po出来，但最想想还是留下来了，不管写的怎么样，仅仅勉励自己，希望再次进步。

作者现在是一名交互设计师，写的不好不正确的请见谅。记录，仅以此自勉。欢迎关注我的公众号notestudy，会定期写一些与设计相关的短文，谢谢支持。

推荐阅读：