fluent-design

# Microsoft Fluent Design System 实战参考

Windows 11 设计语言的实战速查，覆盖材质、控件、布局和跨平台适配。

## 适用场景

- Windows 桌面应用 UI 设计（WinUI / Electron / WPF）
- 需要 Windows 原生感的跨平台应用
- Electron 应用在 Windows 上的视觉适配
- 审计现有 UI 是否符合 Fluent Design

## 不适用

- macOS / iOS 原生应用（参考 apple-hig）
- Android 应用（参考 material-design）

---

## 1. 核心设计原则

Fluent Design 2 的五大支柱：

| 原则 | 含义 | 实践 |
|------|------|------|
| **Light（光照）** | 用光线引导注意力 | Reveal Highlight、悬浮发光效果 |
| **Depth（深度）** | 通过层次感建立空间 | 阴影、z-axis 堆叠 |
| **Motion（动效）** | 有意义的动画 | Connected Animation、页面转场 |
| **Material（材质）** | 半透明材质融入环境 | Mica、Acrylic |
| **Scale（缩放）** | 适应各种设备 | 响应式布局、触控适配 |

### 与 Apple HIG 的核心区别

```
Apple: 内容优先，UI 退后，极简克制
Fluent: 环境融合，材质透明，层次丰富
Apple: 实色背景为主
Fluent: Mica/Acrylic 半透明为主
Apple: 标题栏极简（红黄绿三点）
Fluent: 标题栏可承载导航（NavigationView）
```

---

## 2. 材质系统

### Mica（云母）

```
特点：从桌面壁纸取色，轻微染色效果
用于：窗口背景、标题栏背景
性能：低开销（静态取色，不实时模糊）
```

```css
/* Mica 模拟（Electron/Web） */
.mica-bg {
  background-color: rgba(243, 243, 243, 0.9); /* Light */
  /* Dark: rgba(32, 32, 32, 0.9) */
}
```

### Acrylic（亚克力）

```
特点：高斯模糊 + 噪点 + 排除混合
用于：弹出菜单、Flyout、Command Bar、侧边栏
性能：中等开销（实时 blur）
分类：
  - Background Acrylic：模糊桌面内容（窗口级）
  - In-App Acrylic：模糊应用内内容（组件级）
```

```css
/* Acrylic 模拟 */
.acrylic {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(60px) saturate(125%);
  -webkit-backdrop-filter: blur(60px) saturate(125%);
  /* 可加噪点纹理 */
}

.acrylic-dark {
  background: rgba(32, 32, 32, 0.65);
  backdrop-filter: blur(60px) saturate(125%);
}
```

### Smoke（烟雾）

```
用于：弹窗遮罩层
效果：暗色半透明覆盖
```

```css
.smoke {
  background: rgba(0, 0, 0, 0...