Windows 11 有哪些 UI 設計細節(jié)

1、2021年6月，微軟發(fā)布了全新的Windows 11操作系統(tǒng)，采用了Fluent Design平臺設計規(guī)范，視覺風格進行了大改版，更美觀、更柔和、更現(xiàn)代。同時，設計上加入了毛玻璃模糊的材料效果、流暢的過渡動畫和小元素動畫。我體驗一段時間后，有幾個點感到挺驚喜的：大圓角、卡片、動效。因為這幾點不太像我們腦海中固化的Windows系統(tǒng)方正設計風格，倒有點Mac系統(tǒng)味道了。其中，我發(fā)現(xiàn)了一些UI設計細節(jié)和亮點，覺得在桌面端產品風格上還是有參考價值的，所以和大家分享下。圖標在系統(tǒng)圖標方面，常規(guī)圖標尺寸是16px，描邊粗細是1px，矩形外圓角是2px，線條末端是圓角，更加親和，符合現(xiàn)代年輕用戶的審美。在

2、部分場景界面，系統(tǒng)圖標采用了雙色的設計風格，打破了界面的枯燥感，視覺層次更加豐富。圖標風格上，還采用了輕擬物設計風格，加入了漸變、高光、陰影設計手法，圖標配色和質感可以學習下。圓角Win 11系統(tǒng)采用了兩種圓角尺寸：4px和8px。8px圓角用于頂級容器，比如應用程序窗口、彈出窗口和對話框。4px用于頁面內元素，比如按鈕、搜索框等控件。從4點網格和8點網格取值，具有一定的專業(yè)性和統(tǒng)一性。布局在系統(tǒng)界面上，Win 11使用了不同背景色來區(qū)分層次結構，主次清晰，可以將用戶的注意力集中在最重要的內容上。一般分為兩個層次：基礎層和內容層。基礎層是應用程序的基礎，可以用灰色背景，位于底層，常用于導航、菜

3、單等相關功能。內容層是主要信息呈現(xiàn)區(qū)域，一般為白色背景，可以是一張大卡片或者多個連續(xù)排列的小卡片。比如系統(tǒng)應用程序：Microsoft Store 主界面，大卡片通到窗口右側和底部，使用起來還是挺舒服的。比如系統(tǒng)應用程序：設置，多個連續(xù)的小卡片。這種布局風格簡潔、新穎，體驗后，我覺得可用性挺高的。下拉菜單下拉菜單是很基礎通用的控件，我特定截圖查看了界面標注。連續(xù)的列表之間保留4px間距，這點挺好的，可以避免一種場景：導航菜單欄列表同時存在selected態(tài)和hover態(tài)，避免背景色黏在一起、圓角搭配不和諧的情況。還有，反饋框上下左右的空白處間距是4px，不包含面板描邊，視覺感官間距看起來比較和

4、諧。下拉菜單也出了一種新的交互形式。點擊功能下拉后，下拉菜單直接在覆蓋在功能上方，點擊切換蠻爽的，不過從通用性維度需要再評估下。標簽欄標簽欄選中態(tài)和未選中態(tài)文字都是黑色系，選中線為藍色，選中態(tài)也挺明顯的，又不會很干擾主體內容，色彩噪音不會很大。動效界面的切換過渡動畫、單個元素的反饋動畫，我體驗下來覺得挺驚喜、挺有趣的。特別是在單個圖標的動畫上，有些圖標加入光影漸變變化感覺挺有質感的，連下拉箭頭也有動畫，真細致呀。系統(tǒng)應用程序Microsoft Store，左側導航圖標也加入了動畫，挺順滑的。動畫很有細節(jié)，運動前有起勢準備動作，利用重力原理加入了形變，還加入一些修飾元素，豐富運動效果。深色模式該