火星网校
设计搜索栏，你遵守这五条原则了吗?
发布时间：2024-04-13 17:11:37 浏览量：241次
如果顾客都搜不到想买的东西，你还怎么指望你的产品能卖出去？搜索功能是营利性 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 需要包含各种类型的搜索方式，也要给用户提供相关的搜索结果。当在手机上购物变得简单时，用户才更有可能用手机来购买，而不仅仅是搜索。
原作者：Nick Babich 翻译者：Puddinnng
原文：
http://babich.biz/mobile-ecommerce-how-to-design-ux-search/
来学吧®乐产功场™产品经理培训第一品牌，专注于产品经理的培养。3大系统、15大模块、30天华丽蜕变！5大工具、8大方法、30+次实战演练，历经13次迭代，300+名学员口碑验证。黄埔14期正在火热报名中，官网www.laixueba.com，欢迎关注我们的官方微博@乐产功场，微信公众号“来学吧（ID:Laixueba）”，每天为您分享互联网产品经理必读精选文章。
热门课程推荐
热门资讯
-
想要了解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设计培训班的学费价格以及学习内容。
