优秀设计资源 » 微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

发表于: 优秀设计资源. 评论
Sponsor

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

来看下面的两个视频:

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

视频2:

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

微软Fluent Design,一个新鲜的设计风格(附官方UI组件)

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

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

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

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

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

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

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

特别福利

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

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

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }