如何評價微軟在 Build 2017 上提出的 Fluent Design System？

12-14

Windows 10 NEON 新界面設計正式命名：Fluent Design System。
參見官網 Fluent Design System。

Microsoft Fluent Design System 由 5 大元素組成：光感、深度、動效、材質、縮放。這些新的元素的引入不光是為了讓我們創建出更好的設計感受，更多代表更加自然交互的方式，新的設計體系將帶來直觀、和諧、兼容廣泛的跨設備的體驗和互動操作。新的體系下需要考慮多種因素，比如材質，需要考慮膨脹，摩擦等。

【Windows10/ Fluent 界面設計語言】Microsoft Fluent Design System【Aerbilibili.com視頻

幾點巨大的工作。有空了再來更新。

先列個大綱吧，不然太空了我自己都會忘記。今天實在沒空寫，周五早上我們組還有個關於這個系統的talk，歡迎大家參與。

* 2017/5/17 更新了Light部分 *

* 2017/5/18 更新了Depth部分*

* 2017/5/22 更新了Motion部分*

* 2017/5/23 更新了Material部分 *

* 2017/5/24 更新了Scale和主打的特效部分 *

* 2017/5/31 更新了幕後花絮 *

* 2017/6/6 更新了常見誤解，全文完 *

BUILD上有3個相關的內容：

high level講一下Fluent Design System的各個部分：https://channel9.msdn.com/Events/Build/2017/B8100
Fluent Design的細節：Introducing Fluent Design
我們組的talk，提供更多細節：Explore the next generation of innovative UI in the Visual Layer

Light（光照）

為什麼是現在

其實，想在UI里加光照這件事情，設計師早就想過了。只是苦於之前UI系統里沒有光照計算的支持。用預先生成的mask應做，會有解析度和資源大小的問題，遂放棄了。

直到v1607裡面，我們組寫了個新族API CompositionLight Class，讓UI可以直接接受光照。（by 我們組，I mean 我。API是我一個人設計的，95%的代碼是我一個人寫的，80%的bug是我一個人創造的。debug和補齊系統的過程養活了整個組。）

按照首席設計師的原話，「你這是提供了一個核武器給我啊」。於是，設計師們可以正式開始考慮如何在UI中使用光照來高亮你需要注意的東西。不需要添加額外資源，不需要考慮解析度問題，都是實時計算的。

這套系統在計算上保持和當年的D3D/OpenGL固定流水線里的光照一致。在秋季更新里，我還加入了Physically-based BRDF。可以達到遊戲級別的光照能力。並且XAML將會支持光照，以至於你只要在XAML里寫tag就行了，不需要直接寫代碼來使用光照。

性能上，影響微乎其微。開不開光照，並不會造成明顯的續航下降或者相應變慢。甚至因為算的太快，Windows電源管理會覺得不需要給那麼高的頻率。在打開光照後照樣可以讓CPU/GPU保持較低的耗用率。

和遊戲里光照不同之處是，UI里的光照更注重性能響應，會和別的特效一起生成個單一的shader，必須在一個pass內完成，必須支持各種奇葩的變換，而且必須支持極老的硬體。這些看似不起眼的東西，實現起來細節超多。以至於可以從中抽出一些獨特的東西，申請個專利。

還有一個偶然的發現。開了光照後，如果顏色搭配得當，對比度會很大。視障人士可以很容易觀察到焦點在哪裡，而不需要特別開高對比度設置。也就是說，視障人士終於有機會用普通的界面進行操作。

怎麼用

你可以在UWP里直接調用CompositionLight，例子已經開源 Microsoft/WindowsUIDevLabs。也可以等XAML里封裝好的XamlLight。那隻要一行就能開啟reveal光照效果。

Depth（深度）

UI為什麼有深度

實際上從WPF開始，UI一直是2.5D的形態。但因為沒有depth buffer，繪製順序是由Visual在樹中的順序決定的，Visual的深度並不能用來表示遮擋。即便如此，這樣的深度，在perspective matrix的配合下，其實已經可以構造出很多視覺效果，比如視差、前後變換、空間運動，等。

實際上，原先也可以這麼用深度。但Win裡面有個至少從Vista以來一直都有的bug，使得深度+旋轉+perspective matrix這麼組合使用的話，如果一個Visual有一個頂點比近平面還近，就會屏幕錯亂。表現就是你的app漏了個洞，直接看到下面窗口的東西。做過渲染器的人都知道，這個情況是因為頂點坐標/w之後再插值造成的。我在看到的第一眼就感覺到了是這個問題，無奈的是調了3個星期才找到bug所在，真的是/w問題。之間被無數次誤導到別的坑裡，最後改了2行，好了。所以現在可以隨便用深度，不會出這樣的幺蛾子。

那麼FDS里提出的深度，有什麼特別之處呢？FDS的設計觀念是，一套設計語言適應0D到3D的各種場合。在2D的屏幕上你看到的是2D的UI，帶上Hololens你看到的就可以是3D的UI。比如說，從側面看一個窗口的內部。

另一個方面是對深度的定位，這來自於陰影。打上陰影之後，深度的空間方位一下就明朗了。之前v1607里有DropShadow，現在還會加入一個增強版的shadow。

Sky Box的例子，更是把UI帶入了3D的世界。這時候深度變成一個自然而然需要的東西了。這裡我把遊戲引擎中常見的sky box概念帶入了UI系統，構造一個全方向的UI。

怎麼用

對於程序來說，直接用Visual.Offset里的Z就是了，或者用XAML里封裝好的Z。對於設計來說，需要習慣用Z來表示相對關係，不要太早合併層。DropShaodw的文檔在這裡DropShadow Class。

