Skip to Content

設計規範

各平臺對形狀、安全區、視覺權重要求不同。Zapicon 編輯器裡可以開輔助線對照。

iOS

  • 形狀: Squircle,編輯器裡開 Squircle
  • 尺寸: 20×20 @2x/@3x 到 1024×1024 @1x
  • 安全區: 主要內容放中心約 66% 區域
  • 背景: 別用透明,iOS 會填滿整個區域
  • 風格: 簡潔居中,少放文字

Android

  • 形狀: 自適應圖標會被設備遮罩裁切,前景別貼邊
  • 尺寸: 48 mdpi 到 192 xxxhdpi
  • 安全區: 關鍵內容在直徑約 66% 的圓內
  • 圖層: Zapicon 導出前景 PNG;自適應圖標背景層要在 Android 項目裡自己配
  • 風格: 形狀醒目、輪廓清晰

macOS

  • 形狀: 圓角矩形,比 iOS Squircle 更方一些
  • 尺寸: 16 @1x/@2x 到 512 @1x/@2x
  • 細節: 程序塢 / Finder 能顯示到 512px,大圖可以細節多一些
  • ICNS: 導出時自動生成

Windows

  • 形狀: 方形或透明底;UWP 有遮罩,Win32 沒有
  • 尺寸: 16–256 px,全在一個 ICO 裡
  • 關鍵: 16×16 任務欄 / 標題欄還得認得出
  • ICO: 導出時嵌入所有標準尺寸

Web

  • Favicon: 16、32 或 SVG;Zapicon 導出多尺寸 ICO
  • Apple touch icon: 180×180 PNG
  • PWA: 192 和 512 PNG
  • 關鍵: 16×16 還得看得清

Tauri

選 Tauri 平臺一次導出,將 ZIP 中的圖標複製到項目的圖標目錄即可。

Flutter

選 Flutter 平臺一次導出 Android 和 iOS 兩套資源。Android 自適應圖標的背景層需要在 Flutter 項目裡單獨配置。

輔助線

編輯器裡可疊加 Apple / Android / Windows Fluent 網格、黃金比例螺旋、像素網格,對齊不用切出去看規範文件。

最後更新於