Back to Details

ios-hig

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple iOS HIG Best Practices

Apple iOS HIG最佳实践

Comprehensive guide for Apple Human Interface Guidelines compliance in iOS apps built with SwiftUI. Contains 34 rules across 6 categories covering navigation, interaction design, accessibility, user feedback, UX patterns, and visual design.
本指南是为使用SwiftUI构建的iOS应用提供的Apple人机界面指南（HIG）合规性综合参考，包含6个类别下的34条规则，覆盖导航、交互设计、无障碍访问、用户反馈、UX模式和视觉设计。

When to Apply

适用场景

Reference these guidelines when:
  • Building navigation hierarchies with tab bars, NavigationStack, or split views
  • Designing touch interactions, gestures, and haptic feedback
  • Ensuring accessibility with VoiceOver, Dynamic Type, and color contrast
  • Implementing loading states, error handling, and empty states
  • Building onboarding flows, permission requests, and confirmation dialogs
  • Supporting dark mode, SF Symbols, and standard layout margins
  • Reviewing apps for HIG compliance
在以下场景中参考本指南：
  • 使用标签栏、NavigationStack或分栏视图构建导航层级结构
  • 设计触摸交互、手势和触觉反馈
  • 通过VoiceOver、Dynamic Type和色彩对比度确保无障碍访问
  • 实现加载状态、错误处理和空状态
  • 构建引导流程、权限申请和确认对话框
  • 支持深色模式、SF Symbols和标准布局边距
  • 审核应用是否符合HIG规范

Rule Categories by Priority

按优先级划分的规则类别

PriorityCategoryImpactPrefix
1NavigationCRITICAL
nav-
2Interaction DesignCRITICAL
inter-
3AccessibilityCRITICAL
acc-
4User FeedbackHIGH
feed-
5UX PatternsHIGH
ux-
6Visual DesignHIGH
vis-
优先级类别影响程度前缀
1导航关键
nav-
2交互设计关键
inter-
3无障碍访问关键
acc-
4用户反馈高
feed-
5UX模式高
ux-
6视觉设计高
vis-

Quick Reference

快速参考

1. Navigation (CRITICAL)

1. 导航（关键）

  • nav-tab-bar
     - Design tab bars for top-level navigation
  • nav-navigation-stack
     - Use NavigationStack for hierarchical navigation
  • nav-toolbar-placement
     - Place actions in toolbars using standard placements
  • nav-tab-bar
     - 为顶层导航设计标签栏
  • nav-navigation-stack
     - 使用NavigationStack构建层级导航
  • nav-toolbar-placement
     - 使用标准布局将操作放置在工具栏中

2. Interaction Design (CRITICAL)

2. 交互设计（关键）

  • inter-touch-targets
     - Maintain 44pt minimum touch targets
  • inter-gesture-patterns
     - Use standard gesture patterns
  • inter-haptic-feedback
     - Add haptic feedback for meaningful events
  • inter-keyboard-handling
     - Handle keyboard appearance gracefully
  • inter-drag-drop
     - Support drag and drop for content transfer
  • inter-pull-to-refresh
     - Support pull to refresh for lists
  • inter-swipe-actions
     - Add swipe actions for contextual operations
  • inter-list-search
     - Use searchable for built-in search
  • inter-touch-targets
     - 保持44pt的最小触摸目标尺寸
  • inter-gesture-patterns
     - 使用标准手势模式
  • inter-haptic-feedback
     - 为重要事件添加触觉反馈
  • inter-keyboard-handling
     - 优雅处理键盘显示
  • inter-drag-drop
     - 支持拖拽功能以实现内容传输
  • inter-pull-to-refresh
     - 为列表支持下拉刷新
  • inter-swipe-actions
     - 添加滑动操作以实现上下文相关功能
  • inter-list-search
     - 使用searchable实现内置搜索

3. Accessibility (CRITICAL)

3. 无障碍访问（关键）

  • acc-labels
     - Provide meaningful accessibility labels
  • acc-dynamic-type
     - Support Dynamic Type for all text
  • acc-color-contrast
     - Maintain sufficient color contrast
  • acc-reduce-motion
     - Respect reduce motion preference
  • acc-color-independent
     - Never rely on color alone
  • acc-focus-management
     - Manage focus for assistive technologies
  • acc-scaled-metric
     - Use ScaledMetric for adaptive sizing
  • acc-view-that-fits
     - Use ViewThatFits for adaptive layouts
  • acc-labels
     - 提供有意义的无障碍标签
  • acc-dynamic-type
     - 为所有文本支持Dynamic Type
  • acc-color-contrast
     - 保持足够的色彩对比度
  • acc-reduce-motion
     - 遵循减少动效的偏好设置
  • acc-color-independent
     - 绝不单独依赖色彩传递信息
  • acc-focus-management
     - 为辅助技术管理焦点
  • acc-scaled-metric
     - 使用ScaledMetric实现自适应尺寸
  • acc-view-that-fits
     - 使用ViewThatFits实现自适应布局

4. User Feedback (HIGH)

4. 用户反馈（高）

  • feed-loading-states
     - Show appropriate loading indicators
  • feed-error-states
     - Handle errors with clear recovery actions
  • feed-notifications
     - Use notifications judiciously
  • feed-success-confirmation
     - Confirm successful actions appropriately
  • feed-empty-states
     - Design helpful empty states
  • feed-loading-states
     - 显示合适的加载指示器
  • feed-error-states
     - 通过清晰的恢复操作处理错误
  • feed-notifications
     - 审慎使用通知
  • feed-success-confirmation
     - 适当地确认操作成功
  • feed-empty-states
     - 设计实用的空状态

5. UX Patterns (HIGH)

5. UX模式（高）

  • ux-onboarding
     - Design minimal onboarding
  • ux-permissions
     - Request permissions in context
  • ux-modality
     - Use modality appropriately
  • ux-confirmation-dialog
     - Use confirmation dialogs for destructive actions
  • ux-data-entry
     - Minimize data entry friction
  • ux-undo
     - Support undo for destructive actions
  • ux-settings
     - Organize settings logically
  • ux-onboarding
     - 设计简洁的引导页
  • ux-permissions
     - 在合适的场景下申请权限
  • ux-modality
     - 合理使用模态窗口
  • ux-confirmation-dialog
     - 为破坏性操作使用确认对话框
  • ux-data-entry
     - 最小化数据输入的繁琐性
  • ux-undo
     - 为破坏性操作支持撤销功能
  • ux-settings
     - 逻辑化组织设置项

6. Visual Design (HIGH)

6. 视觉设计（高）

  • vis-dark-mode
     - Support dark mode with semantic colors
  • vis-sf-symbols
     - Use SF Symbols with correct rendering mode and weight
  • vis-layout-margins
     - Use standard layout margins and safe areas
  • vis-dark-mode
     - 使用语义化色彩支持深色模式
  • vis-sf-symbols
     - 使用正确渲染模式和字重的SF Symbols
  • vis-layout-margins
     - 使用标准布局边距和安全区域

How to Use

使用方法

Read individual reference files for detailed explanations and code examples:
  • Section definitions - Category structure and impact levels
  • Rule template - Template for adding new rules
阅读各个参考文件以获取详细说明和代码示例：
  • 章节定义 - 类别结构和影响程度
  • 规则模板 - 添加新规则的模板

Reference Files

参考文件

FileDescription
references/_sections.mdCategory definitions and ordering
assets/templates/_template.mdTemplate for new rules
文件描述
references/_sections.md类别定义与排序
assets/templates/_template.md新规则模板