Apple Design System Skill#

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

设计原则#

视觉基础#

图标与品牌#

组件设计规范#

输入组件#

容器组件#

体验设计#

---

快速参考#

Apple 平台默认字号#

平台默认最小iOS/iPadOS17pt11ptmacOS13pt10pttvOS29pt23ptvisionOS17pt12pt

系统强调色#

#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

布局规范#

元素边距/间距备注屏幕边缘16ptiOS 标准组件间距8pt8pt 网格列表 Cell 高度44pt触摸目标导航栏高度44pt标准TabBar 高度49ptiPhone

---

避坑指南#

常见错误#

错误做法正确做法❌ Dark Mode 用纯黑 #000000✅ 用 #1C1C1E（Apple HIG 规定）❌ macOS 使用 Dynamic Type✅ macOS 不支持，仅 iOS/iPadOS 支持❌ 用红绿组合传达信息✅ 用蓝色+图标辅助，色盲友好❌ visionOS 使用 3D 文字✅ 用 billboarding + 2D 文字❌ 触摸目标小于 44×44pt✅ 最小 44×44pt❌ 超链接用绿/蓝色组合✅ 用统一蓝色 #007AFF❌ SearchBar 不提供清除按钮✅ 右滑显示 Clear 按钮❌ Toggle 标签用 On/Off✅ 用描述性标签如"深色模式"

版本陷阱#

• ⚠️ 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）

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

平台哲学差异#

平台主要模式iOS多任务 + 手势导航macOS多窗口 + 菜单栏tvOS焦点驱动 + 远程watchOS表盘 + 复杂功能visionOS空间计算 + 手眼协作

---

Typography 详解#

字体家族#

用途iOS/macOStvOSwatchOS正文SF ProSF ProSF Pro标题SF Pro DisplaySF Pro DisplaySF Pro Rounded手写SF Pro Text—SF Pro Rounded等宽SF MonoSF MonoSF Mono

Dynamic Type 级别#

级别中文基准英文基准应用xSmall13pt13pt辅助文字Small15pt15pt次要信息Body17pt17pt正文Lead22pt20pt副标题Title28pt22pt标题xTitle34pt28pt大标题xxTitle40pt34pt超大标题

字号层级示例#

text

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

---

Color System 详解#

系统色彩语义#

用途iOSmacOS主要文字labellabelColor次要文字secondaryLabelsecondaryLabelColor主色tints/tintColorcontrolAccentColor背景systemBackgroundwindowBackgroundColor分组背景systemGroupedBackgroundcontrolBackgroundColor强调色systemBlue (#007AFF)systemBlue

P3 广色域#

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

---

SF Symbols 详解#

图标分类#

类别数量示例UI 图标150+chevron, plus, xmark多媒体100+play, pause, speaker通信80+message, phone, mail物体200+book, car, house天气50+sun, cloud, rain

渲染模式#

模式效果适用场景Monochrome单一颜色默认图标Hierarchical单色分层透明度visionOS 强调Palette最多 3 色自定义主题Multicolor固有色装饰性图标

常用图标速查#

功能SF Symbol返回chevron.left关闭xmark菜单line.3.horizontal分享square.and.arrow.up收藏heart / heart.fill设置gear搜索magnifyingglass刷新arrow.clockwise删除trash编辑pencil添加plus相机camera照片photo地图map定位location

---

组件详解#

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 列表#

单元格结构

text

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

交互

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

Alerts 弹窗#

类型

类型样式用途Alert模态重要信息/确认Action Sheet底部弹出多选项Toast自动消失轻量反馈DialogmacOS确认/输入

---

Accessibility 无障碍#

核心要求#

类型要求VoiceOver所有元素可朗读Dynamic Type支持所有字体级别对比度文字 4.5:1 / 大字 3:1触摸目标最小 44×44ptReduce Motion尊重系统设置

实现检查清单#

• 所有图片有 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 设计规范

设计原则

原则说明简洁性一屏只做一件事层级清晰信息优先级分明颜色鲜明对比度足够字体足够大远距离可读

字号层级

用途字号说明大标题54pt屏幕标题标题38pt分类标题副标题29pt列表项标题正文24pt描述文字Caption19pt辅助说明

Focus Engine 焦点引擎

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

焦点状态

状态视觉变化Unfocused正常大小，100% 透明度Focused放大 1.1x，阴影加深，透明度 100%Highlighted按下时的反馈色

焦点导航规则

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

布局规范

规范值屏幕分辨率1920×1080 / 3840×2160安全区域上下左右各 90pt水平边距96pt列表项高度120ptTab Bar 高度96pt

深度与阴影

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

swift

// 焦点元素阴影
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)

组件层级

组件tvOS 控件说明导航TabBar底部标签切换列表List水平滚动 Banner/Collection详情Detail大图+描述+操作菜单Menu弹出操作菜单

SwiftUI for tvOS

swift

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

swift

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 {
                // 焦点动画
            }
        }
    }
}

避坑指南

错误做法正确做法❌ 小字体✅ 最小 19pt Caption❌ 密集布局✅ 每屏一个主题❌ 触摸交互✅ 远程/语音/手势❌ Hover 效果✅ 焦点自动跟随❌ 复杂导航✅ 最多两层深度❌ 窄边框✅ 安全区域各 90pt

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 核心规范

规范要求屏幕尺寸40mm/44mm/45mm/46mm基准字号14pt（Body）最小字号10pt（Caption）触控目标最小 44×44pt边距12pt（水平）Corner Radius约 36pt（贴合屏幕）

布局模式

text

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

颜色系统

类型色值用途强调色#FF9500主要操作成功色#34C759健康数据警告色#FF3B30警报背景#000000表盘背景

组件层级

组件说明WatchFace表盘（Modular/Analog/...）WatchWindow全屏窗口Alert通知展开视图Menu快捷操作菜单Picker滚轮选择器

交互模式

模式操作反馈Tap点击按钮Haptic ClickSwipe上下滑动Haptic ScrollLong Press长按编辑Haptic TapDigital Crown旋转滚动Haptic TickSide Button侧边按钮Haptic Impact

SwiftUI for watchOS

swift

// 基础页面
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

swift

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. 一致性 — 同类操作使用相同动效

动画类型#

类型用途时长曲线系统动画UI 状态变化250-400mseaseInOut导航动画页面切换350-500msspring手势动画拖拽/缩放实时直接载入动画等待反馈循环linear

SwiftUI 动画#

swift

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

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

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

UIKit 动画#

swift

// 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）

间距层级

用途间距紧凑4pt标准8pt中等16pt宽松24pt超宽32pt+

iOS 布局规范#

安全区域

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

visionOS 空间布局#

窗口尺寸

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

深度层级

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

---

品牌与图标#

App Icon#

尺寸要求

平台尺寸备注iPhone180×180 (@3x)60×60 (@1x)iPad167×167 (@2x)83.5×83.5 (@1x)App Store1024×1024唯一尺寸

设计规范

• 圆角：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）