如何为 app 设计一个合适的搜索功能？
上周去一位朋友公司，帮他们看看客户端新的设计方案。他们对搜索功能的设计一直不太满意，总希望将很多功能、设计融入进去。这些功能点单独来看每一个都很正常，但放在一起却一点也不协调，于是和大家一起花了一个多小时重新对搜索功能做了一次深入的分析。这是一个非常有趣的讨论，想和大家也分享一下。
搜索几乎是每款 app 都会涉及到的一个功能模块，从最开始的功能提供到如今的运营阵地，搜索已经成为承接用户需求、引导用户操作的核心功能。我们可以在 apps 中看到各种各样的设计方案，但这些方案并非适合于每一块产品。今天我们就以市面上常见的一些设计形式对搜索功能做一个深入的剖析。
首先，当我们开始一款产品的搜索功能设计，通常需要考虑到以下3种状态的设计：
- 功能入口；
- 功能激活态；
- 功能输入态；
功能入口
我们先来聊聊功能入口，通常情况下我们需要考虑为搜索功能设计一个触发入口。我们可以将常用的设计形式归纳为以下几种：
- 功能外露，以下图中 Amazon 为例。搜索功能以输入框的形式直接展示在屏幕中。这是最为常见的一种设计方式，也是大型电商类应用通常会采用的形式。
- 功能布点，以下图虾米音乐为例。它与功能外露型类似，只不过是将搜索功能弱化成了一个 icon，点击后才会展成搜索框。
- 独立 Tab，以下图 Snapguide 为例。它是将搜索功能放得最重的一种形式，很多应用会把它命名为 Discover 或 Explore。这个 tab 除了包含基础的搜索功能，还增加了很多运营的内容在里面。
- 特殊类型，以下图中 Airbnb 为例。搜索功能会作为一个 icon 放在页面中间，在 Android 的设计中经常会作为 FAB 出现在屏幕右下角。
点击查看大图
如果你仔细观察，功能外露的方式大多出现在大型电商平台，国外的 eBay、Amazon，国内的淘宝、京东均采用这种设计形式。这类平台共有的特性就是拥有海量的用户群体和商品数，用户基数大就意味着设计形式需要足够的简单通俗，以确保绝大部分用户都能发现、明白这个功能如何使用。
相对于功能外露型功能布点会相对轻量一些，最常见的就是影音类产品，比如优酷、虾米、HBO Now、Youtube 等强内容运营的产品中。希望用户将更多的时间消耗在平台推荐或个人喜好推荐的内容中，同时也可以保证搜索功能的快速可触达。
独立 Tab 早期是大家做 iOS 的标配，如今还有很多产品保留了这个形式。只不过在原来的基础上将这块内容进行了深挖，让这块变成用户发现新鲜玩意的一个运营阵地。这也是欧美垂直电商或资讯类产品最喜欢使用的设计形式之一。
最后这个特殊类型在 iOS 端其实可见的并不多。Airbnb 不只是简单的将搜索功能找了一个地方放置，它更多是将搜索这件相对冷冰冰的功能融合在产品的整个“故事”中，虽然布点位置不走寻常路但在实际操作并不突兀。Airbnb 的功能 tab 一直在不断的改进，如今的方案相信也应该是他们在多次论证、测试后才觉得采用的。
功能激活态
接下来我们再来看看功能激活态。激活态指的是当用户将当前操作移至搜索功能，激活输入光标后的状态。通常情况下这个界面基础会由输入框和键盘两部分组成，等待用户进一步的输入操作。
从功能角度上来说，这里的产品及设计目标是帮助用户快速输入、获得想要得到的结果。所以通常在基础设计之上添加热门搜索词或历史搜索关键词的展示，降低用户输入成本。手淘近期的版本还对图片搜进行了增强，进入搜索模块后会在相机下方展示相册中最后一张照片的缩略图，方便用户使用图片搜这个功能。顺便说一句，上次出差到俄罗斯，手淘的图片搜索功能可帮了大忙。在有文字障碍的前提下这个功能实在是太方便了，我们在超市里买东西基本全靠它来了解。
除此之外，还有三种与产品特性关系较强的设计形态：
- 搜索结果分类。在Instagram、知乎这类产品中，搜索结果可以作用于用户、信息、标签等不同类型，所以在激活态设计中会默认将不同类型结果通过 tab 的形式来进行分类展示，便于用户找寻想要的结果。
- 类目布点。地图、餐饮类应用会在激活态中增加不同类目的布点。以高德地图为例，在激活态中会直接放置加油站、卫生间等直达入口，从需求角度出发增加一些用户常规需求入口。目的也是帮助用户快速直达结果。
- 功能入口。在手淘、Amazon、eBay 等电商应用中还会增加语音输入、扫码、自定义搜索等功能入口，作为用户找寻信息多途径的布点。
点击查看大图
输入后状态
在早期的产品设计中，输入后需要用户点击按钮执行数据查询操作并返回结果页面。这种方式的效率较低已经被大家弃用，输入后的数据即时反馈基本已经成为了标准设计形式。在此基础上由于业务特性的不一样，即时反馈的结果也有着不同的设计形式。
- 即时结果。以系统自带的通讯录为例，在输入「186」、「王」等部分信息后，搜索框下方会即时反馈搜索结果。
- 关键词联想。对于搜索结果较多的应用（比如电商），在输入部分关键词后显示搜索结果显然并不合适。设计的目的还是和前面提到的一样，通过关键词的修正、推荐来帮助用户快速的缩小搜索结果。
- 多维度展示。在重内容运营的平台上较为常见（比如 Flipboard或某些电商），用户输入的一个关键词可能在不同的集合、类目中有结果。将结果分不同纬度在即时反馈中展示也是为了帮助用户快速拿到想要的结果。
- 增加功能操作。在影音类、股票类等搜索功能中，即时反馈的结果相对较唯一。在反馈结果页上附加操作功能（比如播放、添加收藏）更有利于提升用户操作效率。
点击查看大图
最后我们要再来聊一聊即时反馈的展现形式。基本上常见的形式是文字类和图文类，整体来说图文类的展示形式可识别度肯定是要高于文字类的。电商类应用图片信息不可控、缺乏可识别性，即时反馈的内容并非最终结果，所以很少有使用图文形式。而影音、图书类信息的图片更具有识别性，图文的形式也更加有利于用户快速识别。除此之外，垂直电商、美食类应用更偏好采用图集的形式来展示信息，为产品增加更多的设计感。
点击查看大图
对于绝大部分应用来说，搜索都是一个非常核心的功能，它是帮助用户完成转换或购买的一个重要渠道。用户想要通过它找到想要的东西，作为产品的设计师我们希望通过一切方法让用户获得信息更快、更准确。以上的任何一种形式都有它的优略势，对于设计形式的选择绝不取决于哪一个好看，而是哪一种更适合产品当前的形态。还是那句话，搜索功能是需要通过设计引导用户，方便用户在当前产品中高效、准确、方便的找到自己想要的信息。
以上是 PinDesign 会员计划的试读文章。除了设计方法，这里还会讨论一些具体的设计案例及相关分析。
-------------- PinDesign 会员计划 --------------
除开对设计的指导参考「设计竞品分析」另一个重要目的就是给与会成员传递概念、理清思路。通过梳理弄清楚不同设计形式的优略势、适合的场景及业务。为设计过程做辅助，为自己方案陈述做论证。
本期的 PinDesign 会员周刊主题是：「如何通过设计竞品分析来完成注册&登陆功能的设计」，欢迎加入 PinDesign 会员进一步了解。
2016年开始，每个月我都发布一个 PinDesign 优惠码，针对会员计划提供一定的优惠折扣。本月的优惠码如下，订阅年付会员时将享受50元折扣。
PinDesign是 Pinapps 新推出的一档关于移动互联网产品设计的订阅周刊，每周我会和大家聊一些关于移动产品设计的话题，我希望能将它做成对设计师最有用的设计类周刊，为设计师和想成为设计师的同学们提供一些帮助。
