Fluent Design system:微软流畅设计体系

在一年一度的微软开发者大会(Build 2017)上,微软高调发布了 Windows 10 NEON,新界面正式命名:Fluent Design System(微软流畅设计体系),微软乔北峰隆重介绍了微软流畅设计体系,它将包括五大部分元素,分别是Depth(深度)、Motion(动效)、Scale(缩放)、Material(材质)、Light(光感),目前Windows10包括人脉、计算器和Groove音乐等核心应用已经获得该设计语言的调整,流畅设计将在Win10秋季创意者更新系统上正式到来。

 

 

该设计语言的核心就是在美观的前提下,应用程序的使用更加自然和流畅。微软的Kevin Gallo将Fluent称为“Metro的演进”,一种“现代设计语言”,最终成为微软的标志性设计语言。而本次回归的Fluent Design System不仅只是简单的Aero特效回归,而是针对系统、核心软件进行大规模的调整,用户会获得全新的过渡动画、视觉效果、半透明和模糊等等。

 

fluentdesign_01

 

这些新的元素的引入不光是为了让我们创建出更好的设计感受,更多代表更加自然交互的方式,新的设计体系将带来直观、和谐、兼容广泛的跨设备的体验和互动操作。新的体系下需要考虑多种因素,比如材质,需要考虑膨胀,摩擦。

 

fluentdesign_02

fluentdesign_03

fluentdesign_04

 

整个新设计语言根本上还是基于平面化设计。“简洁+突出信息+易用性”是典型特征,例如上面的图标。单个窗口的layout跟win10发布以来一直提倡的UWP式风格一致。

 

fluentdesign_05

 

在平面化的基础上,大大增强了层次感,这依赖于光特效、阴影和材质。就像是从一张a4纸变成了一大堆不同尺寸,颜色,材质,透明度的纸。

 

fluentdesign_06

 

强调动效,窗口内部小物件和元素都能够附加大量动画效果。信息将以更动态的形式展现出来。UWP动态磁帖也进化了,居然有了水波反馈。不过话说回来,这是对物理世界更加贴切模拟。

 

fluentdesign_08

 

用户界面的快速发展正在进行中。维度的维度从0迅速扩展到4,我们被设备、交互和体验所包围。我们需要解决一个感官数字世界,并能流畅地设计我们的设计,在不同的维度和背景下多做尝试,在下一次浪潮来临时创造一个不同的体验。

 

fluentdesign_07

 

现在已经有概念艺术家开始使用微软的Fluent Design System设计软件的概念图了,比如thmnmlst (@thmnmlst_ on Twitter) 为Adobe Photoshop and Creative Cloud (CC)设计的UWP (Universal Windows Platform) 软件预览,当然这只是概念图:

 

fluentdesign_09

 

 

fluentdesign_gif_01 fluentdesign_gif_02 fluentdesign_gif_03

 

fluentdesign_10

 

 

Fluent Design System地址:

http://fluent.microsoft.com/

 

中文Fluent Design System地址:

https://developer.microsoft.com/zh-cn/windows/apps/design

 

英文Fluent Design System地址:

https://developer.microsoft.com/en-us/windows/apps/design

 

gif来自 https://dribbble.com/

Town Way

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: