Apple Design System Skill

基于 Apple Human Interface Guidelines (2026)，覆盖所有 Apple 平台的设计规范。

设计原则

视觉基础

图标与品牌

组件设计规范

输入组件

容器组件

体验设计

快速参考

Apple 平台默认字号

系统强调色

#007AFF (Blue) — iOS/macOS 默认强调色

iOS 触摸目标

最小 44×44pt（Apple HIG 规定）

按钮样式优先级

Filled Button → Tinted Button → Gray Button → Borderless Button

Dark Mode 背景色

#1C1C1E（不是纯黑 #000000）

SF Symbols 渲染模式

Monochrome → Hierarchical → Palette → Multicolor

布局规范

避坑指南

常见错误

版本陷阱

• ⚠️ Liquid Glass — 仅限 visionOS，iOS/macOS 不支持
• ⚠️ SF Symbols 渐变 — 仅 SF Symbols 7+ 支持，低版本设备 fallback
• ⚠️ SF Symbols 动画 — Variable Color 不适合表达深度感，应用 Hierarchical
• ⚠️ Dynamic Type — 大字号时布局可能截断，需测试所有尺寸

设计红线

• ❌ 不要硬编码系统颜色值（系统颜色值随版本浮动）
• ❌ 不要仅靠颜色传达信息（配合文字标签/图标）
• ❌ 不要忽略 Reduce Motion 设置（动画需考虑无障碍）
• ❌ 不要在 App Icon 用纯白背景（iOS 10+ 支持圆角裁切）

设计原则详解

3 大核心原则

1. UIKit一致性（UIKit Consistency）

• 使用平台原生组件和行为
• 遵循系统交互模式
• 支持系统级无障碍和暗模式

2. 清晰性（Clarity）

• 内容优先，信息层次分明
• 文字清晰可读，图标语义明确
• 动态字体支持（Dynamic Type）

3. 深度（Depth）

• 利用视觉层次和真实动效传达关系
• 导航层级清晰
• 毛玻璃和阴影表达空间感

平台哲学差异

Typography 详解

字体家族

Dynamic Type 级别

字号层级示例

主标题 (Title)  —————————  28pt Bold
副标题 (Headline)  —————  17pt Semibold
正文 (Body)  ———————————  17pt Regular
说明 (Caption)  ————————  12pt Regular
辅助 (Footnote)  ———————  13pt Regular

Color System 详解

系统色彩语义

P3 广色域

• 支持 25% 色彩空间扩展
• 设计资源用 sRGB 交付，广色域用 Display P3
• iPhone 7+ / iPad Pro / Mac 支持

SF Symbols 详解

图标分类

渲染模式

常用图标速查

组件详解

Button 按钮

样式优先级

1. Filled — 主要操作，强调色背景
2. Tinted — 次要操作，浅色背景+强调色文字
3. Gray — 第三操作，灰色背景
4. Borderless — 最低调，文字+图标

设计要点

• 触摸目标最小 44×44pt
• 按钮内边距最小 12pt
• 同组按钮间距至少 8pt
• 危险操作用 destructive 样式

Navigation 导航

iOS 导航模式

• Navigation Bar — 分层内容，push/pop
• Tab Bar — 扁平结构，切换视图
• Toolbar — 页面内操作
• Segmented Control — 同级切换

规范

• Tab Bar 最多 5 个
• Navigation Bar 显示当前层级标题
• 返回按钮始终可见
• Sheet 支持 .medium / .large detents

Lists 列表

单元格结构

┌─────────────────────────────────┐
│  Leading    Title    Trailing   │
│  Icon    Primary   Secondary  Image │
│         Subtitle                 │
└─────────────────────────────────┘

交互

• Swipe Actions — 左滑/右滑快捷操作
• Drag & Drop — 拖拽排序
• 附件指示器 — disclosure chevron

Alerts 弹窗

类型

Accessibility 无障碍

核心要求

实现检查清单

• 所有图片有 alt 文字
• 颜色不是唯一信息载体
• 手势有替代方案
• 音频有字幕/文字记录
• 支持 Switch Control

平台差异化设计

iOS

核心特征

• 手势驱动：Swipe Back、Pull to Refresh、3D Touch/Haptic Touch
• 独立 App 沙箱
• 通知系统：Banner、Alert、Lock Screen
• 小组件：Home Screen Widgets
• 多任务：App Switcher、Slide Over、Split View（iPad）

设计要点

• 底部 Tab Bar 导航（≤5 个 Tab）
• Navigation Bar 返回上一页
• Modal Sheet 从底部滑出
• 触摸目标 ≥ 44×44pt
• Safe Area 适配（刘海、Home Indicator）

iOS 特有组件

• UINavigationController — 分层导航
• UITabBarController — 底部切换
• UITableView / UICollectionView — 列表/网格
• UISegmentedControl — 分段选择
• UISwitch — 开关控制
• UIAlertController — 警告框

