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: