本教程以一枚粉色系立體圖標練習作品為例，展示如何運用基本幾何形狀（圓角矩形、橢圓、圓形）、漸層網格模擬柔和體積感、路徑尋找器布爾運算組合細節、外觀面板疊加高光陰影，快速產出具備商業級質感的可愛風格圖標。作者提供源檔下載，適合初學者拆解學習。

核心構建邏輯

1. 幾何基礎形狀

• 主體：圓角矩形（大圓角）或橢圓，奠定整體輪廓。
• 細節元素：圓形(按鈕/燈光)、橢圓(把手/腳)、矩形(面板/螢幕)。
• 所有形狀對齊面板精確分佈，保證幾何嚴謹性。

2. 漸層網格賦予柔和體積

• 主體形狀轉為漸層網格（物件 > 建立漸層網格，列/行 3-5）。
• 直接選取工具調整邊緣節點貼合輪廓。
• 中心節點填高亮粉 (#FFE4F0)，邊緣節點填中性粉 (#FFB6D5)、深粉 (#E88DB0)，角落節點填陰影粉 (#D070A0)。
• 網格線走向遵循光源（左上光源）：亮面節點向光源偏移，暗面節點遠離。

3. 細節元素材質統一

• 按鈕/把手：線性漸層(亮粉→深粉) + 內發光效果(效果 > 風格化 > 內發光，模式「正片疊底」，顏色深粉，模糊 2px)。
• 螢幕面板：徑向漸層(深藍→黑)模擬關機螢幕，或自定 UI 介面截圖置入蒙版。

4. 高光與陰影疊加（外觀面板）

• 主體形狀外觀面板新增填色：白色橢圓形高光（橢圓工具畫形狀 → 複製為填色），高斯模糊 3px，透明度 40%，混合模式「疊加」。
• 底部投影：複製主體 → 填黑 → 高斯模糊 5px → 不透明度 20% → 置底層。

5. 風格統一細節

• 所有圓角半徑統一（如 8px/12px/20px 三檔）。
• 色板統一：定義 5-6 色粉色系色板，全圖僅使用此色板色票與其漸層組合。
• 描邊統一：無描邊或極細淺色描邊 (0.5pt)。

源檔學習建議

1. 下載源檔，開啟「圖層」「外觀」「漸層」「色板」面板並排觀察。
2. 逐層獨顯 (Alt+點擊圖層眼睛圖示)，分析單一圖層結構。
3. 嘗試修改：換色板、調網格節點、改圓角、增減高光層，觀察效果變化。
4. 嘗試將主體形狀改為三角形/六邊形，看網格如何自適應。

結語

可愛風格圖標的關鍵在於「幾何純粹性」與「材質柔和感」的平衡。基本形狀保證辨識度與縮放清晰度，漸層網格賦予有機體積感，統一色板與圓角體系確保系列一致性。拿到源檔拆解、修改、重組，是掌握此風格最快捷徑。