新版Windows 長這樣:剖析微軟全新設計語言 Fluent Design System

2021-01-04 雷鋒網

雷鋒網按:在微軟 Build 2017 第二天的主題演講中,Windows 10 RS3 是絕對的主角,這次新版作業系統也有了正式名字——Fall Creators Update(秋季創意者更新),這名字雖然一點「創意性」都沒有,但老道的微軟還是給新版系統加足了有用的新功能,在 UI 美學上它更是大有進步。

在新版作業系統中,微軟為用戶準備了一條時間軸,大家可以用它來管理複雜的工作會話和那些將所有微軟服務綁在一起的 API。最重要的是,微軟拿出了全新的設計範式,為的就是徹底改變沿用多年的平面矩形 UI。

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

新的設計體系是微軟與僵硬老舊設計思想的訣別。「是時候跟局限在一個平面上的矩形說拜拜了。」微軟的 Joe Belfiore 在 Build 大會上介紹新設計語言時說道。「新的設計語言不止與視覺有關,它還涉及交互模式、空間和全新元素的整合方式。」

下面,我們就來快速瀏覽微軟全新設計語言的五大核心元素和它們對未來應用設計的影響吧。

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 體驗的關鍵因素之一。

從理論上來講,以上五大核心元素確實能幫微軟創造出更加穩定且互動性十足的用戶體驗,但流暢設計體系下的 Windows 到底長什麼樣,微軟在主題演講上並未披露太多信息。不過,在預告片片尾,一些範例還是讓我們燃起了一些希望。

可以肯定的是,這些範例中的圖片大多還處在概念設計階段,但它們確實是流暢設計核心原則的體現。就拿全新桌面來說,Depth 元素的使用和光影的變換讓我們能很清楚的看出每個窗口所處的位置。同時,場景中的物體都有不同的感覺,它們變得更加真實了,這裡就實踐了 Material 元素。此外,上面三種元素的運用還讓人感覺到了 Scale 元素的存在,因為整個 UI 看起來就像不同的窗口被投影在牆上,但卻有一種 AR 式的觀感。

現在給流暢設計體系能否成功下論斷還太早,但我們可以看出微軟確實用新思路對自家 UI 進行了審視。雖然變化太大讓人看起來有些不習慣,但下一版 Windows 如果真能大變樣,還是挺令人興奮的。

Via. Engadget,雷鋒網(公眾號:雷鋒網)編譯

雷鋒網版權文章,未經授權禁止轉載。詳情見轉載須知。

