螺旋狀圖標因其動勢感強、視覺聚焦力強，常用於「載入中」「同步」「刷新」「旋轉門」等交互狀態圖標。本教程展示如何用 Illustrator 旋轉複製（Ctrl+D）、混合工具形態漸變、漸變網格材質化 三大核心技法，參數化構建一套可無限衍生變體的螺旋圖標系統。

效果展示：多態螺旋圖標族

參數化構建核心邏輯

1. 基礎單元：單一葉片/翅片

鋼筆/形狀工具繪製基本葉片單元（水滴形/長條形/三角形）。此為「原子單元」，所有變體由此衍生。

2. 旋轉複製生成圓環陣列

選中單元，旋轉工具（R）點擊中心點 → Alt+拖拽複製旋轉 → Ctrl+D 重複至 360° 閉合。修改「旋轉角度」即可控制葉片數量/密度。

3. 混合工具生成形態漸變

繪製兩個關鍵幀形狀（如：細長葉片 → 寬闊葉片），混合工具點擊兩者 → 雙擊混合工具設「指定步數」控制過渡幀數。替換脊柱（畫任意曲線）即得螺旋/波浪/放射等多種排列軌跡。

4. 漸變網格/外觀面板賦予材質

對混合群組/展開後物件套用：
• 徑向漸變模擬發光核心；
• 線性漸變模擬金屬/玻璃/塑膠質感；
• 外觀面板疊加內發光/投影/描邊，構建完整視覺系統。

5. 變體衍生參數表

參數	控制屬性	典型範圍
旋轉角度	葉片數量/疏密	10°~45°
混合步數	形態過渡平滑度	8~30 步
脊柱曲線	排列軌跡（螺旋/波浪/心電圖）	任意貝塞爾曲線
單元形狀	基礎視覺語言	水滴/長條/三角/多邊形
漸變類型/色標	材質/發光/品牌色	線性/徑向/自由漸變

工程化交付

• 將參數化構建過程記錄為「動作」或「腳本」，一鍵生成全套狀態圖標（正常/按下/禁用/載入中/成功/失敗）；
• 導出 SVG/Symbol 元件庫，前端直接調用 CSS 動畫驅動旋轉/縮放/透明度；
• 建立設計系統「圖標原子組件」規範，新業務圖標 10 分鐘內組裝交付。

從「畫一個圖標」進化到「設計一套圖標系統」，這就是參數化思維的威力。