進度條是 UI 設計中最高頻組件之一。本教程展示如何純用 Photoshop 圖層樣式 (內發光、圖案疊加、描邊、外發光、漸變疊加、顏色疊加) 構建兩款風格迥異的下載進度條：深色紋理版與亮色漸變版。全程保持向量可編輯性、圖層結構清晰、參數可復用，是「PS 做 UI 組件」的標準化範例教學。

最終效果對比

素材準備

• 背景紋理圖 (教程提供下載)
• 圖案庫：「藝術表面」預設圖案組 (PS 內建)

第一款：深色紋理進度條 (核心流程)

步驟 1：畫布與背景

• 新建 600×400px → 放入背景紋理

步驟 2：外框「矩形 1」—— 圖層樣式構建容器質感

• 圓角矩形工具：半徑 10px，畫長條矩形 → 命名「矩形 1」
• 圖層樣式配置：

  樣式	參數要點	視覺作用
  內發光	黑色/正片疊底/邊緣/噪點/大小	內凹陰影感、邊緒厚度
  圖案疊加	載入「藝術表面」圖案/縮放/不透明度	金屬拉絲/碳纖維等材質紋理
  描邊	1-2px/漸變/角度/位置「外側」	邊框高光/暗邊，增強立體邊緒

步驟 3：內框「矩形 2」—— 進度條軌道質感

• 在「矩形 1」內部畫較小圓角矩形 → 命名「矩形 2」
• 圖層樣式：

  樣式	參數要點	視覺作用
  外發光	淺色/篩色/大小/範圍	內凹邊緒發光/高光邊
  漸變疊加	深→淺→深 線性漸變/角度 90°	凹陷軌道立體感

• 合併優化：選中「矩形 2」+ 新建空白層 → Ctrl+E 合併 → 得「圖層 2」→ 複製備份 (隱藏舊層) 留作後續狀態變體

步驟 4：進度填充狀態——「圖層 2」樣式覆蓋

• 雙擊「圖層 2」 → 顏色疊加 (進度色/不透明度 100%) + 圖案疊加 (條紋/網格/點陣等動態紋理) → 形成進度填充視覺

步驟 5：刻度指示器—— 矩形工具批量複製

• 矩形工具畫兩短線：黑色 (陰影) + 白色 (高光) → 成組複製排列 → 移入進度條內部 → 模擬刻度刻痕

第二款：亮色漸變進度條 (變體複用流程)

• 在「矩形 1」內重新畫矩形 (較短) → 復用步驟 3-4 樣式邏輯 → 修改漸變疊加顏色 (亮色系) + 圖案疊加 → 添加文字說明 → 完成第二款風格
• 教程設計巧思：故意不讓保存樣式，強制學員重做一遍 → 刻入肌肉記憶與參數理解

UI 組件化設計核心原則 (從教程抽象)

進階延伸：從靜態到動態、從 PS 到代碼

• 動態原型：導出至 Principle/ProtoPie/After Effects，「圖層 2」寬度/漸變位置/顏色疊加綁定進度變量 (0-100%)，製作載入動畫。
• 設計系統交付：輸出 .psd 源文件 + .ase 色板 + .pat 圖案庫 + Markdown 規範文檔 (尺寸/間距/圓角/陰影/圖案/狀態/交互/無障礙/深色模式)。
• 代碼映射：
  - 矩形 1 → `
  `
  - 矩形 2/圖層 2 → `

  `
  - 圖層樣式 → CSS `box-shadow`/`background`/`border`/`background-image`
  - 刻度線 → `::before`/`::after` 或 `` 循環渲染
• 無障礙 (a11y)：確保進度條 `role="progressbar"` `aria-valuenow/aria-valuemin/aria-valuemax`、顏色對比度達 WCAG AA、提供文字替代方案。

避坑檢查清單

• □ 圓角半徑在縮放時是否保持比例 (矢量形狀層自動保持，柵格化後會變形)
• □ 圖案疊加縮放比例是否導致紋理模糊/過大 (建議 100% 或整數倍)
• □ 外發光/內發光「範圍」參數：較柔和用「較柔和」、較銳利用「精確」
• □ 漸變疊加「與圖層對齊」勾選狀態：勾選 = 漸變隨圖層移動；不勾選 = 漸變固定畫布座標
• □ 合併圖層 (Ctrl+E) 會永久燒錄樣式，務必保留未合併源文件備份

兩款進度條、十幾個圖層樣式、幾十個參數滑桿——看似只是畫兩個 UI 元件，實則是將「組件化思維、參數化表達、非破壞工作流、設計工程化交付」完整演練了一遍。掌握這套邏輯，你在 PS 中構建的每一個按鈕、輸入框、卡片、導航欄、彈窗，都將具備進入專業設計系統的資格。