以后WINDOWS长这样：微软新一代设计体系Fluent Design

Microsoft在 Build 2017 开发者大会上发布了全新的设计语言- Fluent Design System，彻底改变沿用多年的平面矩形样式的用户界面，新的设计语言不止与视觉有关，它还涉及交互模式、空间和全新元素的整合方式。Microsoft高度概括了 FDS 要实现的三个转变：

从平面设计语言到沉浸式、多维度的设计语言的转变；

从小屏幕、触摸式到跨平台、输入式的转变；

从消耗型、传达型到创造型、自我处理型的转变。

是时候跟局限在一个平面上的矩形说再见了。新的设计语言不止与视觉有关，同样强调交互模式、空间和全新元素的整合方式。”

在 FDS 宣传材料中，Microsoft 团队用13个形容词介绍了设计理念，我将其解释为以下10种类型：自适应设计、影像级设计、创意型设计、轻松设计、仿真设计、引人的设计、通用设计、包容性设计、表现型设计、连贯型设计。与此同时，Microsoft 将 FDS 高度概括为一句话 “An eloquent design system for a complex world”，我将其形容为：“在错综复杂的世界中，别有天地。”

The Building Blocks

Fluent Design System，也就是之前传闻的Project Neon。风格上比谷歌苹果的设计语言更加的未来感，微软的Fluent Design System中利用Light、Depth、Motion、Material、Scale五大元素给用户一种顺滑动感且很有质感的界面。

Light（光效）

其实，在 Windows 10 RS2 以及之前的系统上，存在亮度上变化的反馈，在 FDS 中又强调了 Light 人机交互反馈。在二维设备的一些程序中，随着鼠标的移动方向，对元素本身以及周围元素产生光反馈效果。这样可以突出显示用户正在互动的控件状态。

Material（材质）

Microsoft团队在 Fluent Design System 中使用物理纹理和空间深度的概念来区分各个 UI组件元素，并将它们放置在可视层次结构中。其中的关键就是调整了这种材质的构成元素，以获得其独特的外观和性能，为用户提供个性化偏好的体验。这是UWP应用程序在式样体验上的重大进步。

背景透明度、高斯模糊、图层纹理增加了用户界面的视觉深度和维度，建立可视化层次结构。排除混合样式用来确保放置在亚克力背景上的元素拥有较高的对比度和易读性。颜色叠加为用户提供色彩个性化的机会，创造出平易近人的体验。

亚克力材质

五大元素的叠加构成了一种新鲜透明的、可高效利用的材质，Microsoft 称其为亚克力材质。

1. 想要在应用程序中创建不同的视觉效果体验，可以在应用程序的整个区域使用亚克力材质。

2. 对于具有垂直导航的应用，应该将亚克力材质应用于包含导航元素的辅助窗格中。

3. 对于具有三个不同垂直窗格的应用，应该将亚克力材质使用到非主要内容上。

在设计时要谨慎使用多层压克力材质，在体验上不应该让用户在使用应用程序时在脑中模拟在三维情况下的Z-轴透视图，在视觉上可能也会导致意想不到的光学错觉。

Depth（视差效果）

视差是一种在用户界面中可以产生层次结构的视觉效果，靠近观察者的物体比背景中的物体移动得更快。视差产生深度、透视和运动的感觉。如上所述，列表、背景图片两层内容的视差变化，列表放置在背景图像的顶部。为了达到视差效果，我们希望离用户最近的物体相比距离较远的物体移动的更快。所以当用户滚动界面时，列表以比背景图像更快的速度移动，进而产生了深度变化的错觉，大幅度提高了用户好感度和用户黏性。

Motion（动画）

1. Connected Animation（衔接动画）

注意上面这个动画，原型中使用衔接动画来动态化展开项目图像，当用户对该图像元素进行交互动作后，其“连贯的”成为下一级横向标题内容，保持用户在浏览相关内容时视图之间的连续性。

2. Coordinated Animation（协调动画）

比如上面这个动画，UI 控件使用了协调动画。协调动画可以为元素之间的切换添加更多的视觉兴趣，进一步吸引用户注意源视图和目标视图之间产生的变化。

Scale（缩放）

Scale 的关键作用是使应用程序在不同的设备上重塑和呈现。在电脑显示器上看起来较为合适的物体放在 AR 或 VR 头戴设备中观看，可能就会变得过大或过小。因此，虚拟物体大小的缩放是第一视角 UI 体验的关键因素之一。 对于 Scale，在本届开发者大会上微软也是结合现有产品，更多的提出了未来发展的大方向。对沉浸式数字物体的扩展也是 3D 交互界面和 VR/AR 时代的必备功能。随着虚拟现实的发展逐渐成熟，Scale 技术也会更多的运用到产品里。

多图预览

在Win8/WP时代，独特的Metro的设计语言曾经圈粉不少，在微软公布Fluent Design System之后，作为Win8/WP时代的Metro也正式被取代。Win10上对Metro的抛弃也标志着微软承认Win8/WP已经成为过去。