相關焦點

  • 新版Windows長這樣:剖析微軟全新設計語言FDS
    在新版作業系統中,微軟為用戶準備了一條時間軸,大家可以用它來管理複雜的工作會話和那些將所有微軟服務綁在一起的 API。最重要的是,微軟拿出了全新的設計範式,為的就是徹底改變沿用多年的平面矩形 UI。雷鋒網獲知,微軟將這套全新的設計語言名為 Fluent Design System(流暢設計體系),該體系共有五大核心元素,包括Light(光感)、Depth(深度)、Motion(動畫)、Material(材質)和 Scale(縮放)。新的設計體系是微軟與僵硬老舊設計思想的訣別。「是時候跟局限在一個平面上的矩形說拜拜了。」
  • 微軟Fluent Design,一個新鮮的設計風格.
    接下來咱們一起來感受下Fluent Design的設計,總體來說,毛玻璃材質,主次分明,比之前咱們看到的過分強調凸起感的擬物風格要好上很多。在微軟的New Office中,我們可以具體感受一下APP的UI設計
  • 這套第三方Fluent Design圖標設計集預示未來Windows 10的風格
    Fluent Design是微軟對Windows 10和其他幾款產品未來的一大賭注,因為該公司使用這種新的設計語言來給其產品組合帶來新鮮和現代的外觀。但另一方面,在Windows 10中實施Fluent Design並完成改造所需的時間比預期的要長。
  • 微軟打造新版Windows 10 "設置"應用採用了基於微軟Fluent Design...
    微軟打造新版Windows 10 "設置"應用採用了基於微軟Fluent Design語言的新圖標 來源:快科技 • 2020-11-03 10:51:01
  • 微軟Win10 流暢設計體系(Fluent Design System)是什麼?
    IT之家5月12日消息 在昨晚的Build 2017大會上,微軟喬北峰重新歸來,宣布了全新的Microsoft Fluent Design System(微軟流暢設計體系),這就是此前IT之家經常在報導中提到的Project NEON設計語言正式名稱。
  • 微軟推進 Fluent Design 設計語言:網頁版效果展示
    Build 2017 大會上,微軟宣布名為 Fluent Design System 的全新設計語言,會在即將到來的 Windows 10 秋季創作者更新中亮相。
  • Windows 10記事本概念設計:基於Fluent Design語言打造
    目前對記事本應用的優化,微軟主要集中在後臺方面,例如添加行尾符(End-of-Line)等等,而在外觀方面至今仍未獲得全面的改造。知名概念設計師 Zee-Al-Eid Ahmad Rana 近日就帶來了基於 Fluent Design 的現代化記事本。
  • 微軟宣布Office 365移動應用全產品線將採用Fluent Design設計
    首頁 > 快訊 > 關鍵詞 > 微軟最新資訊 > 正文 微軟宣布Office 365移動應用全產品線將採用Fluent Design設計
  • [圖]Windows 10記事本概念設計:基於Fluent Design語言打造
    目前對記事本應用的優化,微軟主要集中在後臺方面,例如添加行尾符(End-of-Line)等等,而在外觀方面至今仍未獲得全面的改造。知名概念設計師  Zee-Al-Eid Ahmad Rana 近日就帶來了基於 Fluent Design 的現代化記事本。
  • 微軟打造新版Windows 10:全新UI曝光!
    微軟打造新版Windows 10:全新UI曝光!>2020-11-03 15:33出處/作者:快科技整合編輯:佚名責任編輯:longxiaojun2   微軟之前表示,正在減緩Windows 10大更新版本的頻率,這樣可以有更多時間來更新,而實際上他們也是在這樣做。
  • Windows 10即將迎來大更新 將採用Fluent Design設計語言更簡約
    【機鋒資訊】近日,有外媒報導將在2021年的21H2更新中,啟用全新的UI界面,而新界面的風格看起來更加清爽、簡潔,整個系統也將更多的使用Fluent Design設計語言。從目前網絡上的流傳的截圖中我們預計新版本的的Windows 10作業系統將更加統一,更加簡約。
  • 微軟新語言Fluent Design介紹 一起來看看吧!
    微軟新語言Fluent Design介紹 一起來看看吧!時間:2017-05-20 13:57   來源:系統天堂   責任編輯:沫朵 川北在線核心提示:原標題:微軟新語言Fluent Design介紹 一起來看看吧! Fluent Design是什麼?
  • Xbox Store新界面好贊 採用Fluent Design設計語言
    可以看到,這些截圖展示了適用於Windows 10系統的Xbox Store新用戶界面,其最大特色是融入了Fluent Design設計語言,整個界面顯得非常富有科技感,同時在交互體驗上也更加舒適。微軟更新Xbox Store設計語言,自然是和次世代主機Xbox Series X有很大的關係,相信這臺新主機會帶給玩家出色的遊戲體驗。 02微軟Xbox One X詳細參數
  • 消息稱微軟正在開發全新的文件管理器:採用Fluent Design
    2017年微軟在Build大會上公布了全新的設計語言——Fluent Design System, 它由5大元素組成:光感、深度、動效、材質、縮放。
  • 微軟推送Win10新版你升級了嗎-微軟,windows 10,win...
    Windows 10的開始菜單一直是人們議論紛紛的熱點話題,而微軟在早前就已經宣布過,要在Win10新版採用新設計開始菜單的消息。現在,這個Win10新版終於來了。微軟現在發布了每半年一次的Win10功能更新,為普通用戶推送了Windows 10 2020年10月更新(也稱 20H2 版本)。這個新版有何獨特之處?
  • c語言的system小知識
    C語言system的用法systen()在頭文件stdlib.h中system()是C語言中為了調用windows系統命令來設置。例:system(「cls」 );//清屏system(「pause" );//暫 停system("title名宇」);//設置窗口名system(「time/T」);//顯 示當前時間
  • 微軟Win10流暢設計體系FluentDesignSystem示例應用圖賞
    5月12日消息微軟在Build2017大會上發布了秋季創意者更新和全新的微軟流暢設計體系(FluentDesignSystem),IT之家也整理了《》的文章幫助大家認識新設計。IT之家Win10一文看懂微軟FluentDesignSystem微軟FluentDesignSystem此前內部代號為ProjectNEON,微軟流暢設計體系分為五個元素Light(光感)、Depth(深度)、Motion(動效)、Material(材質)、Scale(縮放)。
  • Win10記事本概念設計:基於Fluent Design語言打造
    目前對記事本應用的優化,微軟主要集中在後臺方面,例如添加行尾符(End-of-Line)等等,而在外觀方面至今仍未獲得全面的改造。知名概念設計師 Zee-Al-Eid Ahmad Rana 近日就帶來了基於 Fluent Design 的現代化記事本。
  • 微軟公布新版Windows 10 Office應用 免費使用
    去年,微軟更新了web版Office的體驗,簡化網站使用流程,以幫助用戶更快地恢復工作。12月20日,微軟宣布將推出Windows 10版web office應用,簡稱Office,而且即日起Windows Insiders快速通道用戶已經可以下載安裝使用。
  • 微軟使用 Fluent Design 對應用圖標進行統一調整,並更新 Windows...
    今天微軟設計團隊宣布,通過和公司產品團隊的合作重新設計了 100 多款應用/服務圖標。所有新圖標都是遵循微軟的 Fluent Design 語言來設計,代表著更強大、更統一的微軟品牌。