教程定位

系統講解線性圖標設計的底層邏輯：網格系統、描邊寬度、端點樣式、轉角處理、視覺重量平衡，附 20 個常用圖標拆解圖，適合零基礎入門與團隊規範建立。

核心規範參數

參數	數值	備註
畫布	64×64 px (安全區 56×56)	4 px 網格，關鍵點吸附
描邊	2 px、圓角端點、圓角連接	統一視覺重量基準
圓角半徑	4 px (內圓角 2 px)	小尺寸下保持銳利
間距	元素間 ≥ 4 px	避免視覺粘連
視覺重量	實心面積 ≈ 線性描邊面積 × 1.4	光學補償系數

20 例拆解速覽（圖示關鍵步驟）

每組圖展示：幾何構形 → 描邊應用 → 光學修正 → 狀態擴展（Normal/Hover/Disabled）。

進階技巧：光學修正三部曲

1. 圓形光學補償： 圓形比方形視覺小，半徑需 +1 px。
2. 三角形頂點修正： 銳角頂點向內收 0.5 px，避免視覺尖銳過度。
3. 曲線光滑度： 貝塞爾控制柄長度 = 曲線長度 × 0.55（黃金比例近似），確保曲率連續。

交付清單

• 源文件 `.psd`（含網格參考圖層、色板組）
• SVG Sprite `icons-line.svg`（`...`）
• PNG 序列 `@1x/@2x/@3x`（文件名 `ic_home_24px@2x.png`）
• Markdown 規範文檔 `LINE_ICON_GUIDE.md`

更多精彩教程請關注三聯 Photoshop 教程欄目，三聯 PS 群：311270890 歡迎加入。