原作者：Nick Babich  翻译者：Puddinnng

本教程为翻译教程，原文地址为：

http://babich.biz/mobile-ecommerce-how-to-design-ux-search/

如果顾客都搜不到想买的东西，你还怎么指望你的产品能卖出去？搜索功能是营利性 app 和网站上，很基本也很关键的功能。在搜索、了解产品时，用户期盼着流畅的 app 内搜索体验。而且他们常常根据一两组的搜索结果，很快地对 app 的好坏做出评价。

完善的搜索功能应该能让用户快速简单地找到他们想找的。这篇文章中，我们会探究如何使之成为可能。

1.搜索栏的放置位置

用户寻找搜索栏时，可谓是又快又狠。他们常常只是扫描一下页面去寻找“我可以输入的那个小框”。

目标：设计能被快速发现而且明晰的搜索栏。

1.1将搜索栏放置在醒目的位置

搜索栏是用户找产品最快速的一种途径，所以它是电商app/网站的主要功能，也应该被放置在醒目的位置。将搜索栏放在隐蔽位置的app会让用户觉得沮丧，也会让用户的操作流程变慢。

左边：搜索功能被藏在目录旁边。

电商app应该将搜索栏放在的首页顶部（如果你的首屏很长，那么在底部也放上搜索栏）。对拥有大量商品的app来说，将搜索栏放在这样的位置，能够让它既明显又能够很快被找到。

放置一个能轻易辨别的搜索栏在屏幕顶部

1.2将放大镜图标和搜索栏放一起

只有少数图标具有世界范围内的广泛认知度，放大镜图标恰恰是其中一个。就算你没有使用文字标签说明，用户也能将放大镜图标看作是“搜索”的意思。

你应该使用一个粗线条，最简化的放大镜图标。因为图形细节越少，认知速度越快。

放大镜图标

1.3范围栏（iOS系统特有）

在iOS系统中，搜索栏会伴随一个范围栏，这个范围栏能够让用户快速地选择搜索范围。

范围栏可以被加在搜索栏之后，以便用户能够再次缩小搜索范围。

然而，更好的办法还是优化搜索结果，省得用户自己给搜索划范围。

2.理解搜索栏中的问句

搜索栏迫使用户做更多的工作，不仅因为用户需要提出问句，他们还需要将它打出来。输入是一件浪费时间的事情（特别是在手机上）。

目标：尝试降低用户输入数据的难度，同时提供即时的搜索结果。

2.1自动建议

大多数用户不擅长于构建问句：第一次搜索时，如果他们找不到想要的结果，之后的尝试也很少成功。事实上，大多数情况是他们直接放弃了。自动建议机制通过用户输入的文字，来预测用户想查找的内容，帮助用户找到合适的问法。自动建议机制帮助用户更好地构建问句。

自动建议机制不在于加快搜索的过程，但却能指导用户输入合适的问句。

自动建议工具能过减少用户犯错的可能

但是确保自动建议机制是有用的。设计糟糕的自动建议机制会使用户感到困惑。所以请使用拼写自动更正功能来优化这个工具。

2.2近期的搜索记录

app应该储存下所有交互过程，包括最近的搜索和购买记录，以便在用户下次搜索时供他们使用。这会让用户在搜索相同物件时节省不少时间和力气，也能提升用户体验。

搜索记录在电商app中很重要，因为用户会重复他们的搜索和购买行为。

3.搜索过程

最理想的情况是搜索结果能立刻展现，如果做不到的话，你也应该提供合适的视觉反馈。但要记住，漫长的加载过程会让用户沮丧，还会有失去他们注意力的可能性。

目标：让用户感知到的搜索时间短于实际时间。

3.1搜索占位符

一般来说，0.1s以下的延迟不必提供特别的反馈。但如果长于这个时间，你至少要尝试让等待的过程变愉悦。这时，临时的消息占位符就很适合展示。

使用占位符来吸引用户注意

3.2延迟加载

延迟加载是一种常用的技术。它可以确保展示一部分的内容的同时，另一部分继续加载。用这种方式页面加载地非常快，因为最初只需加载少量的产品信息。

延迟加载技术用在手机app中

延迟加载产品时，最好先将产品文字说明加载出来。这样，没耐心的用户也能先通过浏览文字信息找寻目标商品，而不必等待所有图片都加载出来。

4.搜索结果的展示

目标：确保搜索结果是有用的。加快搜索过程，同时保持用户对接下来任务的注意。

4.1前几条搜索结果具有高度相关性

因为不需滑动就能看到的手机屏幕太小了，你要确保用户最先能看到一组高度相关的结果（3或5个）；这之后，他们才需要滑动屏幕去浏览更多内容。

4.2筛选和分类

在一项关于电商app可用性的研究中，Baymard 机构发现，超过半数的用户尝试在目前的页面“中搜索”，为的是“用搜索过滤掉更多产品”。然而，94%的手机电子商务app或网站不支持这个功能。

用户会被大量看起来不相关的搜索结果吞没。过滤和分类选项，能够帮助用户缩小和组织搜索结果。否则，用户就需要不停地滑动小小的手机屏幕。

左边：没有过滤和分类选项，用户需要浏览太多产品了。

4.3“在其中搜索”区域

这个功能能鼓励用户在搜索结果中“再次搜索”，而不是使用传统的过滤功能。而这个功能会让你的用户更好地掌控他的搜索结果。下方你可以看见具有“在其中搜索”功能的页面示例：

4.4有用处的“没有结果”页面

用户搜索时难免会遇到“没有结果”页面。缺乏设计的“没有结果”页面对于用户来说是一个死胡同。

就算用户搜索不到任何产品，也要避免让他在你的 app 中遇到死胡同。当没有匹配结果时，你应该提供可替换的选择给用户，比如相似类别的产品。为了更好的帮到用户，你应该开发出“智能搜索”功能来。它们能够覆盖单双数修正以及错误拼写纠正等功能。

5.产品分类

5.1不友好的分类目录

用户在理解那些，不按照他们期待的方式排列的分类目录时，会很吃力。分类目录应该做到明确而且没有重叠的部分。因为当用户被搜索结果折腾得疲惫不堪时，目录会是他们最后的招数了。

结论

鉴于目前30%的网络购物行为发生在手机端上，电商 app 的担子从未如此之重。你的 app 需要包含各种类型的搜索方式，也要给用户提供相关的搜索结果。当在手机上购物变得简单时，用户才更有可能用手机来购买，而不仅仅是搜索。