模式 搜索

搜索

搜索可以使用户快速查找应用内容。

当应用支持大量的内容时,用户应该要能通过搜索功能快速查找内容。

搜索选项

语音搜索
搜索建议
自动完成

搜索类型

固定显示的搜索
可展开搜索

Material Design 中的搜索功能让用户快速查找内容

应用内搜索 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

当应用支持大量内容时,用户应该要能通过搜索功能快速查找内容。

基本的搜索包括:

  1. 打开一个搜索文本框
  2. 输入并提交一个查询
  3. 显示一组搜索结果

然而,可以通过提供以下功能来提升搜索体验:

  • 语音搜索
  • 在搜索完成之前,根据用户的最近搜索提供历史搜索建议
  • 自动完成和应用的真实搜索结果匹配的搜索建议

应用内搜索有两种主要模式:固定显示的搜索可展开搜索

固定显示的搜索

当搜索是应用的主焦点时,使用固定显示的搜索。

行为:

搜索文本字段嵌入在搜索框内,随时准备获得焦点。用户可以触摸麦克风图标来启用语音搜索。

当获得焦点时,搜索框会向下展开,显示历史搜索建议。如果需要的话,屏幕键盘也会出现。

选择任意一条搜索建议就会提交搜索。触摸向上箭头会将焦点从搜索框中释放,关闭搜索建议以及屏幕键盘。

Material Design 中的固定搜索框

固定显示的搜索框

Material Design 中的聚焦状态搜索框

聚焦状态的固定显示的搜索框

当用户输入搜索词时,搜索建议会切换为自动完成。随着用户的输入,搜索建议会被过滤和排序。选择一个建议或按下搜索键就会提交搜索。

搜索框中的 X 操作会清空搜索词。

当显示搜索结果时,搜索框保持可见,但是默认不拥有焦点。屏幕键盘已关闭,因此可以显示更多搜索结果。

搜索结果的格式为卡片,以匹配搜索框的外观,以及适应不同类型的搜索结果。

Material Design 搜索中的自动完成功能

自动完成

Material Design 中的搜索结果

搜索结果

可展开搜索

当搜索不是应用的主焦点时,使用可展开搜索。

行为:

在工具栏中显示一个放大镜图标,而不是搜索文本框。

触摸搜索图标会使工具栏进行转换,清空工具栏中的其他内容,并显示搜索文本框。如果支持语音搜索,麦克风图标也会出现。

搜索文本框会自动获得焦点,如果需要的话,屏幕键盘也会出现。历史搜索建议可以显示在工具栏下面。选择任何一条建议将提交搜索。

触摸向上箭头可以关闭搜索,并把工具栏恢复成原始样式。

Material Design 中的可展开搜索

可展开搜索

Material Design 的聚焦状态搜索框

聚焦状态的搜索文本框

当用户输入搜索词时,搜索建议会转换为自动完成。随着用户的输入,搜素建议会被过滤和排序。选择其中一条建议或按下搜索键会提交搜索。

搜索框中的 X 操作会清空搜索框。

当显示搜索结果时,转换成了搜索框样式的工具栏保持可见,但是默认不拥有焦点。屏幕键盘已关闭,因此可以显示更多搜索结果。

搜索结果被格式化成卡片,并显示在工具栏下方的页面主体中。

Material Design 搜索中的自动完成功能

自动完成

Material Design 中的搜索结果

搜索结果