关于 hig-components-search
为 Apple 平台设计工作提供导航组件指导,帮助开发者选择搜索、分页或路径控件,并定义交互与平台差异。内容涵盖搜索反馈、层级导航和键盘支持。
主要功能
- 01搜索字段、分页与路径控件建议
- 02搜索即时反馈与范围筛选
- 03空搜索结果状态设计
- 04键盘快捷键支持
- 05区分线性与层级导航
适用场景
- 01为列表设计随输入更新的搜索
- 02为图库选择平面分页控件
- 03为 macOS 文件层级设计路径导航
- 04规划不同 Apple 平台的搜索交互
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ raintree-technology/ hig-doctor --skill hig-components-search安装后在 Claude Code 中输入/hig-components-search确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/page-controls.mdpath-controls.mdsearch-fields.md详细介绍
Apple HIG:导航组件
提问前,请先检查 .claude/apple-design-context.md。使用已有上下文,只询问其中未涵盖的信息。
核心原则
-
搜索:易于发现并即时反馈。 将搜索栏放在用户预期的位置(列表顶部、工具栏或导航栏)。用户输入时显示结果。
-
页面控件:用于平面页面序列中的定位。 适用于离散且权重相同的页面(如引导页、照片图库)。显示当前页和总页数。
-
路径控件:用于文件层级导航。 macOS 路径控件会显示用户在目录结构中的位置,并允许跳转到任意上级目录。
-
搜索范围可缩小大型结果集。 提供范围按钮,让用户无需复杂查询即可筛选。
-
明确展示搜索的空状态。 提供有用的提示,建议用户修正搜索词或尝试其他方式,而不是显示空白屏幕。
-
页面控件不适用于层级导航。 仅用于平面线性序列。层级导航应使用导航控制器、标签栏或边栏。
-
路径控件应简洁。 仅显示有意义的层级。用户可以点击任一层级直接导航。
-
支持通过键盘搜索。 Command-F 和系统搜索快捷键应能激活搜索。
参考索引
| 参考 | 主题 | 主要内容 |
|---|---|---|
| search-fields.md | 搜索栏 | 范围、令牌、即时结果、位置 |
| page-controls.md | 页面控件 | 点状指示器、平面页面序列 |
| path-controls.md | 路径控件 | 面包屑、上级导航 |
输出格式
- 组件建议 —— 搜索栏、页面控件或路径控件,以及推荐原因。
- 行为规范 —— 交互模型(边输入边搜索、滑动切换页面、点击路径导航)。
- 平台差异 —— iOS、iPadOS、macOS、visionOS 之间的差异。
要询问的问题
- 要搜索或导航的内容是什么类型?
- 面向哪些平台?
- 数据集有多大?
- 搜索是否为主要交互方式?
相关技能
- hig-components-menus —— 承载搜索和导航控件的工具栏与菜单栏
- hig-components-controls —— 搜索界面中的文本栏、选取器和分段控件
- hig-components-dialogs —— 用于展开搜索或筛选的弹出框和工作表
- hig-patterns —— 导航模式和信息架构
- hig-foundations —— 导航组件的排版和布局
由 Raintree Technology 构建 · 更多开发者工具
评论
支持 Markdown