apple-design-skill

Apple Design（Human Interface Guidelines）

此技能将 Apple Human Interface Guidelines 的本地镜像打包在 references/ 下。内容为非官方内容，通过 sosumi.ai 提取——所有 HIG 内容均归 Apple Inc. 所有。回答时请以这些文件为依据，而非依赖通用知识或训练数据中的知识：HIG 指南具体、精确且会随时间变化。

覆盖范围

references/ 下镜像了 HIG 的六个部分：

部分	路径	涵盖内容
入门指南	references/getting-started/	跨平台设计原则，以及每个平台的一篇文章（iOS、iPadOS、macOS、watchOS、tvOS、visionOS、游戏）
基础知识	references/foundations/	颜色、排版、材质、动效、SF Symbols、图标、无障碍功能、深色模式、隐私、布局、品牌、文案
模式	references/patterns/	常见任务/体验：引导、搜索、拖放、通知、撤销/重做、反馈、多任务处理、设置
组件	references/components/	系统定义的 UI 组件，分为 8 个类别：内容、布局与组织、菜单与操作、导航与搜索、呈现、选择与输入、状态、系统体验
输入	references/inputs/	输入方式：手势、Apple Pencil、Digital Crown、键盘、指点设备、Camera Control、操作按钮、遥控器、眼睛
技术	references/technologies/	可集成的平台技术：Siri、Apple Pay、HealthKit、SharePlay、AirPlay、通过 Apple 登录等

每个部分都有一个 index.md 入口页。组件是唯一多一层目录结构的部分——其 index.md 列出了 8 个类别文件夹，每个文件夹都有自己的 index.md 和各个组件文章。其他五个部分的目录结构都是扁平的：各部分的 index.md 直接链接到同一文件夹中的文章文件。

Liquid Glass（Apple 当前的跨平台材质）并非单独的一篇文章，而是在 foundations/materials.md、foundations/color.md、foundations/motion.md 以及特定组件文章（buttons.md、tab-bars.md、toolbars.md、sidebars.md、widgets.md 等）中均有提及。对于任何关于“liquid glass”的请求，请先查看 foundations/materials.md，再补充相应组件的文章。

查找合适的文章

1. 快速路径：在 references/topic-index.md 中 grep——这是包含每篇文章路径和一句话描述的扁平列表——搜索组件、模式或技术名称（或近义词）。这几乎总比逐篇浏览快。

   grep -i "sheet" references/topic-index.md
   

2. 浏览路径：如果关键词搜索没有找到明确匹配项，请阅读相关部分的 index.md（对于 Components，先阅读 references/components/index.md 选择类别，再阅读该类别的 index.md）。
3. 回答前，请完整阅读匹配的文章。HIG 文章简短且结构清晰（解剖结构、行为、指南、平台特定注意事项），应通读全文，而不是略读。

本文件其余部分假设只有一个问题和一个答案。接下来的两个部分介绍生成式任务——设计新组件或完整屏幕——这类任务需要综合多篇文章，形成一个交付成果。

设计新组件

遇到“设计一个 Liquid Glass 主按钮”或“为 X 创建一个分段控件变体”之类的请求时，请使用以下工作流：

1. 通过 topic-index.md 在 references/components/ 中找到最接近的现有系统组件——以它为基础进行扩展，不要从头发明组件。

2. 引入影响视觉和交互设计的跨领域基础：foundations/materials.md（材质／Liquid Glass 处理）、foundations/color.md、foundations/typography.md、foundations/motion.md（交互反馈和动画）。

3. 查看 foundations/accessibility.md——包括对比度、动态字体、VoiceOver 和最小触控目标（例如，components/menus-and-actions/buttons.md 中已记录的 44×44pt／visionOS 上 60×60pt 规则）。

4. 如果组件必须支持多个平台，请查看相关的 getting-started/designing-for-<platform>.md，了解设备特定的限制。

