01/ iOS 应用程序开发：使用苹果官方模版制作应用图标 - Sketch + Xcode

本文不会涉及任何代码。理解难度：2/5。

适用对象

考虑 iOS 开发的围观群众
对目前图标制作工作流不满的开发者
程序的美术设计

准备应用图标，是 iOS 应用程序开发的一个必须环节。此前，我折腾过不少方法试图完善这个工作流，也用过几个付费软件，但得到的结果都不甚令人满意。本文，我将讲解目前我使用的一个的比较令人满意的解决方案，此方案采用苹果官方模版并加以优化，可以保证输出图标满足 P3 色域，自动更新，方便填充等几个需求。

软件：Sketch 51.2 + Xcode 10
模版：Apple Design Resources 苹果官方 iOS 12 设计模版

由于目前使用的几个测试版软件暂无中文版，本文步骤将由英文版软件呈现，实际使用本教程视时，所有步骤中英文均为一一对应关系。

使用的素材

下面为本文中使用的所有素材，从左至右依次为：

苹果官方提供的 iOS 图标 P3 色域 Sketch 模版
其它程序制作的 SVG 版图标原型
展示用的空 Xcode 项目
修改后用于自动填充图标的 Json 文件

下载：王禹效 - 图标教程.zip

步骤

本教程共七步，我将以一个手绘图标为例，展示从制作到图标导出到实体设备的全过程。

第一步：将 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 文件即可。