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

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

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

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

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

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

「我們?cè)诜坡少e觀察到，學(xué)生們會(huì)將課上手寫(xiě)的筆記轉(zhuǎn)成 PDF 并且同朋友和同學(xué)進(jìn)行分享……智能手機(jī)上，攝像頭和鍵盤(pán)一樣重要，它是移動(dòng)端工作流程中必不可少的部分。」—— Jon Friedman

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對(duì)比：通過(guò)對(duì)比來(lái)來(lái)作為構(gòu)建視覺(jué)層次的基礎(chǔ)。

大?。和ㄟ^(guò)大小來(lái)呈現(xiàn)重要性的差異，層級(jí)的差異。

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

留白：與臨近相反，通過(guò)間距來(lái)分離不同的類別和組。

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

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

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

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

信息過(guò)載和注意力爭(zhēng)奪是今天所有人都必須面對(duì)的問(wèn)題。

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

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

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

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

Fluent Design和它超全面的素材

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

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

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

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

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

下載頁(yè)鏈接：

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

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

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

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

小結(jié)

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