hig

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Human 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

入门指南

FileContentSize
hig-index.mdFull HIG table of contents11KB
designing-for-ios.mdiOS design principles5KB
文件内容大小
hig-index.mdHIG完整目录11KB
designing-for-ios.mdiOS设计原则5KB

Foundations

基础规范

FileContentSize
app-icons.mdApp icon design guidelines14KB
color.mdColor usage and system colors17KB
typography.mdFonts, text styles, Dynamic Type17KB
layout.mdLayout principles, safe areas21KB
materials.mdMaterials, blur effects, vibrancy14KB
motion.mdAnimation principles9KB
accessibility.mdAccessibility best practices19KB
sf-symbols.mdSF Symbols usage21KB
文件内容大小
app-icons.md应用图标设计指南14KB
color.md色彩使用及系统色彩17KB
typography.md字体、文本样式、动态类型17KB
layout.md布局原则、安全区域21KB
materials.md材质、模糊效果、活力效果14KB
motion.md动效设计原则9KB
accessibility.md无障碍设计最佳实践19KB
sf-symbols.mdSF Symbols使用指南21KB

Patterns

设计模式

FileContentSize
onboarding.mdOnboarding flows6KB
modality.mdModal presentations7KB
launching.mdApp launch experience6KB
feedback.mdUser feedback patterns5KB
playing-haptics.mdHaptic feedback10KB
searching.mdSearch patterns7KB
settings.mdSettings patterns7KB
文件内容大小
onboarding.md新手引导流程6KB
modality.md模态展示方式7KB
launching.md应用启动体验6KB
feedback.md用户反馈模式5KB
playing-haptics.md触觉反馈10KB
searching.md搜索模式7KB
settings.md设置页模式7KB

Components - Navigation

组件 - 导航类

FileContentSize
tab-bars.mdTab bar design11KB
navigation-bars.mdNavigation bar patterns17KB
toolbars.mdToolbar design17KB
sidebars.mdSidebar patterns8KB
文件内容大小
tab-bars.md标签栏设计11KB
navigation-bars.md导航栏模式17KB
toolbars.md工具栏设计17KB
sidebars.md侧边栏模式8KB

Components - Presentation

组件 - 展示类

FileContentSize
sheets.mdSheet presentations11KB
alerts.mdAlert dialogs10KB
action-sheets.mdAction sheets4KB
menus.mdMenu design14KB
文件内容大小
sheets.md弹窗页展示11KB
alerts.md警告对话框10KB
action-sheets.md操作菜单4KB
menus.md菜单设计14KB

Components - Controls

组件 - 控件类

FileContentSize
buttons.mdButton styles and usage17KB
lists-and-tables.mdList and table patterns9KB
toggles.mdToggle/switch design9KB
pickers.mdPicker controls6KB
sliders.mdSlider controls6KB
steppers.mdStepper controls2KB
text-fields.mdText input fields6KB
文件内容大小
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
undefined
bash
undefined

Find 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
undefined
grep -i "navigation" hig-index.md
undefined

Fetching More Docs

获取更多文档

  1. Search this skill's local
    .md
    files first.
  2. If the topic is not here, check the other installed Apple skills you have available by their names, descriptions, or
    SKILL.md
    frontmatter, then grep their local files. This is faster and uses less context than fetching new docs from the internet.
  3. If no installed skill has the page, use the relevant Human Interface Guidelines path with the
    sosumi.ai
    Markdown mirror. For example,
    /design/human-interface-guidelines/buttons
    maps to
    https://sosumi.ai/design/human-interface-guidelines/buttons
    .
  1. 优先检索本技能本地的
    .md
    文件。
  2. 如果没有找到相关主题,可通过名称、描述或
    SKILL.md
    前言信息查看你已安装的其他Apple相关技能,再检索它们的本地文件。这种方式比从互联网获取新文档速度更快,占用的上下文更少。
  3. 如果已安装的技能中没有相关页面,可使用对应人机界面指南路径访问
    sosumi.ai
    的Markdown镜像。例如:
    /design/human-interface-guidelines/buttons
    对应
    https://sosumi.ai/design/human-interface-guidelines/buttons

Common HIG Doc Paths

常见HIG文档路径

TopicURL Path
Full Index
human-interface-guidelines
iOS Design
human-interface-guidelines/designing-for-ios
iPadOS Design
human-interface-guidelines/designing-for-ipados
macOS Design
human-interface-guidelines/designing-for-macos
App Icons
human-interface-guidelines/app-icons
Color
human-interface-guidelines/color
Typography
human-interface-guidelines/typography
Layout
human-interface-guidelines/layout
Accessibility
human-interface-guidelines/accessibility
SF Symbols
human-interface-guidelines/sf-symbols
Buttons
human-interface-guidelines/buttons
Tab Bars
human-interface-guidelines/tab-bars
Navigation Bars
human-interface-guidelines/navigation-bars
Sheets
human-interface-guidelines/sheets
Alerts
human-interface-guidelines/alerts
主题URL路径
完整索引
human-interface-guidelines
iOS设计
human-interface-guidelines/designing-for-ios
iPadOS设计
human-interface-guidelines/designing-for-ipados
macOS设计
human-interface-guidelines/designing-for-macos
应用图标
human-interface-guidelines/app-icons
色彩
human-interface-guidelines/color
排版
human-interface-guidelines/typography
布局
human-interface-guidelines/layout
无障碍设计
human-interface-guidelines/accessibility
SF Symbols
human-interface-guidelines/sf-symbols
按钮
human-interface-guidelines/buttons
标签栏
human-interface-guidelines/tab-bars
导航栏
human-interface-guidelines/navigation-bars
弹窗页
human-interface-guidelines/sheets
警告框
human-interface-guidelines/alerts

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
  • 内容展示始终需要遵守安全区域规范
  • 背景可延伸至屏幕边缘
  • 交互元素需放置在安全区域内

Sources

参考来源

Apple Documentation

Apple官方文档

WWDC Sessions

WWDC会议