Mac应用图标设计指南

1、下载设计资源

下载MacOS的设计资源文件:Production Templates,下载完成双击.dmg解压。

2、设计图标

使用即时设计打开其中的Template - Icon - App.sketch文件

在设计好所有尺寸的图标之后,可以选中,在右下角导出png

3、编排图标

我们按照要求规范文件命名,创建AppIcon.appiconset文件夹,文件如下:

AppIcon.appiconset
├── Contents.json
├── icon-16.png
├── icon-16@2x.png
├── icon-32.png
├── icon-32@2x.png
├── icon-128.png
├── icon-128@2x.png
├── icon-256.png
├── icon-256@2x.png
├── icon-512.png
└── icon-512@2x.png

其中Contents.json内容如下:

{
"images": [
{
"size": "16x16",
"idiom": "mac",
"filename": "icon-16.png",
"scale": "1x"
},
{
"size": "16x16",
"idiom": "mac",
"filename": "icon-16@2x.png",
"scale": "2x"
},
{
"size": "32x32",
"idiom": "mac",
"filename": "icon-32.png",
"scale": "1x"
},
{
"size": "32x32",
"idiom": "mac",
"filename": "icon-32@2x.png",
"scale": "2x"
},
{
"size": "128x128",
"idiom": "mac",
"filename": "icon-128.png",
"scale": "1x"
},
{
"size": "128x128",
"idiom": "mac",
"filename": "icon-128@2x.png",
"scale": "2x"
},
{
"size": "256x256",
"idiom": "mac",
"filename": "icon-256.png",
"scale": "1x"
},
{
"size": "256x256",
"idiom": "mac",
"filename": "icon-256@2x.png",
"scale": "2x"
},
{
"size": "512x512",
"idiom": "mac",
"filename": "icon-512.png",
"scale": "1x"
},
{
"size": "512x512",
"idiom": "mac",
"filename": "icon-512@2x.png",
"scale": "2x"
}
],
"info": {
"version": 1,
"author": "icon.wuruihong.com"
}
}

4、覆盖图标

  • 进入项目/macos/Runner/Assets.xcassets,删除其中的AppIcon.appiconset目录;
  • 复制我们创建的AppIcon.appiconset目录;
  • 重新调试项目,即可看到效果。