产品交互设计——搜索功能

搜索框便于用户快速定位和查找内容，因此随着搜索技术的不断发展，搜索几乎是每个app的标配功能；本文简单讨论搜索框的设计策略，梳理常见app的搜索框设计原理。

功能形式

---

1.搜索框固定在顶部栏，强功能，常见于海量内容为主导的产品，如淘宝，饿了么，查找商品/服务；

2.以icon的形式存在，如网易邮箱，定位某一邮件；

3.常驻一个入口，但第一次进入显示后，再次进入隐藏，需下滑才能看到，如微信；

4.隐藏功能，弱提示，下滑唤起，如ios系统搜索；

手机淘宝，网易邮箱，微信，苹果系统

手机淘宝

用户的第一步就是浏览商品，比如要买一双跑步鞋，查找商品最有效的方式就是搜索平台的所有跑步鞋。因此淘宝的首页搜索框固定在顶部栏，便于用户快速搜索。

网易邮箱

网易邮箱的核心功能是浏览邮件，收发邮件。因此，搜索的目的是快速查找某一封邮件，作为icon次级按钮

微信

作为社交软件，核心功能是解决通讯，包括文字，图片，语音，视频；

IOS

苹果原生系统的搜索作用同微信的搜索一致，搜索包括通讯录，各大应用的关键词检索

搜索前

---

1.搜索框下拉展示热门搜索和历史搜索，，例如京东；

2.根据当季热门，个人搜索历史等逻辑，搜索框内默认搜索值，例如淘宝；

3.搜索框下拉展示历史搜索记录；

4.分类搜索，例如微信；

京东，手机淘宝，百度地图，微信

京东

鉴于用户是碎片化时间购物，因此不同时间段搜索同一件商品是高频操作，保留历史搜索，便于用户操作。热门搜索的作用有两点，第一，紧跟当前搜索热门，例如夏天的热搜会是拖鞋，短袖等，若出现雪地靴是不好的体验；第二，可作为广告位出售，提高点击流量。因此，热门搜索词的维护可以是运营后台人工维护，也可以是制定排序规则自动更新。

手机淘宝

搜索前的设计是：搜索框默认值，历史搜索，搜索发现。个人猜测是，淘宝体现的是<猜你喜欢>，因此在搜索结果，商品推荐，首页商品都是根据个人的搜索，浏览，购买记录等综合计算得出。因此搜索框默认值，搜索发现是同理

百度地图

作为出行帮助工具，场景1，打开软件搜索地点查看地点后，为节省流量消耗，关闭软件，在出行一段路程又重新搜索路线；场景2，第一天导航至目的地，第二天还需导航至同一目的。因此，搜索同一地点是属于高频需求，记录历史搜索可以有效提高用户搜索效率。

微信

分类搜索，可以选择分类，再输入搜索内容；常见于内容类型多的app，需明确区别搜索，过滤无需的搜索结果。例如<张三>，用户在搜索的时候知道是搜索用户张三，而不是聊天记录有张三的，可以屏蔽无效结果。

特别说明的是，有不少搜索是支持图片or语音，并且通常置于右侧，主要原因是。第一，高频场景是以文字搜索为主，根据从左往右的阅读习惯，用户的操作和视觉聚焦于搜索框左侧，故将低频的图片or语音的icon放在右侧，减少对用户的干扰。第二，区别于分类搜索（搜索分类+搜索内容）的组合搜索方式，图片or语音是替代搜索，为了避免用户误触，放置右侧。第三，排版习惯是左icon+右文字，大部分搜索框内左侧有搜索icon，再加其他icon过乱

搜索中

---

1.包含元素：输入内容，删除icon，取消（搜索），关联词or搜索结果；

2.利用输入法的确定/搜索按钮，正常输入时输入法为<确定>，确定完毕，显示<搜索>；

3.搜索词联想，长尾关键词，减少用户输入，如淘宝

4.显示搜索结果，搜索结果的搜索词高亮，常见于当前页搜索，或明确定位目标，如网易邮箱

5.分类显示搜索结果，常见于内容app，有可能搜索名字，文章，话题，小组等，如知乎

淘宝，知乎，网易邮箱

搜索中有两种形式，一种是联想关键词，一种是响应式搜索。两者的区别在于：前者的场景，用户是没有具体的搜索目标，是基于一个关键词浏览查找搜索目标。小明想买一双拖鞋，淘宝搜索<拖鞋>，开始浏览所有的拖鞋，然后挑一个购买。后者的场景是，用户有明确的查找目标。小明要找前几天收的一封邮件，记得这封邮件的内容有<拖鞋>，于是搜索<拖鞋>，快速筛选出该邮件。

搜索后

---

结果排序

1.以日期排序，如网易邮箱

2.以配送距离，综合评分等排序，如饿了么

3.以浏览记录，购买记录，销量，复购率，好评率等综合排序，常见于电商app，如淘宝。

4.以话题热点，阅读数，点赞数，评论数等综合排序，常见于内容app，如知乎

在系统排序的基础上，还有分类搜索+搜索排序。手机淘宝有商品来源（天猫，淘宝）分类，以价格，评分，销量等排序

结果样式

1.列表式，小图+文字描述，以文字为主要信息，点击结果进入详情页，如豆瓣；

2.搜索结果除了可以看详情外，可直接操作，如网易云音乐，搜索音乐后，高频需求就是播放，故放播放键放至搜索页；

3.橱窗式，大图+文字描述，搜索结果以浏览图片为主要行为，常见于电商，美食类app，如咸鱼，淘宝

豆瓣，网易云音乐，闲鱼

其他交互

1.点击搜索框，返回至状态<搜索中>

2.搜索框固定在顶部栏，常见场景是，带有明确的搜索目标，搜索不到期望结果，再次搜索。例如，找歌，找文章等，

3.搜索框上滑时隐藏，下滑时呼出。常见场景是，没有明确的搜索结果，搜索完后开始浏览搜索结果，此时隐藏搜索框可以扩大可视区域的同时，减少搜索框的干扰项，例如饿了么，淘宝。

结尾

---

写在最后，可以看出一个简单的搜索功能包含了大量的设计理念。没有通用的设计模板，只有在理解不同的场景情况下找到最佳解决方案，或许这就是产品经理在产品设计中最有趣的地方。