5. 使用此模板生成交付成果：

   # <Component name>
   
   **Base system component:** <name + references/ path>
   **Purpose:** <what it's for>
   
   ## Anatomy
   <parts that make up the component>
   
   ## States & variants
   <default, pressed/hover, disabled, selected, sizes, etc.>
   
   ## Sizing & spacing
   <concrete values pulled from the HIG article, not invented>
   
   ## Material & color
   <e.g. Liquid Glass treatment, tint, contrast behavior in light/dark>
   
   ## Motion & feedback
   <press/hover/transition behavior>
   
   ## Accessibility
   <contrast, Dynamic Type, VoiceOver label/traits, minimum hit target>
   
   ## Platform notes
   <differences across iOS/iPadOS/macOS/watchOS/tvOS/visionOS, if any>
   
   ## Implementation note
   This spec covers design intent (look, behavior, states, sizing, accessibility) grounded in HIG text. It does not
   specify SwiftUI/UIKit/AppKit API names — verify exact modifiers/APIs against current framework documentation
   rather than assuming them from HIG prose, which never contains API references.
   

设计屏幕

遇到“构建一个显示我所有书籍的书库屏幕”之类的请求时，请使用以下工作流：HIG 文档介绍的是组件和模式，而不是完整屏幕，因此请先分解请求。

1. 分解为三个部分：

   • 导航框架——标签栏、侧边栏还是导航堆栈；请参阅 components/navigation-and-search/ 和目标平台的 getting-started/designing-for-<platform>.md。
   • 主要内容组件——列表、表格、网格和分栏视图请参阅 components/layout-and-organization/；图片、文本和图表请参阅 components/content/。
   • 辅助模式——patterns/searching.md、patterns/loading.md、patterns/onboarding.md，以及空状态／错误状态处理。

2. 对于需要超出默认指南进行定制的部分，请对其应用上述“设计新组件”工作流。

3. 明确说明屏幕面向哪些平台——不同平台的构成惯例（标签栏还是侧边栏、全屏还是多窗格）有所不同。

4. 使用此模板生成交付成果：

   # <Screen name>
   
   **Purpose:** <what the screen is for>
   **Platform(s):** <iOS/iPadOS/macOS/watchOS/tvOS/visionOS>
   
   ## Navigation shell
   <tab bar / sidebar / navigation stack choice, and why, per platform if it differs>
   
   ## Primary content
   <component(s) used to present the core content, with references/ paths>
   
   ## Supporting patterns
   <search, loading, onboarding, etc., with references/ paths>
   
   ## States
   <loading / empty / error / populated>
   
   ## Accessibility
   <notable considerations beyond what's already covered per-component>
   
   ## Implementation note
   Same boundary as component specs: this is design intent, not API syntax.
   

回答

• 引用文章实际写明的内容。不要编造文章中没有的指导意见。
• HIG 文章通常会在一个文件中涵盖多个平台，并设有针对特定平台的小节（查找“iOS、iPadOS”“macOS”“watchOS”“visionOS”等标题）。说明你的回答适用于哪些平台——不要假设适用于 iOS 的指导也适用于 macOS 或 watchOS。
• 如果问题涉及多个章节（例如，“应如何显示破坏性操作？”既涉及 Components 中的 buttons.md，也涉及 Foundations 中的 color.md 或 Patterns 中的 feedback.md），请检查多个文件，不要只看第一个匹配项就停止。
• 如果问题完全超出镜像内容的范围，请明确说明，并转而参考 Apple 平台的一般知识，而不要把猜测说成 HIG 指导意见。
• 文章图片是带有替代文本的真实 docs-assets.developer.apple.com URL，并未被删除——当视觉细节或结构细节比文字描述更重要时，请直接获取或查看图片。
• 这项技能仅对设计意图具有权威性，不适用于 API 名称——这一界限适用于所有回答，而不只是组件或屏幕规格。

注意事项

• references/components/navigation-and-search/tab-bars.md 和 references/components/layout-and-organization/tab-views.md 是不同的组件——标签栏用于在应用的顶层分区之间导航，标签视图则用于在当前位置切换内容窗格。不要混为一谈。
• 跨平台设计原则位于 references/getting-started/design-principles.md；各平台的设备特性位于 references/getting-started/designing-for-<platform>.md——两者都不属于 Components。
• 这是静态内容镜像，不是合规检查工具。它不会自动发现特定应用违反 HIG 的情况——请结合匹配文章中的指导，分析用户的实际界面。