資料夾圖標是 UI 設計中最高頻、辨識度要求最高的元件之一。本教程展示如何用 Illustrator 從基礎幾何形狀出發，透過漸變網格、混合模式、路徑偏移、外觀面板疊層，打造具備材質厚度、光影層次、狀態可擴展的專業級資料夾圖標系統。

設計規範與文件設定

• 畫板：24×24 px（基礎尺寸），另建 48×48、96×96、256×256 px 多尺寸畫板，支援 @1x/@2x/@3x/@4x 導出。
• 像素網格對齊：開啟「視圖 > 對齊像素網格」，確保直線銳利無模糊。
• 色彩系統：定義 `Folder/Base`、`Folder/Highlight`、`Folder/Shadow`、`Folder/Accent` 四組語義色變數，便利主題切換。

九步精修流程

1. 基礎幾何： 圓角矩形（半徑 2px）畫資料夾本體；較小圓角矩形畫標籤頁，對齊頂邊、左邊。路徑查找器「聯集」合併。

2. 厚度與側面： 複製本體 Ctrl/Cmd + B 置後，向下位移 2px，填側面色（基底色深化 15%）。用「直接選取工具」調整底部錨點，收窄 1px 模擬透視。

3. 主體漸變： 線性漸變（頂部 #FFF 10% 不透明度 → 中部基底色 → 底部基底色深化 20%），角度 -90°。添加「內發光」（深色、正片疊底、3px、30%）增強邊緣陰影。

4. 標籤頁高光： 標籤頁複製置頂 Ctrl/Cmd + F，高度 40%，填「白 → 透明」線性漸變，角度 -90°，混合模式「螢幕」，不透明度 40%。

5. 邊緣鋒光： 本體複製，移除填色，描邊 0.5pt 白色，內部對齊，混合模式「螢幕」，不透明度 60%。用剪刀工具切開底部描邊並刪除，僅保留左/右/頂三邊。

6. 內陰影/深度： 本體複製置頂，填黑，效果 > 風格化 > 內發光（模式正片疊底、不透明度 20%、模糊 2px），混合模式「正片疊底」，不透明度 15%。

7. 狀態層預留： 建立「選中態」「懸停態」「禁用態」三個圖層組，分別套用：
   • 選中：邊框描邊 2px 主題色 + 外發光（主題色、螢幕、5px）。
   • 懸停：基底色亮度 +10%，邊緣鋒光不透明度 +20%。
   • 禁用：全群組不透明度 40%，描邊改灰色。

8. 圖形樣式封裝： 選取完整圖標群組，拖入「圖形樣式」面板，命名 `Icon/Folder/Default`。同邏輯建立 `Icon/Folder/Open`、`Icon/File/Document` 等系列樣式。

9. 批量導出與交付：
   • 腳本/動作：遍歷所有畫板，導出 SVG（保留樣式類名）、PNG@1-4x、PDF。
   • 命名規範：`folder-default-24.svg`、`folder-hover-48.png`。
   • 交付包：含 `.ai` 源檔、`.svg` 雲端庫、`.json` 設計令牌、README 操作手冊。

擴展：構建完整圖標系統

• 網格系統： 所有圖標基於 24px 基礎網格，關鍵對齊線：中心線、1/3 線、安全區（內縮 2px）。
• 筆畫規範： 主筆畫 2px，次筆畫 1.5px，細節 1px，圓角半徑 2px/1.5px/1px 三級。
• 語義色映射： 圖標不硬編碼顏色，全部引用 `currentColor` 或設計令牌，支援 CSS `color` 繼承與暗黑模式自動切換。
• 動態狀態： 為 Lottie/Web 動畫預留關鍵幀結構：`Default → Hover → Active → Focus` 四態路徑結構一致，僅屬性變化。

優秀的圖標系統不只是「畫得像」，更要「用得順、改得快、擴得開」。將視覺決策封裝為可複用的圖形樣式、設計令牌、導出腳本，才能支撐產品長期迭代中的視覺一致性與交付效率。