Back to Details

ios-hig-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

iOS Human Interface Guidelines Design Skill

iOS人机界面指南设计技能

This skill guides creation of native iOS app interfaces that feel intuitive, consistent, and aligned with Apple's design philosophy.
本技能指导你创建直观、一致且符合苹果设计理念的原生iOS应用界面。

Core Design Principles

核心设计原则

Apple's iOS design philosophy rests on three foundational principles:
苹果的iOS设计理念基于三大核心原则：

1. Clarity

1. 清晰

Every element must be legible and purposeful. Typography, iconography, and spacing communicate hierarchy and focus.
每个元素必须清晰可读且有明确用途。排版、图标和间距需传达层级结构与视觉焦点。

2. Deference

2. 遵从

The interface should never overshadow the content. The UI exists to support user tasks, not distract from them.
界面绝不能掩盖内容。UI的存在是为了支持用户任务，而非分散用户注意力。

3. Depth

3. 深度

Layering, transitions, and realistic motion provide hierarchy and spatial relationships.
分层设计、过渡动效和拟真动画可展现层级关系与空间感。

Scoring

评分标准

Goal: 10/10. When reviewing or creating iOS interfaces or SwiftUI/UIKit code, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.
目标：10/10分。在评审或创建iOS界面或SwiftUI/UIKit代码时，根据对以下原则的遵循程度给出0-10分。10分表示完全符合所有指南；低分表示存在需要改进的不足。请始终提供当前分数以及达到10分所需的具体改进措施。

Screen Sizes & Layout

屏幕尺寸与布局

iPhone Screen Sizes (Design Points)

iPhone屏幕尺寸（设计基准）

DeviceFrame SizeExport Scale
iPhone 15 Pro Max, 14 Pro Max430 × 932@3x
iPhone 15 Pro, 15, 14 Pro393 × 852@3x
iPhone 14, 13, 12390 × 844@3x
iPhone SE (2nd/3rd gen)375 × 667@2x
Best Practice: Design for smaller screens first (375pt width).
设备框架尺寸导出缩放比
iPhone 15 Pro Max、14 Pro Max430 × 932@3x
iPhone 15 Pro、15、14 Pro393 × 852@3x
iPhone 14、13、12390 × 844@3x
iPhone SE（第2/3代）375 × 667@2x
最佳实践：优先为小屏幕（375pt宽度）设计。

Page Layout Structure

页面布局结构

┌─────────────────────────────────┐
│         Status Bar (59pt)       │
├─────────────────────────────────┤
│         Nav Bar Row 1 (44pt)    │
├─────────────────────────────────┤
│         Nav Bar Row 2 (58pt)    │  ← Large title (optional)
├─────────────────────────────────┤
│         Content Area            │
├─────────────────────────────────┤
│         Tab Bar (49pt)          │
├─────────────────────────────────┤
│       Home Indicator (34pt)     │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│         状态栏 (59pt)       │
├─────────────────────────────────┤
│         导航栏行1 (44pt)    │
├─────────────────────────────────┤
│         导航栏行2 (58pt)    │  ← 大标题（可选）
├─────────────────────────────────┤
│         内容区域            │
├─────────────────────────────────┤
│         标签栏 (49pt)          │
├─────────────────────────────────┤
│       主屏幕指示器 (34pt)     │
└─────────────────────────────────┘

Safe Areas

安全区域

Critical: UI components must not overlap with hardware features (notch, Dynamic Island, home indicator).
swift
VStack { Text("Content") }  // Default: respects safe area

VStack { Color.blue }.ignoresSafeArea()  // Extend beyond
重点注意：UI组件不得与硬件特征（刘海、灵动岛、主屏幕指示器）重叠。
swift
VStack { Text("Content") }  // 默认：遵循安全区域

VStack { Color.blue }.ignoresSafeArea()  // 延伸至安全区域外

Quick Reference: Component Spacing

快速参考：组件间距

Touch Target Min:     44 × 44pt
Screen Edge Margin:   16-20pt
List Row Height:      44pt minimum
Standard Spacing:     8 / 16 / 24pt
最小触摸目标:     44 × 44pt
屏幕边缘边距:   16-20pt
列表行高:      最小44pt
标准间距:     8 / 16 / 24pt

Common Pitfalls

常见误区

Don't:
  • Override standard gestures (swipe back, pull refresh)
  • Use touch targets smaller than 44pt
  • Ignore safe areas
  • Force Android patterns (top tab bar, hamburger menus)
  • Neglect Dark Mode
  • Use low contrast text
Do:
  • Use native components
  • Test on real devices
  • Support Dynamic Type
  • Test with VoiceOver enabled
  • Preview in both light and dark modes
请勿：
  • 覆盖标准手势（返回滑动、下拉刷新）
  • 使用小于44pt的触摸目标
  • 忽略安全区域
  • 强行使用Android设计模式（顶部标签栏、汉堡菜单）
  • 忽略深色模式
  • 使用低对比度文本
建议：
  • 使用原生组件
  • 在真实设备上测试
  • 支持动态字体
  • 开启VoiceOver进行测试
  • 在浅色和深色模式下预览

Detailed Reference Files

详细参考文件

Core Design:
  • references/typography.md — Text styles, font sizes, Dark Mode typography
  • references/navigation.md — Tab bar, navigation bar, modals, search patterns, split views
  • references/components.md — Buttons, lists, input controls, menus, confirmation dialogs
  • references/colors-depth.md — Semantic colors, Dark Mode, contrast ratios
  • references/gestures.md — Standard gestures, haptics, animations
  • references/accessibility.md — VoiceOver, Dynamic Type, checklist
  • references/app-icons.md — Icon sizes, shape, guidelines
Input & System Integration:
  • references/keyboard-input.md — Keyboard types, input accessory views, hardware keyboard support
  • references/privacy-permissions.md — Permission request timing, pre-permission screens, handling denial
  • references/widgets-extensions.md — Widget sizes, App Clips design, Live Activities
  • references/system-integration.md — Siri, Shortcuts, Handoff, drag-drop, universal links
核心设计：
  • references/typography.md — 文本样式、字体大小、深色模式排版
  • references/navigation.md — 标签栏、导航栏、模态框、搜索模式、分屏视图
  • references/components.md — 按钮、列表、输入控件、菜单、确认对话框
  • references/colors-depth.md — 语义化色彩、深色模式、对比度
  • references/gestures.md — 标准手势、触觉反馈、动画
  • references/accessibility.md — VoiceOver、动态字体、检查清单
  • references/app-icons.md — 图标尺寸、形状、设计指南
输入与系统集成：
  • references/keyboard-input.md — 键盘类型、输入辅助视图、硬件键盘支持
  • references/privacy-permissions.md — 权限请求时机、权限申请前引导、拒绝处理
  • references/widgets-extensions.md — 小组件尺寸、App Clips设计、实时活动
  • references/system-integration.md — Siri、快捷指令、接力、拖放、通用链接

Resources

资源