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.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. 排版 ### 字体栈 ```css 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 凸起感： ```css .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 标准缓动 ```css /* 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 ### 窗口设置 ```typescript // 无框窗口 + 自定义标题栏 const win = new BrowserWindow({ frame: false, titleBarStyle: 'hidden', titleBarOverlay: { color: 'transparent', symbolColor: '#1A1A1A', height: 48, // Fluent 标题栏高度 }, }); ``` ### 圆角窗口 Windows 11 自动给窗口加 8px 圆角，**不需要 CSS 处理**。但应用内容需要配合： ```css /* 避免内容溢出窗口圆角 */ html, body { border-radius: 8px; overflow: hidden; } ``` ### 字体渲染 ```css /* 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 控件参考。