【打卡学习】

Day1:搜索框的设计（2days 4hours）

【学习part1—交互】

输入框和提交按钮的组合，频率最高的组件。

设计范例：

·使用放大镜图标（使用大众理解趋于一致的图标）

·搜索框明显

·增加搜索按钮：让用户可以同时通过按回车和点击按钮去触发搜索。其实还是有很多用户习惯去点击页面上的按钮。

·为每一个张页面加上搜索框：当用户找不到他们想要的内容的时候，他们会去找搜索框，不管他们在你网站的哪个位置。（？？）

·把搜索框放在用户想出现的位置：，网站的左上角和右上角是用户所期待的搜索框的位置，用户在使用F型扫视法查看内容的时候，可以轻松找到搜索框。

尼尔森F形状网页浏览模式

·合适的输入栏尺寸：让输入栏长度大概保持在27个字左右（英文）就可以满足90%的情况了。

Tips: 考虑使用一个可伸缩输入框，当用户点击时，可以加长输入框。这样既可以节省空间，也可以让用户更加方便找到和进行输入操作。

·请为用户列出自动候选项：历史记录、关联词语、拼音修正

Tips:

确保自动候选栏是有用的。不好的候选项反而会让用户困惑。使用拼写修正，辨别输入，并且预测用户想要搜索的内容以为了提高使用体验。

你应该以最快的速度列出建议选项，大概三个字左右，就要快速列出候选项了，以来减少用户后面的输入。

控制在十个选项之内，不要用滚动条，以让信息不会过多。

支持键盘选择，当用户选到最后一个选项时，下一个选项应该转到第一个。ESC键应该可以让用户离开候选列表。

标出输入与建议信息的不同处（例如：输入信息用一般字重，建议信息用加粗字重）。

·请让用户更加清楚什么可以搜索

Tips: 控制你提示内容的字数，否则会增加认知负荷。

Part2 搜索框的产品设计

思路1：基于步骤的搜索设计（转自菜花谈产品）

第1步：输入关键词

信息录入目前来说最常见的就是文字录入，不过现在我们也开始看到新兴的录入方式：语音录入和图片录入。

语音录入我们最熟悉的产品就是一些音乐播放软件还有外语词典，比如qq音乐或者网易云音乐。用户想听一首歌，可以直接输入歌曲名，但是不知道歌名的情况下，可以通过语音的形式完成歌曲信息的录入。 而使用图片完成信息录入的一个比较典型的例子就是淘宝的拍立淘，用户可以拍下心仪产品的照片，系统就会给你匹配相似的商品，非常方便。从这点来看，设计师必须要时刻掌握最新的科技信息，要不然很容易就被淘汰。

输入关键词这步主要考虑的包含2部分：关键词识别和关键词推荐

1、关键词识别

对于输入关键词的识别上，通常要考虑以下几种情况的搜索需求：

（1）多字符串识别

假设用户提交了不只一个查询串，那么搜索引擎需根据分隔符比如空格,标点符号,将查询串分割成若干子查询串。例如，用户输入“气垫 粉底 BB” 和“气垫，粉底，BB” ，会展示所有包含“气垫” 或“粉底”或 “BB” 三个关键词的商品，而非同时包含这三个关键词的商品。

根据下图我们看到，小红书和网易考拉都做了这种识别。不论输入空格还是逗号，查询结果都是一致的。

小红书搜索结果 图2 网易考拉搜索结果

（2）分词

除了多查询串的识别，对长查询串的分词识别也是搜索最基础的要求之一。分词就是当用户提交了一个长字符串，可根据词义分割成若干字符串。例如用户输入“遮瑕气垫粉底bb霜”，能拆分成“遮瑕” “气垫” “粉底” “bb霜”几个词串进行匹配，而不是只匹配与搜索词串完全相同的结果。

（3）错别字识别

用户在搜索时输入错别字也是不可避免的情况。例如，用户搜索“永衣”，能给用户按“泳衣”关键词进行推荐。

（4）同义词近义词

为了最大可能覆盖用户想要的结果，可建立一个同义词近义词的词库，当没有完全符合搜索词的结果时，可推荐近义词或同义词的搜索结果，例如，在考拉中，用户搜“花露水”，系统推荐了“驱蚊”关键词的结果，并推荐了另2个相关关键词。

（5）重复内容识别

假设用户提交的查询有重复的内容，可将重复查询归并成一个处理。例如“遮瑕气垫粉底bb粉底”，能去重分词为：“遮瑕”“气垫”“粉底”“bb”

6）英文字母数字识别

查询串中包含英文字母或数字，将英文或数字作为一个整体保留，做模糊匹配。例如：“sulwhasoo面膜”被拆分为“sulwhasoo”“面膜”

1）历史搜索

历史搜索词就是推荐用户自己最近搜索过N个关键词，避免用户重复输入，支持用户手工清空

（2）热门搜索

热门搜索一般有两种做法：

一是根据用户搜索的关键词热度进行排序，获取真实的热门关键词进行推荐

二是受商业价值驱动，推荐从商业角度，最希望用户搜索查询的内容。这会有一个供运营配置的后台，由运营人工配置。

当然也可以综合以上两种方式，兼而有之。

第2步：确定关键词

确定关键词为了帮助用户用最小的成本获取最准确的关键词，关键词联想也是搜索的基本功能。联想关键词一般来自两个渠道：

一是所有用户历史热搜的关键词

二是自建的常用关键词库

当用户输入的关键词被包含匹配到以上两类关键词时，则被列入联想词列表。

第3步：搜索结果

1、检索范围

搜索范围的规则制定也是搜索设计最基础的环节。是决定用户搜索关键词跟什么内容去做匹配的问题。同时，影响到搜索权重。

