火星网校
让用户心甘情愿、直达目标的搜索设计
发布时间：2024-04-13 10:39:53 浏览量：157次
搜索是每个产品中的基本功能，搜索设计做得如何也会影响着用户对产品的使用体验。在搜索功能中，其交互方式、视觉样式也有所不同，在产品设计前，对于搜索框的设计细节有什么需要注意的？本文就这几点来探讨关于搜索框的设计。
搜索是产品中非常重要的一个功能模块，它通过搜索框给用户提供一个直达目的地的绿色通道，方便用户快速找到自己想要的内容，在引导用户走向方面起到了绝对性的作用。
搜索框的体验如何，决定着产品解决问题的能力、效率以及用户的使用频率。好的搜索框一方面能帮助用户节约时间成本，通过友好的设计细节带来差异化的信息反馈，便于用户在大量且复杂的信息中筛查所需目标，提高转化率；另一方面，还能协助产品搜集用户行为目标并做好数据埋点，为后期的更新迭代提供强有力的依据。
有部分设计师认为，搜索不就是一个矩形框、放大镜图标再加一个占位符不就搞定了吗？可有没有想过，为什么在不同类型的应用中搜索框的交互方式、视觉样式也有所不同，且用户在搜索前、搜索中、搜索后到底有哪些细节需要我们去注意？今天，笔者将和大家一起了解关于搜索框的设计知识。
一、基本属性与特征
1. 搜索存在的意义
当界面内容过多、在列表中仅通过视觉扫描很难找到目标，这时能给用户提供最大帮助的一个是筛选、另一个就是搜索，筛选能够缩小查找范围、而搜索却能直到目标。相对来说，对于有明确目标的用户，在关键词较为接近的情况下，搜索比筛选的查找效率、匹配结果的精准度更高。
2. 搜索反馈类型
输入关键信息后，系统会有两种反馈类型，自动即时反馈和手动触发反馈。
1）自动反馈
系统自动检测所有内容中符合关键词的目标信息并罗列出来，随着关键词的持续输入，与之相匹配的结果会逐渐减少、直至找到目标，类似自定义筛选功能。这种反馈方式适合内容不是特别多的列表，避免服务器的压力太大、影响反馈效率，例如地址搜索、查找联系人等。
2）手动触发
关键词输入完成后，需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果，这种方式适合内容信息较多的列表。例如商品查找、新闻类搜索等，其搜索结果也可能是海量的，与筛选功能结合使用效果更佳。
3. 搜索的属性特征
1）搜索入口
为了保持界面的一致性，在同一APP中，不同界面、功能的搜索应该具备统一的视觉属性。搜索本属于界面的一部分，需要将其放在关键位置，用户需要使用时能随时找到。
2）状态变化
站在用户体验角度，一个好的搜索应该具备完整的流程，即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化，将搜索功能的价值发挥到最大化。
二、搜索入口的样式及应用场景
在大家使用的众多app中，部分搜索框的样式虽然没有多大差别，其实背后都经过了精心设计。针对搜索入口，更具不同的应用场景、等级权重，其搜索入口的位置、样式也有所不同，下面将分别介绍四种常见的类型。
1. Tab栏独立入口
将搜索放在底部Tab栏作为独立的一级入口，很大程度上强化了搜索权重，有利于用户的搜索行为引导、以及产品搜索相关内容的推荐曝光。这种做法为搜索功能拓展提供了很大的空间，相比其他方式，操作起来更便捷，即便用户在其他Tab页时、突然有搜索需求时也触手可及，并使其成为应用重量级的流量入口。
Tab栏搜索入口只适合对于搜索需求极高的应用，具备简洁、高辨识度的放大镜图标让用户一眼就能发现它，需要注意的是控制好Tab功能数量，在3~5个图标时最宜使用，切勿强行加塞而影响操作。
例如：App Store、新浪微博、花瓣等
2. 顶部搜索框
最常见的搜索方式之一，将搜索以输入框的形式居于页面顶部（状态栏或标题栏下方），在视觉上非常醒目，用户进入应用即能快速找到，很符合用户的视觉浏览动线，为最终转化提供了很大的流量支持。
这种搜索框的形态较为复杂，其信息元素的设计有很多方面的考究，它主要由搜索框、图标、占位符以及部分其他元素组成，下面一一介绍：
1）图标
首先，“放大镜”样式的图标主要用于提醒用户这是一个搜索功能，如果搜索框足够明显且有占位符引导，也可以去掉搜索图标；其次，辅助搜索如语音录入、扫一扫、拍照搜索等也会使用图标样式呈现。
2）占位符
提示用户文本输入位置，很多产品会根据自身属性或功能类型提供固定的占位符，例如：请输入xxx搜索、搜索感兴趣的内容…等。
在电商类型的产品中，为了提高占位符的商业价值，将其进行了拓展，系统根据千人千面的算法推荐、提供多个占位符式的商品名称轮播，或者将占位符当做广告位进行出售，不仅让搜索框更个性化，还能潜移默化的提升搜索的转化率。
3）按钮
为了提高用户使用搜索功能的便捷性，键盘的右下角都会有搜索操作，但设计师们依然会毫不吝啬在搜索框右侧多添加一个搜索按钮，一方面在视觉上能起到引导搜索的作用，另一反面给用户多一个选择、避免键盘隐藏后需再次唤出才能发送搜索指令。
4）选择器
对于类型/属性较多且要求较高的产品，为了提高搜索结果的精准度，会增加一些前置条件，让用户设定好之后在进行搜索，得出的结果会与用户目标更匹配，能一定程度的提升用户对产品的满意度。例如：携程旅游搜索的地址选择、酒店搜索日期选择，拼多多的商品、店铺选择等。
3.“放大镜”图标入口
形态相对比较简单，通常以“放大镜”样式的icon出现在界面右上角，视觉上不会过于突出，常用于搜索行为不是特别频繁的场景，需点击后才会跳转至搜索框页面。
Icon搜索入口相较于上述提到的类型在视觉引导方面略逊一筹，相对弱化了搜索功能，但可以节省了更多的导航栏空间，呈现位置比较灵活，可单独呈现、也可与其多个其他功能icon并列组合展示。
4. 隐藏式入口
隐藏搜索入口方式在真实场景中使用的极少，在初始状态下将搜索入口隐藏，需通过交互操作唤醒。例如：有的将其折叠，点击展开才能看到；有的通过下滑才会出现，iPhone桌面就是一个不错的案例。
三、常见的搜索方式
基于信息复杂度的提升，纯文字搜索已无法满足很多产品的搜索需求，为了拓展搜索功能空间、更好的满足用户需求，衍生出了多种搜索方式，如语音搜索、扫一扫、拍照搜索等。
1. 文本搜索
最常用且做主要的搜索方式，点击搜索框激活键盘即可开始，相较于其它方式，码字的操作成本略高，但这种搜索方式极为灵活，对于有目标的用户、其搜索结果的精准度只高不低。
文本搜索可分为模糊搜索和精准搜索。精准搜索即能准确识别所输入的关键词，要么结果与搜索目标极度匹配、要么结果为空，例如订单查询、查找联系人等；模糊搜索可在无法匹配用户目标的情况下，推荐与关键词相似、或相接近的内容，不管用户是否有明确的目标皆可使用，例如商品搜索、新闻资讯搜索等。
2. 语音搜索
语音搜索比文本搜索更为便捷，省去了用户码字的操作，同时也解决了对使用键盘、拼音有难度的老弱用户群体所面临的现实问题。语音录入后，系统会将其转化为文字，然后根据关键词搜索内容，需要注意的是对普通话的标准程度要求较高，不然会影响搜索结果的准确度。
为了给用户提供更好的搜索体验，语音搜索也玩出了新高度。例如：酷狗音乐的哼歌识曲/听歌识曲，用户只需哼出大致的曲调或直接对正在播放的音乐录音就能找出歌曲名字；在高德地图中，直接说出“导航去xxx”,系统即可自动完成搜索、查询路线等多个操作步骤。
3. 拍照搜索
拍照搜索是借助图像识别技术将用户实时拍照、或上传的图片进行相关内容匹配的一种搜索方式，在电商类产品中得到广泛应用。当我们看到一个物品想要够买，不知道叫什么或无法用文字准确形容时，拍照搜索就能很好的解决这个问题。
4. 扫一扫搜索
用户有明确目标且现场有真实样品时，可直接扫描商品条形码/二维码搜索相同的商品。虽然这种搜索方式比上述任何一种方式搜索的准确度都要到高，但受到现实条件的限制，反而使用频率很低。
四、搜索流程状态解析
1. 搜索前-进入“待命”状态
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