如果要自適應2D和3D，建議用AR/VR設備測試一下。一開始會發現很多坑，找到規律後會順利很多。

Motion（動態）

以前不能動嗎

能，但程序寫起來比較痛苦，而且局限性高。

dcomp一開始就有動畫系統，可以用簡單的腳本驅動Visual和特效的動畫。然而，腳本是通過字元串的形式傳給系統的。就像這樣

那麼，問題來了。如果你腳本里寫錯了，在編譯的時候不會有任何提示，只有在運行的時候才有異常拋出。而且拋出的時候只知道有錯，不知道是哪裡錯誤。只能手動的一行一行找。而在秋季更新里，新增加的一個庫讓動畫驅動可以通過C#來完成，有智能提示，有編譯檢查。比原先方便得多。而且還會提供更多動畫的基礎元素，比如彈簧運動，讓開發者更容易創造出自己想要的效果。並且現在可以通過滑鼠、滾動條等UI輸入直接作為腳本的輸入。這樣就不需要在程序里自己檢測這些信息後提供給腳本。一切都是自動在dwm里完成了。

怎麼用

很快會有一個expression builder的庫，解決動畫腳本開發麻煩的問題。

Material（材質）

什麼是材質

這裡材質的概念跟遊戲中的有相同點，也有些許不同。比如金銀銅鐵錫塑料橡皮，這樣基本的材質，和遊戲一樣算材質。毛玻璃、亞克力這樣的高層次的組合效果，也算材質。

在FDS里，基本材質用的是Lambert表示diffuse，Blinn-Phong表示specular。熟悉圖形的人都會知道這些BRDF，參數調整的方法也和D3D/OpenGL里一致。在秋季更新里，我還特別加入了Physically-based Blinn-Phong，已達到跟遊戲相同的開發方式和用戶體驗。

這些材質是可以自由調參數的，不是說定死了幾個讓你選。所以只要你調得合適，就能做出各種各樣的材質。我不管是在組內還是組外，都是推薦用Matusik的一篇paper的數據 Experimental Analysis of BRDF Models。他裡面提供了100中常見物體的參數。以此為參考，調材質會容易得多。

怎麼用

API叫SceneLightingEffect Class。也是我獨立完成的。支持ambient/diffuse/specular，normal map等。用法和遊戲引擎里的類似。

在這次的Build上，我們組還公開展示了一個Material editor。在裡面可以方便地調整各種材質及其組合。所見即所得的風格。設計師可以直接用這個來調參數。

Scale（伸縮性）

如意金箍棒

因為FDS的目的是一次設計，可以用於0D（只有語音）、1D（Surface Dial）、2D（UI）、3D（VR/AR）的種種情況。所以伸縮性比其他UI設計語言都要更重要。

不過實際上scale這部分還沒有充分展開，更像是前面幾項的組合和應用。

怎麼用

按照FDS的知道規範設計完UI後，理論上就能適用於0D-3D了。但實際上還需要不少測試，尤其是在VR/AR設備上。

主打的特效

上面已經把FDS的幾個組成介紹了一遍。這部分講的是這次在主打的兩個FDS的應用，Acrylic和Reveal。這兩個都已經封裝到XAML里，在insider里可以直接打開。

Acrylic（亞克力）

從去年年底關於NEON泄露的新聞開始，媒體就一直再說「毛玻璃的回歸」，而且搞得NEON有且只有毛玻璃的樣子。接到這些消息，你媒體本身也要判斷，明白意思嗎？

亞克力是毛玻璃嗎？不是。

設計師想到亞克力這個特效的時候，正拿著這塊板子。

（嗯，對，這塊板子現在流落到我手裡了）

Win7里的毛玻璃，就是一個小半徑的高斯模糊，再加上一個色調的調整。想要表達的是光滑的毛玻璃表面，把背景模糊了，同時自己的高光也加上去。

而這麼多年後，審美已經改變。人們更喜歡亞光的材質。這次的亞克力，合成則複雜得多了。需要這樣的effect graph才能組合出來。而且每一個參數都是經過設計師仔細調整的（這個過程甚至還沒完全完成）。

性能方面，亞克力和毛玻璃也有巨大的區別。雖然用的都是我的快速gaussian blur演算法（專利已得），但這次的版本更加優化了，可以支持幾十上百的模糊半徑。不像毛玻璃，因為性能問題在Win8上就關掉了。

Reveal

Reveal是個光照效果，當滑鼠移到按鈕上方的時候，可以看到那個按鈕被照亮，周圍幾個控制項的邊框也被照亮。就好像手電筒一樣。

這主要就是用CompositionLight，加上SceneLightingEffect等多個特效，經過仔細調整才得到現在的結果。目前的insider裡面，計算器已經開始用Reveal。

幕後花絮

下面開始進入八卦的環節。

團隊組成

FDS這個項目的開發過程，跟微軟傳統的自上而下的體系很不一樣。這個項目更多的是橫向的聯繫。Designer說有個想法，PM說想做，dev說能做。於是我們組成了一個分散於不同部門之間，工種齊全的虛擬小組。一兩個designer，兩個PM，一到兩個dev，一個techart，一個lead，幕後還有一個大佬。開會的時候像一個組，散會了各奔東西。就以這樣的方式，在早期非常高效地把Acrylic和Reveal的設計到實現一條龍打通了。

隨著工作的進展，加入的團隊越來越多。從一開始一間小會議室就把所有人都裝下，到後來訂了個20人的大會議室，仍然有坐票有站票有蹲票有趴票（還有實在沒轍了遠程連進來的，算不算掛票？）。我很欣慰。

工作方式

