Install
openclaw skills install @yhongm/apple-higdesign-skillApple 平台设计系统技能。覆盖 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 时触发。
openclaw skills install @yhongm/apple-higdesign-skill基于 Apple Human Interface Guidelines (2026),覆盖所有 Apple 平台的设计规范。
| 平台 | 默认 | 最小 |
|---|---|---|
| iOS/iPadOS | 17pt | 11pt |
| macOS | 13pt | 10pt |
| tvOS | 29pt | 23pt |
| visionOS | 17pt | 12pt |
#007AFF (Blue) — iOS/macOS 默认强调色
最小 44×44pt(Apple HIG 规定)
Filled Button → Tinted Button → Gray Button → Borderless Button
#1C1C1E(不是纯黑 #000000)
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 | ✅ 用描述性标签如"深色模式" |
| 平台 | 主要模式 |
|---|---|
| iOS | 多任务 + 手势导航 |
| macOS | 多窗口 + 菜单栏 |
| tvOS | 焦点驱动 + 远程 |
| watchOS | 表盘 + 复杂功能 |
| visionOS | 空间计算 + 手眼协作 |
| 用途 | 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 |
| 级别 | 中文基准 | 英文基准 | 应用 |
|---|---|---|---|
| xSmall | 13pt | 13pt | 辅助文字 |
| Small | 15pt | 15pt | 次要信息 |
| Body | 17pt | 17pt | 正文 |
| Lead | 22pt | 20pt | 副标题 |
| Title | 28pt | 22pt | 标题 |
| xTitle | 34pt | 28pt | 大标题 |
| xxTitle | 40pt | 34pt | 超大标题 |
主标题 (Title) ————————— 28pt Bold
副标题 (Headline) ————— 17pt Semibold
正文 (Body) ——————————— 17pt Regular
说明 (Caption) ———————— 12pt Regular
辅助 (Footnote) ——————— 13pt Regular
| 用途 | iOS | macOS |
|---|---|---|
| 主要文字 | label | labelColor |
| 次要文字 | secondaryLabel | secondaryLabelColor |
| 主色 | tints/tintColor | controlAccentColor |
| 背景 | systemBackground | windowBackgroundColor |
| 分组背景 | systemGroupedBackground | controlBackgroundColor |
| 强调色 | systemBlue (#007AFF) | systemBlue |
| 类别 | 数量 | 示例 |
|---|---|---|
| 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 |
┌─────────────────────────────────┐
│ Leading Title Trailing │
│ Icon Primary Secondary Image │
│ Subtitle │
└─────────────────────────────────┘
| 类型 | 样式 | 用途 |
|---|---|---|
| Alert | 模态 | 重要信息/确认 |
| Action Sheet | 底部弹出 | 多选项 |
| Toast | 自动消失 | 轻量反馈 |
| Dialog | macOS | 确认/输入 |
| 类型 | 要求 |
|---|---|
| VoiceOver | 所有元素可朗读 |
| Dynamic Type | 支持所有字体级别 |
| 对比度 | 文字 4.5:1 / 大字 3:1 |
| 触摸目标 | 最小 44×44pt |
| Reduce Motion | 尊重系统设置 |
UINavigationController — 分层导航UITabBarController — 底部切换UITableView / UICollectionView — 列表/网格UISegmentedControl — 分段选择UISwitch — 开关控制UIAlertController — 警告框设计原则
| 原则 | 说明 |
|---|---|
| 简洁性 | 一屏只做一件事 |
| 层级清晰 | 信息优先级分明 |
| 颜色鲜明 | 对比度足够 |
| 字体足够大 | 远距离可读 |
字号层级
| 用途 | 字号 | 说明 |
|---|---|---|
| 大标题 | 54pt | 屏幕标题 |
| 标题 | 38pt | 分类标题 |
| 副标题 | 29pt | 列表项标题 |
| 正文 | 24pt | 描述文字 |
| Caption | 19pt | 辅助说明 |
tvOS 独有的交互模型:用户用 Siri Remote 选择元素,焦点自动跟随。
焦点状态
| 状态 | 视觉变化 |
|---|---|
| Unfocused | 正常大小,100% 透明度 |
| Focused | 放大 1.1x,阴影加深,透明度 100% |
| Highlighted | 按下时的反馈色 |
焦点导航规则
| 规范 | 值 |
|---|---|
| 屏幕分辨率 | 1920×1080 / 3840×2160 |
| 安全区域 | 上下左右各 90pt |
| 水平边距 | 96pt |
| 列表项高度 | 120pt |
| Tab Bar 高度 | 96pt |
焦点元素通过阴影表达深度:
// 焦点元素阴影
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 | 弹出操作菜单 |
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
}
}
}
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 |
1. 简洁性(Reduce)
2. 上下文感知(Context)
3. 实时性(Timely)
| 规范 | 要求 |
|---|---|
| 屏幕尺寸 | 40mm/44mm/45mm/46mm |
| 基准字号 | 14pt(Body) |
| 最小字号 | 10pt(Caption) |
| 触控目标 | 最小 44×44pt |
| 边距 | 12pt(水平) |
| Corner Radius | 约 36pt(贴合屏幕) |
┌─────────────────────────┐
│ 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 |
// 基础页面
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)
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)
}
}
| 错误做法 | 正确做法 |
|---|---|
| ❌ 多列布局 | ✅ 单列垂直滚动 |
| ❌ 长文本列表 | ✅ 精简内容,异步加载 |
| ❌ 复杂手势 | ✅ 点击+滚轮即可 |
| ❌ 忽略续航 | ✅ 减少后台刷新 |
| ❌ 与手机相同布局 | ✅ 专为小屏重设计 |
| 类型 | 用途 | 时长 | 曲线 |
|---|---|---|---|
| 系统动画 | UI 状态变化 | 250-400ms | easeInOut |
| 导航动画 | 页面切换 | 350-500ms | spring |
| 手势动画 | 拖拽/缩放 | 实时 | 直接 |
| 载入动画 | 等待反馈 | 循环 | linear |
// 隐式动画
withAnimation(.easeInOut(duration: 0.3)) {
isExpanded.toggle()
}
// 显式动画
Button("点击") {
withSpring {
offset.y -= 10
}
}
// 过渡动画
Text("Hello")
.transition(.opacity.combined(with: .scale))
// 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| 用途 | 间距 |
|---|---|
| 紧凑 | 4pt |
| 标准 | 8pt |
| 中等 | 16pt |
| 宽松 | 24pt |
| 超宽 | 32pt+ |
| 平台 | 尺寸 | 备注 |
|---|---|---|
| iPhone | 180×180 (@3x) | 60×60 (@1x) |
| iPad | 167×167 (@2x) | 83.5×83.5 (@1x) |
| App Store | 1024×1024 | 唯一尺寸 |
apple.logo)当使用本技能回答用户问题时,遵循以下格式:
iOS 按钮首选 Filled 样式,背景用
#007AFF,文字白色,高度至少 44pt。若要次要操作,用 Tinted 按钮。macOS 避免 Dynamic Type,visionOS 用 Liquid Glass 材质。注意按钮之间至少留 8pt 间距。
来源: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)