無極5網站_Office改版背後，藏着的這套超全面的寶藏設計系統

如果你是 Windows 10 系統的用戶，那麼最近應該會注意到 Windows 系統的圖標正在逐步地被替換，升級，（在忽略廣大國內全家桶軟件影響的情況下）Windows 10 正在隨着 Fluent Design 的注入而正在變得越來越優雅。

隨之而來的，整個 Windows 10 系統也在迭代升級中逐步變得越來越有吸引力：

但是這種改變體現的更為顯著的，則反映在裝機必備的 Office 軟件上了——不對，它現在應該叫 Microsoft 365 了：

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

「……通過所有的這些調研，我們了解到，平均下來人們會在手機上耗費大約4個小時，但是每次和某個應用進行交互的時長在20~30秒之間。」

——微軟的設計和研究副總裁 Jon Friedman

為了貼合這種用戶習慣和趨勢，Word、Excel、PowerPoint、OneDrive 、Outlook 等產品被打散重新整合。而這其中，有些細節藏着更深的意圖。

讓相機成為移動辦公的新入口

「我們在菲律賓觀察到，學生們會將課上手寫的筆記轉成 PDF 並且同朋友和同學進行分享……智能手機上，攝像頭和鍵盤一樣重要，它是移動端工作流程中必不可少的部分。」

—— Jon Friedman

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

堪稱人類之光的新版 QQ 截圖，是如何設計出來的？

國民級產品 QQ 的截圖功能一直廣受褒獎，但最近新版的截圖功能體驗，讓人完全愛上了！這個堪稱人類之光的截圖功能，到底是如何設計出來的？來看設計團隊的實戰復盤！

閱讀文章 >>

當然，這還不是最大的改變。

重新整合視覺和體驗

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

用戶一次編寫一小段文字，製作一個小表單，或者快速將照片嵌入到 PPT當中，然後添加給另外一個協作者，然後雲同步，30秒后，繼續做其他的事情。

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

既然說「移動優先」，那麼你在通勤、在做飯的時候，是否也能便捷的獲取信息？微軟的設計團隊，將原本應用於 Outlook 郵箱服務中，服務於視力障礙用戶的屏幕閱讀組件給前一到 Microsoft 365 當中。

「用耳朵來聽完整個UI……對大腦其實是不小的負荷。」Jon Friedman 在介紹的時候坦言了這一設計存在的潛在問題。但是在和華盛頓州立盲人學校的調研合作過程中，他們在這一組件中加入了音頻緩衝功能，通俗的來講，就是幫你識別出文檔中的重點，

隱形的視覺識別設計

Microsoft 365 橫跨了這麼多產品，在交互界面上保持着高度的融合，控件和控件之間的樣式高度的一致，僅有在特定的功能上，借用品牌色做適當的區分。

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

Microsoft 365 把如此之多的功能、服務都整合到一起，橫跨桌面端的網頁、桌面端的Windows 和 macOS系統、移動端的 iOS和Android 系統，這種複雜的改版設計，明顯需要一套完整的體系來支撐。而這就不得不說道已經存在了3年多，並且你少有了解的 Fluent Design了。

寶藏設計系統：Fluent Design

實際上，為了能讓 Fluent Design 能夠更好地應用到其他平台上，微軟並不是單打獨斗，除了接觸開源項目的模式獲得更廣泛的設計師和開發者社區的支持，也藉由 Surface Duo 這樣的雙屏硬件項目，和谷歌進行深入的合作，不難想象，iOS 版的 Microsoft 365 應該也是微軟和蘋果合作的產物，而兼容 iOS 平台的 Fluent Design 背後應該也有官方的影子。

就像我在之前的文章《重磅！柔性屏和雙屏來啦，設計師必學跨屏設計規範》當中所提到的，微軟已經抱着更開放的心態去面對不同的系統，比如 Android。經歷了 Windows 8 和 Windows Phone 的失敗之後，微軟開始擁抱全平台了，作為開源的受益大戶，微軟更是收購了 Github ，並且在自家的產品上更加兼容並蓄——比如使用 Chromium 內核的 Edge 瀏覽器，在 Win10 系統內置 Linux 子系統，等等。

重磅！柔性屏和雙屏來啦，設計師必學跨屏設計規範

我們總在期待 Next Big Thing，企盼下一次数字革命。喊了這麼多年的物聯網現在還沒有明顯起來的跡象，而 VR 也因為頭戴設備的大型化和沉浸式場景的泛用性較差的原因，反倒是 AR 和 MR 依託智…

閱讀文章 >>

實際上，在 Fluent Design 在 2017 年剛剛推出的時候，它和早年間的 Android 4.0 以及 iOS 7 一樣，它有一個明確的指向結果的5個特徵：輕量級、有縱深、符合動態、富有質感，規模化。

隨後，在具體的視覺設計上，Fluent Design 開始在這些原則的基礎上，嵌入了一些更加具體的方法和原則，比如使用視差、陰影和動效來共同強化「縱深」（也就是 Depth）的概念。

但是隨着整個設計生態的變化，設計團隊所面對的更大的問題在於：產品需要迭代，需要跨平台，需要多人協作，需要遠程協作，需要處理越來越多的需求，需要精簡，需要切合運營需求，等等等等。

「Fluent Design 將不止是指向結果，還應該是指向共同設計、構建產品的過程。」　——微軟設計總監 Joseph McLaughlin

環境和需求的改變，讓今天的 Fluent Design 和3年前剛剛發布時相比，發生了不小的變化。負責設計規範的微軟設計師 Mike Jacobs 用一個隱喻來總結 Fluent Design 的美學特徵。