FDS虛擬小組的工作方式也有別於微軟傳統的團隊。我們從有一點原型的時候就開始到各組「推銷」。很快就收到了來自於公司里多個app團隊的肯定，並且表示如果Acrylic和Reveal做出來了，他們會用上。又因為app都用的xaml，也毫無疑問地把xaml拉下水，大量實現是在xaml層完成。這樣一來，app只要簡單的加一兩個tag就能開啟這些特效。

具體流程，是designer出一個設計；techart按照photoshop/aftereffect里的層設定和參數實現到代碼里；一個dev（我）拿來，從公式的角度進行優化；另一個dev把我優化後的公式轉成代碼；xaml團隊拿去加入xaml套餐。整個流程過一遍的時間可以小於一個星期，從最初techart的版本到優化後的結果，性能可以差10倍甚至更多。得益於這樣的流水線作業，在離最終review前幾天，即便designer大改了配方，我們還是可以趕得上review。

常見的誤解

風格不一致？

有人提到在build上演示的幾個不同app，對於透明程度、陰影等方面存在不一致的情況。那是因為，build上的那些圖片和視頻都是設計稿，由設計師用PS或者AE做的。每個設計師負責一兩張圖/一兩段視頻，手工做。這樣並沒有辦法保證參數相同，所以不一致是正常的。正式版本是由程序渲染，推薦參數都是一樣的。不會不一致。

傳統Win32程序？

這些現代UI的修改都只存在與UWP。但是UWP也是native得啊，也可以從傳統Win32程序中調用，技術上並沒有問題，只是麻煩點。

如果你希望有官方的方法可以在傳統Win32程序里用現代UI，就到這裡投票吧。

https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/19218982-modern-windows-ui-in-win32-desktop-applications

非焦點窗口特效消失？

有人以為那是因為失去焦點後程序沒響應，所以特效消失。然而這些渲染都是在dwm進程，而不是app進程做的。不存在沒響應的問題。目前非焦點窗口關閉Acrylic是有意而為之。因為如果不那麼做的話，就會需要把每一層窗口都單獨渲染一遍，不管是否被遮擋。比如說，你有10個窗口，互相層疊。如果都開著Acrylic，就需要從後往前渲染窗口和桌面，blur，貼到上一層窗口上，如此類推。還會涉及到兩個Acrylic疊加的噩夢。對於電能消耗和響應速度都不是好事。然而因為各方面的要求，這一點以後可能會漸漸放鬆。

我可以表達出對FDS的喜歡嗎？

能。已經把大家都拉下水了，已經被砍兩次都原地滿血復活，不怕了。

一套基於平面化的、創新的、標準化的、自洽的設計邏輯。

本質上與以前因蘋果而流行起來的物化設計或者win8之後的平面化設計一樣，都是一種設計風格+交互邏輯。（交互成分是次要的，滿足審美需求是主要目的）

優點在於：

1.保留了群眾喜聞樂見的毛玻璃特效。誰叫我們對以半透明效果為代表之一的光影特效毫無抵抗力呢？

36*36px icons

2.整個新設計語言根本上還是基於平面化設計。「簡潔+突出信息+易用性」是典型特徵，例如上面的圖標。單個窗口的layout跟win10發布以來一直提倡的UWP式風格一致。

3.在平面化的基礎上，大大增強了層次感，這依賴於光特效、陰影和材質。就像是從一張a4紙變成了一大堆不同尺寸，顏色，材質，透明度的紙。

parallel：瀏覽信息時動態感更強（類似一部分html5網頁的設計）

reveal：用於清楚地強調特定對象

4.更絢麗的動畫效果。從發布會上展示的效果來看，窗口內部小物件和元素都能夠附加大量動畫效果。信息將以更動態的形式展現出來。uwp動態磁帖貌似也進化了？

5.物理模擬。比如摩擦力，彈性，光學等等。

6.更加標準化，解析度自適應更加成熟方便。

為什麼微軟要在此次Build 2017發布這個新設計系統呢？先看看視頻中的一些內容：

可以說，本次發布的fluent design system（FDS）本質上是為了mixed reality（MR）而誕生的。MR天然要求信息既突出於現實從而達到「增強」現實的目的、又不能干擾或分散用戶的注意力，而極簡主義同時又富有層次感FDS與MR簡直就是天作之合。從這個角度來說，普通win10設備甚至只能算是「沾光」了。

個人評價：

在win10早期，不論是系統本身還是商店裡面大部分uwp，都或多或少存在著設計風格混亂的情況。一方面傳統窗口設計經過長期發展在功能上已經接近完美了；另一方面，傳統風格正在變得越來越low，所以win10上面既有控制面板，又有「設置」，二者時有功能重疊。這次FDS或許能夠改善這種情況。

然而，FDS能否成功首先取決於微軟自身。換句話說，win10本身必須做出榜樣，成為這個新設計邏輯的範本。win10總是給人感覺「功能越來越強大，細節卻有點粗糙」。比如說，「設置」雖然有分類有搜索，很多地方還是非常不直觀，又或者，「個性化」選項為什麼要同時存在於控制面板和「設置」中？只有win10首先解決了自己這些問題，後續uwp才會主動或被動地適應os的風格。

從長遠來看，推廣FDS非常有助於win10與mac的競爭。雖然說知乎平均水平的電腦用戶的主要工作必須要是專業級視頻處理（不是4k都不好意思說話）或者軟體開發，但是千萬別搞錯了，出了知乎，大部分都屬於「隨便用哪個系統都沒區別」的那一類人群，他們在macos和win之間的遷移成本極低，而越來越盛行的雲存儲雲計算更是加速抹平了這兩大主流系統之間的差異，這時候，操作系統漂亮與否就很重要。「高逼格」的設計一直是macos的招牌之一，但是本次發布的FDS並不遜色於macos。所以，假設FDS成功了，很多一般用戶就會少了一個使用macos的重要理由。

