搜索栏让用户可以在一组内容中,输入关键词以查找特定信息。

搜索栏是一种可编辑的文本输入框,通常显示搜索图标、清除按钮以及占位文字,供用户输入他们想要查找的内容。搜索栏还可以配合范围控制(scope control)和搜索令牌(tokens)使用,以帮助用户筛选和精确限定搜索范围。在不同的平台上,访问搜索的方式有所不同,这取决于你的应用目标和界面设计。
1. 最佳实践
展示能清楚说明可搜索信息类型的占位文字。例如,Apple TV 应用的占位文字是 “Shows, Movies, and More”(节目、电影及更多)。避免使用 “Search” 之类的词作为占位文字,因为这种表达对用户没有任何实质提示。
如果可能,用户一开始输入就应立即触发搜索。边输入边搜索的交互方式能让体验更具即时反馈感,因为搜索结果会随着输入内容的具体化而不断被优化。
在搜索开始前,或在用户输入时,考虑展示一些推荐搜索词。即使暂未正式启动搜索,显示常见或热门搜索词也能帮助用户更快找到目标内容。
简化搜索结果。优先显示最相关的结果,减少用户为寻找目标而不断滚动的需求。除了按相关度排序外,也可以通过分类的方式帮助用户更快定位。
考虑让用户能够对搜索结果进行筛选。例如,你可以在搜索结果区域中添加范围控制(scope control),帮助用户快速便捷地过滤内容。
2. 范围控制与搜索令牌
范围控制与搜索令牌是两种组件,它们可以帮助用户在搜索前或搜索后进一步缩小搜索范围。
- 范围控制的作用类似于分段控制(segmented control),用于在不同搜索类别之间切换。
- 令牌是搜索词的视觉化展现,用户可进行选择和编辑,令牌还可在搜索中充当针对任何额外搜索词的过滤条件。

使用范围控制过滤明确定义的搜索类别。范围控制可帮助用户从较广范围切换至较窄范围。例如,在 iPhone 上的“邮件”中,范围控制可帮助用户将搜索范围从全部邮箱切换至正在查看的特定邮箱。
默认使用较广范围,并让用户按需细化。较广范围可为全部可用结果提供上下文,有助于在用户选择缩小范围时为其指引有用的方向。
使用令牌按常见搜索词或项目过滤。在你定义令牌后,其所代表的搜索词会进行视觉封装处理,表示用户可以将其作为单项进行选择和编辑。令牌可以解释搜索词,如在“邮件”中按特定联系人过滤,还可以将搜索聚焦于特定属性组,如在“信息”中按照片过滤。若要了解相关的 macOS 组件,请参阅令牌栏。
考虑将令牌与搜索建议搭配使用。用户可能不知道哪些令牌可用,因此将其与搜索建议搭配使用可帮助用户了解其使用方式。
3. 平台考量因素
无针对 visionOS 的额外考量因素。
3.1 iOS
你可以将搜索入口点放置在以下三个主要位置:
- 屏幕底部的标签页栏中
- 屏幕底部或顶部的工具栏中
- 直接与内容内联显示
最合理的搜索位置取决于 App 的布局、内容和导览。
标签页栏搜索
你可以将搜索做成差异直观的标签页并放置在标签页栏后端,这样在用户切换 App 部分时,搜索仍保持可见且始终可用。

当用户导览至搜索标签页时,所显示搜索栏的初始状态可以是聚焦或不聚焦。

以聚焦形式出现的搜索栏可帮助用户快速查找所需内容。搜索栏以聚焦形式出现时,键盘会立即显示在搜索栏下方,可供用户开始搜索。这提供了一种更瞬态的体验,让用户可在退出搜索后直接返回上一个标签页,且十分适合于快速无缝地执行搜索。
以不聚焦形式出现的搜索栏可促进发现和探索内容。搜索栏以不聚焦形式出现时,搜索标签页会在屏幕底部扩展为未选中的栏。用户轻点该栏开始搜索之前,这种方式在屏幕的其余部分为发现或导览更多内容提供了空间,非常适用于需要展示大量内容的 App,如“音乐”或“视频”。
工具栏搜索
作为标签页栏搜索的替代方案,你也可以将搜索放置在屏幕底部或顶部的工具栏中。
- 你可以在底部工具栏中包括搜索,并根据可用空间大小和搜索对 App 的重要程度将其显示为展开的栏或工具栏按钮。用户轻点时,按钮会动态变为搜索栏显示在键盘上方,供用户开始键入。
- 你可以在顶部工具栏(也称为导航栏)中以工具栏按钮形式包括搜索。用户轻点时,按钮会动态变为搜索栏显示在键盘上方或内联显示于顶部(若底部空间不足)。

