每一代 Windows 操作系統更新都伴隨著設計語言的變化。最初的 Windows 經典外觀(Classic Style)、Windows XP 時代的 Luna、Windows Vista 和 Windows 7 時代的 Aero Glass、Windows 8.x 時代的 Metro,一直到最為大傢所熟知的 Windows 10 亞克力(Acrylic),不同的視覺風格和系統版本一一對應,相信在很多人的記憶中都留下瞭烙印。

剛亮相不久、目前已經可以通過 Windows 預覽體驗計劃 Dev 渠道體驗到的 Windows 11 也不例外 —— 雖然相比 Windows 10,這次 Windows 11 在設計風格上的變化在第一時間非常容易讓人混淆:

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

同樣是看上去「半透明」的設計,Windows 11 相比 Windows 10 究竟有什麼不一樣?在這篇文章中,我們就來對這個問題進行解答。

「亞克力」的美麗與代價

亞克力(Arcrylic)作為 Windows Fluent Design 的系統組件之一,在微軟開發文檔中被描述為一種「用於創建半透明紋理」的畫筆。

換句話說,亞克力並非你在 Windows 10 中看到的某個應用、某個窗口或某個界面控件,它是一種材料,一種通過透明度設計來為窗口內容增添紋理和深度的手段

事實上,符合微軟設計標準的亞克力效果需要非常復雜的混合設計,包括對桌面背景、高斯模糊、明度混合、色調混合以及噪點材質的綜合搭配。

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

亞克力的構成

與之對應的,微軟也提供瞭 5 種具體的 屬性參數 來幫助開發者打造適合自己的亞克力效果。所以盡管很多時候我們都將 Windows 10 中的半透明效果叫做是「亞克力」,但實際看到的效果有可能是千差萬別的:

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

不同屬性參數數值決定瞭亞克力的實際呈現效果

如果以某個具體的應用窗口為標的,亞克力可以被分為背景亞克力和應用內亞克力兩種:前者可以看作是將應用窗口從桌面壁紙和其他應用窗口之間區分開來的手段,後者則主要用於在應用內部打造焦點和層次感。

比如在最新版 MyerSplash 當中,應用主體窗口在進行壁紙瀏覽時所采用就是背景亞克力,此時如果拖動其窗口,我們能夠從 MyerSplash 的窗口背景中隱約看到其後的所有內容,無論是桌面壁紙還是其他應用窗口中的圖文內容:

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

MyerSplash 主界面窗口的亞克力效果

但點擊 MyerSplash 界面右上角的齒輪按鈕進入應用設置,則會發現這裡運用瞭應用內亞克力,此時 MyerSplash 的亞克力效果則以應用內的壁紙瀏覽界面為標的,透過設置界面能夠隱約看到的內容其實是應用內的壁紙展示內容,拖動 MyerSplash 窗口時,被模糊的背景內容不會因為窗口位置的改變而發生變化:

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

MyerSplash 設置界面用到的就是應用內亞克力

而如果以具體的應用場景為例,亞克力效果則常常在應用在垂直窗格和一些瞬態圖面當中——雖然微軟並不建議在垂直窗格中應用亞克力,但 Windows 10 內置的日歷、Groove 音樂、郵件等等應用都在左側導航窗格區域使用瞭亞克力材料;

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

日歷應用的側欄也是亞克力效果

瞬態圖面中的亞克力效果則在上下文菜單、彈出控件、彈出窗口等場景中常見,比如正在測試中的 Edge 93 就在瀏覽器內的彈出菜單中大量運用瞭亞克力材質。

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

Edge 測試中的亞克力風格菜單

最後值得一提的是,亞克力被微軟看作是一種會大量占用 GPU 資源的設計材料,雖然沒有具體的統計數據作為支撐,它的使用依然可能會導致設備功耗增加並縮短電池使用時間。在上文提到的 5 種具體的屬性參數中,就有一項

FallbackColor 的參數用於向亞克力材料提供「回滾機制」的純色參數。

在 Windows 10 中,當設備進入節電模式時 Windwos 會自動禁用所有亞克力效果並將對應區域的顏色設定為回滾參數指定的純色(如果你的設備較老、性能較差,也可以在「個性化 > 顏色設置」手動關閉透明效果);另外,采用背景亞克力效果的窗口在窗口失去焦點時也會暫時禁用亞克力、回滾到純色模式。

