『淘宝网』从4款主流产品出发，掌握“搜索”交互 |知乎|iOS|万物尝

本文作者对目前市面上4款主流产品的搜索界面进行了拆解分析，对其背后的设计思路和设计逻辑进行了总结。

本文插图

搜索是用户通过输入关键词，检索到想要的信息。
搜索功能对于一个产品，存在的意义就是帮助用户快速从庞大信息中找到想要的信息。
随着搜索功能的不断迭代，大部分产品在用户搜索的过程会做一些推荐和提供历史搜索功能，给用户在搜索过程中提供更快触达到想要的结果。
本节主要通过4个产品来看看目前市面上主流产品在做搜索的不同思路和设计逻辑。 4个产品如下所示：

淘宝
微信
知乎
爱奇艺

01 淘宝对于淘宝这样的购物平台而言，几乎一半以上订单的购买是基于搜索。
用户使用淘宝购买的场景很多，有的是无目的闲逛，看到心仪的产品，完成购买，有的是基于之前的购物车和收藏完成购买。剩下的基本是基于搜索，找到便宜的店铺完成购买。搜索前
搜索位于淘宝首页状态栏之下，几乎占据淘宝首页最核心的位置。可能是为了强化搜索功能，最新版本的淘宝，将搜索按钮展示出来，估计是为了强化搜索这个功能，引导用户使用搜索，毕竟搜索太核心、太重要了。
淘宝首页的视觉抢点太多了，首页每个小模块都做的特别抢眼，重视觉，这也导致首页反而没重点了。

本文插图

搜索栏左侧有扫一扫入口，搜索栏里面还有一个扫一扫的入口，两个入口，同时里面的功能不一样，对于小白用户难以理解其中的逻辑和区别，应该可以整合在一个入口。用户点击搜索框里面的相机图标，进入扫一扫界面，扫一扫默认识别实物，这也是目前ai技术的一个体现。
搜索中当用户激活输入框时，新页面浮现。新页面中包含三个模块，分别为历史搜索、搜索发现和全网热榜。

本文插图

历史记录是基于搜索过的历史关键词。有时候用户经常去看一款产品，并查看价格变化。所以历史记录可以减少用户的输入，提升搜索效率。搜索发现是基于搜索记录，系统推荐类似的产品，帮用户购买做出推荐。
全网热榜是将目前淘宝平台热卖的排榜，展示给用户，让用户了解目前淘宝大家都在购买什么。
搜索中/后搜索过程中，系统会针对搜索词，做出关联词联想匹配，用户可根据匹配的关键词选择，快速达到结果页，减少搜索时间，提升搜索效率。

本文插图

用户点击联想匹配项目，或点击键盘上的搜索，达到结果页。
用户点击取消，回到上一级页面。
02 微信作为全民App ，微信的搜索具有参考价值。微信iOS版本，默认搜索框展示出现。 PS：iOS原生默认搜索栏不展示，下拉展示。
激活输入框，进入搜索页面，键盘调出，用户可直接输入。用户点击取消，回到上一级页面。