如果你是 Windows 10 系統(tǒng)的用戶，那么最近應(yīng)該會注意到 Windows 系統(tǒng)的圖標(biāo)正在逐步地被替換、升級，（在忽略廣大國內(nèi)全家桶軟件影響的情況下）Windows 10 正在隨著 Fluent Design 的注入而正在變得越來越優(yōu)雅。隨之而來的，整個 Windows 10 系統(tǒng)也在迭代升級中逐步變得越來越有 。

但是這種改變體現(xiàn)更為顯著的地方，則在于裝機(jī)必備的 Office 軟件上了——不對，它現(xiàn)在應(yīng)該叫 Microsoft 365 了：

微軟花費(fèi)了大量的時間精力來研究中國、印度、歐洲和美洲各個不同市場的用戶，每天是怎樣使用手機(jī)，微軟內(nèi)部的 40 多位設(shè)計(jì)師和研究人員以此為基礎(chǔ)來研究如何處理和提升移動端生產(chǎn)力，并將在「應(yīng)用層」上的經(jīng)驗(yàn)遷移到 Fluent Design 整個設(shè)計(jì)系統(tǒng)當(dāng)中。Office 或者說現(xiàn)在的 Microsoft 365 就是研究的產(chǎn)物之一。

「……通過所有的這些調(diào)研，我們了解到，平均下來人們會在手機(jī)上耗費(fèi)大約4個小時，但是每次和某個應(yīng)用進(jìn)行交互的時長在20~30秒之間?！埂④浀脑O(shè)計(jì)和研究副總裁 Jon Friedman

為了貼合這種用戶習(xí)慣和趨勢，Word、Excel、PowerPoint、OneDrive 、Outlook 等產(chǎn)品被打散重新整合。而這其中，有些細(xì)節(jié)藏著更深的意圖。

讓相機(jī)成為移動辦公的新入口

「我們在菲律賓觀察到，學(xué)生們會將課上手寫的筆記轉(zhuǎn)成 PDF 并且同朋友和同學(xué)進(jìn)行分享……智能手機(jī)上，攝像頭和鍵盤一樣重要，它是移動端工作流程中必不可少的部分?！埂?Jon Friedman

一圖勝千言這樣的道理，很多產(chǎn)品經(jīng)理和設(shè)計(jì)師都明白。在中國最深入人心的還是 QQ 的截圖功能。而微軟的設(shè)計(jì)團(tuán)隊(duì)將原本的 Office Lens 集成到 Microsoft 365 當(dāng)中，讓移動辦公的效率得到直接的提升。

當(dāng)然，這還不是最大的改變。

重新整合視覺和體驗(yàn)

「用戶常見操作其實(shí)都在20到30秒之內(nèi)」，這種快速、臨時、高密度和高反饋的使用習(xí)慣，是廣泛存在的。在這個信息和交互都碎片化的時代，生產(chǎn)力并不止意味著著「有足夠強(qiáng)大的功能」，還需要「能夠更快地獲取和使用特定功能」。Jon Friedman 將這種碎片化地完成特定的小任務(wù)的能力，稱為「微生產(chǎn)力」。

用戶一次編寫一小段文字，制作一個小表單，或者快速將照片嵌入到 PPT當(dāng)中，然后添加給另外一個協(xié)作者，然后云同步，30秒后，繼續(xù)做其他的事情。

Word、PowerPoint、Excel 合并到了「文檔」這一欄，OneDrive 在后臺幫你同步，桌面端和移動端的應(yīng)用無縫地鏈接切換，實(shí)時聊天和 Outlook 郵箱服務(wù)，則可以直接在對話框中調(diào)用 Word 或者 Excel 中的某一部分功能，你不再需要在程序之間切換，而 PDF 組件的添加，讓你足以在一個應(yīng)用內(nèi)管理所有的內(nèi)容。

既然說「移動優(yōu)先 」，那么你在通勤、在做飯的時候，是否也能便捷的獲取信息？微軟的設(shè)計(jì)團(tuán)隊(duì)，將原本應(yīng)用于 Outlook 郵箱服務(wù)中，服務(wù)于視力障礙用戶的屏幕閱讀組件給嵌到 Microsoft 365 當(dāng)中。

「用耳朵來聽完整個UI……對大腦其實(shí)是不小的負(fù)荷?！笿on Friedman 在介紹的時候坦言了這一設(shè)計(jì)存在的潛在問題。但是在和華盛頓州立盲人學(xué)校的調(diào)研合作過程中，他們在這一組件中加入了音頻緩沖功能，通俗的來講，就是幫你識別出文檔中的重點(diǎn)。

