拆解 | 搜索体验的设计套路(2)

C.搜索icon

搜索icon应用广泛，位置一般在页面右上角。相对搜索框来说，搜索icon的引导性稍差，运营空间也有限，但可以节约导航栏空间，适合于将搜索作为辅助功能的场景。

比如得到的今日学习模块，以feed流的形式，展示用户每天的学习任务。这个模块预设功能是浏览、收听，且内容有限（只包括用户付费订阅的内容和平台为该用户个性化推荐的内容），搜索在此仅仅是辅助功能，所以将入口弱化。并且得到将此处搜索设定为全局搜索（搜索全App），可以引导用户发现更多内容，避免出现无结果/少结果的情况。

图5  得到今日学习模块

D.隐藏式搜索框/icon

这种形式的搜索功能是被弱化的，入口在主页上不可见，有的折叠在其它入口中，有的可通过手势唤起。

典型的一种是下拉出现搜索框：平时搜索入口隐藏，不占用空间，需要时又可下拉迅速呼出。微信和ios桌面、备忘录都采用了这种形式。

第二部分  搜索过程 

搜索过程是提高搜索体验的关键部分，过程可分为三个阶段：点击搜索框/icon → 输入文字/字符 →  点击搜索按钮/关键词。

第一阶段的反馈如下：

• 跳转：跳转到搜索页

• 激活：激活搜索框，光标闪烁，并显示引导文案

• 调起：调起搜索键盘

• 搜索页

本文的搜索页，指点击搜索框/icon后跳转的页面。

搜索页包括两部分，搜索栏和辅助区（搜索栏以外的部分）。进入搜索页后，一般默认调起搜索键盘。

图6  搜索页结构

• 搜索栏

搜索栏有两种常见的形式：

图7  搜索栏形式

两种形式区别在于按钮的设计，前者有“返回”和“搜索”两个按钮，后者仅有“取消”按钮。这里“返回”和“取消”功能相同，都是结束搜索，返回上页。

因为调起的键盘通常为搜索键盘，自带“搜索”按钮，并且从操作连贯性方面来说，键盘上的搜索按钮更符合用户习惯。所以目前大多数App在界面上仅保留了取消按钮，这样也更利于用户聚焦。

有些App突破了传统搜索框样式，采用了更突出的形式（如爱彼迎）。还有些增加了图片、语音、二维码识别的入口，这也为信息输入提供了更多的途径。

• 辅助区

辅助区主要为用户提供合适的推荐，以提高搜索效率。此外，也兼具运营属性，可以作为推广入口。

（编辑：ASP站长网）