從MR的發展來看，推廣FDS還能起到培養預備開發者的作用（當然也有不少個人開發者並不擅長UI設計，但是想要讓自己的項目廣受歡迎，優秀的UI是必須的）。自從2年前Hololens進入媒體視野以來，微軟從來沒有錯過任何一次宣傳的機會。畢竟微軟在過去10年中先後錯過了搜索引擎和移動業務浪潮（嚴格來說bing還是挺成功的，1/4佔有率並不低），因此對於下一個消費級IT浪潮，微軟把賭注下在了MR/AR技術上。從目前的情況來看，MR確實有這個潛力。個人預計，至多5年之內，微軟會推出1000美元以內的消費級MR設備，而且效果會比初代Hololens更好。因此，從現在開始微軟就有意通過FDS引導開發者思考在MR環境下APP的形態。

UI總是向著越來越「遵循本能操作」的方向發展。FDS無論是在審美意義上還是功能性上都挺有希望的。

最近幾天, Windows Store 更新了一波 Windows 應用, 更新之後的應用部分獲得了一些 Fluent Design 的視覺元素, 可以作為將來更多更新的參照:

Groove Music 的左側菜單欄在滑鼠懸停時有一定程度的高光追隨, 點擊時有聚焦動畫:

背後被遮住的是 Films TV, 因為長得和 Photos 基本一樣就不讓它露臉了

之後應該會陸續有更多更新, 不過從這些應用里已經可以看出有很多不統一和粗糙的地方了, 希望後續更新能修正這些問題吧...

16/05/17 更新: 計算器和錄音應用加入部分 Fluent Design 元素. 計算器加入了點擊聚焦效果, 錄音應用在開始錄音時背景會變成毛玻璃狀態.

計算器:

按鍵上的光照效果以及邊緣高光會追隨游標移動:

注意退格, 乘除按鈕的邊緣. 此時我的游標位於九的右上角.

錄音只有在開始時會將背景進行毛玻璃處理, 其他時間都是不透明的, 有點不能理解這個邏輯... 以及右上角的三個按鈕非常扎眼.

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

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

另外，由於 Fluent Design 的官網是不兼容 Chrome 的（經過測試，發現 Fluent 官網無法在系統偏好語言為中文的情況下兼容 Chrome 瀏覽器，如果把系統偏好語言改為英文就沒有問題，應該是因為前端頁面採用了 rem 的布局方式，但是沒有做好適配），導致之前對這幾個理念的理解主要是基於發布會視頻，所以會有很多不對的地方，我在接下來的分析中做了修正。

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 正常瀏覽）。

新的FluentDesign設計系統是為了設計師擴展設計維度從2D到3D，和多維度的感官體驗而準備的，微軟的設計師除了windows，還要做hololens，xbox，Surface Dial，等新的設備的設計，需要一個大的準則來規範。

以前我們靠鍵盤和滑鼠輸入、現在我們可以觸摸、語音、也通過眼睛的注視來操作了。

而在買入新世界的大門前，FluentDesign總結了6個要點：

1.光

光可以引導用戶的注意力，明確目標，在3D的世界裡，空間層級是以往2d的好幾級數倍，光是很好的引導用戶注意力的辦法，協助明確當前任務和目標

2.深度

3D深度的產生從而影響到物體之間的聯繫。這一點裡，我認為有趣的是，FluentDesign認為讓用戶進入心流體驗的辦法，就恰恰是給與更多的沉浸空間。

3.動效

如電影般的動效，讓用戶沉浸故事其中而不會齣戲。

4.物質

真實世界中的物理特性如彎曲、拉伸、彈起等，讓用戶在數字世界也想伸出手抓住我們的設計

5.可擴展維度的設計

設計界的從業者幾乎都泡在2D的世界裡，鼓勵大家一同走進3D的新世界。

總的來說，結合新的硬體設備（如hololens，Surface Dial，xbox），擴展多維度的感官體驗的設計才是這次設計系統的重點。

反正你們只關心有沒有毛玻璃

卧槽，剛說完gayui要移植到terminal，看來現在要加D3D支持了，做個皮膚要給人寫shader……

微軟終於在UI方面又進了一步。這是一套為AR/MR而生的設計語言，也是微軟邁向自然交互這一目標的重要一步。

先說說微軟近年UI的嘗試吧，

當年Metro界面剛剛橫空出世的時候是多麼的驚艷，但是後來蘋果和安卓也跟進了之後，Metro的磁貼風格的界面看起來就色塊太大，顯得缺少細節，單調。而且常常被人詬病不利於顯示大量的信息。

後來Modern UI出現了之後，看起來確實比之前的Metro要好，更適合大量信息的展示，但是那些設計始終是為了一個功能性服務，在美感方面並沒有什麼進步。還是大塊面的純色，但是添加了更好控制項和響應式的系統，以便於一統手機PC的界面。但是我始終覺得這不是一套全新的界面，而是一個Metro的1.1版本，把之前應該有的功能給補齊了。

後來HoloLens就出現了。

Fluent Design System是讓UI和真實世界融合的一個設計，你可以說這是一個為了AR/MR而生的設計。表面上看，你可以說這是一個擬物的扁平化設計。但其實交互界面的趨勢就沒有真正的扁平過，在扁平化的時代中，如何體現信息層級的層次感一直都是一個需要思考的問題。Material Design這樣的扁平化設計語言也是有Z軸的。但是這次微軟做的更徹底。這些以前只會出現在遊戲UI中的界面，現在也會出現在日常的UI中了。MS所強調的光照、深度、動態、材質、伸縮，構建出來的就是一個十分真實的世界。我們常常說交互的終極目標就是「無交互」。