iPad

核心特征

• Split View：分屏多任务
• Slide Over：悬浮面板
• 多窗口：多实例 App
• 键盘/触控板支持
• 外接显示器支持

设计要点

• 侧边栏导航（Sidebar）
• Toolbar 用于页面操作
• Popover 用于上下文选项
• 拖拽跨 App 传输数据
• 支持拖拽调整大小的窗口

macOS

核心特征

• 窗口管理：最小化/最大化/关闭
• 菜单栏：App 菜单、系统菜单
• Dock：应用启动器
• 多窗口并发
• 键盘快捷键优先

设计要点

• 不支持 Dynamic Type — 仅 iOS/iPadOS 支持
• 使用原生窗口样式
• 支持拖拽调整大小
• 菜单项 Keyboard Shortcut
• Touch Bar 支持（MacBook Pro）

tvOS

核心特征

• 焦点驱动（Focus Engine）
• 远程控制/ Siri Remote
• 10-foot UI（远距离观看，屏幕距离用户 3 米）
• 屏幕大，文字需更大字号

10-Foot UI 设计规范

设计原则

字号层级

Focus Engine 焦点引擎

tvOS 独有的交互模型：用户用 Siri Remote 选择元素，焦点自动跟随。

焦点状态

焦点导航规则

• 自动识别相邻元素
• 焦点按最近距离或阅读顺序跳转
• 水平/垂直网格自动推断

布局规范

深度与阴影

焦点元素通过阴影表达深度：

// 焦点元素阴影
Text("Focused Item")
    .shadow(color: .black.opacity(0.5), radius: 20, x: 0, y: 10)

// 未聚焦元素阴影
Text("Unfocused Item")
    .shadow(color: .black.opacity(0.3), radius: 8, x: 0, y: 4)

组件层级

SwiftUI for tvOS

import SwiftUI
import TVUIKit

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem { Label("首页", systemImage: "house") }
            SearchView()
                .tabItem { Label("搜索", systemImage: "magnifyingglass") }
        }
    }
}

// 焦点状态
struct FocusableCard: View {
    @State private var isFocused = false

    var body: some View {
        VStack {
            Image("poster")
                .resizable()
                .aspectRatio(16/9, contentMode: .fit)
            Text("Title")
                .font(.title2)
        }
        .scaleEffect(isFocused ? 1.1 : 1.0)
        .animation(.easeInOut(duration: 0.2), value: isFocused)
        .focusable()
        .onFocusChange { focused in
            isFocused = focused
        }
    }
}

UIKit for tvOS

import UIKit
import TVUIKit

class CatalogViewController: UIViewController {
    private var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
    }

    private func setupCollectionView() {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.itemSize = CGSize(width: 400, height: 225)
        layout.minimumLineSpacing = 40

        collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(CatalogCell.self, forCellWithReuseIdentifier: "Cell")

        // 焦点行为
        collectionView.remembersFocused = true
    }
}

// UICollectionViewDelegateFocus
extension CatalogViewController: UICollectionViewDelegateFocus {
    func collectionView(_ collectionView: UICollectionView, didUpdateFocusIn context: UICollectionViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
        if let indexPath = context.nextFocusedIndexPath {
            coordinator.addCoordinatedAnimations {
                // 焦点动画
            }
        }
    }
}

避坑指南

watchOS

核心特征

• 腕上设备，屏幕极小（40-45mm Series 10）
• Digital Crown 滚动导航
• Haptic 反馈（Tap、Click、Ritual）
• 续航优先，Always-On 显示

设计原则

1. 简洁性（Reduce）

• 每次只展示一个核心功能
• 避免长列表和复杂表单
• 单列式布局，信息垂直滚动

2. 上下文感知（Context）

• 基于时间和位置主动呈现信息
• Glanceable：一瞥即知
• Long-Look：通知展开显示详情

3. 实时性（Timely）

• 实时数据更新（心率、步数）
• 快捷操作（回复、支付）

Apple Watch HIG 核心规范

布局模式

┌─────────────────────────┐
│        Status Bar        │  18pt
├─────────────────────────┤
│                         │
│       通知内容            │  主区域
│       (Long-Look)        │
│                         │
├─────────────────────────┤
│       Quick Actions      │  56pt
└─────────────────────────┘

颜色系统

组件层级

交互模式

SwiftUI for watchOS

// 基础页面
struct ContentView: View {
    var body: some View {
        VStack {
            Text("心率")
                .font(.caption)
            Text("72")
                .font(.largeTitle)
                .foregroundColor(.green)
        }
    }
}

// 列表导航
struct ListView: View {
    var body: some View {
        List {
            ForEach(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.name)
                }
            }
        }
    }
}

