以後WINDOWS長這樣：微軟新一代設計體系Fluent Design

Microsoft在 Build 2017 開發者大會上發佈了全新的設計語言- Fluent Design System，徹底改變沿用多年的平面矩形樣式的使用者介面，

新的設計語言不止與視覺有關，它還涉及交互模式、空間和全新元素的整合方式。Microsoft高度概括了 FDS 要實現的三個轉變：

從平面設計語言到沉浸式、多維度的設計語言的轉變；

從小螢幕、觸摸式到跨平臺、輸入式的轉變；

從消耗型、傳達型到創造型、自我處理型的轉變。

是時候跟局限在一個平面上的矩形說再見了。新的設計語言不止與視覺有關，

同樣強調交互模式、空間和全新元素的整合方式。”

在 FDS 宣傳材料中，Microsoft 團隊用13個形容詞介紹了設計理念，我將其解釋為以下10種類型：自我調整設計、影像級設計、創意型設計、輕鬆設計、模擬設計、引人的設計、通用設計、包容性設計、表現型設計、連貫型設計。與此同時，Microsoft 將 FDS 高度概括為一句話 “An eloquent design system for a complex world”，我將其形容為：“在錯綜複雜的世界中，別有天地。”

The Building Blocks

Fluent Design System，也就是之前傳聞的Project Neon。風格上比穀歌蘋果的設計語言更加的未來感，

微軟的Fluent Design System中利用Light、Depth、Motion、Material、Scale五大元素給使用者一種順滑動感且很有質感的介面。

Light（光效）

其實，在 Windows 10 RS2 以及之前的系統上，存在亮度上變化的回饋，在 FDS 中又強調了 Light 人機交互回饋。在二維設備的一些程式中，隨著滑鼠的移動方向，對元素本身以及周圍元素產生光回饋效果。

這樣可以突出顯示使用者正在互動的控制項狀態。

Material（材質）

Microsoft團隊在 Fluent Design System 中使用物理紋理和空間深度的概念來區分各個 UI元件元素，並將它們放置在可視層次結構中。其中的關鍵就是調整了這種材質的構成元素，以獲得其獨特的外觀和性能，

為使用者提供個性化偏好的體驗。這是UWP應用程式在式樣體驗上的重大進步。

背景透明度、高斯模糊、圖層紋理增加了使用者介面的視覺深度和維度，建立視覺化層次結構。排除混合樣式用來確保放置在亞克力背景上的元素擁有較高的對比度和易讀性。

顏色疊加為用戶提供色彩個性化的機會，創造出平易近人的體驗。

亞克力材質

五大元素的疊加構成了一種新鮮透明的、可高效利用的材質，Microsoft 稱其為亞克力材質。

1. 想要在應用程式中創建不同的視覺效果體驗，可以在應用程式的整個區域使用亞克力材質。

2. 對於具有垂直導航的應用，應該將亞克力材質應用於包含導航元素的輔助窗格中。

3. 對於具有三個不同垂直窗格的應用，應該將亞克力材質使用到非主要內容上。

在設計時要謹慎使用多層壓克力材質，在體驗上不應該讓使用者在使用應用程式時在腦中類比在三維情況下的Z-軸透視圖，在視覺上可能也會導致意想不到的光學錯覺。

Depth（視差效果）

視差是一種在使用者介面中可以產生層次結構的視覺效果，靠近觀察者的物體比背景中的物體移動得更快。視差產生深度、透視和運動的感覺。如上所述，清單、背景圖片兩層內容的視差變化，清單放置在背景圖像的頂部。為了達到視差效果，我們希望離使用者最近的物體相比距離較遠的物體移動的更快。所以當使用者滾動介面時，清單以比背景圖像更快的速度移動，進而產生了深度變化的錯覺，大幅度提高了用戶好感度和用戶黏性。

Motion（動畫）

1. Connected Animation（銜接動畫）

