線性圖標以其輕量、清晰、適應多尺度顯示的特性，成為 UI 設計主流風格。本教程演示如何運用圓角矩形、路徑查找器、描邊層級控制與混合工具金屬漸變，在 10 分鐘內完成一枚極具辨識度的房車線性圖標。

最終效果

7 步速成流程

步驟 1：基礎幾何構形

圓角矩形工具畫車身主體 (半徑 10px)；矩形工具畫車門、車窗，效果 > 風格化 > 圓角 統一圓角半徑；橢圓工具畫車輪。

步驟 2：描邊權重層級建立

• 外輪廓描邊：3pt（最粗，定義輪廓）
• 結構分割線（車門縫、窗框）：1.5pt
• 細節裝飾（車把、燈具、地平線）：1pt
• 地平線同外輪廓 3pt，強化著地感。

步驟 3：細節豐富化

添加車窗反光線條、車身條紋裝飾、車輪輻條簡化表示（3 條徑向線）。

步驟 4：基礎平鋪著色

• 車身條紋：品牌主色相間條紋。
• 車輪：深灰 #333 填充。
• 車門彈孔：小圓形 #E0E0E0。

步驟 5：車身主色填充

車身主體填充米黃色 #F5F0E1 (暖灰米)，營造復古質感。

步驟 6：混合工具創造金屬質感

• 繪製兩條平行線（長度 = 車身寬），描邊顏色分別為淺灰 #CCC、深灰 #666，描邊 0.5pt。
• 對象 > 混合 > 混合選項：「指定距離」4px；對象 > 混合 > 建立 (Ctrl+Alt+B)。
• 將混合對象置於車身層上方，建立剪貼蒙版限制範圍，混合模式「疊加」不透明度 30%。

步驟 7：最終整合與輸出

• 添加淡藍色圓角矩形背景 (#E8F4FD)，Logo 置於右下角。
• 全選縮放至 64×64px 圖標網格，檢視像素對齊，匯出 SVG/PNG 多尺寸。

核心技巧心法

• 描邊分級 是線性圖標視覺層次的靈魂：輪廓 > 結構 > 細節 = 3:1.5:1。
• 混合工具 以極低成本生成程序化金屬拉絲/漸變，且可隨時修改關鍵色。
• 幾何構形 保證圖標在任意尺度下邊緣銳利、比例協調。