教程簡介

Vista/Aero 風格以其半透明玻璃質感、柔和發光邊緒、豐富漸變層次著稱。本教程將演示如何純用圖層樣式 (無濾鏡、無手繪) 構建一枚標準的 Vista 風格錯誤提示圖標 (紅色圓環 + 白色叉號)，涵蓋基礎圓環、內發光玻璃感、紅色漸變填充、雙層文字效果、頂部高光罩等完整細節。適合學習系統級 UI 圖標規範與圖層樣式進階組合的設計師。

最終效果

詳細步驟參數全記錄

文件設定

• 800×600px、72dpi、RGB、背景透明或中性灰。

第一層：外圓環 (灰色基礎金屬環)

1. 橢圓選框工具按 Shift 拉正圓選區，新建圖層填充灰色 (#737678)。
2. 圖層樣式：

樣式	參數
內發光	模式「正常」、不透明度 100%、雜色 0%、來源「邊緣」、阻塞 15%、大小 4px、範圍 50%、漸變「前景到透明」(白→透)
漸變疊加	模式「正常」、不透明度 100%、線性、勾選「與圖層對齊」、角度 35°、縮放 100%、漸變：灰(#737678)→白(#FFFFFF)→灰(#737678)
描邊	大小 1px、位置外部、模式正常、不透明度 100%、顏色灰 #737678

第二層：內圓填充 (紅色玻璃質感)

1. 新建圖層，橢圓選區略小於外環，填充綠色 (臨時)，稍後由樣式完全覆蓋。
2. 圖層樣式：

樣式	參數
內發光	模式「疊加」、不透明度 15%、來源「邊緣」、大小 30px、範圍 50%、漸變「前景到透明」(紅→透)
斜面與浮雕	內斜面、平滑、深度 200%、方向上、大小 3px、軟化 0、角度 120°、使用全局光、高度 30°、高光「正常」白 40%、陰影「正片疊底」黑 5%
漸變疊加	模式「正常」、不透明度 100%、線性、與圖層對齊、角度 90°、縮放 100%、漸變編輯器三色停：A(位置 0%) RGB(202,37,37)、B(50%) RGB(115,0,0)、C(100%) RGB(227,67,67) —— 經典 Vista 紅漸變
描邊	1px、外部、正常、100%、灰 #737678

第三層：白色叉號 "X" (頂層符號)

1. 文字工具輸入 "X"，字體 "Arial Black" 或粗體無襯線、300pt、銳利、白色。
2. 圖層樣式：

樣式	參數
投影	模式「正片疊底」、黑、不透明度 41%、角度 120°、使用全局光、距離 2px、擴展 0%、大小 5px
描邊	1px、外部、正常、100%、白

第四層：次級 "X" (內嵌壓入感)

1. 複製 "X" 圖層，清除樣式，改字體顏色白 (同前)。
2. 圖層樣式：僅勾選「漸變疊加」。

漸變疊加參數
模式「正常」、不透明度 100%、線性、與圖層對齊、角度 90°、縮放 100%、三色停：A(0%) RGB(246,246,246)、B(50%) RGB(157,157,157)、C(100%) RGB(246,246,246) —— 模擬凹陷壓入的明暗轉折

第五層：頂部高光罩 (玻璃頂部反光)

1. 新建圖層，橢圓選區拉扁橢圓 (寬約圓環 80%、高約 15%)，填白，填充 10%。
2. 無需樣式，僅靠低填充白色疊加模拟頂部環境反光帶。

Vista/Aero 風格圖標設計規範總結

• 配色體系：紅(錯誤/關鍵)、綠(成功/啟動)、藍(資訊/鏈接)、黃(警告)、灰(禁用/中性) — 色相固定，明度/飽和度按層級微調。
• 玻璃感公式：填充 0-20% + 斜面與浮雕(內斜面、高光白/陰影黑) + 內發光(疊加/線性減淡、環境色) + 漸變疊加(多色停模擬曲面反光)。
• 邊緣處理：雙層描邊 (外環 1px 灰 + 內圓 1px 灰/白) 定義清晰輪廓層級。
• 符號層級：主符號 (投影+描邊 懸浮感) + 次符號 (漸變壓入感) 雙層疊加，豐富視覺深度。
• 高光罩：頂部 10-15% 高度白色低填充橢圓，是 Vista 風格靈魂細節。

實戰應用建議

• 將上述 5 層結構保存為 .psd 模板，新圖標只需替換「內圓漸變顏色」與「符號文字/形狀」。
• 導出尺寸：16/20/24/32/40/48/64/128/256px，命名 `error_vista_32.png` 等。
• 擴展狀態：懸停 (外發光增強)、按下 (內陰影加深、高光罩縮小)、禁用 (整體不透明度 40%、去色)。
• 團隊協作：輸出 .asl 樣式包 + .psd 模板 + 尺寸規範文檔，確保跨專案風格統一。

Vista 風格雖屬上一代設計語言，但其「參數化圖層樣式構建玻璃質感」的方法論，至今仍是設計系統級 UI 圖標、構建可維護設計系統的核心技能。精通此流程，你將能輕松駕馭 Fluent Design、Material Design 3.0 等現代設計語言中的「材質/高度/光影」表達體系！