透过微信知搜索—小交互，大设计_【猴哥】

一只想成为PM大咖而且很不安分的猴纸...

上回写了一篇京东APP设计系列——搜索，就京东搜索页面做了简单的分析。这次还是想码点搜索有关的，不论APP还是Web也好，搜索都是重要的信息获取入口。而且最近的几个项目都要用到搜索，在规划中发现还是有很多细节值得思考和注意的。

每天花在微信上的时间真的是很多。会看看文章，有时候也会用用微信的搜索。今天就谈谈几个微信搜索的几个细节，也叫小交互，大设计。测试手机：iPhone6s

体验时间：2016-4-17

系统版本：IOS 9.3.1

微信版本号：v 6.3.15

搜索入口搜索页面搜索联想页搜索加载页搜索反馈页

上回说到了搜索相关的几个重要页面，那么在这些页面上有哪些小细节是值得产品设计人员注意的呢？

「搜索入口页面」

微信的搜索入口放置在页面顶部，默认是有关键词提醒，在产品的设计之初，搜索的功能应该默认有一个默认的灰色文字提醒，告诉用户应该搜索什么类型的关键字？栗如：是搜索姓名呢？还是搜索号码呢？还是搜索商品呢？

总结：搜索入口页面，主要解决这2个问题，第一告诉用户我是搜索框；第二告诉用户怎么搜。

点击查看大图

「搜索页面
」

当点击输入框时，进入搜索页面。在这个页面，有几点交互是值得注意的。第一仍然有

默认灰色状态的文字提醒；第二，输入框旁边右边多了一个取消「Cancel」按钮，当点击取消回到搜索入口页面；第三，下面有提醒类别，这时候如果你不知道怎么搜索，它提醒你搜索朋友圈【Moments】、文章【Articles】、公众号【Official Accounts】，点击对应的提醒图标进入对应的搜索区域。注意下这个时候的「搜索」按钮是不可输入状态。

总结：搜索页面，主要解决这3个问题，
第一告诉用户怎么搜，适当推荐热搜关键词；第二给予用户预期，最终搜索到的会是什么信息；第三，当用户不想搜索的时候，可以让用户返回到搜索入口页面。

点击查看大图

「搜索联想页」

输入关键字后，这个时候实时返回关键词相关的结果，这个页面就是大家常说的搜索联想页，而且微信做的还是很贴心的。第一，

返回的关键词列表还是分组的；第二，细心的孩子可能会发现当你键入关键词时，右边的输入框还多了一个小"X"，这个X的目的是当用户发现自己输入的关键词有误时，可以一键清空已输的关键词；第三，搜索框中原本默认灰色提醒的文字消失。第四，键盘中的「搜索」按钮由灰色不可点击态变成蓝色可点击态。有的APP在没有输入关键词时，也可以点击搜索，那么这个时候就应该给予用户一定的提示，栗如，亲，请输入XX进行搜索~

很多APP喜欢在这个页面放广告，最为常见的就是电商类的APP，如放置一些热门搜索关键词（这个主要是给不知道搜什么东西的用户准备的，这些关键词在后台往往是可以配置的，所以广告嘛，还是可以打的，哈哈~）；而且还会放置一些自己曾经搜索的关键词，方便用户再次搜索，减少输入负担，毕竟懒惰是天性~；

总结：搜索联想页，第一，给用户的搜索实时反馈，实时告诉Ta输入的结果；第二，当用户发现输入的关键词不正确的时候给予一键清空的功能；第三，
当用户不想搜索的时候，可以让用户返回到搜索入口页面。

点击查看大图