hig
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseHuman Interface Guidelines Reference
人机界面指南参考
Comprehensive reference for designing interfaces that follow Apple's Human Interface Guidelines.
用于设计符合Apple人机界面指南的界面的综合参考资料。
Downloaded Reference Files
已下载的参考文件
All key HIG documentation is available locally (grep-friendly):
所有核心HIG文档均可在本地获取(支持grep检索):
Getting Started
入门指南
| File | Content | Size |
|---|---|---|
| hig-index.md | Full HIG table of contents | 11KB |
| designing-for-ios.md | iOS design principles | 5KB |
| 文件 | 内容 | 大小 |
|---|---|---|
| hig-index.md | HIG完整目录 | 11KB |
| designing-for-ios.md | iOS设计原则 | 5KB |
Foundations
基础规范
| File | Content | Size |
|---|---|---|
| app-icons.md | App icon design guidelines | 14KB |
| color.md | Color usage and system colors | 17KB |
| typography.md | Fonts, text styles, Dynamic Type | 17KB |
| layout.md | Layout principles, safe areas | 21KB |
| materials.md | Materials, blur effects, vibrancy | 14KB |
| motion.md | Animation principles | 9KB |
| accessibility.md | Accessibility best practices | 19KB |
| sf-symbols.md | SF Symbols usage | 21KB |
| 文件 | 内容 | 大小 |
|---|---|---|
| app-icons.md | 应用图标设计指南 | 14KB |
| color.md | 色彩使用及系统色彩 | 17KB |
| typography.md | 字体、文本样式、动态类型 | 17KB |
| layout.md | 布局原则、安全区域 | 21KB |
| materials.md | 材质、模糊效果、活力效果 | 14KB |
| motion.md | 动效设计原则 | 9KB |
| accessibility.md | 无障碍设计最佳实践 | 19KB |
| sf-symbols.md | SF Symbols使用指南 | 21KB |
Patterns
设计模式
| File | Content | Size |
|---|---|---|
| onboarding.md | Onboarding flows | 6KB |
| modality.md | Modal presentations | 7KB |
| launching.md | App launch experience | 6KB |
| feedback.md | User feedback patterns | 5KB |
| playing-haptics.md | Haptic feedback | 10KB |
| searching.md | Search patterns | 7KB |
| settings.md | Settings patterns | 7KB |
| 文件 | 内容 | 大小 |
|---|---|---|
| onboarding.md | 新手引导流程 | 6KB |
| modality.md | 模态展示方式 | 7KB |
| launching.md | 应用启动体验 | 6KB |
| feedback.md | 用户反馈模式 | 5KB |
| playing-haptics.md | 触觉反馈 | 10KB |
| searching.md | 搜索模式 | 7KB |
| settings.md | 设置页模式 | 7KB |
Components - Navigation
组件 - 导航类
| File | Content | Size |
|---|---|---|
| tab-bars.md | Tab bar design | 11KB |
| navigation-bars.md | Navigation bar patterns | 17KB |
| toolbars.md | Toolbar design | 17KB |
| sidebars.md | Sidebar patterns | 8KB |
| 文件 | 内容 | 大小 |
|---|---|---|
| tab-bars.md | 标签栏设计 | 11KB |
| navigation-bars.md | 导航栏模式 | 17KB |
| toolbars.md | 工具栏设计 | 17KB |
| sidebars.md | 侧边栏模式 | 8KB |
Components - Presentation
组件 - 展示类
| File | Content | Size |
|---|---|---|
| sheets.md | Sheet presentations | 11KB |
| alerts.md | Alert dialogs | 10KB |
| action-sheets.md | Action sheets | 4KB |
| menus.md | Menu design | 14KB |
| 文件 | 内容 | 大小 |
|---|---|---|
| sheets.md | 弹窗页展示 | 11KB |
| alerts.md | 警告对话框 | 10KB |
| action-sheets.md | 操作菜单 | 4KB |
| menus.md | 菜单设计 | 14KB |
Components - Controls
组件 - 控件类
| File | Content | Size |
|---|---|---|
| buttons.md | Button styles and usage | 17KB |
| lists-and-tables.md | List and table patterns | 9KB |
| toggles.md | Toggle/switch design | 9KB |
| pickers.md | Picker controls | 6KB |
| sliders.md | Slider controls | 6KB |
| steppers.md | Stepper controls | 2KB |
| text-fields.md | Text input fields | 6KB |
| 文件 | 内容 | 大小 |
|---|---|---|
| buttons.md | 按钮样式及使用方法 | 17KB |
| lists-and-tables.md | 列表与表格模式 | 9KB |
| toggles.md | 切换开关设计 | 9KB |
| pickers.md | 选择器控件 | 6KB |
| sliders.md | 滑块控件 | 6KB |
| steppers.md | 步进器控件 | 2KB |
| text-fields.md | 文本输入框 | 6KB |
Searching the Docs
检索文档
bash
undefinedbash
undefinedFind color guidance
Find color guidance
grep -i "semantic" color.md
grep -i "semantic" color.md
Find button styles
Find button styles
grep -i "bordered" buttons.md
grep -i "bordered" buttons.md
Find haptic patterns
Find haptic patterns
grep -i "notification" playing-haptics.md
grep -i "notification" playing-haptics.md
Browse the full HIG index
Browse the full HIG index
grep -i "navigation" hig-index.md
undefinedgrep -i "navigation" hig-index.md
undefinedFetching More Docs
获取更多文档
- Search this skill's local files first.
.md - If the topic is not here, check the other installed Apple skills you have available by their names, descriptions, or frontmatter, then grep their local files. This is faster and uses less context than fetching new docs from the internet.
SKILL.md - If no installed skill has the page, use the relevant Human Interface Guidelines path with the Markdown mirror. For example,
sosumi.aimaps to/design/human-interface-guidelines/buttons.https://sosumi.ai/design/human-interface-guidelines/buttons
- 优先检索本技能本地的文件。
.md - 如果没有找到相关主题,可通过名称、描述或前言信息查看你已安装的其他Apple相关技能,再检索它们的本地文件。这种方式比从互联网获取新文档速度更快,占用的上下文更少。
SKILL.md - 如果已安装的技能中没有相关页面,可使用对应人机界面指南路径访问的Markdown镜像。例如:
sosumi.ai对应/design/human-interface-guidelines/buttons。https://sosumi.ai/design/human-interface-guidelines/buttons
Common HIG Doc Paths
常见HIG文档路径
| Topic | URL Path |
|---|---|
| Full Index | |
| iOS Design | |
| iPadOS Design | |
| macOS Design | |
| App Icons | |
| Color | |
| Typography | |
| Layout | |
| Accessibility | |
| SF Symbols | |
| Buttons | |
| Tab Bars | |
| Navigation Bars | |
| Sheets | |
| Alerts | |
| 主题 | URL路径 |
|---|---|
| 完整索引 | |
| iOS设计 | |
| iPadOS设计 | |
| macOS设计 | |
| 应用图标 | |
| 色彩 | |
| 排版 | |
| 布局 | |
| 无障碍设计 | |
| SF Symbols | |
| 按钮 | |
| 标签栏 | |
| 导航栏 | |
| 弹窗页 | |
| 警告框 | |
Quick Reference
快速参考
Button Styles (iOS)
按钮样式(iOS)
- Plain - Text only, minimal visual weight
- Gray - Gray background, for secondary actions
- Tinted - Tinted background with accent color
- Filled - Solid background, for primary actions
- Bordered - Outlined with border
- Bordered Prominent - Filled background, high prominence
- Plain - 仅文本,视觉权重最低
- Gray - 灰色背景,用于次要操作
- Tinted - 带强调色的半透明背景
- Filled - 纯色背景,用于主要操作
- Bordered - 带边框的外显样式
- Bordered Prominent - 填充背景,高优先级样式
Haptic Feedback Types
触觉反馈类型
- Selection - Light tap for selection changes
- Impact - Light/medium/heavy/rigid/soft for collisions
- Notification - Success/warning/error for outcomes
- Selection - 轻触反馈,用于选择变更
- Impact - 轻/中/重/刚/柔等碰撞反馈
- Notification - 成功/警告/错误等结果反馈
Safe Areas
安全区域
- Always respect safe areas for content
- Extend backgrounds edge-to-edge
- Place interactive elements within safe areas
- 内容展示始终需要遵守安全区域规范
- 背景可延伸至屏幕边缘
- 交互元素需放置在安全区域内