隱形的視覺識別設(shè)計(jì)

Microsoft 365 橫跨了這么多產(chǎn)品，在交互界面上保持著高度的融合，控件和控件之間的樣式高度的一致，僅有在特定的功能上，借用品牌色做適當(dāng)?shù)膮^(qū)分。

當(dāng)你編輯PPT的時候，界面頂部的橙色菜單欄，和你多年以來對于 PowerPoint 這一軟件的視覺認(rèn)知是一致的，無需思考就可感知。而這種感知又不會讓人覺得割裂，從而讓視覺識別變得隱形而富有功能性。

Microsoft 365 把如此之多的功能、服務(wù)都整合到一起，橫跨桌面端的網(wǎng)頁、桌面端的Windows 和 macOS系統(tǒng)、移動端的 iOS和Android 系統(tǒng)，這種復(fù)雜的改版設(shè)計(jì)，明顯需要一套完整的體系來支撐。而這就不得不說到已經(jīng)存在了3年多，并且你少有了解的 Fluent Design了。

寶藏設(shè)計(jì)系統(tǒng)：Fluent Design

實(shí)際上，為了能讓 Fluent Design 能夠更好地應(yīng)用到其他平臺上，微軟并不是單打獨(dú)斗，除了接觸開源項(xiàng)目的模式獲得更廣泛的設(shè)計(jì)師和開發(fā)者社區(qū)的支持，也借由 Surface Duo 這樣的雙屏硬件項(xiàng)目和谷歌進(jìn)行深入的合作，不難想象，iOS 版的 Microsoft 365 應(yīng)該也是微軟和蘋果合作的產(chǎn)物，而兼容 iOS 平臺的 Fluent Design 背后應(yīng)該也有官方的影子。

就像我在之前的文章《重磅！柔性屏和雙屏來啦，設(shè)計(jì)師必學(xué)跨屏設(shè)計(jì)規(guī)范》當(dāng)中所提到的，微軟已經(jīng)抱著更開放的心態(tài)去面對不同的系統(tǒng)，比如 Android。經(jīng)歷了 Windows 8 和 Windows Phone 的失敗之后，微軟開始擁抱全平臺了，作為開源的受益大戶，微軟更是收購了 Github ，并且在自家的產(chǎn)品上更加兼容并蓄——比如使用 Chromium 內(nèi)核的 Edge 瀏覽器，在 Win10 系統(tǒng)內(nèi)置 Linux 子系統(tǒng)，等等。

實(shí)際上，在 Fluent Design 在 2021 年剛剛推出的時候，它和早年間的 Android 4.0 以及 iOS 7 一樣，它有一個明確的指向結(jié)果的5個特征：輕量級、有縱深、符合動態(tài)、富有質(zhì)感，規(guī)?；?

隨后，在具體的視覺設(shè)計(jì)上，F(xiàn)luent Design 開始在這些原則的基礎(chǔ)上，嵌入了一些更加具體的方法和原則，比如使用視差、陰影和動效來共同強(qiáng)化「縱深」（也就是 Depth） 的概念。

但是隨著整個設(shè)計(jì)生態(tài)的變化，設(shè)計(jì)團(tuán)隊(duì)所面對的更大的問題在于：產(chǎn)品需要迭代，需要跨平臺，需要多人協(xié)作，需要遠(yuǎn)程協(xié)作，需要處理越來越多的需求，需要精簡，需要切合運(yùn)營需求，等等等等。

「Fluent Design 將不止是指向結(jié)果，還應(yīng)該是指向共同設(shè)計(jì)、構(gòu)建產(chǎn)品的過程。」 　——微軟設(shè)計(jì)總監(jiān) Joseph McLaughlin

環(huán)境和需求的改變，讓今天的 Fluent Design 和3年前剛剛發(fā)布時相比，發(fā)生了不小的變化。負(fù)責(zé)設(shè)計(jì)規(guī)范的微軟設(shè)計(jì)師 Mike Jacobs 用一個隱喻來總結(jié) Fluent Design 的美學(xué)特征。

“亞克力”視覺風(fēng)格美學(xué)

多年以前 MacOSX 剛剛誕生的時候，它是以「水」來作為真實(shí)擬物光影和質(zhì)感的核心隱喻。

Mac OS X DP3，設(shè)計(jì)語言為「Aqua」，拉丁語中的「水」

