UI 核心組件圖標，隨扁平化趨勢愈發重視簡潔與寓意表達。按設計師成長階段劃分為初階（形狀構建）與高階（視覺平衡與系統化）兩大層次，拆解關鍵知識點與實操技法，適合新人階梯式學習，資深設計師亦可查漏補缺。

一、概念類別：扁平圖標的兩大基本形態

扁平圖標本質為剪影表現，核心在形狀設計（色彩另文分析）。兩大基礎元素：面與線，可單體、多元素組合、線面結合變化。

1. 簡化微寫實圖標

• 彩色一體表現，造型寫實過渡簡化，接近剪影
• 主打面+顏色造型，質感風格 6 種：純平面、折疊、輕質感、折紙風、長投影、微立體
• 近期流行「低面建模」：色塊進行 2D/3D 裝飾表達
• 元素組合原則：主對象突出，輔助圖形（如狀態提示）小尺寸置於右上角，避免過多元素稀釋核心含義
  

2. 剪影正負形圖標

• 單色為主，極簡抽象、言簡意賅、高度提煉、有理解門檻
• 考驗理性邏輯與感性表達的平衡，把握好＝時尚 feel，把握差＝空虛俗氣
• 負形（線形）：線條繪製，高度輪廓概括，精準到位，最難、最易俗氣
• 正形（面形）：面繪製，可與線結合，常用於狀態切換（如 iOS7 Tab 圖標）
  

優點：簡潔清新優雅、極具現代感、設計與涵義拓展性強、可傳達抽象詞彙。

二、設計技法要點

1. 關鍵節點繪製法（三步走）

1. 提煉精華勾勒輪廓：參照物分析，抓取關鍵節點，幾何繪製基礎圖形
2. 調整線鋒優雅得體：線條走向決定造型，多版本調整對比，挑選最優
3. 增特有細節出風格：畫龍點睛，造型特徵在此落地
   

交互設計師亦可用此法快速入門，關鍵在第一步能否快速出雛形。

2. 精致的基礎要素：像素級工藝

好圖標謹慎對待每一筆、每一像素、每一矢量錨點。

① 犀利清晰：三大發虛殺手與對策

• 輪廓發虛：必須 100% 畫布繪制矢量，禁直接縮放，放大檢查錨點對齊 1px 網格（非 0.1-0.9px），圓形十字四點對準
  
• 斜形發虛：多角度對比找最清晰角度，或圖層雙層疊加增強銳度
  
• 像素不足/多餘：小尺寸用點陣/矢量像素繪製，大尺寸鋼筆繪製
  

堅持最少發虛原則總結

② 比例協調：內部結構黃金分割或感性平衡

參照 iOS 圖標規範打統一結構線，或憑經驗感覺快速達平衡。

③ 視差平衡：同尺寸不同形狀面積占比差異修正

參考尺寸範圍內繪製調整，確保視覺重量一致。

三、系列成型圖標：系統化輸出

單枚圖標易，全套系統難。系列設計核心：

• 統一視覺語言：線寬、圓角、端頭、留白、視覺重心
• 建立設計規範文檔：網格模板、關鍵尺寸、命名規則、狀態定義
• 批次驗證：不同尺寸、背景、狀態下的一致性測試

圖標設計從「畫個好看的圖」進化為「構建可擴展的視覺系統」，是設計師從執行者向架構師跨越的關鍵一步。