新版Windows長這樣:剖析微軟全新設(shè)計(jì)語言FDS

責(zé)任編輯:editor006

2017-05-12 17:47:14

摘自:雷鋒網(wǎng)

下面,我們就來快速瀏覽微軟全新設(shè)計(jì)語言的五大核心元素和它們對(duì)未來應(yīng)用設(shè)計(jì)的影響吧。雖然變化太大讓人看起來有些不習(xí)慣,但下一版 Windows 如果真能大變樣,還是挺令人興奮的。

 

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

雷鋒網(wǎng)(公眾號(hào):雷鋒網(wǎng))按:在微軟 Build 2017第二天的主題演講中,Windows 10 RS3是絕對(duì)的主角,這次新版操作系統(tǒng)也有了正式名字——Fall Creators Update(秋季創(chuàng)意者更新),這名字雖然一點(diǎn)“創(chuàng)意性”都沒有,但老道的微軟還是給新版系統(tǒng)加足了有用的新功能,在 UI 美學(xué)上它更是大有進(jìn)步。

在新版操作系統(tǒng)中,微軟為用戶準(zhǔn)備了一條時(shí)間軸,大家可以用它來管理復(fù)雜的工作會(huì)話和那些將所有微軟服務(wù)綁在一起的 API。最重要的是,微軟拿出了全新的設(shè)計(jì)范式,為的就是徹底改變沿用多年的平面矩形 UI。

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

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

下面,我們就來快速瀏覽微軟全新設(shè)計(jì)語言的五大核心元素和它們對(duì)未來應(yīng)用設(shè)計(jì)的影響吧。

Light(光感)

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

對(duì)電影人來說,演員、道具都不是最重要的,想拍出攝人心魄的震撼畫面,首先要懂如何用光。在設(shè)計(jì)中,光的重要性也不言而喻,UI 的明暗程度甚至?xí)淖冇脩舻母兄?。Belfiore 表示,新的 Light 元素可以創(chuàng)造良好的氛圍,讓應(yīng)用有一種空間概念。除此之外,在設(shè)計(jì)交互菜單和應(yīng)用界面時(shí),光的應(yīng)用也能吸引用戶的注意力,發(fā)光的按鈕就能引導(dǎo)用戶輕松上手一款應(yīng)用或提示應(yīng)用的亮點(diǎn)功能所在。

Depth(深度)

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

微軟的 UI 設(shè)計(jì)經(jīng)歷過多個(gè)階段,先是經(jīng)典的灰色界面配枯燥的菜單,隨后它們搞出了 Metro 設(shè)計(jì)語言,但無論怎么變化,微軟向用戶呈現(xiàn)信息和工具時(shí)主要還是依賴那些無聊的平面設(shè)計(jì)。有了全新的流場(chǎng)設(shè)計(jì)體系,微軟將在范式上做一次大變革。

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

Motion(動(dòng)畫)

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

過場(chǎng)動(dòng)畫是 UI 參與感的評(píng)判標(biāo)準(zhǔn)之一,Motion 元素的加入將為用戶提供更多好看且互動(dòng)性十足的動(dòng)畫,這樣就能更好地吸引用戶注意力。Belfiore 將 Motion 元素的應(yīng)用比作演員用動(dòng)作引導(dǎo)觀眾進(jìn)入故事一樣。“Motion 元素有特殊的魔力,它能讓我們的體驗(yàn)完全活過來。”他說道。“同時(shí),它還能輕松的引導(dǎo)用戶從一個(gè)任務(wù)過渡到下一個(gè)。”

微軟此前在 Xbox One 中嘗試過這種更加動(dòng)態(tài)和亮色系的過渡動(dòng)畫,結(jié)果顯示這種設(shè)計(jì)很快就能吸引用戶的注意,同時(shí)提升用戶參與的欲望。

Material(材質(zhì))

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

與其他流暢設(shè)計(jì)體系的元素類似,Material 也是對(duì) Windows 傳統(tǒng)視覺風(fēng)格的無情嘲笑。傳統(tǒng)的微軟 UI 功能區(qū)確實(shí)能完成不少功能,但它與物理世界沒有任何聯(lián)系。Belfiore 認(rèn)為要想讓用戶愛上 Windows 應(yīng)用設(shè)計(jì),就必須去模仿現(xiàn)實(shí)世界中各種物質(zhì)的質(zhì)感。

“我們希望在設(shè)計(jì)中加入更多類似的元素,質(zhì)感非常重要。”Belfiore 說道。“這樣就能吸引用戶去觸碰,去加入整個(gè)交互過程。”看起來簡(jiǎn)單,做起來并不容易,因?yàn)樽钚碌?Fall Creator Update 加入了更棒的語音控制、觸控交互和觸控筆輸入等功能,如何吸引用戶用新功能完成交互是設(shè)計(jì)師必須要考慮的。

Scale(縮放)

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

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

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

新版 Windows 長這樣:剖析微軟全新設(shè)計(jì)語言 Fluent Design System

從理論上來講,以上五大核心元素確實(shí)能幫微軟創(chuàng)造出更加穩(wěn)定且互動(dòng)性十足的用戶體驗(yàn),但流暢設(shè)計(jì)體系下的 Windows 到底長什么樣,微軟在主題演講上并未披露太多信息。不過,在預(yù)告片片尾,一些范例還是讓我們?nèi)计鹆艘恍┫M?/p>

可以肯定的是,這些范例中的圖片大多還處在概念設(shè)計(jì)階段,但它們確實(shí)是流暢設(shè)計(jì)核心原則的體現(xiàn)。就拿全新桌面來說,Depth 元素的使用和光影的變換讓我們能很清楚的看出每個(gè)窗口所處的位置。同時(shí),場(chǎng)景中的物體都有不同的感覺,它們變得更加真實(shí)了,這里就實(shí)踐了 Material 元素。此外,上面三種元素的運(yùn)用還讓人感覺到了 Scale 元素的存在,因?yàn)檎麄€(gè) UI 看起來就像不同的窗口被投影在墻上,但卻有一種 AR 式的觀感。

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

鏈接已復(fù)制,快去分享吧

企業(yè)網(wǎng)版權(quán)所有?2010-2024 京ICP備09108050號(hào)-6京公網(wǎng)安備 11010502049343號(hào)