讓 Windows 11 的新材質「露餡」

Windows 11 終於為我們帶來瞭更加簡潔、現代化的新版資源管理器,但打開資源管理器後拖動窗口,你會發現 Windows 11 在資源管理器的窗口標題欄區域似乎也用瞭透明效果:

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

這裡看上去的確有點像透明效果

是亞克力嗎?不是。這種一開始甚至被很多人誤解為毛玻璃效果的樣式正是本部分的主角、微軟在 Windows 11 引入的新材質 Mica。

通過上一部分的內容中我們知道,亞克力是一種精密、復雜、華麗,同時又有著一定性能開銷負擔的材料。對當今的各種電子設備而言,任何一點「沒有用在刀刃上」的額外性能開銷,都是值得考慮和優化的。

Mica 就是那個優化方案。

對以「窗口」命名的 Windows 來說,通過視覺設計讓我們在多個應用窗口之間快速把握住焦點是非常有必要的。盡管在視覺效果和實際作用上 Mica 和亞克力非常相似,但二者卻有著本質上的區別。

最為核心的不同在於,Mica 是不透明的

作為一種更加節省性能開銷的材料方案,Mica 僅會在桌面壁紙變化時對壁紙色彩進行一次取樣,通過取樣到的顏色生成材料色彩。所以本部分開頭圖片裡的資源管理器盡管「看上去」似乎是半透明的、能夠隱約看到桌面背景,但呈現這種效果其實隻是因為資源管理器的窗口背景從桌面壁紙預先提取過一次樣式。

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

無論背景內容是什麼,通過 Mica 永遠隻能「看到」桌面壁紙

破解方法也很簡單:如果你在采用 Mica 材質的窗口和桌面壁紙之間擺上其他內容,Mica 就會「露餡」—— 和能夠實時以半透明樣式展示後方內容的亞克力不同,Mica 窗口下方無論有什麼內容,都會呈現最初從壁紙提取到的色彩樣式。

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

微軟建議將 Mica 應用在基礎圖層上,比如窗口背景

也正是因為這種特性,微軟僅建議將 Mica 用在窗口的基礎圖層上。如此一來既能起到突出窗口主體的效果,又不會因為應用在彈窗這種地方但卻無法實時透明帶來令人困惑的視覺效果。

事實上,如果僅僅從視覺效果上來說,Mica 更像是一種亞克力的「低配版」,或者說 Windows 11 針對一些需要長時間、頻繁打開的窗口(比如資源管理器、系統設置)推出的「低功耗定制版」。如果運用得當,它比傳統的純色窗口標題欄更加溫婉、細膩,同時又不會像亞克力那樣帶來太多額外的性能開銷。

其他方面 Mica 則與亞克力大同小異瞭,比如支持明、暗色切換,在窗口失焦時會自動回落到純色效果等等。

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

透明效果目前同時掌管亞克力和 Mica

有意思的是,盡管 Mica 本身不算是一種透明的控件材料,但在 Windows 11 中它依然受「個性化 > 顏色」下的「透明效果」選項控制。如果你關閉瞭這個選項,Mica 的取色效果也會隨亞克力效果一並消失。

小結:亞克力與 Mica

盡管看上去很像「半透明」,但 Windows 11 引入的 Mica 的確是不透明的。要在 Windows 11 中將亞克力和 Mica 區分開來的方法也很簡單 —— 在窗口和桌面壁紙之間塞點其他內容作為背景就好。

你以為是半透明?Windows 11 新材質如何欺騙你的眼睛

煙霧效果,用於強調對話框內容

同時我們也不難看出,Mica 並非用於取代亞克力的。事實上,它和亞克力、煙霧(Smoke)效果一起構成瞭 Windows 11 的主要「材料」類型。如果你對 Windows 11 的其他設計規范感興趣,不妨進一步閱讀微軟官方的設計文檔。

創作者介紹
創作者 3C王者 的頭像
3C王者宇晨

3C王者

3C王者宇晨 發表在 痞客邦 留言(0) 人氣( 3 )