微軟全新設計系統曝光，炫酷的設計語言Fluent挑戰谷歌蘋果！

經常聽到有小夥伴這樣說：我好喜歡Mac電腦的設計，但是太貴了買不起怎麼辦。現在終於這一次花微軟的錢，也能有Mac的感受了！！

近日，Build2017大會上微軟宣布採用全新的Microsoft Fluent Design System，並展示了Win10流暢設計體系，我們驚喜地看到微軟在設計上終於發力，迎來顛覆性的改變。

微軟Modern UI，谷歌Material design和蘋果iOS並稱為三大主流設計語言。而微軟Modern UI設計風格一直為人所詬病，規整的方塊磁貼格局、單調的配色、枯燥的文字界面…從顏值上而言，蘋果、谷歌簡直在碾壓微軟，近些年來在移動端市場佔有率上幾家的差距也是越來越大。

現在微軟放大招！大會上，微軟全球執行副總裁特里?梅爾森（Terry Myerson）說到：「此次的微軟系統將帶來直觀、和諧、響應迅速、兼容廣泛的跨設備體驗與互動操作。」光是看官方發布的視頻就能感受到微軟與谷歌、蘋果在設計上並肩的野心。

簡單地說，在將來，微軟旗下的移動端、桌面端、手勢操作系統、AI、VR和全息系統可能都會用到這套風格統一的設計。

此次帶來的全新語言Fluent Design System（以下簡稱FDS）主要包括五大核心元素：Light（光感）、Depth（深度）、Motion（動畫）、Material（材質）和Scale（縮放）。這五個方面展開說明FDS的設計理念，真的會成為微軟劃時代的設計語言嗎？

Light（光感）

Light 元素可以很好的創造細膩質感

點擊播放 GIF/841K

光的重要性不言而喻了，如果小夥伴對Material design熟悉的話，可以發現，在MD中同樣有光的嚴謹使用，有了光，就有了陰影，也就增加了層次的嚴謹性。

在FDS中，光感有著類似感覺，與MD一樣都是來自於物理世界，好處就是能夠大大降低用戶的思考成本，增強無意識的感覺，也符合用戶的心智模型。在設計中，光能夠起到凸顯元素的作用，從而吸引用戶的注意力。總之，Fluent Design System中光是如何運用的，UI設計師們要好好研究下了，有時候參數變動一點，設計的細膩程度就不一樣了。

Depth（深度）

藉助 Depth 元素，減少UI視覺疲勞

點擊播放 GIF/836K

在FDS的深度有個更好的視覺空間延展，可以帶來更加豐富的視覺體驗。

從二維空間延伸到三維空間，這給交互也帶來了一些新的思考方式，對UI設計師和動效設計師來說也是個挑戰，這麼強的視覺空間延伸性，如何保證流暢的、統一的視覺體驗是個難題。這種場景轉換，需要很強的、很細膩的動效哦。

運用好深度元素，可以肯定的說，會帶來一些超凡的視覺體驗，大大的減少視覺疲勞。

Motion（動畫）

為用戶提供更多好看且互動性十足的動畫，

這樣就能更好地吸引用戶注意力。

點擊播放 GIF/1325K

微軟終於也更加重視動畫起來了。現在越來越多的產品會融入動畫元素，讓表達更加充分、細膩。動畫元素的合理運用，將為用戶提供更多好看且互動性十足的動畫，這樣就能更好地吸引用戶注意力。

其實，微軟此前在 Xbox One 中也嘗試過這種更加動態和亮色系的過渡動畫，用戶對這種設計相當的滿意，能夠沉浸的參與其中，提升用戶參與的慾望同時，增強用戶的購買慾望。

Material（材質）

在設計中加入更多類似的元素，質感非常重要

點擊播放 GIF/1065K

微軟終於不純扁平了，終於向材質做了妥協。在FDS中運用材質，增強了產品跟現實世界的聯繫，不會像純扁平是跟物理世界脫節的。材質增強了UI的細膩表達，增強了交互的真實性。所以，從這一點看FDS還是值得期待的，也能看的出來比Metro design要成熟很多。在整個產品交互過程中，就會感覺很爽啊！

當然，在實際的項目中，對材質元素運用還是要做非常深入的分析才行。在最新的 Fall Creator Update 也加入了更好的語音控制、觸控交互和觸控筆輸入等功能，同時呢，吸引用戶用新功能完成交互是設計師必須要考慮的。

Scale（縮放）

虛擬物體大小的交互性縮放

是UI 體驗中的關鍵因素

點擊播放 GIF/1270K

隨著VR的發展逐漸成熟，縮放技術也會更多的運用到產品里，通過上面的深度大家也能感知到縮放的重要性。可以說，縮放元素的運用直接關係著產品的使用體驗是否流暢。而且，可以縮放技術會更多的運用到數字產品中，微軟這次大會，把這個元素拎出來，還是很具有前瞻性的哦。對數字產品來說，縮放一定是 3D 交互界面和 VR/AR 時代的必備功能。

簡短的解釋就是：

靠光感提升細節品質，讓用戶更易聚焦；

通過層級來劃分系統內容，提供更好的視覺體驗；

重視動效帶來的直觀感受，並將此融入到整體細節；

重質感不再全部扁平，不同質感將帶來不同體驗；

豐富在不同平台下同樣元素的自適應效果，達到最佳的視覺體驗。

從官網和網路上搜集了一些Fluent Design System的案例界面，如下一籮筐圖。

資源管理器

天氣/時間

支持手寫筆的Edge瀏覽器

Timeline

Holographic桌面

Photos

其他內容

連微軟爸爸都知道

好的設計總會有個趨勢

【國際效果圖通用技法】

本教程為業內首套國際化Gamma教程

顛覆傳統效果圖教學

教你學會Gamma原理

用全球化技術快速效果圖失真問題

掌控國際化效果圖趨勢

做業內效果圖佼佼者

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！