Rechercher

PythonReactSEOPDF
OpenClaw

apple-hig

Apple Human Interface Guidelines 实战参考。涵盖 macOS/iOS 设计规范、System Colors、排版层级、控件规格、布局间距、Dark Mode 适配、辅助功能和平台差异。适用于开发 macOS 桌面应用(Electron/SwiftUI/AppKit)和 iOS 应用时的 UI 设计决策。

bingfoon0 installations selon la source☆ 0 Étoiles du dépôtv1.0.0

Installation

Suivez les instructions du dépôt pour votre agent. Consultez les fichiers et dépendances avant l’installation.

SkillHub CLI

skillhub install bingfoon/apple-hig

Examinez la source et la compatibilité, puis suivez les étapes d’installation.

Donnez le lien à votre agent et demandez-lui d’examiner instructions et dépendances avant d’expliquer les étapes.

Voir la source ↗Guides

Instructions

Apple Human Interface Guidelines 实战参考

从 Apple 官方 HIG 和生产级桌面应用实战中提炼的设计规范速查。

适用场景

  • macOS 桌面应用 UI 设计(Electron / SwiftUI / AppKit)
  • iOS 应用 UI 设计
  • 需要"原生感"的跨平台应用
  • 审计现有 UI 是否符合 Apple 设计语言

不适用

  • Android / Windows 应用(参考 Material Design / Fluent Design)
  • Web 专属设计(不追求 native 感)

1. 核心设计原则

Apple HIG 的三大支柱:

原则 含义 实践
Clarity(清晰) 文字可读、图标清晰、功能一目了然 用 SF 字体、标准图标、足够对比度
Deference(顺从) UI 服务内容,不喧宾夺主 减少装饰、留白充足、动画克制
Depth(层次) 通过视觉层级传达结构 阴影、模糊、动画暗示前后关系
与其他平台的根本区别
Apple: 做减法,每一个像素都要有理由
Material: 做加法,用动效和色彩引导注意力
Fluent: 做透明,用 Acrylic/Mica 融入环境

2. 颜色系统

Apple System Colors

这些颜色在 Light/Dark 模式下自动适配,优先使用:

颜色 Light HEX Dark HEX 用途
Blue #007AFF #0A84FF 主强调色、链接、可交互元素
Green #34C759 #30D158 成功、确认
Orange #FF9500 #FF9F0A 警告
Red #FF3B30 #FF453A 错误、危险操作、删除
Purple #AF52DE #BF5AF2 辅助强调
Teal #5AC8FA #64D2FF 次要信息
Yellow #FFCC00 #FFD60A 注意
Pink #FF2D55 #FF375F 情感、收藏
Indigo #5856D6 #5E5CE6 特殊强调
语义色
用途 Light Dark
Label(主文字) #000000 #FFFFFF
Secondary Label rgba(0,0,0,0.5) rgba(255,255,255,0.55)
Tertiary Label rgba(0,0,0,0.25) rgba(255,255,255,0.25)
Quaternary Label rgba(0,0,0,0.1) rgba(255,255,255,0.1)
Separator rgba(0,0,0,0.1) rgba(255,255,255,0.1)
Background(窗口) #FFFFFF #1E1E1E
Secondary BG #F5F5F5 #2C2C2E
Tertiary BG #FFFFFF #3A3A3C
使用原则
✅...

Informations sur la source

Source
github
Repository
openclaw/skills
Path
skills/bingfoon/apple-hig
Version
1.0.0
Commit
4b159511832a499a33d3cd4def14e7761e364a02
Source de classification
rules
Statut
active
Visibilité
public

Ces informations proviennent de l’analyse indexée et peuvent être anciennes. Vérifiez les fichiers actuels.

Contenu extrait

SKILL.md
# Apple Human Interface Guidelines 实战参考

从 Apple 官方 HIG 和生产级桌面应用实战中提炼的设计规范速查。

## 适用场景

- macOS 桌面应用 UI 设计(Electron / SwiftUI / AppKit)
- iOS 应用 UI 设计
- 需要"原生感"的跨平台应用
- 审计现有 UI 是否符合 Apple 设计语言

## 不适用

- Android / Windows 应用(参考 Material Design / Fluent Design)
- Web 专属设计(不追求 native 感)

---

## 1. 核心设计原则

Apple HIG 的三大支柱:

| 原则 | 含义 | 实践 |
|------|------|------|
| **Clarity(清晰)** | 文字可读、图标清晰、功能一目了然 | 用 SF 字体、标准图标、足够对比度 |
| **Deference(顺从)** | UI 服务内容,不喧宾夺主 | 减少装饰、留白充足、动画克制 |
| **Depth(层次)** | 通过视觉层级传达结构 | 阴影、模糊、动画暗示前后关系 |

### 与其他平台的根本区别

```
Apple: 做减法,每一个像素都要有理由
Material: 做加法,用动效和色彩引导注意力
Fluent: 做透明,用 Acrylic/Mica 融入环境
```

---

## 2. 颜色系统

### Apple System Colors

这些颜色在 Light/Dark 模式下自动适配,**优先使用**:

| 颜色 | Light HEX | Dark HEX | 用途 |
|------|-----------|----------|------|
| Blue | `#007AFF` | `#0A84FF` | 主强调色、链接、可交互元素 |
| Green | `#34C759` | `#30D158` | 成功、确认 |
| Orange | `#FF9500` | `#FF9F0A` | 警告 |
| Red | `#FF3B30` | `#FF453A` | 错误、危险操作、删除 |
| Purple | `#AF52DE` | `#BF5AF2` | 辅助强调 |
| Teal | `#5AC8FA` | `#64D2FF` | 次要信息 |
| Yellow | `#FFCC00` | `#FFD60A` | 注意 |
| Pink | `#FF2D55` | `#FF375F` | 情感、收藏 |
| Indigo | `#5856D6` | `#5E5CE6` | 特殊强调 |

### 语义色

| 用途 | Light | Dark |
|------|-------|------|
| Label(主文字) | `#000000` | `#FFFFFF` |
| Secondary Label | `rgba(0,0,0,0.5)` | `rgba(255,255,255,0.55)` |
| Tertiary Label | `rgba(0,0,0,0.25)` | `rgba(255,255,255,0.25)` |
| Quaternary Label | `rgba(0,0,0,0.1)` | `rgba(255,255,255,0.1)` |
| Separator | `rgba(0,0,0,0.1)` | `rgba(255,255,255,0.1)` |
| Background(窗口) | `#FFFFFF` | `#1E1E1E` |
| Secondary BG | `#F5F5F5` | `#2C2C2E` |
| Tertiary BG | `#FFFFFF` | `#3A3A3C` |

### 使用原则

```
✅...

Skills associés