Apple HIG

🍎 原生感UI设计规范实战手册

Apple官方设计规范实战速查,涵盖macOS/iOS系统色彩、排版、控件、暗黑模式等原生感UI设计决策

收藏
2.7k
安装
1.3k
版本
1.0.0
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心用法

Apple Human Interface Guidelines (HIG) 是一套从官方文档和生产级应用中提炼的设计规范速查工具,覆盖macOS/iOS双平台的原生UI开发决策。核心围绕三大设计原则:

  • 清晰(Clarity):SF字体、标准图标、充足对比度
  • 顺从(Deference):留白充足、动画克制、UI不喧宾夺主
  • 层次(Depth):通过阴影、模糊、动画暗示空间关系

关键规范包括:

  • 系统色彩:9组Semantic Colors自动适配Light/Dark模式,禁止硬编码HEX
  • 排版层级:macOS正文13px、iOS正文17px,严禁混用
  • 控件规格:Button 22px高度、最小触控目标44pt(iOS)/24px(macOS)
  • 布局原则:平铺式布局,禁止"框套框"嵌套
  • 动画标准:微交互150ms ease-out,状态切换250ms ease-in-out

显著优点

| 维度 | 优势 |
|------|------|
| **权威性** | 源自Apple官方HIG,5000+ SF Symbols图标与系统级色彩自动适配 |
| **实战性** | 提供像素级规格(如Segmented Control底座色`#e8e8ed`)、精确缓动曲线`cubic-bezier(0.25, 0.1, 0.25, 1)` |
| **完整性** | 覆盖设计原则→色彩→排版→控件→布局→动画→暗黑模式→辅助功能→平台差异的全链路 |
| **可操作性** | 含11项审计Checklist(D1-D5五维度设计审计+通用合规检查),可直接用于UI走查 |
| **跨场景** | 支持Electron/SwiftUI/AppKit/React Native等多种技术栈 |

潜在局限

  • 平台局限:明确不适配Android/Windows(需参考Material/Fluent)及纯Web设计
  • 版本依赖:部分规格随macOS/iOS版本迭代(如Ventura+的Switch尺寸)
  • 主观约束:Apple的"极简美学"可能与品牌差异化需求冲突
  • 技术债务:非原生技术栈(Electron)实现"像素级原生感"成本较高

适合人群

  • macOS桌面应用开发者(Electron/SwiftUI/AppKit)
  • 追求"原生感"的跨平台应用设计团队
  • 需审计现有UI合规性的产品经理/设计师
  • 从Web/Material Design迁移至Apple生态的开发者

常规风险

| 风险 | 说明 |
|------|------|
| **过度还原** | 机械套用规范导致界面同质化,丧失产品个性 |
| **暗黑模式遗漏** | 硬编码颜色值导致Dark Mode下显示异常 |
| **触控目标不足** | 视觉尺寸小于44pt/24px实际可点击区域,引发误触 |
| **无障碍忽视** | 未测试Dynamic Type、Reduce Motion、VoiceOver等辅助功能 |
| **平台混淆** | macOS/iOS字号/间距混用导致界面失衡 |

来源可信度

内容源自Apple官方HIG + 生产级Electron应用实战校准,属一级可信来源(T1)。

Apple HIG 内容

手动下载zip · 7.4 kB
skill-card.mdtext/markdown
请选择文件