搜索功能拆解小功能大细节

　　本文对于搜索功能进行了拆解和细化，一起来看看吧
　　这有个搜索功能要加一下，样式我给你。
　　好。
　　这搜索框连个提示也没有怎么搜？历史记录呢？模糊匹配呢？还有。。balabala
　　你也没说啊！
　　来自设计狮与程序猿的日常
　　搜索作为大部分互联网产品都具备的功能，直接影响着产品的用户体验。在进行搜索功能的设计时要以简单、高效为核心目标，每一步的细节设计都要反复验证是否脱离了需求和核心目标。
　　根据搜索的行为，可将其拆分为五步：搜索入口搜索触发内容输入点击搜索反馈结果。
　　一、搜索入口
　　搜索入口具有提示和引导操作的作用，主要类型有四种：主页搜索、搜索框、多条件搜索、搜索icon。
　　1。主页搜索
　　将搜索作为独立的页面，以搜索为导向，整个产品的使用围绕搜索这一核心功能功能展开。比较典型的如百度、谷歌等，搜索框功能强大，用户可以进行各种尝试。谷歌主页中的手气不错以及百度搜索的个性化推荐和新闻，为产品引进更多的流量，增加了用户黏性。
　　2。搜索框
　　这种是在网页中最为常见的，应用也最广泛，大多居于页面内容区域的上方，有的出于节省空间和搜索需求的考量，也内嵌在导航栏中。搜索框内会有文字的提示，提示用户搜索的方式，还有一些产品在搜索框内放置当前的热词、活动、新功能等，将搜索框做成了运营的入口。
　　搜索框的后面一般会伴有搜索按钮或放大镜的icon，可点击按钮和键盘回车进行搜索。在页面滑动时，搜索框一般会固定在页面的顶端，用以提示用户目前搜索内容，同时也方便重新搜索。
　　3。多条件搜索
　　多条件搜索的方式常见于旅游、出行类的网站，如猫途鹰、携程、东方航空等，需要输入时间、地点、人员等信息，单一的搜索框不能满足用户的需求，多条件的搜索框一般置于页面中较醒目的位置，引导用户操作。
　　4。搜索icon
　　页面中仅仅展示搜索的icon，一般放在页面的导航栏中偏右侧的位置，点击icon会拉出搜索框，典型的如站酷、UI中国等，还有的点击icon会在页面中唤醒搜索功能，如Behance。
　　搜索icon的形式虽然可以节约导航栏的空间，但相对搜索框来说对用户的引导性较差，因此比较适合以搜索为辅助功能的产品。
　　二、搜索触发
　　1。搜索框触
　　点击搜索框或搜索icon，呈激活状态，光标在框内闪动，引导信息淡化或消失；有的搜索框还会伴随弹出辅助区域，区域内包含热词、搜索历史等信息，典型如腾讯视频、淘宝等。
　　2。搜索形式
　　第一种是有搜索确定按钮或icon的搜索框，用户输入完成后可点击按钮进行搜索，也可点击键盘回车搜索；另一种是无搜索按钮的搜索框，用户需键盘回车搜索。
　　在网页设计中，第一种应用比较广泛，第二种国外网站应用较多，如dribbble等。还有一些搜索框内添加了拍照、上传图片、语音输入等功能，使得搜索方式更加多元化。
　　3。辅助区域
　　辅助区域的信息主要有热词推荐和历史记录，用以提高搜索的效率和作为推广的入口。
　　热词推荐：热词推荐主要为当前时段内比较热点的词汇或产品的新功能，能够为产品带来流量导入和收益，如电商类网页中的热词一般为新产品或高销量产品，视频类网站的搜索热词一般为最新视频或点击量较高的影视剧。
　　历史记录：历史记录能够在用户重复搜索时提高效率，一般会在数目上做限制，腾讯视频的历史记录最多展示10条，百度搜索最多展示9条，由于受页面空间和时效性的限制，尽量不要展示10条以上。此外，考虑到用户隐私的问题，历史记录还需要支持删除。
　　随着用户体验的不断优化，历史记录衍生出了收藏、订阅、关注等功能，让用户免于搜索，可持续接收关注的内容。
　　三、内容输入
　　1。输入触发的交互
　　输入内容时，引导信息消失，有的还会伴随在搜索框中出现清除的icon，清除的icon主要方便用户进行二次搜索时一键清空当前信息，省去了逐字删除的麻烦；根据输入内容，进行关键词的匹配。
　　匹配形式一般有两种，一种是正常的关键词匹配，按照一定的规则进行推荐并排序；还有一种是包含历史记录的匹配，会将包含关键词的历史记录置顶，与正常的匹配做区别并支持删除（如淘宝）。
　　2。关键词匹配的作用
　　关键词匹配的作用主要有三个：引导、纠错和高效。
　　引导：在用户无法准确记忆搜索的名称时，关键词可以作为引导，帮助用户完成搜索；
　　纠错：减少用户输入的错误，会自动在匹配区域更正；
　　高效：用户直接点击匹配出的结果，减少输入，提高搜索效率。
　　3。关键词匹配的条数
　　各产品匹配条数上限不一致，淘宝为10条，爱奇艺为10条，一般来说不会超过10条，过多的选择会给用户造成记忆负担，并且占据空间，有损用户体验。
　　四、点击搜索
　　点击搜索一般有两种机制：
　　一种是输入完成后，点击搜索按钮、键盘回车进行搜索；
　　一种是边输入边显示搜索结果，每输入一个字符即进行一次数据检索并将结果展示出来，这种搜索方式也被称为即时搜索。
　　即时搜索的方式简化了搜索的操作路径，更快的引导用户查询到结果，能够给用户带来良好的体验。
　　但即时搜索对服务器的运算能力要求较高，如果服务器运算能力跟不上，会出现较长时间的等待，有损用户体验，因此这种搜索机制在产品中并不多见。
　　五、反馈结果
　　触发搜索之后，搜索框失去焦点，框内保留搜索关键词，显示多条搜索结果，每条搜索结果中对搜索的内容飘红展示。如何能让搜索结果更清晰的展示，让用户更快的找到所需，针对搜索结果的交互设计需要注意以下几个问题：
　　1。结果分类
　　将搜索到的结果进行分类处理，一般采用Tab的样式进行归类，如谷歌搜索设计，将搜索结果按照全部图片视频新闻更多等进行了分类。
　　2。排序筛选
　　排序与筛选的维度因产品性质而异，常见的排序方式有时间、价格、销量、距离、好评等；筛选可以算做个性化的需求，不同产品间存在较大差异。排序和筛选的功能一般放置在搜索和结果之间，一是符合用户的认知和使用习惯，再者便于用户切换。尤其在电商类网站中，排序和筛选功能尤为重要，占到了首屏空间的三分之一。
　　3。自动纠错
　　用户在搜索时输入了错误的词汇，系统经过判断后会展示正确词汇的搜索结果给用户，并友好的告知用户正确的搜索方式。
　　4。特殊状态
　　特殊状态包含无结果状态、网络不佳状态等。
　　出现无结果的状态可能是：
　　用户输入错误；
　　搜索结果无。
　　针对第一种情况，可以提示用户正确的搜索方式，并自动帮用户纠错；对于第二种，需要有好的提示用户无搜索结果，尝试其他搜索方式或者更换关键词等。
　　六、结语
　　以上对于搜索功能进行了拆解和细化，设计师在进行搜索功能要根据产品的定位以及目标用户、应用场景、业务需求等因素进行设计，仔细推敲交互的每一个细节，提升产品的用户体验。