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 网格、黄金比例螺旋、像素网格,对齐不用切出去看规范文档。

最后更新于