在开发mac应用“轻压图片”的过程中,发现设计的应用图标与其他的应用图标在尺寸上不一致。

可以看到,设计的mac应用图标,比Xcode和VS图标的尺寸都要大。
设计规范
根据《App 图标 | Apple Developer》文章,可以看到在macOS图标的设计规范中存在一个内、外边界框,所以它的实际图标内容更小一些。

在《Apple 设计资源》文章中,可以下载mac图标生产环境模版的Photoshop文件(文件链接),这是一个dmg文件。
下载并打开后,可以看到对应的mac图标文件。

其中,Template – Icon – App的Photoshop文件的内容为:
1024px * 1024px、512px * 512px、256px * 256px、128px * 128px、64px * 64px、32px * 32px、16px * 16px,共7套图标尺寸。

绘制图标尺寸
边距区域和白色方块
如果不下载该文件的话,可以尝试单独绘制。
我将文件中的的1024px * 1024px复制到单独的文件中,通过标尺发现白色方块的上边距为90px,下边距为110px,左右两侧分别是100px的边距。

同时,还测量出内部的方块尺寸为 824px * 824px,边角半径为平滑 185px。

创建黑色圆角矩形
Apple对于方块阴影采用的是方块叠层,一个透明度为 30% 的方块,但奇怪的是阴影方块的尺寸为 878px * 878px,而不是 824px * 824px。

我尝试复现阴影部分,创建同样尺寸的黑色圆角矩形(824px * 824px)。

将黑色圆角矩形设置为高斯模糊。

然后将黑色圆角矩形转变为像素。

就会发现,黑色圆角矩形的尺寸从 824px * 824px,变成了 882px * 881px。与Apple的阴影尺寸(878px * 878px)相差不大(差了3个像素左右)。

然后,将黑色圆角矩形居中,或尝试向下偏移几个像素,让阴影效果显示在白色方块的下面。

最后,将白色方块改为显示,并且将黑色圆角矩形的透明度调整为 30%,从而实现图标尺寸的绘制。

完成图标
接着,我尝试测量Google浏览器的图标内边距尺寸,可以看到白色方块的内边距左右分别为60px,上内边距为67px,下内边距为50px。

我模仿Google浏览器的图标内边距,将自己的图标放入方块中。

最后,重新运行Xcode中的应用,可以看到图标的尺寸已经跟其他的图标尺寸相近。

从而,完成对macOS图标的设计。
总结
我在重新调整后,发现Google的内边距并不适合我的图标,让我的图标内容还是比较大。因此我在手动调整内边距,重新运行应用。

这时,图标的内边距明显,并且看上去更美观。
注意:如果尝试修改图标时,发现图标仍然是之前的尺寸/内容样式,可以尝试删除DerivedData文件夹下对应的项目目录,重新编译程序。
在访达应用中,按Command + Shift + G,输入
~/Library/Developer/Xcode/DerivedData/
在DerivedData文件夹中,找到对应的项目名 – 字符串的文件夹并删除。

然后重新运行Xcode,实现图标的更改。
参考文章
1、App 图标 | Apple Developer:https://developer.apple.com/cn/design/human-interface-guidelines/app-icons#macOS
2、Apple 设计资源:https://developer.apple.com/cn/design/resources/