2021 年 6 月，微軟發(fā)布了全新的 Windows 11 操作系統(tǒng)，采用了 Fluent Design 平臺(tái)設(shè)計(jì)規(guī)范，視覺(jué)風(fēng)格進(jìn)行了大改版，更美觀、更柔和、更現(xiàn)代。同時(shí)，設(shè)計(jì)上加入了毛玻璃模糊的材料效果、流暢的過(guò)渡動(dòng)畫(huà)和小元素動(dòng)畫(huà)。

我體驗(yàn)一段時(shí)間后，有幾個(gè)點(diǎn)感到挺驚喜的：大圓角、卡片、動(dòng)效。因?yàn)檫@幾點(diǎn)不太像我們腦海中固化的 Windows 系統(tǒng)方正設(shè)計(jì)風(fēng)格，倒有點(diǎn) Mac 系統(tǒng)味道了。

其中，我發(fā)現(xiàn)了一些 UI 設(shè)計(jì)細(xì)節(jié)和亮點(diǎn)，覺(jué)得在桌面端產(chǎn)品風(fēng)格上還是有參考價(jià)值的，所以和大家分享下。

圖標(biāo)

在系統(tǒng)圖標(biāo)方面，常規(guī)圖標(biāo)尺寸是 16px，描邊粗細(xì)是 1px，矩形外圓角是 2px，線條末端是圓角，更加親和，符合現(xiàn)代年輕用戶的審美。

在部分場(chǎng)景界面，系統(tǒng)圖標(biāo)采用了雙色的設(shè)計(jì)風(fēng)格，打破了界面的枯燥感，視覺(jué)層次更加豐富。

圖標(biāo)風(fēng)格上，還采用了輕擬物設(shè)計(jì)風(fēng)格，加入了漸變、高光、陰影設(shè)計(jì)手法，圖標(biāo)配色和質(zhì)感可以學(xué)習(xí)下。

圓角

Win 11 系統(tǒng)采用了兩種圓角尺寸：4px 和 8px。8px 圓角用于頂級(jí)容器，比如應(yīng)用程序窗口、彈出窗口和對(duì)話框。4px 用于頁(yè)面內(nèi)元素，比如按鈕、搜索框等控件。從 4 點(diǎn)網(wǎng)格和 8 點(diǎn)網(wǎng)格取值，具有一定的專業(yè)性和統(tǒng)一性。

布局

在系統(tǒng)界面上，Win 11 使用了不同背景色來(lái)區(qū)分層次結(jié)構(gòu)，主次清晰，可以將用戶的注意力集中在最重要的內(nèi)容上。

一般分為兩個(gè)層次：基礎(chǔ)層和內(nèi)容層?；A(chǔ)層是應(yīng)用程序的基礎(chǔ)，可以用灰色背景，位于底層，常用于導(dǎo)航、菜單等相關(guān)功能。內(nèi)容層是主要信息呈現(xiàn)區(qū)域，一般為白色背景，可以是一張大卡片或者多個(gè)連續(xù)排列的小卡片。

比如系統(tǒng)應(yīng)用程序：Microsoft Store 主界面，大卡片通到窗口右側(cè)和底部，使用起來(lái)還是挺舒服的。

比如系統(tǒng)應(yīng)用程序：設(shè)置，多個(gè)連續(xù)的小卡片。

這種布局風(fēng)格簡(jiǎn)潔、新穎，體驗(yàn)后，我覺(jué)得可用性挺高的。

下拉菜單

下拉菜單是很基礎(chǔ)通用的控件，我特地截圖查看了界面標(biāo)注。

連續(xù)的列表之間保留 4px 間距，這點(diǎn)挺好的，可以避免一種場(chǎng)景：導(dǎo)航菜單欄列表同時(shí)存在 selected 態(tài)和 hover 態(tài)，避免背景色黏在一起、圓角搭配不和諧的情況。

還有，反饋框上下左右的空白處間距是 4px，不包含面板描邊，視覺(jué)感官間距看起來(lái)比較和諧。

下拉菜單也出了一種新的交互形式。點(diǎn)擊功能下拉后，下拉菜單直接覆蓋在功能上方，點(diǎn)擊切換蠻爽的，不過(guò)從通用性維度需要再評(píng)估下。

標(biāo)簽欄

標(biāo)簽欄選中態(tài)和未選中態(tài)文字都是黑色系，選中線為藍(lán)色，選中態(tài)也挺明顯的，又不會(huì)很干擾主體內(nèi)容，色彩噪音不會(huì)很大。

動(dòng)效

界面的切換過(guò)渡動(dòng)畫(huà)、單個(gè)元素的反饋動(dòng)畫(huà)，我體驗(yàn)下來(lái)覺(jué)得挺驚喜、挺有趣的。特別是在單個(gè)圖標(biāo)的動(dòng)畫(huà)上，有些圖標(biāo)加入光影漸變變化感覺(jué)挺有質(zhì)感的，連下拉箭頭也有動(dòng)畫(huà)，真細(xì)致呀。

系統(tǒng)應(yīng)用程序 Microsoft Store，左側(cè)導(dǎo)航圖標(biāo)也加入了動(dòng)畫(huà)，挺順滑的。動(dòng)畫(huà)很有細(xì)節(jié)，運(yùn)動(dòng)前有起勢(shì)準(zhǔn)備動(dòng)作，利用重力原理加入了形變，還加入一些修飾元素，豐富運(yùn)動(dòng)效果。

深色模式

該系統(tǒng)也推出了深色模式，相信桌面端產(chǎn)品適配深色模式將是個(gè)趨勢(shì)。設(shè)計(jì)師如果早期能夠把深色模式考慮進(jìn)去，后面適配將大大降低各方成本。

總結(jié)

以上就是我體驗(yàn) Windows 11 UI 后發(fā)現(xiàn)的細(xì)節(jié)和亮點(diǎn)總結(jié)。在規(guī)范層，圖標(biāo)風(fēng)格、圓角、界面布局、下拉菜單、標(biāo)簽欄的定義都挺多細(xì)節(jié)可以挖掘打磨的，設(shè)計(jì)師也需要根據(jù)自身產(chǎn)品調(diào)性考慮該系統(tǒng)規(guī)范的可用性，不能盲目跟隨。在動(dòng)效層，設(shè)計(jì)師發(fā)揮的空間和價(jià)值挺大的，可以多做些創(chuàng)意。