受到對手的啟發(fā)，微軟在 Vista 和 Win 7 上選擇了「Aero」設(shè)計(jì)語言，來源于希臘語，意同「Air」，它強(qiáng)調(diào)的是光照到玻璃上的光影質(zhì)感。

這種更加強(qiáng)調(diào)靜態(tài)視覺風(fēng)格的擬物化「設(shè)計(jì)隱喻」隨后被更為豐富動態(tài)的「設(shè)計(jì)隱喻」所替代，比如 Android 的「Meterial Design」，它的隱喻是無限延伸的「紙」：

而 Fluend Design 的核心的隱喻名為 「Acrylic」，也就是我們常說的亞克力，比起「紙」，它更近了一層，它多了半透明的視覺層次：

Fluent Design 中的不僅僅有「層」、「光影」、「延展」的概念，因?yàn)槭前胪该鳎€有一層細(xì)膩的「材質(zhì)感」。

微軟的設(shè)計(jì)指南的負(fù)責(zé)人 Mike Jacobs 所說的：「這種層級的運(yùn)用能夠讓UI極富質(zhì)感，你在設(shè)計(jì)的時候處理的越仔細(xì)，最終出來的效果就越驚艷?！?

在側(cè)邊欄和頂部導(dǎo)航中使用「亞克力」式的視覺元素

「亞克力」這種視覺美學(xué)的好處，對于處理復(fù)雜的窗口體系是非常有效的，尤其是在處理彈出窗這樣的元素的時候，它能夠讓底層的窗口從半透明的「亞克力」層透出來，從而讓用戶更明白所處的位置。這種微妙的、顯隱之間的感覺，有著足夠的美感。它是 Areo 美學(xué)的延續(xù)，但是得到了更為微妙完整的呈現(xiàn)。

延續(xù)自Metro的排版美學(xué)

Fluent Design 揚(yáng)長避短去蕪存菁的一面，就體現(xiàn)在這里。

它的排版設(shè)計(jì)，繼承自上一代的 Metro 設(shè)計(jì)語言。去掉復(fù)雜的配色，通過不花哨但是足夠清晰的文字排版來劃分層級，體現(xiàn)信息之間的關(guān)系，也就是 Fluent Design 和微軟一開始所追求的，讓用戶聚焦于真正擁有的信息——尤其是在這個信息過載的時代。

對比：通過對比來來作為構(gòu)建視覺層次的基礎(chǔ)。

大?。和ㄟ^大小來呈現(xiàn)重要性的差異，層級的差異。

臨近：臨近的元素具有強(qiáng)關(guān)聯(lián)性，通過分組將同類和相關(guān)的元素凝集到一起。

留白：與臨近相反，通過間距來分離不同的類別和組。

重復(fù)：重復(fù)的元素呈現(xiàn)出相似性，這種重復(fù)能培養(yǎng)用戶認(rèn)知，產(chǎn)生連續(xù)性，讓設(shè)計(jì)具有可預(yù)測性。

材質(zhì)：最后再附上材質(zhì)，UI 具有視覺吸引力。

Fluent Design 本身是自恰的，但是它如果要延伸到其他的系統(tǒng)上，要做的工作并不少。

操作系統(tǒng)并不重要

信息過載和注意力爭奪是今天所有人都必須面對的問題。

去年各大平臺都在有意識地做精簡和整合，twitter 的改版，F(xiàn)acebook 的F8大會，包括iOS 和 Android 系統(tǒng)的更新，都在兼顧這一問題，而在這個大的語境之下，微軟 CEO Satya Nadella說出了最重要的那句話：

「操作系統(tǒng)已經(jīng)不再是最重要的層級了?！?

對于用戶而言，如果軟件和服務(wù)在不同操作系統(tǒng)上90%以上的功能、體驗(yàn)和服務(wù)是一致的，那么本質(zhì)上在哪個平臺差別都不大。但是，對于設(shè)計(jì)師、設(shè)計(jì)團(tuán)隊(duì)乃至于產(chǎn)品團(tuán)隊(duì)而言，就需要面對一個問題：怎么讓日趨復(fù)雜龐大的產(chǎn)品和服務(wù)，在每個平臺上的體驗(yàn)都是一致的。