但是其實真正的無交互，是身邊充滿了十分自然的交互。隨著技術的發展，運算能力的提高，信息會和生活越來越緊密，最後無縫的融入我們的生活。我想這就是Fluent Design System為我們描繪的未來的美好未來吧。

第一感覺：Windows 7 強勢回歸。

第二感覺：2D 到 3D ，因此加入了很多 3D 遊戲領域的元素，很強的「數字化擬物」。

但是目前來講，無論完成度，打磨程度，細節程度，Aero 語言依然是微軟的設計巔峰

FDS 雖然是一套 System，目前來看完成度依然非常低，而且還是免不了「大方向」，還沒做到谷歌 MD 蘋果的HIG 那樣的程度。從官方文檔和 Channel 9 的各種視頻來看，這套設計語言官方還在探索，放出來的目的應該是試探大家的口風和嘗試號召設計師+開發者來完善這套語言。

不過從以往的經驗來看，微軟在設計的號召上基本都是比較坑爹的結局（各種百花齊放百家爭鳴的殺馬特 UI ，也就造就了「MS 沒品味」的臭名聲）……微軟在始終「設計」這件事情上還是過分奉行民主少了點專制的味道。官方上所有的文檔基本都是「我們建議你大概這樣做」，而不像谷歌 MD Guideline那種「你可以這樣做」或者蘋果 HIG 那種「你要這樣做」的語氣。

打個比喻，如果把「讓開發者處理設計」這件事情比喻成拍照片：

1，微軟給你的是一台只有手動檔還要手動對焦的單反相機，他會告訴你拍一張好照片的參數大概應該怎樣怎樣的，拍不好？那是你的問題管我屁事。

2，谷歌給你的是一台Av檔有自動對焦功能的相機，你不會的話就用自動檔吧。

3，蘋果給你的肯定只有一個按鈕的相機，你只要拍就可以了我們做的選擇就是最好的，你不喜歡就自己造個相機拍吧。

Light（光感）、Depth（深度）、Motion（動畫）、Material（材質）、Scale（縮放） 的這 5 個element 很像是對自己的過往與業界流行的各種能夠見到的設計做一個總結。

回頭看看 win 7 Aero 設計理念： Authentic, Energetic, Reflective, Open，（真實，動感，反射，開闊的），感受一下這種形容詞 &> 名詞的變化：

Authentic &> Material，Energetic &> Motion，Reflective &> Light，Open &> Scale

Light（光感）

Light 這件事其實在 win 7 已經上有過充分的實踐（FDS 見到那個計算器 button 演示的時候我第一反應就是想起 win 7 任務欄的那個流光溢彩的效果）。

由於 Hololens 的出現，2D 到 3D 的變化，在變幻的 3D 環境中。主動的「高光」明顯比被動的「陰影」這件事情更加靠譜（陰影需要一個平面支撐才能看出來），在統一 3D 與 2D 2個世界的過程中，重新修正了在 win8 開始的「扁平化」的探索中由於「去裝飾」思想而被削弱的高光

實際上 win8 的「扁平化」也並非是大家想像中的那樣「大色塊」，對比起來 win10 creator『s update 為止的版本才是粗糙與毫無細節的「色塊」，win 8 的磁貼背景實際上是有很講究的漸變的，每個 tile 的邊緣還帶有精緻的高光漸變，整個磁貼是存在於一個動態與 3D 的環境中的（應用啟動的那個反轉動畫，優美且直觀，邏輯連貫）。

這次的 Light ，不過是把這些趕工去掉的細節補回來並且進一步打磨而已，然而從實際情況來看這次的打磨還是有很多讓人匪夷所思的地方，集中表現在透明，不透明元素之間的混亂搭配，「高亮」內容搞了個高光+陰影跌在一起的設計也是毫無規律與原則可言，讓人莫名其妙。

Depth（深度）

深度可以講是所有人造物基本屬性，

人是活在一個 3D 的世界裡面的，如果我們在顯示器裡面看到與實際生活不符的場景時，就會形成悖論和 confuse，

因為一個平面上平鋪展示所有的信息是很困難的事情，當元素在平面上產生堆疊時，我們的大腦會本能的去區分「前後關係」（因為現實世界中不可能出現「重合在一起的2個東西」）。這時候，一個虛擬的 Z 軸已經自然的產生了。

通過 陰影，景深，視差 這些三維深度的線索，強化這種認知，在2D遊戲上經過了長久時間的實踐的驗證。

因此我們在見到的幾乎所有 UI 當中，都不約而同的會引入「深度」的概念：

知道大家還記得的 Flip 3D 不。微軟對 3D UI 界面執念，其實也很早就開始了，

到了 Hololen ，我們來到了一個真·3D的 UI 世界，「到側面看看窗口之間的層級關係」非常自然。

Motion（動畫）

幾乎在所有的現代化界面當中，動畫都是必須的元素之一。

他象徵著 UI 物體從 3D 的維度，擴充到 4D（還有一維時間），至此，UI 完全與真實世界重合，成為了真實世界的一部分，徹底打破了 UI 與現實之間的隔閡。這方面，蘋果一直是先驅。

Motion 可以講是整個 FDS 最讓人激動和期待的部分。

早在 Windows Phone 7 時代的 Metro UI 設計準則中，就強調要用「世界級的動畫」來讓系統更靈動，到後面 windows 8 的 live tile，charm bar 我們都能感受到動畫帶來的強烈衝擊感與情感共鳴（給你一種「這個東西是活的」的感覺）。

然而 win 8 失勢之後，後續 win 10 的動畫設計絕對是「拼湊起來的垃圾」：毫無邏輯，各種不跟手，不連貫，各種「為了動而動」，相比 Metro UI 變回了被抽取了靈魂的冷冰冰的機器。

