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

与 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，应用需要适配任意颜色。

语义色

状态色

4. 排版

字体栈

font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;

Windows 11 使用 Segoe UI Variable（可变字体）。旧版 Windows 用 Segoe UI。

字号层级

与 Apple 对比

Windows Body = 14px → macOS Body = 13px → iOS Body = 17px
Windows 标题偏大偏粗（Semibold），Apple 标题偏克制（Regular/Medium）

5. 控件规格

标准控件尺寸

圆角规则（Windows 11）

嵌套圆角规则：外层 8px → 内层 6px → 再内层 4px。避免圆角与直角混搭。

底部圆角加粗（Button 特色）

WinUI 3 的 Button 底边比其他三边 粗 1px（border-bottom: 1px solid darker），模拟微弱的 3D 凸起感：

.fluent-button {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16); /* 底部加深 */
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
}

6. 导航模式

NavigationView（最常用）

┌─ 汉堡按钮 ─────────────────────────────┐
│ ☰ App Name                              │
├─────────┬───────────────────────────────┤
│ 🏠 Home  │                               │
│ 📦 Items │          Content Area         │
│ 📊 Stats │                               │
│         │                               │
│─────────│                               │
│ ⚙️ 设置  │                               │
└─────────┴───────────────────────────────┘

TabView（多标签页）

类似浏览器 Tab，用于多文档/多实例场景。

Breadcrumb Bar

Home > Category > Subcategory > Current

用于深层级导航，每级可点击跳转。

7. 阴影系统

Elevation（海拔）

Dark 模式下阴影透明度加倍，但实际效果更弱。Fluent 2 更依赖 stroke（border）区分层次。

8. 动画

标准时长

Fluent 标准缓动

/* Decelerate (ease-out) — 进入 */
--fluent-decelerate: cubic-bezier(0, 0, 0, 1);

/* Accelerate (ease-in) — 退出 */
--fluent-accelerate: cubic-bezier(1, 0, 1, 1);

/* Standard (ease-in-out) — 通用 */
--fluent-standard: cubic-bezier(0.8, 0, 0.2, 1);

/* Point to Point — 不离开屏幕的移动 */
--fluent-point: cubic-bezier(0.55, 0.55, 0, 1);

动画原则

✅ 进入用 Decelerate — 从快到慢（感觉有惯性）
✅ 退出用 Accelerate — 从慢到快（快速消失）
✅ 不离开屏幕的移动用 Point to Point
❌ 不用 linear — Fluent 所有动画都有缓动

9. Electron 适配 Windows

窗口设置

// 无框窗口 + 自定义标题栏
const win = new BrowserWindow({
  frame: false,
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: 'transparent',
    symbolColor: '#1A1A1A',
    height: 48, // Fluent 标题栏高度
  },
});

圆角窗口

Windows 11 自动给窗口加 8px 圆角，不需要 CSS 处理。但应用内容需要配合：

/* 避免内容溢出窗口圆角 */
html, body {
  border-radius: 8px;
  overflow: hidden;
}

字体渲染

/* Windows 上启用亚像素渲染 */
body {
  -webkit-font-smoothing: auto; /* 不要用 antialiased */
  text-rendering: optimizeLegibility;
}

macOS 用 antialiased（灰度抗锯齿），Windows 用 auto（ClearType 亚像素）。跨平台 Electron 应用需分平台设置。

10. 与 macOS 差异速查

11. Checklist

设计审计

• 窗口圆角 8px（Windows 11）
• 控件圆角 4px
• 使用 Mica 或 Acrylic 背景
• 按钮底边加深 1px
• 导航使用 NavigationView 模式
• 文字使用 Segoe UI Variable
• 阴影使用标准 elevation 级别
• 动画使用 Fluent 标准缓动

Electron 适配

• titleBarOverlay 配置正确
• 窗口圆角不裁剪内容
• 字体渲染用 auto（非 antialiased）
• accent color 支持系统设置

来源

Microsoft Fluent Design System 2 (fluent2.microsoft.design) + WinUI 3 Gallery 控件参考。