扁平化設計進化至「半透明/磨砂玻璃」風格，核心難點在於無實體厚度的圖層疊加中構建真實光學邏輯：折射、反射、次表面散射、邊緣菲涅爾高光。本教學以一款半透明淺藍色圖標為例，拆解圖層樣式參數化構建與非破壞編輯流程。

視覺拆解：三層疊加結構

1. 基座層：圓角矩形，漸變疊加（垂直雙色漸變）+ 投影（定位空間位置）。
2. 圖形層組：三個幾何形狀（兩側圓角矩形 + 中央正圓），共享內陰影/內發光模擬內凹/凸起雙重觸感。
3. 群組級投影：整體懸浮感，區分圖標與背景層級。

最終效果：半透明淺藍扁平圖標，玻璃質感清晰可辨

逐層參數化構建

步驟 1：基座層——空間錨點

• 形狀工具：圓角矩形，半徑 16px，填充透明。
• 圖層樣式：

漸變疊加：線性，角度 90°，色標：#e8f4fd (0%) → #c8e0f0 (100%)
投影：混合模式正片疊底，顏色 #1a3a5c，不透明度 30%，角度 90°，距離 4px，擴展 0，大小 8px，雜色 0%

基座層漸變疊加參數

基座層投影參數

基座層效果預覽

步驟 2：圖形層組——內部光學邏輯

三個形狀圖層（左圓角矩形、右圓角矩形、中央正圓）分別設置：

• 內陰影：模擬頂部邊緣厚度折射高光。混合模式螢幕，顏色 #ffffff，不透明度 40%，角度 -90°，距離 2px，阻塞 0，大小 4px。
• 內發光：模擬材質內部次表面散射。混合模式正片疊底，顏色 #1a5a8a，不透明度 25%，噪聲 0%，來源邊緣，阻塞 50%，大小 8px。

三個形狀圖層結構

側向形狀圖層樣式參數

側向形狀效果

中央正圖形層樣式：內陰影+內發光

中央正圖形內陰影與內發光參數

步驟 3：群組級投影——懸浮分層

選中三圖形圖層 → Ctrl+G 成組「Icon_Shapes」 → 組添加圖層樣式「投影」：

混合模式：正片疊底，顏色 #0d2b45，不透明度 40%
角度：90°，距離：6px，擴展：0，大小：12px，雜色：0%
輪廓：線性，消除鋸齒：開啟

群組投影參數與效果

色彩系統：淺藍色系的克制與層次

角色	色值	用途	色彩理論依據
主色調	#3a8fd0	品牌識別色	色相 205°，高飽和度，信任/科技屬性
高光色	#e8f4fd	基座漸變亮部/內發光	主色調 + 明度 90%，飽和度 15%
陰影色	#1a3a5c	投影/內陰影核心	主色調 - 明度 60%，飽和度 +20%
內部散射色	#1a5a8a	內發光	主色調 - 明度 30%，模擬次表面散射暖移

非破壞工作流優勢

• 所有效果在圖層樣式與矢量形狀層面，任意縮放無鋸齒。
• 修改主色調：僅需更新基座漸變色標與內發光顏色，全圖標聯動更新。
• 導出：右鍵圖層組 → 「匯出為」→ 選擇 1x/2x/3x PNG，或 SVG（需形狀轉路徑）。

最終效果及變體：不同圖形組合、色調微調展示

延伸應用場景

• iOS/macOS Big Sur 風格 App 圖標（系統自帶磨砂玻璃材質參考）。
• 數據儀表板圖標：半透明狀態指示器（綠/黃/紅色調變體）。
• AR/VR 介面元素：半透明穿透感符合空間計算視覺語言。
• 動態圖標：After Effects 導入 PSD 圖層組，關鍵幀動畫「內發光不透明度」模擬呼吸燈效果。

半透明扁平圖標的本質是「光學薄膜模擬」。掌握圖層樣式參數背後的物理意義（折射率對應內發光顏色/不透明度、表面粗糙度對應高光大小/銳度），即可脫離教程參數，針對任何品牌色、任何形狀快速構建自洽的玻璃質感系統。