這一次的 FDS 把動畫重新定義成基本元素，希望能改變這種面貌。

一個優秀的動畫個人理解需要包含幾個部分：

1，聯繫：
動畫揭示了兩個元素之間的關係，反映了變化的過程

2，連續：
動畫的過程連貫，連續，可交互（也就是所謂的「跟手」），當整個變幻過程跟隨你的動作時，可以產生產生強烈的控制感反饋感，會讓你感覺在跟一個真實的物體交流

3，情感：
谷歌的 MD 把這個叫做「delightful details（讓人愉悅的細節）」，這也是現代化界面最偉大的進步，通過不同的緩動曲線，傳達各種微妙的情感。這好比給 UI 元素加入了靈魂，讓你感覺在跟一個「真實的」「活的」物體交流

目前的狀況來看 FDS 還停留在1，我們期待後續 2 和 3 的改進

Material（材質）

OK，我們交互的東西有了空間，有了生命，還缺什麼呢？外觀

在這件事上，google 的 MD 選擇了發明一種新的物件（Material），通過其表現的物理現象來產生「紙」的隱喻，微軟選擇了通過模模擬實世界的材質（這次的 FDS 選的是磨砂亞克力材質），來映射現實世界的物件，建立「熟悉感」，也是非常聰明的做法。

這種感覺我們很熟悉：

「你清楚地知道所有的東西都是假的，但是當看到那些逼真的毛髮，陰影，光照時，你下意識的又覺得一切都熟悉自然合理真實毫無違和感」

Scale（縮放）

官方視頻裡面 scale 都是在展示一些普通人看起來比較「高大上」的「3D」的東西。我覺得是在表達 FDS 是一套從出發就是基於 2D 到 3D 的設計系統。

而事實上經過這波「移動互聯網」的洗禮，其實現在的「個人計算設備」（PC），已經早不是「放在桌子上的那台電腦」了，從手環到眼鏡到手錶到手機到平板到筆記本到電視機到投影儀到虛擬現實的世界裡，我們來到了一個「各種屏幕圍繞著我們」的時代。

如何讓軟體去適應各種各樣的「顯示設備」？這就是「Scale」

除去各種裝逼，其實就是web設計領域都被說得不想再說的「響應式設計」啦！！

總結：

也許是 Metro 的坑太大了受了太大的傷，也許是 MS 已經完成了轉型 windows 不再是 MS 的 #1 事業必須為它傾注所有的資源。這兩年以來 MS 在設計上展現出來了空前的「粗糙」與「不專業」。當然，也可能不是 MS 自己的錯，是周圍的人進步得太快，讓大家感受到了更高品質的設計從而有了對比而已。

當然微軟在「這個東西最近挺火的，我也來參一腳」這件事上其實是挺有天分的：MacOS 的GUI 火了之後搞了 Windows，在日系廠商獨大的主機市場上參一腳搞出了 Xbox，iPad 為主更加「消費向」的平板火了之後迅速參了一腳給 PC 搞起了觸摸屏。AR火熱的時候另闢蹊徑搞起了自己的 3D 帝國。

這一次的 FDS 一樣，拋棄了 Metro 的激進，老老實實看現在市場上大家喜歡什麼，然後為我所用。只是在極力的「討好大家」的同時，堅持自己的個性其實也是挺重要的事情。

快半年後的現在再來看 MS 在設計文檔上的更新，感覺還是步伐慢了一大截，很多章節老舊，半途而廢和拼湊痕迹明顯，而且不成體系，還處於「how it feels how it looks like」的階段。

希望在不遠的將來，看到微軟自信滿滿的 show 「how FDS works」。

今天早上打開訂閱的新聞，被 Build 大會刷屏了，其中還有微軟新的設計系統：Fluent Design System，不過這些新聞標題還是蠻獨特的：

毛玻璃特效回歸，微軟公布全新界面設計語言 Fluent Design System

這是你要的毛玻璃特效：Fluent Design桌面和應用一覽

毛玻璃效果！微軟推全新界面設計語言Fluent Design

兔斯霽只想說對這些小編說，你們全家都是毛玻璃。。。。

好了，我們還是回歸正題。午休的時間，兔斯霽回顧了 Build 2017 第二天的 Keynote。Fluent Design System 佔整體的時間並不太多，微軟喬北峰（Joe Belfiore）也僅僅只是花了一小段時間將 Light 、Depth、Motion、Material、Scale 這5個元素結合一些視頻實例講了一下。雖然是一個完全沒有見過的東西，然而卻莫名覺得熟悉。可能是因為兔斯霽現在的工作都是基於3D空間的設計，圍繞著各種 AR、VR 設備。（PS：最近沒有啥文章產出，也是因為工作比較忙）

看完了各種關於 Fluent Design System 的資料，兔斯霽最先想到的就是 HoloLens ，甚至可以說最大的適用者不是桌面 Windows，而正是需要強調 3D 顯示的 HoloLens。所以接下來就讓兔斯霽藉助 HoloLens，來簡單講下此設計系統的5個元素。

特別說明：
兔斯霽截取了 HoloLens 的視頻並轉換成GIF圖片，表現力上會比視頻遜色很多
GIF載入比較慢

Light

無論從 Keynote 中的視頻還是 HoloLens 的實際畫面，目前對於光線的應用還僅限於點擊區域的 hover 狀態及 Gaze 游標指向在 UI 「平面」上的光暈效果。在 HoloLens 中還沒有明顯的光照系統來繪製 UI 元素的陰影，以此表明層次與深度，在 3D 的環境中也並不是用陰影來表現物體的遠近。所以這裡的 Light 更應該是發光效果，產生光暈作為焦點的提示，而不是使用accent color。

Depth

這個應該也是 Fluent Design System 中最重要的內容。

