设计风格指南
什么是 Microsoft Fluent 2？
Fluent 2 是微软给出的答案：如何在一套生产力操作系统中，让层次感、温度与沉静共存。
Microsoft Fluent 2 速览
Microsoft Fluent 2 是从2021年起统一 Windows 11、Microsoft 365 与 Office 套件的设计语言。它的核心是有纪律的半透明——界面材质从其下方的桌面环境中借取色彩与质感——同时配以圆润的几何造型、克制的中性色调、唯一一种低饱和度蓝色强调色，以及赋予界面静谧立体感的分层材质体系。
Fluent 2 在微软视觉身份史上占据一个精确的位置。它接续于 Metro——Windows 8 那套纯平面、磁贴式语言，后者将界面剥离至纯字体与色彩，刻意拒绝一切物理感的幻觉。Fluent 2 并不回归 Windows Vista Aero 玻璃的炫目半透明——那些磨砂面板的存在主要是视觉奇观。它在两者之间找到一条有纪律的中间道路：材质对上下文作出回应——通过 Mica 被壁纸染色，或通过亚克力将背景模糊——却从不流于戏剧化。
最终的美学效果是沉稳、高效、低调而当代的。圆角柔和却不轻浮，阴影轻柔分层而非舞台化，强调色传递交互意图却不与内容争夺注意力。整体印象是一套为长时间工作而构建的设计系统——关注舒适，对装饰无动于衷。
Microsoft Fluent 2 从何而来？
Fluent 2 的故事始于它的前身。2017年，微软公开推出 Fluent Design System——一套围绕五个要素构建的框架：光感、深度、动态、材质与缩放。最初的 Fluent 旨在为 Windows 10 赋予被 Metro 刻意抹除的物理感与立体感。亚克力材质——一种将其后方内容模糊并染色的半透明表面——是这一抱负最直观的表达。这套系统很有潜力，但应用不一致：在 Windows 10 自身应用中参差不齐，而在日程紧迫的第三方开发者中基本被忽视。
决定性的转折点是 Windows 11，于2021年6月发布。在时任 Windows 与设备首席产品官 Panos Panay 以及设计副总裁 Albert Shum 的主导下，Windows 11 的重新设计全面投入一个新版本的 Fluent，团队后来将其定性为 Fluent 2。外观变化相当显著：圆角变得统一，任务栏移至屏幕中央，新材质 Mica 在亚克力之外被引入。Mica 是一种桌面染色材质：它对用户壁纸进行去饱和度采样，并将其细腻地应用于应用程序框架，在不干扰视觉的前提下，在桌面环境与运行于其上的应用程序之间建立联系。
Fluent 2 向 Windows 之外的扩展同样意义重大。微软设计团队将这套系统延伸至 Web 应用——Microsoft Teams、网页版 Outlook 以及 Microsoft 365 套件——使治理操作系统的同一视觉语言也治理其中运行的生产力应用。这种跨平台统一是对微软早期设计历史的重大背离：过去，Windows、Office 与 Web 应用在很大程度上各自运行于独立的视觉体制下。Fluent 2 的设计令牌——圆角半径、层高、色彩与字体的共享数值——作为开放规范公开发布，使第三方开发者能够将其应用与系统语言对齐。
Fluent 2 的知识谱系延伸至微软自身设计史之外。这套系统对分层半透明与材质隐喻的运用，将其与拟物化界面设计的漫长传统相连，而其克制与对沉静生产力的强调，又使其与那一传统的装饰过剩截然区别。与它最接近的当代同类是苹果 macOS 的材质——Sonoma 的毛玻璃侧边栏与 Vibrancy 效果——以及谷歌的 Material You 系统，后者同样以壁纸颜色影响界面色调。Fluent 2 的独特之处在于对中性的强调：Material You 色彩丰富、富于表达，Fluent 2 则静默内敛，让应用内容——文档、电子表格、邮件——在视觉上保持主导地位。
Microsoft Fluent 2 的视觉特征是什么？
分层材质
Fluent 2 将界面表面组织为有意为之的高度层级：最底层是 Mica，对桌面壁纸进行采样并去饱和；中层是亚克力，用于弹出层和叠加面板，将其后方内容模糊；最顶层是不透明的卡片，用于聚焦内容区域。这种分层赋予界面空间深度感，却无需依赖硬边阴影或戏剧性渐变。材质的存在是微妙的——仅在意识的边缘可见——使视觉注意力停留在内容而非容器上。
圆润几何
Windows 11 在所有交互元素上引入了统一的圆角——按钮、输入框、卡片、菜单与窗口边角。圆角幅度足以柔化早期 Windows 界面的刻板感，却未达到消费类应用那种轻盈气泡感。它传递亲切感，却不牺牲专业权威。一致性本身才是重点：系统中的每一个表面共享同一圆角逻辑，由此产生的视觉连贯性将形态各异的应用类型统一在同一家族感之下。
低饱和强调色
Fluent 2 的标志性蓝色是经过刻意去饱和度和降温处理的——它传递沉静与功能感，而非紧迫感或品牌主张。这一强调色被克制地使用：主操作按钮、选中状态、焦点指示符与链接。次级和三级操作以中性色调表达，确保视线被引向每个屏幕上最重要的交互元素。蓝色的低饱和特质使其能够与 Mica 的暖中性色和谐共存，而不产生视觉张力。
暖中性底色
在强调色与材质效果之下，Fluent 2 建立在一套暖中性色底色上——近白底面、浅灰表面、深色模式下近黑的背景——这些色调明显比纯冷灰色更暖。这种暖意微妙却有实质意义：它让界面在长时间工作中不显得临床化或冰冷。中性色被分级为细腻的高度刻度，使卡片、面板、侧边栏与标题可以在不使用色彩的前提下，仅凭细微的色调偏移加以区分。
柔和深度与层高
Fluent 2 以克制与精确的方式使用阴影。浮动面板与对话框投射柔和、漫射的阴影——用于指示层高，而非将其戏剧化。阴影告诉你你处于哪个层级，而不是界面有多令人印象深刻。这与扁平设计复兴风格中使用的硬边偏移阴影截然相反：Fluent 2 的阴影是环境性的，静止时几乎不可察觉，只有在元素被主动拖拽或弹出层直接悬于复杂内容之上时才变得明显。柔和本身是服务于视觉安宁的刻意选择。
图标与动效
Fluent 2 图标系列使用实心与描边两种变体，与周围界面保持相同的圆润特质。图标基于几何网格绘制，但并不僵硬——有机到足以显得友好，结构化到足以显得系统化。Fluent 2 中的动效是有目的的且简短的：过渡动画传递空间关系——抽屉从逻辑上合理的边缘滑入，菜单从调用点展开——而不因视觉愉悦而流连。动效系统被校准为即时和响应的感觉，而非动画感。
字体即层级
Fluent 2 的字体系统围绕单一人文主义无衬线字体构建，跨越展示级、标题级、正文级与说明级的清晰层级进行缩放。字体系统是克制的——字重与字号承担组织性工作，色彩被少量使用，主要用于区分链接与禁用状态。标题并不咄咄逼人，它们自信而有节制。字号层级的相对低调反映了这套系统的整体优先级：内容可读性优先于视觉奇观。文档、邮件与仪表板中的长时间阅读是主要使用场景，字体层级相应加以校准。
谁塑造了 Microsoft Fluent 2？
作为 Windows 11 时代的 Windows 与设备首席产品官，Panos Panay 是这一平台视觉转型背后的高管代言人。他在2021年对 Windows 11 的公开演示，将 Fluent 2 作为一套深思熟虑且连贯的设计哲学呈现于世界，将圆角、Mica 材质和居中任务栏定性为对沉静、专注生产力之新承诺的表达，而非表面更新。Panay 在微软领导层内对这次重新设计的推动，为设计团队在整个操作系统中一致实现 Fluent 2 提供了所需的组织支持。
Albert Shum 在 Fluent 2 的开发与推广期间担任微软设计副总裁。在他的领导下，微软设计团队将这套系统从 Windows 延伸至 Microsoft 365、Teams 与 Outlook 的 Web 和移动端——这是一项雄心勃勃的跨平台统一工作。Shum 的团队还负责发布 Fluent 2 设计令牌规范以及开源组件库，使第三方开发者能够构建与系统语言一致的应用程序。他在这一时期对设计组织的管理，将 Fluent 2 塑造为一套活的、可扩展的系统，而非静态的视觉刷新。
更广泛的微软设计组织——横跨 Windows、Office 与 Web 产品团队——负责 Fluent 2 作为活系统的持续演进。这支分布式团队维护着 Fluent 2 设计套件、Web 组件库、图标系列与动效规范，这些共同定义了跨平台的系统全貌。他们的公开文档与开源工具链使 Fluent 2 成为现有最为详尽规范的企业设计系统之一，不仅影响微软自身的产品，也更广泛地影响着企业软件的视觉期望。
作为资深 Windows 工程师与广受阅读的博客「The Old New Thing」的作者，Raymond Chen 代表着在微软制约并塑造任何设计演进的深厚机构知识。尽管不是视觉设计师，Chen 数十年来关于 Windows 内部机制的公开写作——向后兼容性、硬件生态系统的广度、Win32 的历史遗产——阐明了 Fluent 2 必须适应的工程现实。理解设计团队所在的约束条件，有助于解释为何 Fluent 2 是渐进式而非革命性的：材质效果与圆角必须与一个基础可追溯至1990年代的平台和平共存。
今天怎么用 Microsoft Fluent 2？
Fluent 2 的迁移能力延伸至操作系统界面之外，进入演示文稿、网页界面与编辑设计——但这种迁移需要理解这套系统实际上在做什么：通过分层营造沉静，用中性色让强调色承载意义，保持充裕的留白使内容始终是视觉优先项。应用这套美学，不是在模仿 Windows 11 的界面框架，而是在采纳同样的克制、层级与有目的深度的价值观。
在演示文稿中，Fluent 2 适合在封面页上组合使用深近黑色或深海军蓝底色，搭配以略浅色调呈现的卡片或面板——材质分层通过色调暗示，而非真实模糊效果。标题以自信但不咄咄逼人的字号使用人文主义无衬线字体，强调色点缀某一词语或简短描述语。内容页受益于这套系统的层级清晰性：一个标题级别，一个正文级别，充裕的行距，以及使用低饱和蓝色作为主要数据颜色、衬于近白底色的数据可视化。数据页呈现出一种高管气质——沉静、从会议室后排清晰可读，信息而非装饰在发挥作用。
对于网页界面，Fluent 2 天然适合生产力仪表板、内部工具、企业 SaaS 与数据分析平台——用户每天在此花费数小时、认知舒适度比视觉刺激更有价值的场景。方法如下：采用底层、卡片与覆盖层的高度层级；使用暖近白色底色而非纯白色；将强调色保留给主要行动号召与活跃状态；保持导航以字体为主而非图标驱动。定价页面适合 Fluent 2 所暗示的卡片式布局——每个定价档位表达为统一高度的卡片，推荐档位通过轻微着色背景而非粗突出边框获得细微视觉区分。
对于编辑与营销内容，这种风格支持干净、专业的信息层级，尤其适合科技品牌、金融服务与企业软件营销。受 Fluent 2 影响的编辑版面使用结构化列网格配以充裕外边距，仅通过尺寸清晰区分标题级别，引用元素以轻微着色背景面板而非彩色色块表达。营销页面可以利用材质深度隐喻创造视觉兴趣而不依赖装饰：从暖亮底色到低饱和暗底色交替的全宽区块，在页面上创造深度感与节奏感，强调色在转化节点一致出现。
在将 Fluent 2 应用于其原生语境之外时，最常见的错误是将半透明当作装饰性效果而非结构性效果来过度使用。在 Windows 11 环境中，亚克力与 Mica 具有功能性依据——它们在更广阔的桌面环境中空间定位应用程序。在幻灯片或网页这样的平面媒介中，模拟模糊效果是纯装饰，通常会使内容更难阅读，同时并不提供其所暗示的空间深度。更有力的选择是使用色调分层——同一暖中性色的细微不同数值——以暗示高度，而不引入真实透明度的视觉噪音。
Microsoft Fluent 2 · 常见问题
Fluent 2 与谷歌的 Material You 有何不同？
两套系统都使用壁纸或环境色影响界面表面，但它们的哲学在侧重点上截然分歧。Material You 是表达性的、色彩丰富的——它从种子色生成一整套和谐色调，并将其广泛应用于界面，产生高度个性化、视觉上充满活力的界面。Fluent 2 是中性的、内敛的——Mica 对壁纸进行去饱和度采样，并最低限度地应用，让暖中性底色占主导。Material You 庆祝个人表达，Fluent 2 则优先考虑信息清晰度与专业沉静感。实际结果是：Material You 在消费类与个人场景中效果最佳，而 Fluent 2 针对生产力与企业用途进行了优化。
Fluent 2 能用在深色模式中吗？深色模式下会有明显变化吗？
Fluent 2 从一开始就将浅色与深色模式设计为同等重要的体验，深色模式变体是经过深思熟虑的，而非简单的色彩反转。在深色模式下，Mica 基础表面转变为仍对壁纸进行采样的暖近黑色，卡片表面位于可感知的更亮一级，低饱和蓝色强调色变得略微更加明亮，以维持对比度而不变得咄咄逼人。这套系统的整体特质——沉静、分层、中性——在深色模式下得到良好延续。将深色 Fluent 2 应用于非 Windows 场景的主要挑战是：如果以纯冷黑色替代，深色底面的细微暖意很容易丢失，使材质系统退化为扁平的深色界面。
Fluent 2 适合消费类应用吗，还是只适合生产力软件？
Fluent 2 的价值观——沉静、层级、克制的色彩——与生产力、企业和专业场景高度匹配。它与需要温暖感、趣味性或强烈品牌个性的消费类应用匹配度较低。外卖应用、社交平台或儿童教育产品会发现这套系统的中性与克制与这些产品所需的情感基调相悖。Fluent 2 也与微软品牌高度关联；在消费场景中不加修改地使用，感觉会显得通用或企业化，而非独特。这套系统的组件与间距逻辑可以被有效借鉴，但整体美学在效率与专业性是用户明确期望的场景中，读来最为自然。
在平面设计作品中，应如何引用亚克力和 Mica 材质效果？
在平面媒介中——幻灯片、静态网页、印刷品——Fluent 2 的材质效果应被诠释而非字面复制。在幻灯片背景上使用字面模糊效果，通常会使内容更难阅读，传递的是视觉噪杂而非 Fluent 2 实际营造的沉静深度。更好的诠释是色调上的：使用比底色亮一两级或更暖的表面颜色，暗示卡片位于基础层之上，而无需任何实际透明度。中性色调色板中的暖意与细微色调变化，才是承载材质系统空间感的核心；模糊本身是特定平台的实现细节，无法干净地移植到其他媒介。
怎样判断一个 Fluent 2 应用是做得好还是仅流于表面？
一个执行良好的 Fluent 2 设计是清晰易读、沉静冷静且层级分明的，没有任何单一元素在争夺注意力。分层在空间上是可读的——你能感受到弹出层位于卡片之上，卡片位于底层之上——即使你无法有意识地描述原因。强调色只出现在应该出现的地方，在其他地方缺席。表面化的应用通常会犯几个典型错误：强调色被过度使用，出现在装饰性元素和功能性元素上；所有表面是相同的平调色，没有任何层高感；圆角被不一致地应用；或透明度效果在不考虑可读性的情况下被添加，产生文字在变化背景内容上漂浮得令人不适的表面。最深层的测试是：移除所有风格细节——圆角、材质效果、强调色——是否会留下一个结构良好、易于阅读的版面。如果是，执行是真实的；如果会崩溃，说明风格在做本应由内容组织完成的结构性工作。
相关设计风格
Vaporware Future Product Render昂贵的失真感。奶油棚景、Inter 克制排版与粉彩芯片围绕悬浮渲染。
Cursor IDE以 AI 为核心的代码编辑器：近乎纯黑背景、柔白文字、唯一的电光蓝色专为 AI…
Resend 2024品牌像 clean code：纯黑、JetBrains Mono、唯一送达绿。
Vercel 2024以删减塑造开发者奢侈感：纯黑白、Inter 字体与刚性网格构成三角发布符号。
Mercury Bank安静精确胜出：奶油纸底、炭灰 Inter 与一抹电光蓝建立信任。
Apple Fitness Rings Closed (2024)午夜像被校准。洋红、绿、青三环锁在黑底上。