apple-hig

遵循 Apple 人机界面指南设计 iOS、macOS、watchOS、tvOS 和 VisionOS 应用程序的专家指南。在构建 Apple 平台应用程序或界面、实现 SF Symbols、使用 iOS 组件进行设计、遵循辅助功能指南或创建本机 Apple 体验时使用。涵盖设计原则、模式、组件、排版、颜色、布局、导航和特定于平台的约定。

## 概述（中文）

遵循 Apple 人机界面指南设计 iOS、macOS、watchOS、tvOS 和 VisionOS 应用程序的专家指南。在构建 Apple 平台应用程序或界面、实现 SF Symbols、使用 iOS 组件进行设计、遵循辅助功能指南或创建本机 Apple 体验时使用。涵盖设计原则、模式、组件、排版、颜色、布局、导航和特定于平台的约定。

## 原文

# Apple Human Interface Guidelines Skill

Design exceptional experiences for Apple platforms following official Apple HIG principles, patterns, and best practices.

## Core Design Principles

### Clarity
- **Text must be legible** at every size
- **Icons should be precise and lucid**
- **Adornments are subtle and appropriate**
- **Functionality is obvious through focus on content**

### Deference
- **Content fills the entire screen** while UI stays out of the way
- **Translucency and blurring** hint at more content
- **Minimal use of bezels, gradients, and shadows** keeps interface light and airy

### Depth
- **Visual layers and realistic motion** convey hierarchy and vitality
- **Touch and discoverability** heighten delight
- **Smooth transitions** maintain spatial orientation

## Platform-Specific Guidelines

###iOS / iPadOS

**Key Characteristics:**
- Touch-first interaction
- Portrait and landscape orientations
- Safe area respect (notch, Dynamic Island, home indicator)
- Gestures: swipe, tap, long press, pinch, rotate

**Layout:**
- Use **SF Pro** text (system font)
- Respect safe areas and readable content guides
- Adopt **Auto Layout** for adaptive interfaces
- Support **Dynamic Type** for accessibility

**Navigation:**
- **Tab Bar:** 3-5 primary destinations, always visible
- **Navigation Bar:** Hierarchical browsing, back button
- **Search:** Prominent when important to app experience

For complete iOS patterns, see [references/ios.md](references/ios.md)

### macOS

**Key Characteristics:**
- Mouse/trackpad/keyboard interaction
- Resizable windows
- Menu bar at top of screen
- Dock for launching apps

**Layout:**
- Use **SF Pro** (system font)
- Window controls (close, minimize, zoom) on left
- **Sidebars** for navigation (leading edge)
- **Toolbars** for primary actions

**Interaction:**
- Right-click context menus
- Keyboard shortcuts (⌘ Command key)
- Drag and drop between windows

For complete macOS patterns, see [references/macos.md](references/macos.md)

### watchOS

**Key Characteristics:**
- Glanceable information
- Quick interactions
- Digital Crown and side button
- Always-on display support

**Layout:**
- **SF Compact** (rounded system font for watches)
- Edge-to-edge content
- Vertical scrolling preferred

**Interaction:**
- **Tap:** Primary action
- **Digital Crown:** Scroll and zoom
- **Force Touch:** (older models) Context menu
- **Raise to wake**

For complete watchOS patterns, see [references/watchos.md](references/watchos.md)

### tvOS

**Key Characteristics:**
- 10-foot viewing distance
- Siri Remote (directional pad + touch)
- Focus-driven navigation
- Parallax effects

**Layout:**
- **SF Pro** (system font)
- Large touch targets (minimum 250pt)
- Grid layouts for content
- Focus engine handles navigation

**Interaction:**
- **Directional:** Up/down/left/right focus movement
- **Select (click):** Primary action
- **Menu:** Back navigation
- **Siri:** Voice commands

For complete tvOS patterns, see [references/tvos.md](references/tvos.md)

### visionOS

**Key Characteristics:**
- Spatial computing environment
- 3D depth and windows
- Eye tracking + hand gestures
- Immersive and windowed modes

**Layout:**
- **Depth and layers** in 3D space
- **Glass materials** with vibrancy
- **SF Pro** (system font)

**Interaction:**
- **Gaze + pinch:** Primary selection
- **Hand gestures:** Tap, drag, rotate
- **Voice:** Siri commands
- **Immersion:** Dial controls environment blend

For complete visionOS patterns, see [references/visionos.md](references/visionos.md)

## Typography

### SF Symbols
- **6,000+ icons** designed by Apple
- **Variable weight and scale** (Ultralight to Black)
- **Multicolor, hierarchical, palette, monochrome** rendering modes
- **SF Symbols 6** latest version

