Fluent Design System

Fluent Design System

微軟 Build 2017 第二天的主題演講中,微軟拿出了全新的設計範式,為的就是徹底改變沿用多年的平面矩形UI。微軟將這套全新的設計語言名為 Fluent Design System(流暢設計體系),該體系共有五大核心元素,包括Light(光感)、Depth(深度)、Motion(動畫)、Material(材質)和 Scale(縮放) 。

發布

在微軟Build 2017第二天的主題演講中,Windows 10 RS3 是絕對的主角,這次新版作業系統也有了正式名字——Fall Creators Update(秋季創意者更新),在新版作業系統中,微軟為用戶準備了一條時間軸,大家可以用它來管理複雜的工作會話和那些將所有微軟服務綁在一起的 API。最重要的是,微軟拿出了全新的設計範式,為的就是徹底改變沿用多年的平面矩形 UI 。

特色

微軟將這套全新的設計語言名為 Fluent Design System(流暢設計體系),該體系共有五大核心元素,包括Light(光感)、Depth(深度)、Motion(動畫)、Material(材質)和 Scale(縮放) 。

Light(光感)

對電影人來說,演員、道具都不是最重要的,想拍出攝人心魄的震撼畫面,首先要懂如何用光。在設計中,光的重要性也不言而喻,UI 的明暗程度甚至會改變用戶的感知。Belfiore 表示,新的 Light 元素可以創造良好的氛圍,讓套用有一種空間概念。除此之外,在設計互動選單和套用界面時,光的套用也能吸引用戶的注意力,發光的按鈕就能引導用戶輕鬆上手一款套用或提示套用的亮點功能所在 。

Depth(深度)

微軟的 UI 設計經歷過多個階段,先是經典的灰色界面配枯燥的選單,隨後它們搞出了 Metro 設計語言,但無論怎么變化,微軟向用戶呈現信息和工具時主要還是依賴那些無聊的平面設計。有了全新的流場設計體系,微軟將在範式上做一次大變革 。

與傳統的微軟味 UI 相比,Build 大會上展示的新 UI 讓我們見識了微軟的巨大進步,通過放大或伸縮的動作,一些重要的事項會放大呈現在用戶面前,造成一種深度變化的錯覺。藉助 Depth 元素,UI 會呈現出物理環境的變化,這樣能減少審美疲勞,大幅提高用戶黏性 。

Motion(動畫)

過場動畫是 UI 參與感的評判標準之一,Motion 元素的加入將為用戶提供更多好看且互動性十足的動畫,這樣就能更好地吸引用戶注意力。Belfiore 將 Motion 元素的套用比作演員用動作引導觀眾進入故事一樣。“Motion 元素有特殊的魔力,它能讓我們的體驗完全活過來。”他說道。“同時,它還能輕鬆的引導用戶從一個任務過渡到下一個。”微軟此前在 Xbox One 中嘗試過這種更加動態和亮色系的過渡動畫,結果顯示這種設計很快就能吸引用戶的注意,同時提升用戶參與的欲望 。

Material(材質)

與其他流暢設計體系的元素類似,Material 也是對 Windows 傳統視覺風格的無情嘲笑。傳統的微軟 UI 功能區確實能完成不少功能,但它與物理世界沒有任何聯繫。Belfiore 認為要想讓用戶愛上 Windows 套用設計,就必須去模仿現實世界中各種物質的質感 。

“我們希望在設計中加入更多類似的元素,質感非常重要。”Belfiore 說道。“這樣就能吸引用戶去觸碰,去加入整個互動過程。”看起來簡單,做起來並不容易,因為最新的 Fall Creator Update 加入了更棒的語音控制、觸控互動和觸控筆輸入等功能,如何吸引用戶用新功能完成互動是設計師必須要考慮的 。

Scale(縮放)

微軟全新設計語言的大多數功能是為傳統計算環境服務的,其目的是讓用戶能用各種周邊和配件完成互動,但 Scale 元素卻顯得與眾不同。在這個元素上,微軟押注了自己的未來。對數字物體的縮放是 3D 互動界面和 VR/AR 時代的必備功能 。

在電腦顯示器上看起來較為合適的物體放在 AR 或 VR 頭戴設備中觀看,可能就會變得過大或過小。因此,虛擬物體大小的縮放是第一視角 UI 體驗的關鍵因素之一 。

相關詞條

熱門詞條

聯絡我們