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 的五大支柱：

与 Apple HIG 的核心区别

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

2. 材质系统

Mica（云母）

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

/* 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：模糊应用内内容（组件级）

/* 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（烟雾）

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

.smoke {
  background: rgba(0, 0, 0, 0.3); /* Light */
  /* Dark: rgba(0, 0, 0, 0.5) */
}

材质选择规则

3. 颜色系统

Windows System Colors

Windows 用户可自定义 Accent Color，应用需要适配任意颜色。

语义色

状态色