「亞克力」視覺風格美學

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

Mac OS X DP3，設計語言為「Aqua」，拉丁語中的「水」

受到對手的啟發，微軟在 Vista 和 Win 7 上選擇了「Aero」設計語言，來源於希臘語，意同「Air」，它強調的是光照到玻璃上的光影質感。

這種更加強調靜態視覺風格的擬物化「設計隱喻」隨後被更為豐富動態的「設計隱喻」所替代，比如 Android 的「Meterial Design」，它的隱喻是無限延伸的「紙」：

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

Fluent Design 中的不僅僅有「層」、「光影」、「延展」的概念，因為是半透明，它還有一層細膩的「材質感」。

微軟的設計指南的負責人 Mike Jacobs 所說的：「這種層級的運用能夠讓UI極富質感，你在設計的適合處理的越仔細，最終出來的效果就越驚艷。」

在側邊欄和頂部導航中使用「亞克力」式的視覺元素。

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

延續自 Metro 的排版美學

Fluent Design 揚長避短去蕪存菁的一面，就體現在這裏。

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

對比：通過對比來來作為構建視覺層次的基礎。
大小：通過大小來呈現重要性的差異，層級的差異。
臨近：臨近的元素具有強關聯性，通過分組將同類和相關的元素凝集到一起。
留白：與臨近相反，通過間距來分離不同的類別和組。
重複：重複的元素呈現出相似性，這種重複能培養用戶認知，產生連續性，讓設計具有可預測性。
材質：最後再附上材質，UI 具有視覺吸引力。

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

操作系統並不重要

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

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

「操作系統已經不再是最重要的層級了。」

Facebook 重大改版背後，揭曉了2019年的4個關鍵設計趨勢

作為一個世界級的社交媒體平台，Facebook 如今的用戶體量已經相當可觀了。不過由於種種原因，國內少有人會主動關注相關的信息。作為每年 Facebook 團隊的盛事，F8 大會上通常會發布新產品，…

閱讀文章 >>

對於用戶而言，如果軟件和服務在不同操作系統上90%以上的功能、體驗和服務是一致的，那麼本質上在哪個平台差別都不大。但是，對於設計師、設計團隊乃至於產品團隊而言，就需要面對一個問題：怎麼讓日趨複雜龐大的產品和服務，在每個平台上的體驗都是一致的。

很多時候，想要讓產品在 iOS 和 Android 平台上保持一致的體驗，需要做妥協。如果再考慮到移動端和桌面端，你需要為一致性付出更大的代價，產品越複雜，需要付出的努力越多。而 Fluent Design ，就是為設計過程而生，它已經很大程度上抹平了系統之間差異的問題。

Fluent Design 和它超全面的素材

從2017年發布的最初的版本，到 2019年年底伴隨 Microsoft 365 的重大更新，Fluent Design 如今已經涵蓋了 Windows、iOS、Android、Web 這四個主要的分支，在微軟官方的設計團隊的主導之下，同開源社區、蘋果、谷歌等多方的設計師和開發者，協同完成了整套設計系統的規範制定、以及相應的開發組件的創建。

如果你是設計師，想更為深入的了解 Fluent Design 的各種設計範式，那麼你可以在 WIndows 平台的設計規範當中，極為詳細地了解每一個視覺元素的設計原理和具體實現方式：

比如你可以在「Style」這個部分找到具體的排版、圖標，包括「亞克力」效果的實現原理：

值得一提的是，Fluent Design 雖然跨平台的設計系統，但是在 iOS 和 Android 上面，它並非為了追求自身的一致而無視原有的設計規範、交互模式，而是盡可能地在原有系統的機制允許範疇內，來進行交互和體驗上的約束，確保你在各個平台上的感知是高度貼近的。

所以，在 Fluent Design 的頁面當中，非常完整的引用了各個平台上的具體設計規範，以及 Fluent Design 在這些平台上進行設計的時候，可以用到的各種設計資源和素材，其中包括對應平台的的 Sketch、Figma 格式的素材，相應的字體，相關的插件、乃至於各個平台的設計規範對應的鏈接：

戳這裏進入下載頁：https://developer.microsoft.com/en-us/fluentui#/resources

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

在今年 3 月 12 日的時候，微軟更近一部，將原本獨立的Windows 組件庫也徹底和另外三個 Fabric 庫合併到一起，徹底並進 Fluent Design 項目，目前它在 Github 上使用的是 UI Fluent 這個名字，可以說，此刻的 Fluent Design 從設計到開發，已經成為了一個完整而系統的整體了！

「簡而言之，我們合併了兩套庫，UI Fabric 和 Stardust Github 倉庫現在合併到一起，以 Fluent UI 的名字，統一在 Microsoft 的 Github 庫當中了！……我們正在努力避免開發者因為平台的差異而來回切換，在體驗和流程上被打斷。」

結語

如果你是一名 UI 設計師，「亞克力美學」能夠讓你產生更廣闊的設計想象，那麼不妨下載相關的 UI 組件來研究一下。如果你所處的設計團隊正在尋找一套系統化的解決方案，不妨來試試 Fluent Design。

相關鏈接：

Fluent Design 頁面：https://www.microsoft.com/design/fluent/
Fluent Design 相關資源下載：https://developer.microsoft.com/en-us/fluentui#/resources
「亞克力」設計規範：https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic
Fluent UI 項目 Github 主頁：https://github.com/microsoft/fluentui

引用來源：

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5網站_Office改版背後，藏着的這套超全面的寶藏設計系統