// Picker 滚轮
Picker("选择", selection: $selected) {
    Text("选项1").tag(0)
    Text("选项2").tag(1)
}
.pickerStyle(.wheel)

UIKit for watchOS

import WatchKit

class InterfaceController: WKInterfaceController {
    @IBOutlet weak var label: WKInterfaceLabel!

    override func awake(withContext context: Any?) {
        super.awake(withContext: context)
        label.setText("Hello Apple Watch")
    }

    @IBAction func buttonTapped() {
        WKInterfaceDevice.current().play(.click)
    }
}

避坑指南

visionOS

核心特征

• 空间计算（Spatial Computing）
• Eye + Hand 交互
• 3D 窗口/场景
• 沉浸式体验

设计规范

• 不支持 Dark Mode — 使用 Liquid Glass
• Liquid Glass 材质（毛玻璃 + 透明度）
• Billboarding：2D 文字始终面向用户
• 深度层级：场景中的 Z 轴位置
• 焦点：眼睛注视 + 手势确认

布局模式

• Windows — 可拖动/调整的窗口
• Volumes — 3D 容器
• Spaces — 完全沉浸空间
• Mixed Reality — 虚实结合

Animation 动效设计

核心原则

1. 反馈 — 操作即时响应
2. 连续性 — 状态平滑过渡
3. 导航 — 引导用户理解层级
4. 一致性 — 同类操作使用相同动效

动画类型

SwiftUI 动画

// 隐式动画
withAnimation(.easeInOut(duration: 0.3)) {
    isExpanded.toggle()
}

// 显式动画
Button("点击") {
    withSpring {
        offset.y -= 10
    }
}

// 过渡动画
Text("Hello")
    .transition(.opacity.combined(with: .scale))

UIKit 动画

// UIView.animate
UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
    view.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
}

// UIViewPropertyAnimator
let animator = UIViewPropertyAnimator(duration: 0.3, curve: .easeInOut) {
    view.center = newCenter
}
animator.startAnimation()

无障碍动画

• 检测 UIAccessibility.isReduceMotionEnabled
• 减少或禁用动画
• 提供静态替代

Spatial Layout 空间布局

布局基础

8pt 网格系统

• 所有间距是 8 的倍数
• 组件间距：8pt / 16pt / 24pt / 32pt
• 屏幕边距：16pt（iPhone）/ 20pt（iPad）

间距层级

iOS 布局规范

安全区域

• 顶部：Dynamic Island / 刘海
• 底部：Home Indicator
• 左右：屏幕圆角

visionOS 空间布局

窗口尺寸

• 最小宽度：320pt
• 默认高度：600pt
• 圆角：44pt

深度层级

• Near：Z = 0（主窗口）
• Mid：Z = -200（背景元素）
• Far：Z = -500（装饰元素）

品牌与图标

App Icon

尺寸要求

设计规范

• 圆角：iOS 自动裁切
• 背景：避免纯白（iOS 10+ 圆角裁切）
• 内容居中，四周留白
• 测试在不同背景上的显示

Apple 品牌规范

可用

• Apple Logo（SF Symbol: apple.logo）
• 产品名称拼写正确（iPhone、iPad、Mac）

禁止

• Apple 彩虹 logo 变体
• 产品名称翻译
• 模仿 Apple 字体

输出格式规范

当使用本技能回答用户问题时，遵循以下格式：

回复结构

1. 直接回答 — 一段简洁的话给出核心答案
2. 规范引用 — 补充 HIG 相关条款（如适用）
3. 设计建议 — 组件选用、视觉规范（如需）
4. 避坑提醒 — 常见错误+正确做法

示例回复（按钮设计）

iOS 按钮首选 Filled 样式，背景用 #007AFF，文字白色，高度至少 44pt。若要次要操作，用 Tinted 按钮。macOS 避免 Dynamic Type，visionOS 用 Liquid Glass 材质。注意按钮之间至少留 8pt 间距。

禁用格式

• ❌ 不要显式分层（避免"第一层/第二层/框架分析"等字眼）
• ❌ 不要长篇引用原文，要内化为自己的话
• ❌ 不要包含代码实现（那是 ios-dev 技能的职责）
• ✅ 输出应是一段干净的话

来源

来源：Apple Human Interface Guidelines（2026-04-23 访问）

• 主页：https://developer.apple.com/design/human-interface-guidelines/
• Typography：https://developer.apple.com/design/human-interface-guidelines/typography
• Color：https://developer.apple.com/design/human-interface-guidelines/color
• SF Symbols：https://developer.apple.com/design/human-interface-guidelines/sf-symbols
• Components：https://developer.apple.com/design/human-interface-guidelines/components
• Accessibility：https://developer.apple.com/design/human-interface-guidelines/accessibility

更新频率：随系统版本迭代（当前基于 2026）