Apple HIG 导航组件指南：搜索框、页面控件、路径控件设计与实现

hig-components-search by raintree-technology/apple-hig-skills

77 周安装量

31 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-search

iOS macOS 用户体验

🇨🇳中文介绍

Apple HIG：导航组件

提问前请检查 .claude/apple-design-context.md。使用现有上下文，仅询问未涵盖的信息。

核心原则

搜索：易于发现，即时反馈。 将搜索框放置在用户期望的位置（列表顶部、工具栏/导航栏）。用户输入时即时显示结果。
页面控件：用于扁平页面序列。 适用于离散、权重相等的页面（如引导页、相册）。显示当前页码和总页数。
路径控件：文件层级导航。 macOS 路径控件显示在目录结构中的位置，并允许跳转到任何上级目录。
搜索范围可缩小大型结果集。 提供范围按钮，使用户无需复杂查询即可筛选。
搜索无结果时显示清晰状态。 提供有帮助的信息，建议更正或替代方案，而非空白屏幕。
页面控件不用于层级导航。 仅适用于扁平、线性的序列。对于层级结构，请使用导航控制器、标签栏或侧边栏。
保持路径控件简洁。 仅显示有意义的路径段。用户可以点击任何路径段直接导航。
支持键盘搜索。 Command-F 和系统搜索快捷键应能激活搜索。

参考索引

参考	主题	核心内容

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Apple HIG: Navigation Components

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

Search: discoverable with instant feedback. Place search fields where users expect them (top of list, toolbar/navigation bar). Show results as the user types.
Page controls: position in a flat page sequence. For discrete, equally weighted pages (onboarding, photo gallery). Show current page and total count.
Path controls: file hierarchy navigation. macOS path controls display location within a directory structure and allow jumping to any ancestor.
Search scopes narrow large result sets. Provide scope buttons so users can filter without complex queries.
Clear empty states for search. Helpful message suggesting corrections or alternatives, not a blank screen.
Page controls are not for hierarchical navigation. Flat, linear sequences only. Use navigation controllers, tab bars, or sidebars for hierarchy.
Keep path controls concise. Show meaningful segments only. Users can click any segment to navigate directly.
Support keyboard for search. Command-F and system search shortcuts should activate search.

Reference Index

Reference	Topic	Key content
search-fields.md	Search fields	Scopes, tokens, instant results, placement
page-controls.md	Page controls	Dot indicators, flat page sequences
path-controls.md	Path controls	Breadcrumbs, ancestor navigation

Output Format

Component recommendation -- search field, page control, or path control, and why.
Behavior specification -- interaction model (search-as-you-type, swipe for pages, click-to-navigate for paths).
Platform differences across iOS, iPadOS, macOS, visionOS.

Questions to Ask

What type of content is being searched or navigated?
Which platforms?
How large is the dataset?
Is search the primary interaction?

Related Skills

hig-components-menus -- Toolbars and menu bars hosting search and navigation controls
hig-components-controls -- Text fields, pickers, segmented controls in search interfaces
hig-components-dialogs -- Popovers and sheets for expanded search or filtering
hig-patterns -- Navigation patterns and information architecture
hig-foundations -- Typography and layout for navigation components

Built byRaintree Technology · More developer tools

Weekly Installs

Repository

raintree-techno…g-skills

GitHub Stars

First Seen

Feb 15, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode75

github-copilot73

codex72

cursor72

kimi-cli71

amp71