設計思路

以形狀圖層構建矢量骨架（無限縮放不失真），再通過圖層樣式（倒角浮雕、漸變疊加、內發光、投影等）賦予材質與立體感，最終輸出為 PNG/ICO/SVG 等多種規範尺寸。

最終效果

關鍵步驟

1. 基礎形狀構建

• 圓角矩形工具：120×120px，圓角 20px，色值 #78c549，命名「底板」，置中。
• Ctrl+J 複製「底板」→ 改色 #378404 命名「厚度」，Ctrl+[ 置於底板下。
• 直接選擇工具 (A) 選中底板底部 4 個圓角錨點上移 3px，露出厚度層；同理厚度層頂部圓角錨點下移 3px，避免邊緒鋸齒疊加。

2. 進度條環形結構

• 新建「進度條背景」，橢圓工具 Shift 拉 90×90px 正圓，居中，純黑。
• 路徑選擇工具選中路徑，Ctrl+C/V 複製路徑，Ctrl+T 縮放至 70×70px，路徑操作選「減去頂層形狀」，形成圓環路徑。

3. 進度條填充狀態

• 複製「進度條背景」層，改色 #ffd200 命名「進度條」。
• 外環路徑縮小至 86×86px，內環擴大至 74×74px（環變窄）。
• 矩形路徑減去 1/4 環，兩端用圓形路徑補齊，形成 3/4 進度狀態。

4. 箭頭圖標繪製

• 矩形工具畫 40×40px 正方形。
• 鋼筆工具繪製 28×16px 三角形，兩形狀路徑合併在同一形狀圖層內。

5. 圖層樣式賦予質感（核心）

依次為「底板」「厚度」「進度條背景」「進度條」「箭頭」設置樣式，關鍵屬性：

• 倒角與浮雕：內部/外部倒角、深度/大小/柔化、高光/陰影模式/不透明度/角度/高度，模擬塑膠/金屬邊緣。
• 漸變疊加：線性/徑向漸變模擬光源照射色彩變化。
• 內發光/外發光：邊緣微光/內部通透感。
• 投影：落地陰影接地氣。
• 描邊：像素級邊框銳化邊緒。

輸出建議

• 圖標尺寸體系：16/24/32/48/64/128/256/512/1024px。
• 導出：右鍵圖層/群組「導出為」選 PNG（透明背景），或「存儲為 Web」批量輸出多尺寸。
• 矢量交付：形狀圖層右鍵「匯出內容」選 SVG，或複製路徑至 Illustrator 整理後存 AI/SVG。

最終效果