Fluent Design System是微软退出一个UI设计体系，面向的平台包括Windows、Web、iOS、macOS、Android等等。Fluent的好处是提供了一套具有一致性的设计语言，可以方便地把Fluent地设计推广到各个平台。但是由于目前不同平台所有具有地差异性，Fluent针对不同地平台地设计语言有所差异。而且Fluent目前的主要侧重点还是Windows和Web。

所谓设计语言，主要是包括对颜色、字体、形状等可以产生视觉差异的属性进行定义，区分以及使用。本文主要针对Fluent在Windows上的颜色设计语言。

Fluent for Windows

Fluent的设计被应用在Windows 10之上（参考Design and code Windows apps）。Windows操作系统的设计目标不仅是给台式机使用，还用于游戏终端、HoloLens、Xbox，甚至还有移动设备。为了应用于这么多设备，Fluent采用了一些指导原则，总结起来为五点：Light、Depth、Motion、Material和Scale（更多参考Wikipedia: Fluent Design System）。翻译成中文就是光线、景深、动态、材质和比例。这几个原则同时借鉴了Web和游戏中的很多UI设计原则。比如光线、景深、材质就是游戏中常见的设计维度，可能跟现代游戏大部分都是3D的有关；动态和比例则跟Web设计中的响应式（Responsive）设计有千丝万缕的联系。

说了上面这么多，其实想要表达的是颜色这个维度其实在Fluent for Windows并没有被很深入地采用。大部分现代地操作系统UI的设计都对颜色地使用非常克制，并没有在颜色上有很丰富的变化。可以对比Windows 7和Windows 10的任务栏，可以发现Windows 10的任务栏在颜色的使用上显得单薄多了。

总得说来Windows 10的调色盘只是在三种主要颜色的基础上做一些透明度或者饱和度的变化而已。这三种颜色分别是基色、反色和锐色。

Windows可能会让你联想到蓝色，所以蓝色是Windows选择的锐色，对应的RBG值是#0078d4。在Color in Windows apps，你可以看到锐色有其它6种明暗有别的衍生色，在XAML中主题资源中以下面的符号存在：

  • SystemAccentColorLight3
  • SystemAccentColorLight2
  • SystemAccentColorLight1
  • SystemAccentColorDark1
  • SystemAccentColorDark2
  • SystemAccentColorDark3

不过这些衍生色在Fluent中并没有得到很多使用。Fluent倒是从锐色中派生出来一些其他的颜色来使用。

下面谈谈基色和反色。我们知道，Windows 10支持明（light）暗（dark）两色主题。对于这两种主题，基色和反色是不一样的。对于明色主题，基色是白色，反色是黑色。对于暗色主题，基色是黑色，反色是白色。

根据XAML theme resources的描述，在基色和反色的基础上，定义了若干衍生色。首先对于基色有下面几种衍生色：

  • Base High （100%基色）
  • Base Medium High （80%基色）
  • Base Meduim （60%基色）
  • Base Medium Low （40%基色）
  • Base Low （20%基色）

为什么我会联想到牛排的生熟度呢！

对于反色，有下面若干衍生色：

  • Alt Base High （100%反色）
  • Alt Medium High （80%反色）
  • Alt Medium （60%反色）
  • Alt Medium Low（40% 反色）
  • Alt Low （20%反色）

上面的Base和Alt衍生色系主要用于文本内容的显示。

对于非文本内容的UI元素，则使用Chrome衍生色系。Chrome衍生色系的颜色可以分为两类，一类是不随主题明暗变化的颜色：

  • Chrome Black Low （20%黑色）
  • Chrome Black Medium Low （40%黑色）
  • Chrome Black Medium （80%黑色）
  • Chrome Black High （100%黑色）
  • Chrome White/Chrome White High （100%白色）