跟什么内容做匹配，也取决于用户搜索场景的分析。例如用户想搜索的是商品，则应该跟商品属性做匹配，那具体是哪些属性，优先级如何，就是需要制定的规则。

商品而言，可以跟商品名称、商品关键词、商品详情等属性进行匹配，且商品名称的权重>商品关键词>商品详情。

有的平台可能没有商品关键词库，商品详情也用纯图片展示，那就只跟商品名称做匹配。

所以具体匹配的属性需根据不同的实际情况而定。

2、呈现方式

对搜索结果的呈现方式也是值得研究的点。同样需要从用户发起搜索的场景思考。

还是以小红书为例，用户的搜索需求有三种，搜索内容、商品、用户。

如果用户从商城搜索，那搜索结果默认定位至商品列表是最符合场景的，同理，如果用户从社区进入搜索，那默认定位至社区内容TAB

但是有的产品首页是一个综合页，包含了所有内容模块，如果用户是从首页搜索，那在不清楚用户想搜索的到底是哪一部分内容的情况下，需定位至综合结果页。综合结果页会罗列出几部分中相关性最高的几个搜索结果供用户选择。综合结果的设计可以参考微信搜索结果页。

第4步：细化筛选

通常在搜索结果里，都会默认按照相关度排序。但是也允许用户按需从其它维度进行排序筛选。可筛选的条件跟搜索结果所属的特性强相关。例如，如果是商品列表，那可以考虑根据商品的价格、分类、销量、功能等排序。如果是一个平台电商，那还可以根据品牌等进行筛选。

除了考虑商品本身的属性进行筛选外，还要从商业利益的角度，把最想展示给用户的商品组合成一个分类，方便用户删选，例如考拉的分类中，加入了“618”活动商品、考拉自营等分类。

刚才说的都是搜索结果过多的情况下应该怎么办。我们还应该考虑的是搜索结果为零的时候，我们如何给用户设计合适的空页面。

现在一些搜索结果是通过加载一个新的页面来展示的，如果我们不给用户说清楚。用户会误以为是网络原因导致页面加载失败而不是搜索不到你想要的商品。所以空页面设计一定要向用户解释清楚原因。

二、搜索数据的跟踪

数据驱动产品，是做任何产品都需要具备的意识。搜索也不例外。搜索上线后，我们需要监控哪些数据来帮助我们不断优化搜索功能呢？

1、用户搜索路径及漏斗转化

主要监控用户是从哪里进入搜索的？搜索后有点击搜索结果吗？有完成最终转化吗？用户的路径能帮助我们检验搜索结果是不是用户想要的。此外，如果用户在某个搜索入口高频搜索某个关键词，也可以帮我们反思搜索入口所在页面饿设计是不是没有满足用户某个痛点。

2、关键词搜索数据监控

用户在产品下留下任何行为数据都是有意义的。搜索过的关键词更是如此。关键词代表了用户对产品最直接的诉求。不论关键词最终的搜索结果如何，都值得被记录。并定期拉出来，进行分析。

分析的结果不仅能帮助搜索的优化，还能反推运营、业务进行改进。例如，如果一个电商平台，5月份开始用户搜索“花露水”及类似驱蚊类商品的搜索增加，而平台在驱蚊产品上没有充足的备货，那就可以推动对驱蚊类商品的采购。

3、搜索结果为空的数据监控

搜索结果为空的关键词，最能反映用户对产品的期待，但是却未达成所愿的那部分产品缺憾。所以，专项存储记录搜索为空的关键词，及关键词的搜索热度也是非常必要的。可以帮助我们不断弥补产品的不足。

思路2:根据场景的设计

在设计搜索之前首先需要思考的问题是：谁在什么场景下会使用搜索功能？他想搜什么？

1、小红书

小红书的定位是生活方式分享社区，旗下设立了电商平台“小红书商城”作为变现业务，所以小红书的核心布局：社区＋电商。所以对小红书有认知的用户，主要在如下几种场景下有搜索诉求：

（1）想了解生活达人们对某类商品的推荐、评价

（2）想在小红书商城购买某类商品

（3）想关注某位达人

由此，可以确定，小红书搜索范围在社区内容、商品、用户。从小红书搜索结果页TAB的分类看，也是按照这3类进行的划分，其中“全部”其实就是UGC社区内容。

2、网易严选

网易严选的定位是原创生活类自营电商，是一个纯电商平台，所以用户搜索诉求很单一：找到想要的商品

所以纯电商平台的搜索范围只局限于商品。

网易严选搜索结果主页

3、知乎

知乎的定位是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解。所以知乎用户的主要搜索诉求是：

（1）找到想了解的经验、内容

（2）找到想关注的知识咖

我们看知乎搜索的模块设计，虽然分为用户、话题、想法、专栏、电子书等分类。但是从本质上仍然分为人和内容两部分。话题、想法、专栏、电子书等都属于内容一类，只是不同的内容形态、业务形态而已。

大多数情况下，会使用搜索功能的用户，主要是产品的老用户，对产品的基本内容和服务有一定的了解，并且有着非常明确的自身诉求。在这种场景下，如果用户能检索到自己想要的内容或服务，必将会产生很高的转化。所以，搜索功能的重要性，不言而喻。

【个人总结】

1.对搜索框的理解

2.不同搜索框的设计

·QQ Mac版

建议信息为个人好友、群和工具

·微信mac版

微信则是以联系人、群聊、聊天内容、搜藏内容和搜索为返回信息

使用场景更偏向办公、信息搜索等

3.针对音乐软件搜索框设计

·网易云音乐mac版本

网易云的信息提示告诉使用者可以搜索哪些内容 输入关键词后，以用户、单曲、相关歌手、专辑、mv、歌单为搜索内容类别给出建议