教程目標

從零構建一枚具有壓感回彈、材質厚度、高光邊緣、投影深度的立體下載按鈕，全程使用矢量形狀 + 圖層樣式，無損縮放，適合 UI 設計組件庫製作。

最終效果

製作步驟

1. 按鈕基座

• 新建 400 × 300 px，背景白。
• 新建圖層，圓角矩形工具畫主體形狀（半徑 ~20 px）。
• 圖層樣式：漸變疊加(垂直雙色) + 內陰影(上邊緣高光) + 內發光(邊緣微光) + 斜面與浮雕(外凸厚度) + 投影(懸浮感)。

2. 下載箭頭圖標

• 新建圖層，輔助線定位，鋼筆工具勾勒箭頭形狀（矢量形狀層）。
• 圖層樣式：漸變疊加(垂直金屬感) + 斜面與浮雕(內凹/外凸邊緣) + 投影(分離感)。

3. 底部高光條（增強可點擊視覺暗示）

• 箭頭下方新建圖層，白色圓角矩形。
• 圖層樣式：漸變疊加(透明→白→透明) + 外發光(柔和擴散)。

4. 文字與整體投影

• 文字工具輸入「DOWNLOAD」或下載圖標字體，顏色深灰，添加細微投影（距離 1px，大小 0）。
• 整組添加群組投影，完成。

設計規範建議

• 圖層命名：`btn_base`、`icon_arrow`、`highlight_bottom`、`txt_label`。
• 顏色變量化：主色調、高光色、陰影色定義為色板，便於主題切換（深色/淺色模式）。
• 狀態擴展：複製組修改樣式參數（如內陰影→外發光）快速生成 Hover/Active/Disabled 狀態。