**Usage:**
```swift
Image(systemName: "star.fill")
Image(systemName: "heart.circle.fill")
```

**Guidelines:**
- Match symbol weight to text weight
- Use filled variants for selected states
- Leverage multicolor for semantic meaning

### San Francisco (SF)
Apple's system font family optimized for legibility:

- **SF Pro:** iOS, macOS, tvOS
- **SF Compact:** watchOS (rounded)
- **SF Mono:** Code and tabular data
- **SF Arabic, SF Hebrew:** Localized variants

**Text Styles (Dynamic Type):**
- Large Title, Title 1/2/3
- Headline, Body, Callout
- Subheadline, Footnote, Caption 1/2

**Always support Dynamic Type** for accessibility.

## Color

### System Colors
Use semantic colors that adapt to light/dark mode:

- **Label:** Primary text
- **Secondary Label:** Secondary text
- **Tertiary Label:** Disabled text
- **System Background:** Main background
- **System Fill:** Fill colors for UI elements

### Accent Colors
- Use **accent color** for interactive elements (buttons, links)
- Ensure **sufficient contrast** (WCAG AA: 4.5:1 for text)
- Test in **both light and dark modes**

### Vibrancy
- **Materials:** Blur backgrounds to show depth
- **Vibrancy:** Colors that adapt to material behind them

## Components

### iOS Components

**Buttons:**
- Filled, Tinted, Gray, Plain styles
- Size: Small, Medium, Large
- Use SF Symbols for icons

**Lists:**
- Inset grouped style (modern iOS)
- Swipe actions (leading/trailing)
- Context menus

**Sheets:**
- Modal presentation
- Detents: medium, large
- Drag to dismiss

**Navigation:**
- Large titles (iOS 11+)
- Inline titles for scrolled state
- Search bar integration

For all iOS components, see [references/ios-components.md](references/ios-components.md)

### macOS Components

**Windows:**
- Standard, utility, panel types
- Titlebar styles: default, transparent, unified
- Sidebars and split views

**Toolbars:**
- Icon + text or icon-only buttons
- Segmented controls for views
- Search fields

For all macOS components, see [references/macos-components.md](references/macos-components.md)

## Layout & Spacing

### Grid System
- **8pt grid** as baseline (iOS, macOS)
- **Margins:** 16pt (iPhone), 20pt (iPad), 20pt (Mac)
- **Spacing:** 8pt, 16pt, 24pt, 32pt standard increments

### Safe Areas
- **Top:** Status bar, notch, Dynamic Island
- **Bottom:** Home indicator (iPhone), dock (iPad)
- **Leading/Trailing:** Avoid placing content too close to edges

### Adaptive Layouts
- **Size classes:** Compact, Regular (width/height)
- **Trait variations:** Light/Dark mode, Dynamic Type sizes
- Support **landscape and portrait**

## Accessibility

### VoiceOver
- Provide meaningful **accessibility labels**
- Group related elements
- Ensure logical **focus order**

### Dynamic Type
- Support all text sizes (from -3 to +7 default)
- Test at **Accessibility sizes** (AX1-AX5)
- Use **scalable fonts** and layouts

### Color Contrast
- **WCAG AA:** 4.5:1 for normal text, 3:1 for large text
- **WCAG AAA:** 7:1 for normal text, 4.5:1 for large text
- Test with **grayscale** and **color blindness** modes

### Reduce Motion
- Provide alternatives to animations
- Use **crossfade** instead of slides when motion reduced

## Interaction Patterns

### Gestures (iOS/iPadOS)
- **Tap:** Primary action
- **Long press:** Context menu or drag preview
- **Swipe:** Navigate, delete, reveal actions
- **Pinch:** Zoom in/out
- **Rotate:** Rotate content
- **Edge swipe:** Back navigation

### Haptics (iOS)
- **Impact:** Physical collision or boundary
- **Notification:** Success, warning, error
- **Selection:** Picker or toggle change

### Keyboard Shortcuts (macOS/iPadOS)
- **⌘ Command:** Primary actions (⌘N new, ⌘S save)
- **⇧ Shift:** Modify command (⇧⌘S save as)
- **⌥ Option:** Alternative behavior
- **⌃ Control:** Context-specific

## Animation & Motion

### Duration
- **Quick:** 0.2-0.3s (button press, small transitions)
- **Standard:** 0.3-0.5s (screen transitions, sheets)
- **Slow:** 0.5-0.8s (complex, spatial transitions)

### Easing
- **Ease In/Out:** Standard for