本文不会涉及任何代码。理解难度:2/5。
适用对象
- 考虑 iOS 开发的围观群众
- 对目前图标制作工作流不满的开发者
- 程序的美术设计
准备应用图标,是 iOS 应用程序开发的一个必须环节。此前,我折腾过不少方法试图完善这个工作流,也用过几个付费软件,但得到的结果都不甚令人满意。本文,我将讲解目前我使用的一个的比较令人满意的解决方案,此方案采用苹果官方模版并加以优化,可以保证输出图标满足 P3 色域,自动更新,方便填充等几个需求。

软件:Sketch 51.2 + Xcode 10
模版:Apple Design Resources 苹果官方 iOS 12 设计模版
由于目前使用的几个测试版软件暂无中文版,本文步骤将由英文版软件呈现,实际使用本教程视时,所有步骤中英文均为一一对应关系。
使用的素材
下面为本文中使用的所有素材,从左至右依次为:
- 苹果官方提供的 iOS 图标 P3 色域 Sketch 模版
- 其它程序制作的 SVG 版图标原型
- 展示用的空 Xcode 项目
- 修改后用于自动填充图标的 Json 文件

步骤
本教程共七步,我将以一个手绘图标为例,展示从制作到图标导出到实体设备的全过程。
第一步:将 Sketch 模版定义为模版类型
为避免误修改 Sketch 模版文件,最好的办法就是让 Mac 将模版原型文件认定为模版类型。右键点击文件 Sketch 模版文件,点击「查看信息」,勾选「将此文件用作模版」即可。此时,但凡当你想使用此模版时,Mac 会自动帮你创建一个新文件,而不会覆盖原有官方模版。

第二步:将 SVG 图标导入 Sketch
从 Sketch 左侧的页码中,找到名为 Symbols 的这一页,将准备好的图标拖入上方巨大的空白方块「App Icon」中。此时 Sketch 会自动更新每一个所需图标大小。

第三步:取消圆角矩形蒙版
苹果官方模版中添加了圆角矩形的蒙版以供你设计参考,但实际导出时,你需要因此此模版涂层并导出正矩形的图标。从左侧列表中找到「App Icon Mask」并隐藏。

第四步:将图标导出到 Xcode 项目中
此时图标已经准备完成,这一步中我们直接将生成的图标导出到 Xcode 项目的图标库中。点击导出,并将图标导出到「Demo Xcode Project - Demo Xcode Project - Assets.xcassets - AppIcon.appiconset」文件夹中即可。

第五步:更新 Json 文件已保证图标自动链接
此时,我们所有的图标已经到出到 Xcode 的项目中了,但是 Xcode 自身提供的 Json 文件中并没有我们这些图标的相关数据。因此我制作了一个修改版的 Json 以便自动填充。仍在刚刚的到处文件夹 AppIcon.appiconset 中,将我提供的 Contents.json 覆盖原有 Json 文件即可。

第六步:打开 Xcode 检查图标是否正确导出
此时,若前几步执行正确,Xcode 中应该已经自动准备并填充好了所有图标。打开 Xcode 来检查下,看到的结果如下。此时,你可能会发现最底下有一个图标带一个黄色感叹号,这是因为苹果官方模版中提供的图标为照顾很久以前的 iOS 版本,提供了冗余图标,选中并将其删除即可。

第七步:欣赏完成的图标
在 Xcode 中,选择待测试的设备并点击运行。运行结果如下,所有位置的图标均应该正常显示。

视频版本
若你喜欢视频步骤指导,可以查看本教程的视频版本。链接如下: 如何使用 Sketch 制作 iOS 图标并自动填充 Xcode?

写在文后
每个应用程序的图标,或许是应用程序开发中最小的,但又绝不可或缺的那个点。使用本方法,可以保证你使用的图标框架永远是苹果官方提供的最新版本。无论你是图标设计师,还是程序开发者,都可以使用这个方法快速在设备上验证设计并完成图标制作。