注意上面這個動畫，原型中使用銜接動畫來動態化展開專案圖像，當使用者對該圖像元素進行交互動作後，其“連貫的”成為下一級橫向標題內容，保持使用者在流覽相關內容時視圖之間的連續性。

2. Coordinated Animation（協調動畫）

比如上面這個動畫，UI 控制項使用了協調動畫。協調動畫可以為元素之間的切換添加更多的視覺興趣，進一步吸引使用者注意源視圖和目標視圖之間產生的變化。

Scale（縮放）

Scale 的關鍵作用是使應用程式在不同的設備上重塑和呈現。在電腦顯示器上看起來較為合適的物體放在 AR 或 VR 頭戴設備中觀看，可能就會變得過大或過小。因此，虛擬物體大小的縮放是第一視角 UI 體驗的關鍵因素之一。 對於 Scale，在本屆開發者大會上微軟也是結合現有產品，更多的提出了未來發展的大方向。對沉浸式數位物體的擴展也是 3D 交互介面和 VR/AR 時代的必備功能。隨著虛擬實境的發展逐漸成熟，Scale 技術也會更多的運用到產品裡。

多圖預覽

在Win8/WP時代，獨特的Metro的設計語言曾經圈粉不少，在微軟公佈Fluent Design System之後，作為Win8/WP時代的Metro也正式被取代。Win10上對Metro的拋棄也標誌著微軟承認Win8/WP已經成為過去。

Microsoft 稱其為亞克力材質。

1. 想要在應用程式中創建不同的視覺效果體驗，可以在應用程式的整個區域使用亞克力材質。

2. 對於具有垂直導航的應用，應該將亞克力材質應用於包含導航元素的輔助窗格中。

3. 對於具有三個不同垂直窗格的應用，應該將亞克力材質使用到非主要內容上。

在設計時要謹慎使用多層壓克力材質，在體驗上不應該讓使用者在使用應用程式時在腦中類比在三維情況下的Z-軸透視圖，在視覺上可能也會導致意想不到的光學錯覺。

Depth（視差效果）

視差是一種在使用者介面中可以產生層次結構的視覺效果，靠近觀察者的物體比背景中的物體移動得更快。視差產生深度、透視和運動的感覺。如上所述，清單、背景圖片兩層內容的視差變化，清單放置在背景圖像的頂部。為了達到視差效果，我們希望離使用者最近的物體相比距離較遠的物體移動的更快。所以當使用者滾動介面時，清單以比背景圖像更快的速度移動，進而產生了深度變化的錯覺，大幅度提高了用戶好感度和用戶黏性。

Motion（動畫）

1. Connected Animation（銜接動畫）

注意上面這個動畫，原型中使用銜接動畫來動態化展開專案圖像，當使用者對該圖像元素進行交互動作後，其“連貫的”成為下一級橫向標題內容，保持使用者在流覽相關內容時視圖之間的連續性。

2. Coordinated Animation（協調動畫）

比如上面這個動畫，UI 控制項使用了協調動畫。協調動畫可以為元素之間的切換添加更多的視覺興趣，進一步吸引使用者注意源視圖和目標視圖之間產生的變化。

Scale（縮放）

Scale 的關鍵作用是使應用程式在不同的設備上重塑和呈現。在電腦顯示器上看起來較為合適的物體放在 AR 或 VR 頭戴設備中觀看，可能就會變得過大或過小。因此，虛擬物體大小的縮放是第一視角 UI 體驗的關鍵因素之一。 對於 Scale，在本屆開發者大會上微軟也是結合現有產品，更多的提出了未來發展的大方向。對沉浸式數位物體的擴展也是 3D 交互介面和 VR/AR 時代的必備功能。隨著虛擬實境的發展逐漸成熟，Scale 技術也會更多的運用到產品裡。

多圖預覽

在Win8/WP時代，獨特的Metro的設計語言曾經圈粉不少，在微軟公佈Fluent Design System之後，作為Win8/WP時代的Metro也正式被取代。Win10上對Metro的拋棄也標誌著微軟承認Win8/WP已經成為過去。