新版Win10就長(zhǎng)這樣？剖析微軟Fluent Design System

　　毋庸置疑，Windows 10 RS3就是Build 2017開(kāi)發(fā)者大會(huì)第二天主題演講中的絕對(duì)主角，它也因此有了一個(gè)新的名字——Windows 10 Fall Creators Update（Windows 10秋季創(chuàng)意者更新）。盡管這個(gè)名字中并沒(méi)有多少創(chuàng)意性，但微軟卻在這次更新中增加了不少新功能，在UI美學(xué)上更是有了極大的進(jìn)步！

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

　　據(jù)了解，微軟將這套全新的設(shè)計(jì)語(yǔ)言名為Fluent Design System（流暢設(shè)計(jì)體系），該體系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動(dòng)畫）、Material（材質(zhì)）和 Scale（縮放）。

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

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

　　Light（光感）

　　對(duì)電影人來(lái)說(shuō)，演員、道具都不是最重要的，想拍出攝人心魄的震撼畫面，首先要懂如何用光。在設(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（深度）

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

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

　　Motion（動(dòng)畫）

　　過(guò)場(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)完全活過(guò)來(lái)。”他說(shuō)道。“同時(shí)，它還能輕松的引導(dǎo)用戶從一個(gè)任務(wù)過(guò)渡到下一個(gè)。”

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

　　Material（材質(zhì)）

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

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

　　Scale（縮放）

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

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

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

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

　　當(dāng)然，現(xiàn)在就來(lái)評(píng)述流暢設(shè)計(jì)體系能否成功還為時(shí)尚早，但從中不難看出微軟正在用新的思路審視自家的UI！不過(guò)這樣的新畫風(fēng)確實(shí)讓人有些不太習(xí)慣，新版本的Windows10系統(tǒng)真的會(huì)是這個(gè)模樣嗎？我們將拭目以待。