Apple HigDesign Skill

Apple 平台设计系统技能。覆盖 Apple Human Interface Guidelines (HIG)，包括设计原则 （Hierarchy/Harmony/Consistency）、Typography（San Francisco/Dynamic Type）、 Color System（系统色/Liquid Glass）、SF Symbols（图标库/动画）、Components （Button/Navigation/Tab Bar/Alert/List/TextField/SearchBar/Toggle/DatePicker）、 Accessibility、Dark Mode、Animation、空间布局（visionOS）、Branding。 当用户提到 Apple 设计、iOS UI 规范、Apple HIG、iOS 设计语言、SF Symbols、 Dark Mode 设计、visionOS 空间 UI 时触发。

Apple Design System Skill

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

设计原则

视觉基础

图标与品牌

组件设计规范

输入组件

容器组件

体验设计

---

快速参考

Apple 平台默认字号

平台	默认	最小
iOS/iPadOS	17pt	11pt
macOS	13pt	10pt
tvOS	29pt	23pt
visionOS	17pt	12pt

系统强调色

#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

布局规范

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

---

避坑指南

常见错误

错误做法	正确做法
❌ 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/macOS	tvOS	watchOS
正文	SF Pro	SF Pro	SF Pro
标题	SF Pro Display	SF Pro Display	SF Pro Rounded
手写	SF Pro Text	—	SF Pro Rounded
等宽	SF Mono	SF Mono	SF Mono

Dynamic Type 级别

级别	中文基准	英文基准	应用
xSmall	13pt	13pt	辅助文字
Small	15pt	15pt	次要信息
Body	17pt	17pt	正文
Lead	22pt	20pt	副标题
Title	28pt	22pt	标题
xTitle	34pt	28pt	大标题
xxTitle	40pt	34pt	超大标题

字号层级示例

text

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

---

Color System 详解

系统色彩语义

用途	iOS	macOS
主要文字	label	labelColor
次要文字	secondaryLabel	secondaryLabelColor
主色	tints/tintColor	controlAccentColor
背景	systemBackground	windowBackgroundColor
分组背景	systemGroupedBackground	controlBackgroundColor
强调色	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	自动消失	轻量反馈
Dialog	macOS	确认/输入

---

Accessibility 无障碍

核心要求

类型	要求
VoiceOver	所有元素可朗读
Dynamic Type	支持所有字体级别
对比度	文字 4.5:1 / 大字 3:1
触摸目标	最小 44×44pt
Reduce 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	描述文字
Caption	19pt	辅助说明

Focus Engine 焦点引擎

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

焦点状态

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

焦点导航规则

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

布局规范

规范	值
屏幕分辨率	1920×1080 / 3840×2160
安全区域	上下左右各 90pt
水平边距	96pt
列表项高度	120pt
Tab 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 Click
Swipe	上下滑动	Haptic Scroll
Long Press	长按编辑	Haptic Tap
Digital Crown	旋转滚动	Haptic Tick
Side 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-400ms	easeInOut
导航动画	页面切换	350-500ms	spring
手势动画	拖拽/缩放	实时	直接
载入动画	等待反馈	循环	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

尺寸要求

平台	尺寸	备注
iPhone	180×180 (@3x)	60×60 (@1x)
iPad	167×167 (@2x)	83.5×83.5 (@1x)
App Store	1024×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）