螺旋狀圖標以其動感、科技感與視覺張力，廣泛應用於科技品牌、App 圖示、數據視覺化圖標。本教學將示範如何在 Illustrator 中，運用螺旋線工具、漸變網格、混合模式與外觀面板，從零構建一枚多彩絢麗、可無限縮放的螺旋 UI 圖標。

一、螺旋骨架精準構建

1. 選取「螺旋線工具」（隱藏在直線工具群組下），點擊畫布彈出對話框：
   半徑：100 pt | 衰減：80% | 分段數：10 | 樣式：逆時針
2. 獲得基礎螺旋路徑，設 4 pt 描邊、無填色、圓形端點。
3. 複製螺旋 (Ctrl+C, Ctrl+F)，縮放 80% 置於內側，形成雙軌螺旋結構。

二、漸變網格賦予流動色彩

1. 選中外側螺旋，執行「物件 > 擴展外觀」將描邊轉為填色路徑。
2. 選中路徑，套用「漸變網格工具」(U)：點擊路徑添加網格點，按色譜順序（紅→橙→黃→綠→青→藍→紫）逐點吸取/輸入色值。
3. 內側螺旋同理，但色相偏移 30°，形成互補色流動感。
4. 調整網格點手柄，使色彩過渡順應螺旋曲率，避免生硬色帶。

三、混合模式疊加光效層次

1. 複製外側螺旋路徑，置於頂層，填色改為白→透明徑向漸變，混合模式「疊加」，不透明度 40%，模擬高光掠過。
2. 再複製一層，填黑→透明線性漸變，模式「正片疊底」，不透明度 20%，強化陰影厚度感。
3. 中心區域添加一個白色圓形，高斯模糊 15 px、不透明度 60%、模式「濾色」，作為核心發光點。

四、外觀面板封裝為可複用圖形樣式

1. 全選所有構成元素，群組 (Ctrl+G)。
2. 開啟「外觀」面板 (Shift+F6)，將群組外觀屬性（填色、描邊、效果、透明度）整理為有序堆疊。
3. 拖入「圖形樣式」面板，命名「螺旋_科技_多彩」。
4. 後續專案中，繪製任意螺旋/曲線路徑，一鍵套用即得同風格圖標，保證視覺系統一致性。

五、響應式輸出與變體擴展

• SVG 輸出：檔案極小、CSS 可控制動畫（如旋轉、描邊繪製），最適合網頁交互圖標。
• 動態變體：調整螺旋工具參數（半徑、衰減、圈數），快速生成「緊密/舒展、單軌/多軌」變體族群。
• 色系替換：配合「重新著色圖稿」，一鍵切換「暖色系/冷色系/單色品牌色」三套視覺語言。
• 動效預留：圖層命名規範（core、track_outer、track_inner、highlight、glow），便於 After Effects/Lottie 匯入逐層動畫。

此工作流將「手繪感覺難以複製的螺旋流動色彩」轉化為「參數化、可複用、可動畫」的設計資產，是現代 UI 圖標系統化設計的典範實踐。