效果預覽

Windows 7 Aero 毛玻璃美學在移動端導航的移植：半透明磨砂背景 + 精細高光邊框 + 立體按鈕狀態 + 圖標系統。適用於桌面端網頁、混合 App、設計系統組件庫展示。

核心視覺語言拆解

• 背景：徑向漸變 #1592d7 → #136da2，模擬螢光燈光源
• 導航欄：黑色 10% 填充 + 雙 1px 邊框 (白/黑疊加) + 高斯模糊 9px 底紋 → 毛玻璃質感
• 按鈕：填充 0% + 完整圖層樣式堆疊 (投影/內陰影/斜面浮雕/漸變疊加/描邊) → 三態可切換
• 反光高光：白色矩形 + 黑白漸變蒙版 + 選區羽化刪除 + 10% 不透明度

詳細製作步驟

第一階段：畫布與背景氛圍

1. 新建 600×400 px (或 375×667 px 手機比例)
2. 前景 #1592d7、背景 #136da2，漸變工具 (G) 選「徑向漸變」，從中心向邊角拖拽

第二階段：導航欄毛玻璃基礎

3. 自定義形狀工具 (U) → 選「圓角矩形」或矩形路徑，畫導航欄輪廓

4. 新建圖層「Nav_BG」，前景白色，路徑面板右鍵「填充路徑」

5. 刪除路徑，濾鏡 → 模糊 → 高斯模糊 (9px) → 混合模式「柔光」，不透明度 30%

6. 柔邊橡皮擦 (E) 處理邊緣過渡

7. 放入圖標 (置入 → 智能物件)，對齊導航欄圖標區

第三階段：導航欄精細邊框與分隔線

9. 新建圖層「Nav_Bar」，矩形選框 (M) 拉 40-50px 高矩形 (距底部 ~100px)，填黑 #000000

10. 填充不透明度 10%
11. 新建圖層「Dividers」，單行/單列選框工具畫 1px 線：頂部白 #ffffff、底部黑 #000000
12. 不透明度 50%，複製一層置於底部

第四階段：立體按鈕系統 (核心亮點)

13. 基礎按鈕層：矩形選框畫按鈕區域 → 新建圖層「Btn_Base」填黑 → 取消選區 → 填充 0% → 添加圖層樣式：

按鈕圖層樣式完整參數 (預設狀態)

樣式	關鍵參數
斜面與浮雕	內斜面、平滑、深度 100%、方向向上、大小 5px、柔化 0px、角度 120°、高度 30°、高光「線性減淡」白 70%、陰影「線性加深」黑 50%
描邊	大小 1px、位置「內部」、混合模式「正常」、不透明度 50%、顏色 #003366 (深藍)
內陰影	混合模式「正片疊底」、黑 40%、角度 120°、距離 1px、擴展 0、大小 2px
漸變疊加	混合模式「疊加」、漸變「黑→白」、線性、角度 90°、縮放 100%、不透明度 20%
外發光	混合模式「螢幕」、白 #ffffff、不透明度 30%、擴展 0%、大小 3px

14. 反光層 (Btn_Highlight)：複製「Btn_Base」→ 清除圖層樣式 → 填充 0% → 重新添加樣式：

反光層漸變疊加參數

• 漸變：透明 → 白 (不透明度 40%) → 透明 → 白 (20%) → 透明，位置 0%, 30%, 50%, 70%, 100%
• 樣式：線性，角度 -90° (自上而下)，縮放 100%
• 混合模式：疊加，不透明度 60%

第五階段：按鈕頂部高光細節

15. 新建圖層「Btn_TopHighlight」，矩形選框畫兩細長白色矩形 (頂部邊緣、中部)

16. 添加圖層蒙版 → 黑白線性漸變 (白→黑) 由上往下 → 自然過渡

17. 路徑轉選區 → 羽化 2px → 填白 → 載入反光層選區 → 反選 → 刪除多餘 → 不透明度 10%

第六階段：複製變體與最終輸出

18. 複製按鈕組 (含 Base/Highlight/TopHighlight) → 修改基礎填充色產生變體

19. 最終組合預覽

現代化重構建議 (Design System 視角)

傳統 PS 做法	現代設計系統做法
圖層樣式堆疊模擬材質	定義 Design Tokens：`color-primary`, `shadow-elevation-2`, `border-radius-md`, `glass-morphism-bg`
手動複製修改顏色產生變體	Figma/Sketch/PS 組件變體 (Variants)：預設/懸停/按下/禁用/載入中
切圖給前端 (PNG/SVG)	設計令牌直通工程：Style Dictionary → CSS-in-JS / Tailwind Config / Flutter Theme
固定像素尺寸	相對單位 (rem/em) + 響應式斷點 + 容器查詢
單一設計稿	多主題模式 (Light/Dark/High Contrast) 同結構換 Token

關鍵技巧備忘

• 填充 0% ≠ 不透明度 0%：填充 0% 隱藏圖層像素內容，但保留圖層樣式渲染 —— 制作「只有效果無內容」圖層的核心技巧
• 智能物件封裝按鈕組：雙擊編輯源文檔，所有實例同步更新，支援嵌套覆寫
• 向量形狀層優於像素層：無限縮放、屬性面板即時修改圓角/描邊、匯出 SVG 無損
• 全域光一致性：所有圖層樣式勾選「使用全域光」，統一光源角度 (建議 120°/90°)