說到 2D 界面中對於深度利用，Google 的 Material Design 算是先行者。利用 UI 元素在Z軸上的高度，突出UI空間的主次與重要程度，同時也影響UI視覺上的表現（比如陰影的繪製）。

圖片來自 http://material.io

而在 3D 空間中，深度不僅可以表現 UI 元素的層次及重要程度，而且更可表現虛擬物體在3D空間中的方位，最適用於 AR 及 VR 設備。之前 Facebook 設計團隊發布了一篇《Designing Facebook for Mobile VR》，其中也提到了深度在 VR 設計上的運用。（其實基本上其他家的VR也是這麼設計）

圖片來自 facebook.design

再看 HoloLens 的 Start Menu （就是 Bloom 手勢呼出開始菜單），當 Gaze 游標移動到一個應用 icon 上時，除了光暈的顯示，icon 圖層及文字就會遠離底部背板向用戶靠近，以表明 hover 狀態。

於此同時，虛擬的物體在真實環境中展示更是離不開深度的表現。

Motion

動畫效果我想大家都不陌生，對於UI表現和交互體驗都是至關重要的一環。而包括 Fluent Design System 在內很多設計規範，也都給出了很多動效設計上的建議。（注意，是建議，而不是標準）

Material

好了，我們終於要說毛玻璃了。材料一詞，不免又讓人想起 Material Design，將紙與墨水作為隱喻，將物理世界的形態創造性地融入電子屏幕顯示。從目前曝光的資料看，Fluent Design System 還未引入過多的「材料」，毛玻璃算是一張吧，不知後續是否會有其他。遺言的是目前在 HoloLens 中，連毛玻璃效果都沒有實現，只是單純的玻璃體塊。畢竟實時渲染模糊效果還是挺吃力的。

Scale

這個比較好理解，用一句話講就是「Beyond the Screen」，我們的桌面不再是顯示器的方寸光影，而是整個3D空間。這也是 AR 及 VR 存在的意義。這些例子，HoloLens已經講了太多太多了。

END

知乎的GIF圖功能坑爹啊！！！！

原文地址：在 HoloLens 中窺探 Fluent Design System

感覺主要是針對holo的……真正應用起來還是有gap的。

感覺他們既想用apple guideline的high level總結那一套，又有點material design細節很多的那種趨勢，但是又沒有落實到每個小模塊的細節。略顯尷尬。

剛好最近有研究微軟全新語言Fluent Design，寫了一篇文章，希望你們喜歡~

關於微軟全新語言Fluent Design，你要知道的都在這兒 - 知乎專欄

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

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

「功能再強大，我也理解不了微軟爸爸的審美」??

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

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

Light（光感）

「神說要有光，世上便有了光。」

設計中光的重要性不言而喻，Joe Belfiore在大會上表示：新的light元素可以創造良好的氛圍，讓應用多一種空間的概念。在界面交互中能夠強烈吸引用戶的注意力，通過塑造光感的明暗度來引導用戶，比如我們看到滑鼠懸停時發光的按鈕、圖標點亮其他元素、高光漸變都給用戶以更人性化的視覺體驗。

這一點上，谷歌Material Design同樣運用light引入shadow，建立其標誌性的卡片陰影輪廓。而相比谷歌略顯固化的陰影疊加，FDS中主動變化的高光顯得更為生動有趣，更貼合真實世界中自然的設計。

Depth（深度）

創新性的改變，打破二維平面的局限拓展至三維空間領域。以往微軟所經歷的幾個設計階段，直至Modern UI都離不開單調的平面設計。而現在運用depth元素，與物理環境相結合，將重要的內容呈現在用戶面前，營造縱深變化的錯覺，能夠極大地減少視覺疲勞，給人以更豐富的感官體驗。

而谷歌Material Design早已嘗試將三維空間引入設計。提出z軸概念，利用z軸的深度，更好地打造空間感，使界面的每個元素層級鮮明，突出主次與重要程度，同時也加強UI視覺上的表現力。

你們發現了嗎？微軟和谷歌都在三維空間設計領域的深入研究，更易於展現虛擬物體在三維空間中的應用，隨著AR/VR技術的發展，更具未來前瞻性。

Motion（動畫）

我們都知道，好的動效是優秀產品重要的組成要素之一，微軟自然不會忽視這一環。Motion元素能為用戶提供更多好看、互動性強的動畫，吸引用戶的注意力，讓表達充分而細膩。並且可以看到，微軟此次創造出更色彩絢麗的動效，窗口內部小圖標和元素都能夠承載大量的動畫效果，好感度up

說到這裡，又要提谷歌的Material Design，以一種優雅、流動的方式來體現動效，構建與真實世界相連的空間關係。比如優雅的轉場效果、按壓/釋放觸控漣漪、富有層次的時間感…這些都是Material Design中Motion的經典動效案例。

Material（材質）

從剛才所說的光感、深度和特效都在試圖建立與物理世界的聯繫，而材質更是要模仿現實世界中各種物質，讓用戶感受真實觸感的重要一環。

比如微軟這次所回歸的毛玻璃效果，對於這種半透明光影漸變的效果我們似乎毫無抵抗力。其實Win7時代就有毛玻璃特效，而蘋果則將這一特性發揮得淋漓盡致。從z軸維度出發的設計，用它來製造出覆蓋內容之上的感覺，令界面元素更有層級，更有趣。

谷歌的Material Design從命名就可以看到Material材質的理念，而它的靈感正是來源於對紙和墨水的研究，其最重要的特徵就是卡片信息的層疊、合併、分離，擁有現實世界的厚度與質感，能夠自由伸展變形又是它的魔力所在。