另一类是随主题明暗变化的颜色：

  • Chrome Low 明#F2F2F2，暗#171717
  • Chrome Medium Low 明#F2F2F2，暗#2B2B2B
  • Chrome Medium 明#E6E6E6，暗#1F1F1F
  • Chrome High 明#CCCCCC，暗#767676
  • Chrome Alt Low 明#171717，暗#F2F2F2，（和Chrome Low相反）
  • Chrome Disabled High 明#CCCCCC，暗#333333
  • Chrome Disabled Low 明#7A7A7A，暗#858585

明色主题和暗色主题不是简单取反的关系，所以上面这些颜色不明暗主题之间没有简单地计算关系。对于Border色组，明暗主题也是没有直接关系的：

  • Edge Highlight, 明60%白，暗5%白
  • Transient, 明14%黑，暗36%黑

接下来该锐色的衍生色出场了。对于明色主题，定义了专有的锐色的衍生色Light 1 #429CE3；对于暗色主题，定义了专有的锐色的衍生色Dark 1 #005A9E。此外，还基于锐色定义了List色组，用于列表类的UI元素：

  • List Accent High，明70%锐色，暗90%锐色
  • List Accent Medium，明60%锐色，暗80%锐色
  • List Accent Low，明40%锐色，暗60%锐色
  • List Low，明暗皆10%黑
  • List Medium，明暗皆20%黑

颜色语言在设计上的使用案例

可以下载Figma Toolkit WinUI，然后Figma中查看颜色语言的具体使用。

以Button为例，定义了四种状态Rest（普通）、Hover（悬停）、Focus（聚焦）、Pressed（点击）以及Disabled（禁用）。颜色语言的应用如下：

  • Rest : 文字 Base High，背景 Base Low
  • Focus：文字和背景皆和Rest一样，但是套了内外两层边框，外边框为Base High，内边框为Alt Medium，给人一种被选中的感觉
  • Hover：文字不变，但是背景为List Low。用于表示鼠标悬停状态
  • Pressed：文字和Rest一样，但是背景从 Base Low 提升到了 Base Medium Low。
  • Disabled：背景和Rest一样，但是文字从 Base High降低到了 Base Medium Low。

上面是基于基色设计的Button，那么还有基于锐色设计的Button：

  • Rest ：文字 Chrome White High，背景 Accent
  • Focus：在Rest基础上加上内外双边框
  • Disabled：跟普通Button的Disabled是一样的
  • Hover：背景从Accent变为Light1
  • Pressed：背景从Accent变为Dark1

对于Hyperlink button，由于没有背景，使用的颜色语言要简单一些：

  • Disabled状态的文字和Button一样，都是 Base Medium Low。
  • Pressed和Disabled的状态是一样的
  • Hover的文字为Base Medium
  • Rest状态的文字为Accent

Accent颜色多用于表示控件处于激活状态。

Fluent for Web

稍微谈谈Fluent for Web。和Fluent for Windows相比，Fluent for Web并没有为明暗主题准备两套颜色语言，而是只有一套基于明色主题的颜色语言。当然，你可以通过调整调色板，把这套明色的颜色语言改成暗色的（参考 Fluent Dark Theme??? #9795）。而且Fluent for Web的颜色语言中的词汇也比Fluent for Windows更丰富。可以通过Fluent Web Theme Designer来查看它的颜色语言。

Fluent for Web的前身是Fabric UI。不过好像使用Fluent的理念重新设计过了，可以在Figma上查找Microsoft Fluent Web查看其设计。

Fluent for Web对颜色的应用更加大胆，不是像Fluent for Windows那种以黑白被基本底色，而是以锐色为基本底色。另外可能是Web产品有多个用户在线协作的场景，Fluent for Web包含很多彩色的共享色，用于表示不同的用户和群组。另外线上产品更容易因为连接原因出现错误，所以还针对性地定义了彩色地消息色。

为了产生层次感，在黑与白之间定义了24阶的中立色。用于表现线条、边框和交互状态。

Fluent for Windows缺省是面向明暗两色主题的，而Fluent for Web则只是面向单色主题。 Fluent for Windows是以黑色为主要色调，辅以锐色以显示某些状态；而Fluent for Web是以锐色为主要色调，然后使用灰阶色组作为辅助。