很多時候，想要讓產(chǎn)品在 iOS 和 Android 平臺上保持一致的體驗(yàn)，需要做妥協(xié)。如果再考慮到移動端和桌面端，你需要為一致性付出更大的代價，產(chǎn)品越復(fù)雜，需要付出的努力越多。而 Fluent Design ，就是為設(shè)計(jì)過程而生，它已經(jīng)很大程度上抹平了系統(tǒng)之間差異的問題。

Fluent Design和它超全面的素材

從2021年發(fā)布的最初的版本，到 2021年年底伴隨 Microsoft 365 的重大更新，F(xiàn)luent Design 如今已經(jīng)涵蓋了 Windows、iOS、Android、Web 這四個主要的分支，在微軟官方的設(shè)計(jì)團(tuán)隊(duì)的主導(dǎo)之下，同開源社區(qū)、蘋果、谷歌等多方的設(shè)計(jì)師和開發(fā)者，協(xié)同完成了整套設(shè)計(jì)系統(tǒng)的規(guī)范制定、以及相應(yīng)的開發(fā)組件的創(chuàng)建。

如果你是設(shè)計(jì)師，想更為深入的了解 Fluent Design 的各種設(shè)計(jì)范式，那么你可以在 WIndows 平臺的設(shè)計(jì)規(guī)范當(dāng)中，極為詳細(xì)地了解每一個視覺元素的設(shè)計(jì)原理和具體實(shí)現(xiàn)方式：

比如你可以在「Style」這個部分找到具體的排版、圖標(biāo)，包括「亞克力」效果的實(shí)現(xiàn)原理：

值得一提的是，F(xiàn)luent Design 雖然跨平臺的設(shè)計(jì)系統(tǒng)，但是在 iOS 和 Android 上面，它并非為了追求自身的一致而無視原有的設(shè)計(jì)規(guī)范、交互模式，而是盡可能地在原有系統(tǒng)的機(jī)制允許范疇內(nèi)，來進(jìn)行交互和體驗(yàn)上的約束，確保你在各個平臺上的感知是高度貼近的。

所以，在 Fluent Design 的頁面當(dāng)中，非常完整的引用了各個平臺上的具體設(shè)計(jì)規(guī)范，以及 Fluent Design 在這些平臺上進(jìn)行設(shè)計(jì)的時候，可以用到的各種設(shè)計(jì)資源和素材，其中包括對應(yīng)平臺的的 Sketch、Figma 格式的素材，相應(yīng)的字體，相關(guān)的插件、乃至于各個平臺的設(shè)計(jì)規(guī)范對應(yīng)的鏈接：

下載頁鏈接：

https://developer.microsoft.com/en-us/fluentui#/resources

那么在非 Windows 平臺上，功能的實(shí)現(xiàn)和開發(fā)上怎么辦呢？最初的時候，微軟在 Windows 平臺上使用了自己的 UI 和開發(fā)組件庫，而針對 iOS 、Android 以及 Web 端，則在 Github 上創(chuàng)建了一個開源項(xiàng)目，名為 Fabric ，在 iOS 平臺上，有支持 Swift 語言的 Fabric iOS 庫來支持開發(fā)，而在 Android 上，則是 Fabric Android （Kotlin），Web 端則使用的是 Fabric Web （React），它們都已經(jīng)是現(xiàn)成的庫，開發(fā)者可以直接調(diào)用，確保原生而順暢的使用體驗(yàn)。

在今年 3 月 12 日的時候，微軟更進(jìn)一步，將原本獨(dú)立的Windows 組件庫也徹底和另外三個 Fabric 庫合并到一起，徹底并進(jìn) Fluent Design 項(xiàng)目，目前它在 Github 上使用的是 UI Fluent 這個名字，可以說，此刻的 Fluent Design 從設(shè)計(jì)到開發(fā)，已經(jīng)成為了一個完整而系統(tǒng)的整體了！

「簡而言之，我們合并了兩套庫，UI Fabric 和 Stardust Github 倉庫現(xiàn)在合并到一起，以 Fluent UI 的名字，統(tǒng)一在 Microsoft 的 Github 庫當(dāng)中了！……我們正在努力避免開發(fā)者因?yàn)槠脚_的差異而來回切換，在體驗(yàn)和流程上被打斷。」

小結(jié)

-

如果你是一名 設(shè)計(jì)師 ，「亞克力美學(xué)」能夠讓你產(chǎn)生更廣闊的設(shè)計(jì)想象，那么不妨下載相關(guān)的 來研究一下。如果你所處的設(shè)計(jì)團(tuán)隊(duì)正在尋找一套系統(tǒng)化的解決方案，不妨來試試 Fluent Design。