效果預覽

本教學示範純圖層樣式構建可複用的網頁按鈕組件系統：圓角矩形基礎形狀 → 多層疊加模擬材質厚度 → 狀態變體（預設/懸停/按下/禁用）→ 智能物件化實現一鍵換色。

核心結構拆解

按鈕 = 基礎形狀層 + 投影層 + 高光層 + 內發光層 + 文字層，每層獨立可控，組合成組（Group）便於管理。

逐步建構流程

第一階段：基礎幾何構建

1. 新建文件：800×600 px，背景 #f0f0f0

2. 繪製主體形狀：圓角矩形工具（U），半徑 8px，繪製 200×50 px 圓角矩形，命名「Base」

3. 添加三角箭頭：多邊形工具（U），邊數 3，繪製三角形，與圓角矩形對齊組合 → 選中兩形狀圖層 → 右鍵「合併形狀」

4. 路徑轉選區：切換「路徑」面板，Ctrl+點擊 路徑縮圖載入選區

第二階段：多層疊加構建材質

5. 基礎填充層：新建圖層 1，選區內填充主色 #2196f3（藍），添加「投影」：距離 2px、大小 4px、不透明度 30%

6. 深色邊框層：新建圖層 2，同選區填充深色 #1565c0，取消選區（Ctrl+D）

7. 橡皮擦做立體邊緣：橡皮擦工具（E），柔邊 50px，不透明度 50%，擦除圖層 2 上緣與左緣，保留右下邊框厚度感

8. 高光層（填充 0% + 樣式）：複製圖層 2 → 填充 0% → 添加圖層樣式：
   • 內陰影：距離 1px、大小 3px、不透明度 50%
   • 斜面與浮雕：內斜面、平滑、深度 100%、大小 5px、高光「線性光」70%、陰影「線性加深」40%
   • 漸變疊加：疊加模式、黑白漸變、角度 90°、不透明度 20%

第三階段：頂部高光細節

9. 橢圓選框工具畫橢圓選區覆蓋按鈕上半部

10. 新建圖層 3，選取 → 反向（Ctrl+Shift+I），填充白色

11. 載入基礎形狀路徑選區 → 反向 → 刪除多餘白色

12. 高斯模糊（半徑 3-5px）柔化高光邊緣

13. 添加圖層樣式：外發光（白色、螢幕、大小 10px）、內陰影（黑色、正片疊底、距離 1px）

第四階段：組件化與變體製作

14. 背景圖層換色測試按鈕適應性

15. 微調圖層 2、圖層 2 副本、圖層 3 位置微調 1-2px 增強立體感

16. 添加文字與文字投影，完成基礎按鈕

17. 建立變體系統：將按鈕組轉為智能物件 → 複製智能物件 → 雙擊編輯源文檔 → 修改「基礎填充層」顏色 → 儲存 → 所有實例同步更新

狀態變體擴展指南

狀態	基礎填充層	邊框層	高光層	文字
預設	#2196f3	#1565c0	正常	白色 #fff
懸停	#1e88e5	#0d47a1	不透明度 +20%	白色 + 外發光
按下	#1976d2	#0d47a1	內陰影距離 3px	位置下移 1px
禁用	#90caf9	#bbdefb	隱藏	#e0e0e0
成功態	#4caf50	#2e7d32	正常	白色
危險態	#f44336	#c62828	正常	白色

導出給前端的最佳實踐

• 切圖方案：啟用「圖層 → 匯出為」→ 選擇 SVG（矢量無損）或 PNG 2x/3x
• CSS 還原建議：開發團隊可直接用 CSS `border-radius`、`box-shadow`、`background: linear-gradient()` 還原，僅需提供設計稿標註與顏色變數
• 設計系統整合：將按鈕組件納入 Figma/Sketch/PS 共享庫，定義 Design Tokens（色彩、間距、圓角、陰影變數）