fluent-design

name	fluent-design
description	Microsoft Fluent Design System 实战参考。涵盖 Windows 11 设计语言、Mica/Acrylic 材质、WinUI 3 控件规格、排版层级、布局模式、Dark Mode、辅助功能和 Electron 适配。适用于开发 Windows 桌面应用或需要 Windows 原生感的跨平台应用。

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（云母）

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

/* 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) */
}

材质选择规则

场景	材质	原因
窗口主背景	Mica	低性能开销，与桌面融合
弹出菜单/Flyout	Acrylic	暗示临时性和层次
侧边栏	Mica Alt	区分于主内容区
对话框遮罩	Smoke	聚焦于对话框内容
性能敏感场景	实色 fallback	Acrylic 可选降级

---

3. 颜色系统

Windows System Colors

颜色	Light HEX	Dark HEX	用途
Accent（默认蓝）	#0078D4	#4CC2FF	主强调色、链接、选中态
Accent Light 1	#429CE3	#62CDFF	Hover 态
Accent Light 2	#65B4EE	#99EBFF	次要强调
Accent Dark 1	#005A9E	#0093F9	Pressed 态

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

语义色

角色	Light	Dark
Text Primary	#1A1A1A / rgba(0,0,0,0.9)	#FFFFFF
Text Secondary	rgba(0,0,0,0.6)	rgba(255,255,255,0.79)
Text Tertiary	rgba(0,0,0,0.45)	rgba(255,255,255,0.54)
Text Disabled	rgba(0,0,0,0.36)	rgba(255,255,255,0.36)
Subtle Fill	rgba(0,0,0,0.04)	rgba(255,255,255,0.06)
Secondary Fill	rgba(0,0,0,0.06)	rgba(255,255,255,0.08)
Card Background	rgba(255,255,255,0.7)	rgba(255,255,255,0.05)
Stroke Default	rgba(0,0,0,0.06)	rgba(255,255,255,0.07)
Stroke Divider	rgba(0,0,0,0.08)	rgba(255,255,255,0.08)
Layer Default	rgba(255,255,255,0.5)	rgba(58,58,58,0.3)

状态色

状态	Light	Dark	用途
Success	#0F7B0F	#6CCB5F	成功、完成
Caution	#9D5D00	#FCE100	警告
Critical	#C42B1C	#FF99A4	错误、危险
Info	#0078D4	#4CC2FF	信息（= Accent）

---

4. 排版

字体栈

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

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

字号层级

层级	字号	字重	行高	用途
Display	68px	Semibold	92px	超大标题（极少用）
Title Large	40px	Semibold	52px	页面标题
Title	28px	Semibold	36px	区块标题
Subtitle	20px	Semibold	28px	次级标题
Body Large	18px	Regular	24px	强调正文
Body	14px	Regular	20px	默认正文
Body Strong	14px	Semibold	20px	加粗正文
Caption	12px	Regular	16px	辅助文字
Caption Strong	12px	Semibold	16px	加粗辅助

与 Apple 对比

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

---

5. 控件规格

标准控件尺寸

控件	高度	圆角	内边距
Button	32px	4px	12px 水平
TextBox	32px	4px	8px 水平
ComboBox	32px	4px	12px 水平
Checkbox	20×20px	4px	—
RadioButton	20×20px	50%	—
ToggleSwitch	20×40px	10px	—
Slider	4px 轨道	2px	—
ProgressBar	2px 轨道	1px	—
InfoBar	48px	4px	12px

圆角规则（Windows 11）

元素	圆角
窗口	8px
对话框/Flyout	8px
控件（Button/Input）	4px
Checkbox/Toggle	4px
Tooltip	4px
嵌套元素	内层比外层小 2px

嵌套圆角规则：外层 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 │                               │
│         │                               │
│─────────│                               │
│ ⚙️ 设置  │                               │
└─────────┴───────────────────────────────┘

模式	触发条件	特征
Left Expanded	窗口宽 ≥ 1008px	Sidebar 常驻展开
Left Compact	640px ≤ 宽 < 1008px	只显示图标
Left Minimal	宽 < 640px	汉堡菜单，点击展开
Top	—	水平导航栏

TabView（多标签页）

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

Breadcrumb Bar

Home > Category > Subcategory > Current

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

---

7. 阴影系统

Elevation（海拔）

层级	阴影	用途
0	无	内容区域
2	0 2px 4px rgba(0,0,0,0.04)	Card、Expander
4	0 2px 4px rgba(0,0,0,0.04), 0 0 2px rgba(0,0,0,0.06)	CommandBar
8	0 4px 8px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.06)	Flyout、Menu
16	0 8px 16px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.06)	Dialog
32	0 16px 32px rgba(0,0,0,0.16), 0 0 2px rgba(0,0,0,0.06)	拖拽浮层
64	0 32px 64px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.06)	全屏弹窗

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

---

8. 动画

标准时长

类型	时长	缓动
Fast（控件响应）	83ms	ease-out
Normal（状态切换）	167ms	ease-out
Slow（页面转场）	250ms	ease-in-out
Emphasis（强调）	333ms	ease-in-out

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 差异速查

差异点	Windows (Fluent)	macOS (HIG)
窗口按钮	右上角（最小化/最大化/关闭）	左上角（红黄绿）
默认正文	14px Segoe UI	13px SF Pro
控件高度	32px	22px
控件圆角	4px	5px
背景材质	Mica / Acrylic	vibrancy（仅原生）
主强调色	#0078D4（用户可改）	#007AFF
滚动条	默认可见 2px	默认隐藏
上下文菜单	右键	右键 / Ctrl+Click
设置入口	NavigationView 最下方	菜单栏 → 偏好设置

---

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 控件参考。