阿本：就在剛剛舉辦的 Microsoft Build 2017 中，微軟對外公布了它們最新的設計語言——“Fluent Design System”，這一消息給廣大設計師又帶來了一針強心劑，作為軟件大鱷的微軟也開始要在設計語言的道路上扮演一個指路人的角色了嗎？

歡迎關注作者的知乎專欄：Sketch 與 UE 設計知多少

在視頻中，他們分別提出了 Light、Depth、Motion、Material、Scale 幾個理念，讓我們通過官網的解釋以及結合視頻看看這幾個理念分別表示什么。

另外，由于 Fluent Design 的官網是不兼容 Chrome 的（簡直不可思議），導致之前對這幾個理念的理解主要是基于發布會視頻，所以會有很多不對的地方，我在接下來的分析中做了修正。

Fluent Design

1. Light

之前通過視頻案例我把 Light 理解成了 Fluent Design 推崇輕量合理的交互方式，而官方將 Light 解釋為“光”并且引入到了設計語言中，認為光是一種能夠給用戶提供邀請的交互方式，通過照亮其他元素吸引用戶，同時因為它本身涵蓋的“溫暖”特質同樣能夠與“邀請”相輔相成。

Material Design 通過光引入了 Shadow，而 Fluent Design 引入了 Light，不得不說它們都希望把自己的設計語言立意在大自然的基礎上，從而更貼近人們的生活，在交互中盡可能調用用戶的“自主心智”理解設計。

2. Depth

對 Depth 的理解與官方解釋基本一致，Fluent Design 同樣打破平面理念引入了三維空間的概念，將 Z 軸也考慮到了設計和交互中（類似 Material Design 的Elevation），從而增加設計載體的空間，讓更多設計的交互體現方式與生活相輔相成，同樣也是為了在 VR/AR 中能夠采用這套設計規范。

3.?Motion

動效已經成為了一個優秀產品必不可少的一環，同樣也類似 Material Design Motion 一樣，Fluent Design 應該也會在這塊提出更多的合理指導意見，從而讓自身平臺產品在動效這塊有更多參考。

4.?Material

從官方解釋來看，Material 這個特性確實是為了強調設計語言中關于材料的概念，在符合條件的產品中采用自然界中與其相契合的材料表現（例如毛玻璃材料、紙張材料等），從而給用戶合理的心理感知和體驗，這也是將設計與生活以及自然界結合的一種理念。

5.?Scale

視頻在這里引入了幾個不同規模的交互場景（小屏幕觸控、VR 大場景交互），意義應該是要表明該設計語言能夠 cover 住所有規模的場景設計需求（果然野心夠大），看了下官方對這個理念的解釋，基本契合。

最后我們再看看視頻結尾的一些基于該設計語言制作的演示內容：

演示中甚至涵蓋了 VR 和 AR，看來微軟這次確實在下一盤大棋，雖然有些都是概念設計，但是設計界就是需要有這樣的突破性思維和想法，才有可能創造出更富有前瞻性的設計語言。非常期待 Fluent Design System 能夠給設計界帶來如何的改變。

Fluent Design System 官網（不兼容 Chrome，可以用 Safari 正常瀏覽）。

「在這里讀懂谷歌的?Material Design！」

官方譯文：

1. 《中文版來了！新版Material Design 官方動效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（三）》

學習筆記：

1. 《學霸的自學筆記！Material Design設計規范學習心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記》

素材篇：

1. 《新鮮熱辣！一組實用的MATERIAL DESIGN風格素材！》

實戰教程：

1. 《重磅改版！網易新聞安卓客戶端MATERIAL DESIGN實戰》

原文地址：zhuanlan.zhihu

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量200萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com