進度條是 UI 設計的核心元件，一個擁有細膩質感、清晰層次的進度條能顯著提升介面的高級感。本教學將示範如何在 Illustrator 中，運用像素網格精確佈局、外觀面板多重填色、路徑偏移與多層投影，從零構建一組具備金屬/玻璃質感的進度條組件，並延伸設計出配套的 UI Kit 風格。

第一階段：建立精密畫布與質感背景

Step 01 畫布與網格設定：以像素為單位的精準尺規

• 新建文件：寬 600 px、高 200 px、RGB、72 ppi，取消勾選「使新建物件與像素網格對齊」，避免繪圖時被強制吸附導致邊緣模糊。
• 偏好設定 > 參考線與網格：網格線間距 1 px、次分割 1。意即每 1 像素一條網格線，構成像素級參考系。
• 視圖選單勾選「顯示網格」與「對齊到網格」。

Step 02 多層填色構建背景質感

1. 矩形工具 (M) 畫滿畫布矩形，填淺灰色基底。
2. 開啟「外觀面板」，點選「新增填色」圖示，第二層填色設為徑向漸變 (中心亮、四周暗)，營造微妙明暗層次。
3. 第三層填色：黑色，不透明度 4%，混合模式「正片疊底」。
4. 對該黑色填色層套用「效果 > 藝術效果 > 膠片顆粒」，參數：顆粒 4、醒目區域 0、強度 10。賦予背景細微顆粒感，提升質感檔次。

第二階段：繪製進度條主體外形

Step 03 基礎幾何構建

• 鎖定背景層 (Ctrl+2)。
• 關閉「對齊到網格」。偏好設定 > 一般：鍵盤增量設為 1 px (配合方向鍵微移)。
• 畫一長矩形 + 兩側各兩個正圓 (共 5 圓)，組成標準胶囊狀基礎形狀。

Step 04 路徑查找器合併為單一複合路徑

全選上述物件，路徑查找器 > 形狀模式 > 「聯集」。得到單一封閉路徑，作為後續所有效果的基礎母體。

第三階段：核心 —— 多層高光與陰影塑造立體感

AI 無圖層蒙版的 3D 圖層樣式，立體感全靠「外觀面板」疊加：內陰影模擬凹陷、偏移路徑構建邊緣高光/陰影漸層、多組投影疊加環境光遮蔽。

Step 05 內凹邊緣 (頂部暗部)

1. 複製母體兩份置頂。最上層向下移 1 px (鍵盤增量 1 px)。
2. 選最上兩層，路徑查找器 > 「減去頂層」得到 1 px 高的頂部細條。
3. 設為黑色、不透明度 20%、混合模式「正片疊底」。模擬頂部內凹陰影。

Step 06 主體漸層與邊緣高光/陰影帶

1. 母體執行「物件 > 路徑 > 偏移路徑」，位移 -4 px 向內縮縮。
2. 新路徑填線性漸變：上方亮色 (接近光源)、下方暗色。此為主體核心立體漸層。
3. 再複製此漸層路徑兩份置頂。最上層向下移 1 px，與下層「減去頂層」得 1 px 亮邊，填白色 (頂部高光)。
4. 再複製漸層路徑兩份。最上層向上移 1 px，「減去頂層」得 1 px 暗邊，填黑色 20% 正片疊底 (底部陰影)。

Step 07/08 多組投影疊加豐富環境光遮蔽

分別對母體與內縮漸層路徑套用多組「效果 > 風格化 > 投影」，參數各異 (距離、模糊、顏色、不透明度)，模擬頂部環境光、底部接觸陰影、側面反射光等真實光照層次。投影效果同樣列在外觀面板，隨時可編輯。

第四階段：文字、圖示與完成狀態

Step 10 數字標籤與投影統一風格

為每個圓形節點添加步驟數字，套用相同投影效果保持視覺一致性。

Step 11 完成狀態勾選圖示

1. 矩形工具畫方框 > 效果 > 風格化 > 圓角 (1 px) > 物件 > 擴展外觀。
2. 設定描邊 (白色、粗細適中) > 物件 > 擴展 (將描邊轉為填色路徑)。
3. 用鋼筆/形狀建構工具繪製勾號路徑，合併為單一物件。
4. 套用投影效果參數 (見圖)，融入整體光影體系。

最終成果與延伸

完成的進度條擁有：像素級對齊的幾何骨架、外觀面板非破壞性的多層漸層與投影、可隨時修改顏色/圓角/寬度的參數化結構。同邏輯可延伸設計出按鈕、輸入框、切換開關等同風格 UI Kit。