前言：統一視覺語言的底層邏輯

App 圖標是用戶感知品牌的第一觸點。Google Material Design 圖標系統通過統一網格、關鍵線幾何、標準化筆劃、視覺校正四大機制，實現數千圖標跨尺寸、跨平台、跨團隊的視覺一致性。本文深度拆解該體系，供設計師建立自有圖標規範參考。

一、核心網格系統：一切對齊的基準

1. 全尺寸比例網格（192×192 dp 基準）

• 畫布：192×192 dp（含 4dp 安全邊距），實際繪製區 184×184 dp
• 縮放原則：48 dp 啟動器顯示尺寸 → 400% 放大至 192 dp 設計稿，保證縮放後邊緣銳利、對齊像素網格

2. 關鍵線形狀：五大基礎幾何體

所有圖標由以下五種關鍵線組合、變形而成，確保視覺重心一致：

形狀	尺寸 (dp)	視覺補償原理
正方形	152×152	基準形狀，視覺重心居中
圓形	直徑 176	圓形視覺面積 < 同寬正方形，故直徑放大 16% 達到視覺等重
豎向矩形	176×128	高 > 寬，視覺重心偏上，需向下微調
橫向矩形	128×176	寬 > 高，視覺重心偏左，需向右微調

3. 幾何構成元素：五條標準線

• 圓形線（圓弧）
• 方形線（直角邊）
• 矩形線（圓角矩形）
• 正交線（水平/垂直）
• 對角線（45°）

限制元素庫，強迫設計師在約束中創新，避免隨意曲線導致風格分裂。

視覺錯覺驗證：等長線段因端點形狀不同（箭頭內收/外張）產生長短錯覺 → 證明「幾何相等 ≠ 視覺相等」，必須用關鍵線校正。

二、內容區域與安全邊距

區域	定義	用途
活動區域	關鍵線內部核心區	核心圖形必須完全包含於此
修飾區域	關鍵線外延至畫布邊緣	裝飾性細節（如陰影投射、微小裝飾）可延伸，但不可超出畫布
清空區域	畫布邊緣 4dp（192dp 基準）	確保縮放至 48dp 時不被系統圓角裁切，保留呼吸感

三、系統圖標解剖：像素級規範（24×24 dp 基準）

1. 角半徑：外圓角 2px，內直角 0px

• 外部圓角統一 2px，建立家族識別感
• 內部轉角保持銳利直角，維持幾何純粹性
• 

2. 筆劃寬度：統一 2px

• 所有線條、輪廓、分隔線統一 2px（24dp 基準）
• 筆劃末端：方形平頭，不可圓頭、斜頭
• 

3. 視覺校正：極端情況的幾何妥協

• 極細線條、極小角度、高對比度反轉時，允許微調幾何參數（如加粗 0.5px、調大圓角 0.5px）
• 原則：校正最小化、風格一致性優先、不可扭曲核心識別特徵
• 

四、最佳實踐與反模式對照

✅ 可取	❌ 不可取	核心原則
統一筆劃寬度、方形筆劃末端	混用粗細、圓頭/斜頭末端	家族一致性
正向、堅定、無透視變形	傾斜、旋轉、偽 3D 效果	圖標即符號，非插畫
幾何簡化，提煉核心特徵	擬真細節、材質、光影	小尺寸可識別性優先
像素對齊（整數坐標）、1:1 比例	半像素偏移、非正方形畫布	銳利邊緣、無模糊失真

五、建立自有圖標規範的 5 步法

1. 定基準：確定設計稿尺寸（建議 192×192 dp 或 1024×1024 px）、導出尺寸集（24/32/48/64/128/256/512/1024）。
2. 立網格：繪製關鍵線形狀（正方/圓/橫豎矩），定義活動/修飾/清空區域。
3. 訂幾何：限制 5-8 條標準線、統一筆劃寬度（建議 2px@24dp）、外圓角半徑。
4. 建組件庫：Figma/Sketch 建立元件庫，含基礎形狀、常用組合、狀態變體（Outline/Filled/Sharp/Rounded/Two-tone）。
5. 驗收標準：像素對齊檢查、多尺寸縮放預覽、暗色模式反轉測試、無障礙對比度測試、跨平台（iOS/Android/Web）一致性核對。

「圖標規範不是束縛創意的牢籠，而是讓創意在系統化軌道上規模化生長的軌道。」