iOS 7 扁平化設計語言發布至今，其圖標設計規範（網格系統、圓角矩形、光影規範、色彩體系）仍是移動端圖標設計的基石。本文通過 9 步驟視覺拆解，還原標準 iOS 7 風格圖標從構型到成品的完整設計流程，附關鍵參數與避坑指南。

標準化設計 9 步走

Step 1：標準網格構型
120×120px 畫布（@2x），內接 112×112px 安全區，4px 邊距。核心圖形置於安全區內，保證不同尺寸縮放不丟失細節。

Step 2：圓角矩形基礎形
18px 圓角半徑（iOS 7 標準），形狀圖層矢量繪製，確保無限縮放銳利。

Step 3：核心隱喻圖形構建
幾何基礎形（圓/方/三角）組合/布爾運算生成核心隱喻，線條寬度統一（建議 6-8px），視覺重心居中。

Step 4：標準光源與陰影體系
光源：正上方 90°，無透視畸變。
陰影：內陰影（頂部高光模擬）+ 外陰影（懸浮感），不透明度 30-40%，距離 1-2px，柔和自然。

Step 5：漸變填充規範
線性漸變：頂部高亮色（主色 +20% 亮度）→ 底部陰影色（主色 -20% 亮度），角度 -90°，模擬輕微凸起質感。

Step 6：內部圖形光影一致性
核心圖形同步應用 Step 4-5 光影參數，保證整體質感統一，避免「圖標套圖標」的割裂感。

Step 7：鏡面高光細節（可選）
頂部 1-2px 高光線條，不透明度 15-20%，模擬玻璃/陶瓷質感，iOS 7 早期風格特徵，後期設計語言多省略。

Step 8：色彩系統應用
主色調取自品牌色，生成 5 級色階（基色、懸停、按下、禁用、高亮），確保全套圖標族群色彩協和。

Step 9：多尺寸導出與驗證
導出 @1x (60×60)、@2x (120×120)、@3x (180×180)、App Store (1024×1024)。
實機驗證：深色/淺色背景、資料夾疊加、通知欄縮略圖、Spotlight 搜索結果等真實場景。

避坑指南：常見 5 大錯誤

1. 圓角半徑錯誤：使用 10px/12px/20px 非標準值，導致系統級視覺不協調；
2. 光源方向混亂：左上/右上/多光源混用，破壞系統級光影統一性；
3. 漸變過度/不足：對比度過強顯廉價，過弱失去質感，堅持 ±20% 亮度差；
4. 核心圖形觸邊：超出 112px 安全區，縮放至小尺寸時細節丟失或被裁切；
5. 忽略語境驗證：僅在白底預覽，未在深色模式、資料夾、通知中心等真實語境驗證可讀性。

效率工具推薦

• Sketch / Figma 插件：iOS Icon Template、Icon Grid、自動導出多尺寸；
• 在線生成器：App Icon Generator (makeappicon.com)、Icon Kitchen (Android 適配同步)；
• 設計系統組件化：將網格、圓角矩形、光影圖層樣式、色階做成 Symbol/Component，新圖標複用即得標準輸出。

記得交作業：按此流程設計一套 5-10 枚風格統一的 App 圖標，實機測試後發布至 Dribbble/Behance 徵求反饋，是掌握 iOS 圖標設計規範的最快路徑。