【PM】移动设计模式—搜索篇

Alfred

今天继续探讨如何帮助用户找到内容——「搜索」过程产品设计。

我们先看一个完整的搜索用户体验流程：有一个用户小明，进入一个APP之后，通过搜索功能查找相关内容，系统反馈结果，小明对结果进行浏览，最终找到目标对象。

整理抽象后的流程为：搜索入口(功能入口)→搜索页(关键词输入)→搜索结果页(相关数据列表)→目标结果页(详情页)。

下面我们按照这四个步骤分别探讨可能的设计方案，以帮助我们提高产品搜索功能的使用体验。

一、搜索入口

设计规范：Android/iOS

两大移动平台都有标准的搜索控件，尽量按照平台规范设计，使用原生控件。

设计层面：整体性、规范性、美学性。

技术层面：标准化组件，开发成本低、兼容性好、体验流畅。

PS：Android版本跨度较大，考虑部分原生控件兼容性稍差，可根据实际需求重新设计。

二、搜索页

关键词联想、关键词排序、热门搜索、搜索历史

1. 有效的关键词联想。当用户输入文字时，使用有效的自动提示，诸如词根识别、文本预测等都可以降低用户的输入难度、操作强度，有助于加快搜索提高效率。

京东（iOS）

2. 联想关键词排序。阅读顺序为从上到下。根据关键词相关性、文本匹配算法确认联想出的关键词排列顺序，提供最短路径，节省消耗。

若联想出的关键词，已经找到目标对象，则点击后直接跳转至目标结果页。

微信（iOS）

3. 显示最近搜索记录。提供搜索历史主要用于再次查询，帮助用户节约时间和精力。符合基本的可用性原则：尊重用户的付出。

搜索记录数量不宜过多，尽量不使用滚动条，太多的信息会造成过载且意义不大。若有必要，可以提供入口查看所有记录。

4. 可提供热门搜索。用户没有明确的搜索目标，推荐部分关键词，给用户提供选择，帮助用户了解趋势。 同时，推荐的关键词可以提高转化。非必须项，根据产品属性选择使用，推荐性、商业性较弱的产品，可不使用。

京东（iOS）

5. 显示搜索进度。从「搜索页」到「搜索结果页」的过渡，需要给出搜索进度提示，可使用动画特效完成转场，降低焦虑感。注意区分短等待与长等待。

三、搜索结果页

关键词回显、结果排序、结果数量、显式方式选择、过滤器

1. 回显用户在「搜索页」输入或选择的内容。再次查询是信息检索中关键的一步。在搜索框中留下初始的关键词，方便用户进行再次查询，让用户不至于重复输入。

2. 反馈准确或相关的结果。以合理的方式确定结果优先级，并把所有重要的结果放置在前面。关联性(优先级)排序：准确>相关>推荐。最好能基于自己数据库里的数据范围做匹配或推荐，提高准确度。

3. 纠正拼写错误。打字容易出错，尤其移动场景。 如果用户输入了错误的关键词，为避免因没有返回结果导致用户不得不再次输入关键词的不适，提供两种设计方案：

3.1 系统直接按照预测判断的正确关键词反馈结果，给出提示。

3.2 在结果页告知输入错误，提供建议关键词，或直接给出建议关键词之后的结果。

京东（iOS）

4. 显示搜索结果数量及分页。告知用户具体数量及位置，帮助用户在进行内容比较时快速定位；指导用户后续动作，如需要花费多长时间浏览、是否需要再次搜索。

5. 选择合适的结果页布局方式：列表、网格。若只有图片或关键文本信息，采用网格形式；若需要展示更多细节信息，采用列表形式。

5.1 提供展示方式切换选择。

5.2 网格布局形式的图片要适中，基于展示需求及美学性。

6. 提供过滤器。必要的筛选条件可以提高效率节省精力。一次搜索系统返回的结果过多时，通过排序和筛选条件缩小搜索结果范围，帮助用户更快更精准找到目标内容。

6.1 提供全站(综合)及分类查询。

6.2 排序及筛选条件分开设置。

6.3 筛选选项不宜过多（≦5个）。

6.4 提供筛选选项默认值。

6.5 若只有一个Filter入口，提供多选设置。

6.6 回显已设置选项值。

7. 尽量不直接显示"无结果"。原则上帮助用户寻找替代品。给出相似/相近关键词推荐；给出相似/相近内容推荐；文案友好。

四、目标结果页

一个关键原则：目标结果页与搜索结果页的关键信息显示应前后一致，否则容易造成用户的担忧。具体的内容设计及界面设计放在下一个系列更新。

一个优秀搜索产品基本要求：快速准确找到用户想要的。如果有可能，不要让用户花精力去找，直接提供给他。

愿你更进一步。

---

完。