扁平化設計潮流下，賦予 UI 元件「觸覺質感」成為差異化關鍵。本教學示範如何在 Illustrator 中僅用 單一基礎路徑 + 外觀面板多重填色/效果疊加，構建出具備布料編織紋理、縫線邊緣、內凹/外凸立體感的專業級按鈕圖標，全程非破壞性編輯，參數隨時可調。

最終效果預覽

---

核心技法：外觀面板 = 非破壞性材質著色器

傳統做法需疊加多個路徑模擬陰影/高光/紋理，導致圖層複雜難維護。外觀面板 允許為 單一路徑 添加無限層級的：

• 填色（實色/漸層/圖案）
• 描邊（多重描邊、虛線、圖案描邊）
• 即時效果（模糊、陰光、變形、紋理、扭曲等）

所有屬性可獨立開關、調整順序、修改參數，原始路徑永遠保持最簡單幾何形狀（如一個圓角矩形）。

按鈕構建層級拆解（自下而上）

Layer 0：基礎形狀

圓角矩形工具畫出按鈕基礎形狀（半徑 8-12 px），無填色無描邊，僅作為外觀面板的載體。

Layer 1：布料基底漸層（模擬編織體積）

• 添加填色 > 線性漸層：淺灰 (顏色1) → 中灰 (顏色2) → 深灰 (顏色3) → 中灰 → 淺灰，角度 90°。
• 模擬布料表面微微起伏的明暗節奏。

Layer 2：編織紋理圖案填色

• 添加第二填色 > 選擇 圖案色板 > 基本圖形 > 基本圖形_線條 中的斜線/格仔圖案，或自製微小十字交叉圖案存為圖案色板。
• 混合模式：疊加 或 柔光，不透明度 15-25%。
• 效果 > 扭曲與變形 > 粗糙化：尺寸 1%，細節 10/in，平滑/尖角任選，賦予紋理有機感。

Layer 3：邊緣縫線（雙重描邊技法）

• 添加描邊 1：2 pt 虛線（虛線 4pt、間距 2pt），顏色深灰，圓頭/圓角連接，混合模式正片疊底，不透明度 60% → 模擬凹陷縫線陰影。
• 添加描邊 2：1 pt 實線，顏色淺灰/白，混合模式螢幕，不透明度 40% → 模擬縫線凸起高光。
• 兩描邊疊加產生極逼真的「縫線壓陷+凸起」雙重視覺線索。

Layer 4：立體倒角（內發光 + 內陰影組合）

• 添加填色 > 效果 > 風格化 > 內發光：模式螢幕，白色，不透明度 30%，模糊 3px，邊緣 → 頂部/左側高光帶。
• 添加填色 > 效果 > 風格化 > 內發光：模式正片疊底，深灰，不透明度 25%，模糊 3px，中心 → 底部/右側陰影帶。
• 兩者疊加形成「上凸下凹」的微妙倒角體積感。

Layer 5：投影落地

• 添加填色 > 效果 > 風格化 > 投影：X/Y 3px，模糊 5px，不透明度 30%，正片疊底。
• 或用「效果 > 3D > 投影」獲得更精確透視投影。

---

一鍵複用：儲存為圖形樣式

1. 選中按鈕路徑，開啟 圖形樣式面板 (Shift+F5)。
2. 點擊「新增圖形樣式」圖示，命名「布料按鈕/主色調」。
3. 後續繪製任意形狀路徑（圓形、多邊形、自訂形狀），一鍵點擊圖形樣式即套用完整材質體系。
4. 雙擊圖形樣式可進入編輯模式，修改參數將同步更新所有套用該樣式的物件。

---

變體擴展：三種狀態一鍵切換

狀態	關鍵參數調整	視覺隱喻
預設	基礎參數	平靜待機
懸停	基底漸層整體提亮 10%；內發光高光增強；投影擴大	手指接近，按鈕「浮起」
按下	基底漸層反轉（頂暗底亮）；內發光高光/陰影互換；投影縮小至 1px	手指按下，按鈕「凹陷」

將三狀態分別存為圖形樣式「布料按鈕/默認」「懸停」「按下」，UI 設計輸出規格書時極其高效。

---

設計師心法

1. 單一路徑原則：盡可能用一個路徑承載所有視覺屬性，外觀面板是關鍵。
2. 參數化思維：不畫「一個高光」，而是設定「內發光效果參數」，方便批次修改、響應式縮放。
3. 觀察真實物件：布料按鈕的縫線為何有陰影有高光？因為線有體積、布有厚度、光有方向。向量參數皆為物理光學屬性的數學映射。
4. 建立樣式庫：將驗證過的材質樣式（布料、金屬、玻璃、塑膠、紙張）存入雲端庫，團隊共享、專案複用。

這顆按鈕看似簡單，實則凝練了「外觀面板非破壞編輯、圖形樣式參數化複用、物理光學向量化映射」三大現代向量 UI 設計核心方法論。