若空间足够,将搜索放置在底部。你可以将搜索栏添加到现有工具栏,也可以将其作为唯一项目单独显示为新工具栏。底部搜索可保持搜索易于触及,因此在看重搜索的任何情况下都非常实用。在各种工具栏布局中,底部显示搜索的 App 示例包括“设置”、“邮件”和“备忘录”,搜索在前者中作为唯一项目单独显示,在后两者中则与其他重要控制一同显示。
当务必优先显示屏幕底部的内容或者不存在底部工具栏时,将搜索放置在顶部。如果覆盖内容可能会干扰 App 的主要功能,可在顶部使用搜索。例如,“钱包” App 会在屏幕底部叠放活动凭证,使其易于访问且一目了然。
内联栏搜索
在某些情况下,不妨将 App 包括的搜索栏与内容内联显示。
如果搜索位置靠近搜索范围内容时可加强关联,可以内联栏形式放置搜索。需要在单个视图内进行过滤或搜索时,让搜索直接显示在内容旁边会很有帮助,这可说明搜索仅适用于该内容,而非全局内容。例如,虽然“音乐” App 的主要搜索位于标签页栏中,但用户可以导览至其资料库,并使用内联搜索栏过滤其歌曲和专辑。
优先将搜索放置在底部。一般而言,即使搜索仅适用于某一 App 内容子集,也最好将其放置在用户可轻松触及的位置。例如,“设置” App 将搜索放置在底部,以用于顶层搜索和针对单个 App 的部分搜索。如果底部空间不足(例如被标签页栏或其他重要用户界面占用),也可以将搜索内联放置于顶部。
位于顶部时,将内联搜索栏放置在搜索范围列表上方,并使其在列表滚动时固定到顶部工具栏。这有助于将其与出现在其他位置的搜索区分开来。
3.2 iPadOS、macOS
iPadOS 与 macOS 在搜索栏放置方式和行为上很相似。在这两个平台上,清除栏内容都会退出搜索并关闭键盘(如有)。如果 App 同时在 iPad 和 Mac 上提供,请尽量让这两个平台上的搜索体验保持一致。

iPadOS

macOS
在工具栏后端放置搜索栏,来符合众多常见使用场景。在工具栏中放置搜索这种熟悉的模式对许多 App 都很有好处,尤其是具有拆分视图的 App 或可在多源间导览的 App,如“邮件”、“备忘录”和“语音备忘录”。工具栏一端始终提供搜索功能,使其在 App 中全局可见,因此其通常适合用于从全局范围着手的初步搜索。
需要在边栏中过滤内容或导览时,将搜索放在其顶部。“设置”等 App 会利用搜索来快速过滤边栏和显示可能层级较多的部分,从而为用户搜索、预览和导览至要查找的部分或设置提供了一种简单的方式。
需要为发现内容打造专区时,将搜索作为单独一项放在边栏或标签页栏中。如果与搜索搭配出现的建议、类别或内容丰富且需要更多空间,为其打造一个专区会很有帮助。这对浏览与搜索紧密相连的 App 而言尤为适用,如“音乐”和“视频”,其中均提供了一个统一位置来突显建议内容、类别和最近搜索。专区还可确保在用户导览和切换 App 不同部分时搜索始终可用。
考虑在用户导览至专区时立即聚焦于其中的搜索栏,从而帮助其更快进行搜索并更轻松找到该栏。但这在 iPad 上仅可用虚拟键盘时例外,这种情况下最好不聚焦于搜索栏,以防键盘意外覆盖视图。
将窗口大小调整与搜索栏放置方式结合考虑。与 Mac 相似,iPad 上的搜索栏大小会随 App 窗口流畅调整。但对于 iPad 的紧凑视图而言,确保在上下文最实用的位置提供搜索十分重要。例如,“备忘录”和“邮件”缩小为紧凑视图时,会将搜索放置在内容列表栏的上方。
3.3 Apple tvOS
搜索屏幕是帮助用户输入搜索文本的专门键盘屏幕,在可完全自定义的视图中将搜索结果显示在键盘下方。

提供让搜索更简单的建议。用户一般不会在 Apple tvOS 中键入太多内容。为了改善搜索体验,应提供常用和上下文特定的搜索建议,包括可用的最近搜索。
3.4 watchOS
用户轻点搜索栏时,系统会显示覆盖整个屏幕的文本输入控制。只有当用户轻点“取消”或“搜索”按钮时,App 才会返回搜索栏。








