微软Fluent Design，一个新鲜的设计风格（附官方UI组件）

Sponsor

前言：新拟态设计风格我们已经介绍过，大家可以在《新拟态UI设计怎么做？》查找这个风格的制作方法。而今天主要和大家分享微软的Fluent Design，这个风格早在2017年的Build 2017上，微软就推出了新的设计语言（Fluent Design System），其实这种设计语言已经在Win10上使用了挺长时间。但是，现在看来，如果设计师善加使用，必然会为自己的设计诸如不少新鲜的空气。

来看下面的两个视频:

视频1：微软最新设计语言：Fluent Design System

视频2：

与Google的Material Design相比，除了强调前者的Z轴概念，层次感之外，Microsoft Fluent Design 从光线（Light），深度（depth），动画（motion），材质（Material）与尺度（Scale）等元素一个个的慢慢带入。我们可以发现，这难道不是我们之前说的“新拟物”风格的另一种展现形式吗？

与MD风格特别强调的阴影相比，Fluent Design则强调Light，也就是光，用户每次点击区块都有一种被照亮的感觉，呼应了毛玻璃材质。

接下来就是深度Depth，深度可以是阴影，也可以是视差感，这种视差感让物体产生了立体感和层级。

除了光线和深度，材质也是非常重要的载体。也是凸显层次感的一种手段，Fluent Design的层次感是不是有点类似于咱们说的“新拟物”？

接下来咱们一起来感受下Fluent Design的设计，总体来说，毛玻璃材质，主次分明，比之前咱们看到的过分强调凸起感的拟物风格要好上很多。

静电为大家提炼一些关键词：光感，平滑的表面，反射，及毛玻璃效果，纯粹的颜色，当然，还少不了阴影。可以说Fluent Design是结合了纯扁平化设计与Material Design 并加以改造和进化的产物。

请注意下图左侧的质感表现：

我们不妨以下面两个图形来表达纯扁平化图形和Fluent Design中质感的不同，左侧纯扁平化，右侧Fluent Design。

另一个则是Office图标的演变史，观察后，你便可以对这种风格有更具体的认知。

在微软的New Office中，我们可以具体感受一下APP的UI设计

最后，总结一下UI设计师在使用Fluent Design时的要素：

1.区块之间的信息层级依然是重点，可以沿用扁平化设计风格。

2.在扁平化设计风格之上，为图标等使用渐变，阴影与质感，以及高光

3.对于纯色区块，弹层，可以使用毛玻璃效果表现。

4.强调版式设计的重要性，这是任何设计都必须遵循的，之前咱们聊过的“新拟物”则不具备，所以称为它的缺陷。

5.微创新要比推翻一切重新设计更有益，也更容易。步子太大容易扯到。

6.设计的创新是灵活的，不要局限于照搬某种设计语言。

特别福利

我们为大家准备了一整套iOS与Android的Fluent UI官方设计组件与指南的Sketch源文件，包含各种设计规范。

在「设计达人」公众号聊天窗口回复「微软」即可自动获取Fluent UI官方组件。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。