不論是微軟全新發布的語言，還是谷歌、蘋果，對於真實材質在設計中的運用都非常重視。設計與生活理念相結合，讓用戶能夠產生更自然的感知或許是材質如此重要的原因，你覺得呢？

Scale（縮放）

可以看到微軟在幾個不同規模的交互場景中，不論是小屏幕觸控還是VR實景，都能夠滿足。而scale元素最顯著的一點在於，是在VR/AR技術中的運用，微軟打破這一局限，將虛擬物體的縮放應用在UI交互中，還提到許多前瞻性的概念設計。

我們會預見在下一個互聯網經濟浪潮，微軟對未來的布局投放在人工智慧領域。從可穿戴智能設備HoloLens，去年宣布推出混合現實技術Mixed Reality（MR）到成立人工智慧研究部門…此次微軟推出的全新語言FDS與其戰略布局相一致，讓UI與真實世界相融合，或許不僅僅是應用於Win10的新語言，而是有更深探索。

這方面，谷歌和蘋果的想法也不謀而合，人工智慧是新一代的人機交互。所強調的光感、深度、動效、材質和縮放，搭建出來的是一個可感知的真實世界，隨著技術的不斷發展，在日常交互設計和應用界面，將與用戶產生更親密的聯繫。

新版Windows還未發布，從此次微軟發布的全新語言Fluent Design System看到對未來的美好暢想，看到他們在設計上顛覆性的創新，開始學會如何優雅地為用戶展示複雜信息。對於曾經被谷歌Material Design和蘋果iOS所碾壓的局勢在悄悄開始發生變革，我們拭目以待~

到Designup 用可靠設計師 | 公眾號：Designup第三市集

原創文章轉載請聯繫作者

A collection of buzzwords - -.

把這五個做成手辦很多人買吧！

Fluent Design System

他們的官網居然不支持chrome瀏覽器，真是傲嬌。

---------------------------------------------------

Safari可以正常顯示，Mac版的Chrome不兼容，不知道Windows的是不是這樣。

Designup來啦

看完視頻覺得很cool！微軟最新發布的Fluent design system有很大的驚喜，不論是從功能性，還是UI美學的角度都有了長足的進步。從被吐槽已久的Metro風格之後，微軟終於在設計上開始發力。

這套新語言主要有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動畫）、Material（材質）和 Scale（縮放），為微軟創造出互動性更強、更流暢自然的用戶體驗，設計風格不再局限於二維平面，向三維深度展開，並且包括許多更精緻的毛玻璃和模糊效果

1. Light 光感

新的光感元素可以創造良好的氛圍，讓應用多了一種空間概念。吸引用戶的注意力，不論是在應用菜單、界面還是提示功能，都用很好的引導作用。

2. Depth 深度

通過放大或伸縮的動作，使用戶產生一種深度變化的錯覺，從二維拓展到三維的嘗試，給用戶新的視覺感受。

3. Motion 動畫

增加了許多細微而精緻的動效元素，互動性很強，能夠以一種更輕鬆人性化的方式引導用戶使用各種功能，提升用戶的歸屬感。

4. Material 材質

與之前的UI設計有了很大的改變，開始重視質感的元素運用，去吸引用戶觸摸逐漸參與到交互的過程，比如觸控交互、觸控筆輸入等功能。

5. Scale 縮放

微軟對未來的布局~在這個元素上融入了3D交互界面和VR/AR設備的功能，難度很高。

我們來感受一下顏值

毛玻璃特效，桌面一覽

微軟的 Joe Belfiore 在 Build 大會上介紹新設計語言時說：「新的設計語言不止與視覺有關，它還涉及交互模式、空間和全新元素的整合方式。」可以看到微軟對於未來布局的野心，VR/AR等設備技術的發展，UI交互更可能通過虛擬與真實的結合，給我們一個觸手可及的想像。

最終版本的Windows還未發布，我們拭目以待~期待 @叛逆者對Fluent design system的彩蛋！

Designup專註設計領域的人才共享平台

到Designup 用可靠設計師 | 公眾號：Designup第三市集

視頻看起來挺美好

但實際效果怎麼樣還得真正東西出來以後才能看

另外還有幾個現實問題：1. 字體渲染；2. HiDPI 支持；2. Legacy Win32 程序。不知道怎麼解決。

一段摻雜了屏幕錄像、去年 (已被棄用) 設計草稿圖的視頻。有趣的是，視頻前後還展示了幾組互相衝突的界面設計，好像微軟還沒想好該用哪一個一樣。

所有現有和視頻里展示的 UWP 應用界面 padding 太多、動效影響效率，不適合滑鼠和鍵盤操作。讓設計師和行業工作者用 Hololens 操作不存在的 UWP 應用，而不用 Adobe CC 或 AutoDesk 或 Avid 等積累了多少年 Win32 代碼的行業標準應用，基本不可能。

除了 Acyclic 材料有 API 資料，並且已經 seed 之外（話說微軟給的那幾個參考混合層級和 Yosemite 里加的 Medium Light、Light、Dark 和 Ultra Dark 四種 NSVisualEffectMaterial 有什麼區別?)，其餘的設計就像 Longhorn 一樣看似美好，但具體實現... 很可能沒那麼美好。

特性技術很棒，當年metro初期演示也是這個感觀。

但具體項目實現，只能長嘆，

有點怕win8-10的UI組，難看有難用。

1. 如果真按照這個做出來，非常喜歡，以後也可以說，微軟是圍繞設計做開發

2. 估計這種設計流行開以後，intel又開心了，因為大家電腦又要硬體升級了。狠吃資源

3. 微軟自己的軟體先能不能設計出樣板來啊。就微軟自己的office軟體的設計，OSX版比WIN版好看多了。要不是想用visio插圖，就想在OSX下用office了。