mcpField
H
hig-components-search

hig-components-search

github.com/raintree-technology设计与 UI148649 次安装6 天前更新
代码仓库

关于 hig-components-search

为 Apple 平台设计工作提供导航组件指导,帮助开发者选择搜索、分页或路径控件,并定义交互与平台差异。内容涵盖搜索反馈、层级导航和键盘支持。

主要功能

  1. 01搜索字段、分页与路径控件建议
  2. 02搜索即时反馈与范围筛选
  3. 03空搜索结果状态设计
  4. 04键盘快捷键支持
  5. 05区分线性与层级导航

适用场景

  1. 01为列表设计随输入更新的搜索
  2. 02为图库选择平面分页控件
  3. 03为 macOS 文件层级设计路径导航
  4. 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.md
path-controls.md
search-fields.md

详细介绍

Apple HIG:导航组件

提问前,请先检查 .claude/apple-design-context.md。使用已有上下文,只询问其中未涵盖的信息。

核心原则

  1. 搜索:易于发现并即时反馈。 将搜索栏放在用户预期的位置(列表顶部、工具栏或导航栏)。用户输入时显示结果。

  2. 页面控件:用于平面页面序列中的定位。 适用于离散且权重相同的页面(如引导页、照片图库)。显示当前页和总页数。

  3. 路径控件:用于文件层级导航。 macOS 路径控件会显示用户在目录结构中的位置,并允许跳转到任意上级目录。

  4. 搜索范围可缩小大型结果集。 提供范围按钮,让用户无需复杂查询即可筛选。

  5. 明确展示搜索的空状态。 提供有用的提示,建议用户修正搜索词或尝试其他方式,而不是显示空白屏幕。

  6. 页面控件不适用于层级导航。 仅用于平面线性序列。层级导航应使用导航控制器、标签栏或边栏。

  7. 路径控件应简洁。 仅显示有意义的层级。用户可以点击任一层级直接导航。

  8. 支持通过键盘搜索。 Command-F 和系统搜索快捷键应能激活搜索。

参考索引

参考主题主要内容
search-fields.md搜索栏范围、令牌、即时结果、位置
page-controls.md页面控件点状指示器、平面页面序列
path-controls.md路径控件面包屑、上级导航

输出格式

  1. 组件建议 —— 搜索栏、页面控件或路径控件,以及推荐原因。
  2. 行为规范 —— 交互模型(边输入边搜索、滑动切换页面、点击路径导航)。
  3. 平台差异 —— iOS、iPadOS、macOS、visionOS 之间的差异。

要询问的问题

  1. 要搜索或导航的内容是什么类型?
  2. 面向哪些平台?
  3. 数据集有多大?
  4. 搜索是否为主要交互方式?

相关技能

  • hig-components-menus —— 承载搜索和导航控件的工具栏与菜单栏
  • hig-components-controls —— 搜索界面中的文本栏、选取器和分段控件
  • hig-components-dialogs —— 用于展开搜索或筛选的弹出框和工作表
  • hig-patterns —— 导航模式和信息架构
  • hig-foundations —— 导航组件的排版和布局

由 Raintree Technology 构建 · 更多开发者工具

评论

支持 Markdown