前言

承接上一篇（ID:161111），本文補充來自 @tiah 與 xueui.cn 的視覺參考圖，展示不同方法繪製的橢圓矩形在實際圖標外框中的應用效果對比。圖片來源外部網站，僅供學習參考，版權歸原作者。

外部參考圖展示

以下圖片展示橢圓矩形在不同圖標設計中的實際應用，以及不同繪製方法的視覺呈現差異：

快速回顧：3 種核心方法

方法	核心操作	優點	缺點	推薦場景
1. 合併形狀 (橢圓+矩形)	形狀工具+路徑合併	矢量可編輯、縮放不變形、參數可追溯	步驟稍多	UI 組件庫、標準圖標、需後期修改
2. 圓角矩形設半高	圓角=高度/2	最快、單圖層	縮放變形、圓角非即時更新	草圖、定尺寸一次性輸出
3. 路徑描邊	鋼筆畫路徑→描邊	支援筆刷紋理、非標準形狀	描邊後成像素、難編輯	手繪風、特效邊框、非幾何標準形

實戰建議

• 專案初期建立「橢圓矩形」自訂形狀預設（方法一成果），團隊統一調用。
• 設計系統元件庫中定義 `Capsule` / `Stadium` 組件，屬性面板直接輸入寬/高，自動生成標準橢圓矩形。
• 導出 SVG 給前端/多端複用時，務必使用方法一的矢量路徑，避免方法二縮放變形、方法三像素化問題。

結語

工具無優劣，唯場景與需求決定選擇。專業 UI 設計師的核心競爭力不在於「會幾種畫法」，而在於「能根據專案階段、協作流程、輸出規範，果斷選擇最合適的方法並建立可複用標準」。願這兩篇文章助你構建屬於自己的高效圖標繪製體系！