浏览器 --- 搜索框的设计
搜索框是浏览器中交互最为频繁的控件之一，因此如何设计一个搜索框变得极为重要。用户输入搜索关键字，浏览器会提供命中关键字的搜索结果。大多数浏览器的行为都差不多，如下图所示：
上图依次是：百度浏览器，QQ浏览器，UC浏览器，夸克浏览器。一样的关键字，不一样的数据和排序。从图中可以看出有如下功能：
这么多功能最终都是为了让用户以最快最舒服的方式找到想要的内容。搜索框看似简单，其实是一个非常复杂的交互控件。说白了就一句话，如何根据用户使用习惯对数据进行有效的排序筛选。
根据这三点来设计浏览器的搜索框就是今天的主题。
数据的来源可以是：
数据源不是越多越好， 数据源多样化会导致数据膨胀，最终会增加用户使用成本。 那么，如何对数据进行有效的排序和筛选变得非常重要。
需要在有限的显示区域里面，展示有效的数据。排序根据用户权重系数降序排列，
首先对每一种数据源配置权重系数w1 ，然后对同一数据源的每一条数据配置权重系数w2。同一数据源的权重按一定的算法衰减，保证所有数据源重要的数据都可以在有限的显示区间显示 。
一条数据的权重最终为：
通过学习用户行为高效的配置资源，提高用户的浏览体验。这里不得不说Chrome ,一款伟大的浏览器。通过参照 Chrome 的实现方法 ，实现根据用户行为有效配置资源。用户行为的学习，也会影响到数据的排序，使排序更加智能化。
首先，当我们开始一款产品的搜索功能设计，通常需要考虑到以下3种状态的设计：
功能入口；
功能激活态；
功能输入态；
功能入口
我们先来聊聊功能入口，通常情况下我们需要考虑为搜索功能设计一个触发入口。我们可以将常用的设计形式归纳为以下几种：
功能外露，以 Amazon 为例。搜索功能以输入框的形式直接展示在屏幕中。这是最为常见的一种设计方式，也是大型电商类应用通常会采用的形式。
功能布点，以 虾米音乐为例。它与功能外露型类似，只不过是将搜索功能弱化成了一个 icon，点击后才会展成搜索框。
独立 Tab，以 Snapguide 为例。它是将搜索功能放得最重的一种形式，很多应用会把它命名为 Discover 或 Explore。这个 tab 除了包含基础的搜索功能，还增加了很多运营的内容在里面。
特殊类型，以 Airbnb 为例。搜索功能会作为一个 icon 放在页面中间，在 Android 的设计中经常会作为 FAB 出现在屏幕右下角。
1.使用放大镜图标根据定义，图标是对象，动作或想法的可视化表示，并且有几个图标是用户记忆最深刻的，也是通用的。
沈阳北大青鸟http://www.kmbdqn.cn/认为放大镜图标就是其中之一。
即使没有文字标签，用户也可以识别放大镜图标的作用。
2.将搜索框放在用户希望找到的地方如果搜索对于你的应用或网站来说是重要的功能，那么搜索框必须放在显眼的位置，让用户一眼就能找到。
研究发现，搜索框放置的最佳位置是你网站上每个页面的左上角或右上角，用户可以使用常见的F形扫描模式轻松找到它。
理想情况下，搜索框应该完美匹配网站的整体设计，并在用户需要时轻松展现。
3.为搜索框提供搜索按钮搜索按钮可以帮助人们了解还有额外的触发操作_即使他们通常使用Enter键。
4.将搜索框放在每一页上始终提供对每个页面的搜索框的访问权限，因为如果你的用户找不到他们正在查找的内容，他们将会使用搜索功能，无论他们处于你网站的哪个位置。
5.使搜索框简单如果你设计一个搜索框，请确保它看起来像一个搜索框，并尽可能简单的使用。
根据可用性研究，默认情况下没有显示高级搜索选项，这样更加显示用户友好。
高级搜索选项可能会混淆将尝试使用它的用户。
6.自适应字段大小输入字段太短是设计人员常见的错误。
当然用户可以键入长查询，但只有一部分文本可见，部分文字被隐藏，这意味着可用性差。
因为用户无法轻松查看和编辑其查询。
实际上，当搜索框能够输入的文本有限时，用户被迫使用短的文本进行查询，这样就不能精确的查询。
如果输入字段根据其预期输入进行大小调整，那么它们更容易阅读并给用户提供良好的用户体验。
7.使用自动建议机制自动建议机制可以帮助用户通过输入的字符进行预测来找到正确的查询。
自动建议机制不是加快搜索过程，而是关于指导用户并帮助他们构建搜索查询。
用户在查询配置方面非常差：如果在第一次尝试时没有获得良好的结果，他们可能就放弃了。
自动建议机制可以帮助用户更好地表达他们需要的搜索查询。
创意平面设计网站：
1.Behance
Behance 是 2006 年创立的著名设计社区，在上面，创意设计人士可以展示自己的作品，发现别人分享的创意作品(上面有许多质量上乘的设计作品)，相互还可以进行互动(评论、关注、站内短信等)。
2. Site of the Day Awards
CSS Winner是一个独特的全球性平台，专门展示和奖励最佳网站，推广创新的网站设计师，开发者与机构。
3. Awwwards - Website Awards - Best Web Design Trends
可以说是设计师的知识储备库。
4.全景网
中国领先的图片库和图片素材网站。
5. Graphics vectors, +19,800 free files in .AI, .EPS format
无论排版，还是配色，会给你很舒服的感觉。
6. Dribbble
Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或正在创作的作品的交流网站。
7.Pinterest
Pinterest个人创意及视觉探索工具，也可以当做图片分享类的社交网站。采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片不断自动加载在页面底端，让用户不断的发现新的图片。
8. Webデザインリンク集：
一个日本的优秀网页赏析网站，非常精美。
9.deviantart
插画艺术家的聚集地作品，质量非常高，时常看看对审美提高有很大帮助。
10.visualhunt
visualhunt有3亿张免费图片下载，非常全面。
11.pexels
pexels综合性的免费图片下载网站。
12.newoldstock
newoldstock专门下载老照片的网站，很有格调。
13.travelcoffeebook
travelcoffeebook是一个旅游景点照片分享的网站，赏心悦目。
14.foodiesfeed
foodiesfeed是一个高质量美食图片免费下载网站。
15.pixabay
Pixabay是一家高质量图片分享网站。最初，该网站由Hans Braxmeier和Simon Steinberger在德国发展起来。2013年2月，网站拥有由影师和其社区的插画家提供的大约7万张免费的照片和矢量图形。
笔者将从多款成熟的产品中体验搜索功能，浅谈几点心得体会。
互联网经历了从信息孤岛至网络发言权的解放，到现在解决海量信息在细化后的定向搜索和获利机制的问题，个性化多元化的内容成为互联网的现状。
搜索功能成为每个人获取信息的交互方式，用户对于搜索引擎的依赖逐渐增加，这是属于搜索的时代。
本文将结合实例，介绍符合用户体验的搜索功能应具备哪些因素？未来智能化搜索功能有哪些趋势？
以实际案例分析搜索功能，希望对你有帮助。
一、设计搜索功能的目的
获取信息的便捷性：随着智能手机普及和网络响应速度的提升，用户从互联网中获取信息的途径更加便捷。
解决搜索的低效率：完善搜索功能的目的是提高用户获取信息的交互效率，方便用户从海量信息中精准快速的找到相关内容，解决用户搜索效率低的痛点。
二、不合理的搜索案例 1. 案例
我打开某一个外卖APP，想找找附近有什么好吃的面食，找不到搜索功能，难道我需要从一堆米饭火锅里找面食吗？
我想去看电影，搜地图的时候，搜索框太小了，点错好几次；好朋友推荐了一个视频APP，搜索框没有搜索提示，我搜“励志”“爱情”的视频类型呢？还是搜“耐克”“蓝标”公司品牌呢？
2. 问题
《设计心理学》讲到：
“任何带来不必要麻烦的东西都被冠以‘诺曼’这个名字。当某种产品为‘诺曼门’，实际是承认了该产品的制作者没有关注用户的需求，而这正是我要传达的信息。”
虽然这些日常问题听起来微不足道，但却能够影响你的心情：或者让你心情愉悦，或是令你灰心丧气。
三、合理的搜索具备哪些因素 1. 产品的需求程度与目标用户紧密关联
不同的产品适用于不同的目标用户，此产品设计的所有功能都需要根据目标人群定义，脱离目标人群而设计产品功能相当于闭门造车，对产品设计危害极大。
资深产品经理梁宁讲述经典用户画像时，将用户分为三种典型特征：大明、笨笨和小闲。
大明用户对于自己的需求非常明确、非常清晰。比如：男人买衬衫和买3C产品就是典型的大明用户，搜索需求程度最大，并要求高精准度和高效率； 笨笨用户的特征是——我有大概的需求，但是还没有那么明确。比如：女生买裙子，得看和挑选。笨笨用户需求程度中等，搜索精准度要求不高； 小闲用户没有消费需求，就是为了打发时间。比如：聊天，玩游戏或者看短视频等。搜索需求量最小，搜索精准度和效率要求最低。2. 搜索框的位置
产品描述：打开产品首页，搜索框位置统一放置在产品上方或右上角。
设计理由：根据目标人群对于搜索需求程度分析，产品用户搜索精准度和效率需求程度高时，搜索框位置应放置于产品上方，并以深色底做高反差对比，强调搜索框位置便于用户使用搜索。
产品用户搜索需求程度中等时，降低搜索框和底色反差对比，但搜索框的位置仍然保持在最上方，便于用户寻找和搜索；
产品用户搜索程度较低时，搜索功能弱化为icon，放置于右上角。
3. 搜索框的UI细节易于用户理解和交互
产品描述：搜索框高度通常为50pt-30pt之间，同时使用“icon”替代“搜索”文字，搜索框右侧放置语音或图片识别的搜索icon；
设计理由：根据苹果的《iPhone人机界面设计规范》，手指最小的点击目标尺寸是44 x 44像素。搜索框或搜索icon的交互区域应大于44 x 44像素。遵循人们习惯从左到右的阅读习惯，搜索icon放置于左侧，方便用户查找。
4. 搜索框增加默认文本
产品描述：美团的默认文本为用户最近浏览或购买过的外卖饭店；高德地图搜索框中的默认文本是搜索框提供的主要功能；即刻搜索框的默认文本是最近搜索热词。
设计理由：搜索功能默认文本的作用是帮助产品为用户解答能搜什么的问题。如果搜索框内无提示语，那么用户使用产品搜索时所产生的困惑和无助感极大可能使产品损失大量用户。外搜索默认文本的设计和产品目标用户应提高关联度，比如：
美团外卖解决的痛点是帮助用户又快又好的点外卖。每一位用户都有自己的口味，那么通过分析用户的使用记录，结合大数据统计将搜索默认文本展示为用户经常点击的饭店名称，可以提高用户点餐效率；用户又会觉得产品很懂自己的口味，达到提高用户粘度的作用； 高德地图解决的痛点是帮助用户导航，到达目的地。那么搜索框的默认文本简单直接地提示用户进行搜索，功能效率最高； 即刻是兴趣社区，目标用户类型多为小闲用户（使用产品的目的为打发时间），搜索框内默认文本为最近热词有助于用户搜索，提高产品日活。 5. 搜索时留存历史记录和推荐搜索词产品描述：点击搜索框保留历史记录；同时，页面展示推荐搜索热词；
设计理由：点击搜索框后，保留历史记录，帮助用户在搜索同一内容时快速查看，节省重复输入的糟糕体验；为用户增加推荐搜索内容，当用户准备搜索关键词时，无意中在产品推荐搜索内容中找到感兴趣的热词时，很容易激发用户的点击查看而提高产品相关热词或商品的点击率和购买量。
6. 搜索提示
产品描述：用户搜索时无需输入完整内容，搜索功能实时根据用户搜索词，展示相关搜索内容供用户选择；
设计理由：效率为王的互联网时代，为用户节省时间可以极大的提高用户好感度。此功能比较考验产品优化搜索关联的内容，提高准确率，准确度越高用户惊喜感越高。
7. 搜索容错率
产品描述：搜索内容出现错别字，搜索时基本不会出现错误页面，而是通过产品容错率将用户可能想搜索的内容展示给用户；
设计理由：搜索容错率的最大作用是避免将“错误搜索”或“无搜索内容”等负面状态传递给用户，造成用户使用产品的挫败，疑问甚至愤怒的负面情绪，从而流失用户。
优秀的搜索功能将具备搜索容错率并提高容错率准确度，而更符合用户体验的细节在于：如果用户搜索的内容是比较偏僻的生词，如用户搜索“外形人”，产品应提示用户“是否继续搜索‘外形人’”选项，赋予用户选项的权利，可以提高用户的好感度。
四、总结 1. 搜索功能的变化
如果你在百度搜索诸如“打雷”或是“成龙”等，就会很形象的出现打雷的声音；成龙的个人简介、兴趣爱好、喜欢的颜色和相关人物推荐等等。又比如你上传一张图片至百度，就会自动统计与该图片相关的信息或图片来源。
2. 搜索交互的变化
用户搜索已不仅仅局限于点击搜索框、输入文字点击搜索，未来更多的趋势已逐渐向语音，图像甚至AR等智能化层面发展。
甚至，搜索行为会慢慢从主动变为被动：产品通过去年一年的服装购买行为数据，推算出你今年同一季节可能需要购买的衣服类型，主动询问你是否需要搜索；通过出行记录，主动在下班时询问你是否需要搜索交通路况；很快会出现和平台无关的跨设备检索和数据搜索方式，就像不同的手机应用间可以同步共享联系人信息。
3. 搜索未来的展望
无论未来智能搜索会发展到什么程度，搜索归根到底仍然是和人交互的行为，而和人的交互就需要考虑到用户体验，搜索只是产品中很小的细节，还有更多细节等待我们学习和思考。
本文由 @蓝色弹珠 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
