Bars系列之 l 搜索栏(Search Bars)设计指南

定义

搜索栏（Search Bars）：通过在其中输入字段，来实现对大量数据合集的查询。

SearchBar

基础设计指南

1. 将搜索框放在用户预期的位置
   搜索框最佳的位置，网站上是每个页面的正上方或右上方，移动端是每个页面的导航栏下方，也可以固定在导航栏中或默认隐藏待下滑时再显示。

2. 占位文字提示可搜索的内容和上下文
   搜索栏可以包含占位符文本，如“搜索服装，鞋子和配件”或简单地显示“搜索” ——作为搜索上下文的提醒。
   

   

   search_Placeholder

3. 提供一个带有放大镜图标的搜索按钮
   放大镜图标具备高效识别的特点，搜索按钮则提示用户进行下一步，即使大多数用户会按Enter键执行此操作。

4. 提供清除按钮
   辅助用户快速清除已经输入的文字内容。
   

   

   search_Clear

5. 适时提供一个取消按钮
   立即终止搜索的取消按钮，为用户提供了取消当前搜索行为的操作方式。
   

   

   search_Cancel

6. 保持搜索栏简洁，默认情况下不显示高级搜索选项，但可以考虑在搜索栏下方提供有用的快捷方式和其他内容。
   帮助用户更快地获取内容，例如，Safari在点击搜索栏后会立即显示出已收藏的书签，不输入任何字段就可以点击跳转至对应书签页。

7. 当搜索正在执行时，提供明确的状态反馈。
   通过视觉提示向用户反馈系统当前的工作状态，可以在搜索结果中对用户已输入的字符内容进行突出显示。

体验优化Tips

• 遵循显性搜索（Explicit Search）的原则
  例如，在输入域周围提供明显的操作按钮，提供撤销搜索选项，通过反馈告知用户搜索动作已完成

• 自动补全（Auto-Complete）输入内容
  根据已输入内容，推测或提示关联搜索词，用户点击后自动补全输入内容。
  匹配的查询条件不要超过10个（且不要显示滚动条），以保证信息不会过载。
  可以在搜索结果中加粗已输入的字符，突出显示。

• 动态搜索（Dynamic Search）
  针对已输入的内容，即时呈现搜索结果。
  对有限的数据，如地址薄或个人媒体库，比较有效；不适合搜索海量数据。

• 范围搜索（Scoped Search）
  在搜索之前或之后对搜索对象的类型和范围进行限定，从而得到更匹配的搜索结果。
  根据数据集提供合理的搜索范围选项或设定默认分类，3-6个足够，必要的时候可以通过表单来实现高级搜索功能。
  例如，将范围分栏（Scope Bars）添加到搜索栏下方，适用于有明确分类定义的场景，缩小搜索范围。
  

  

  ScopeBar

• 保存搜索记录（Saved&Recent）
  显示最近搜索的内容，便于用户选择搜索过的关键词，节省重新输入的时间。

• 搜索结果（Search Results）
  标明搜索结果的总项数，提供合理的默认排序规则和信息呈现形式。

• 移动端通常采用延迟加载（Lazy Loading）的方式
  首先加载一部分搜索结果，另一部分继续载入。两种方式触发更多内容的加载，一是浏览内容下滑到未加载位置时自动加载，二是用户点击某个按钮或链接来加载。

• 网页端可根据实际场景确定搜索结果是否采用分页显示的方式
  分页可以帮助用户从一个很长的列表中定位某个特定的项目；对于浏览性的表格来说，点击显得比较多余。

• 如果内容仅限于单一字段，输入框可以确定一个合适长度
  根据输入内容的长度规划字符数，体验更佳。

以电商为例

其搜索位置明显，定位是按需要精准购买的用户；
通常在搜索框内及周围推荐商品品类；
鼠标定位在输入框时，会显示热搜推荐和历史记录提示，以及更加细分的某类别（或提供分类搜索框指定搜索范围）；
有字段容错功能，支持语音输入。

参考来源：

Search Patterns: Design for Discovery
Designing Search: UX Strategies for eCommerce Success
移动应用UI设计模式
Apple developer Human Interface Guidelines