如果你是 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 當中,讓移動辦公的效率得到直接的提升。
當然,這還不是最大的改變。
「用戶常見操作其實都在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 能夠更好地應用到其他平臺上,微軟并不是單打獨斗,除了接觸開源項目的模式獲得更廣泛的設計師和開發者社區的支持,也借由 Surface Duo 這樣的雙屏硬件項目,和谷歌進行深入的合作,不難想象,iOS 版的 Microsoft 365 應該也是微軟和蘋果合作的產物,而兼容 iOS 平臺的 Fluent Design 背后應該也有官方的影子。
就像我在之前的文章《重磅!柔性屏和雙屏來啦,設計師必學跨屏設計規范》當中所提到的,微軟已經抱著更開放的心態去面對不同的系統,比如 Android。經歷了 Windows 8 和 Windows Phone 的失敗之后,微軟開始擁抱全平臺了,作為開源的受益大戶,微軟更是收購了 Github ,并且在自家的產品上更加兼容并蓄——比如使用 Chromium 內核的 Edge 瀏覽器,在 Win10 系統內置 Linux 子系統,等等。
實際上,在 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 美學的延續,但是得到了更為微妙完整的呈現。
Fluent Design 揚長避短去蕪存菁的一面,就體現在這里。
它的排版設計,繼承自上一代的 Metro 設計語言。去掉復雜的配色,通過不花哨但是足夠清晰的文字排版來劃分層級,體現信息之間的關系,也就是 Fluent Design 和微軟一開始所追求的,讓用戶聚焦于真正擁有的信息——尤其是在這個信息過載的時代。
對比:通過對比來來作為構建視覺層次的基礎。
大小:通過大小來呈現重要性的差異,層級的差異。
臨近:臨近的元素具有強關聯性,通過分組將同類和相關的元素凝集到一起。
留白:與臨近相反,通過間距來分離不同的類別和組。
重復:重復的元素呈現出相似性,這種重復能培養用戶認知,產生連續性,讓設計具有可預測性。
材質:最后再附上材質,UI 具有視覺吸引力。
Fluent Design 本身是自恰的,但是它如果要延伸到其他的系統上,要做的工作并不少。
信息過載和注意力爭奪是今天所有人都必須面對的問題。
去年各大平臺都在有意識地做精簡和整合,twitter 地改版,Facebook 地 F8大會,包括iOS 和 Android 系統地更新,都在兼顧這一問題,而在這個大的語境之下,微軟 CEO Satya Nadella說出了最重要地那句話:
「操作系統已經不再是最重要的層級了。」
對于用戶而言,如果軟件和服務在不同操作系統上90%以上的功能、體驗和服務是一致的,那么本質上在哪個平臺差別都不大。但是,對于設計師、設計團隊乃至于產品團隊而言,就需要面對一個問題:怎么讓日趨復雜龐大的產品和服務,在每個平臺上的體驗都是一致的。
很多時候,想要讓產品在 iOS 和 Android 平臺上保持一致的體驗,需要做妥協。如果再考慮到移動端和桌面端,你需要為一致性付出更大的代價,產品越復雜,需要付出的努力越多。而 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。