原创：知识点总结性文章
创作不易，请珍惜，之后会持续更新，不断完善
个人比较喜欢做笔记和写总结，毕竟好记性不如烂笔头哈哈，这些文章记录了我的IOS成长历程，希望能与大家一起进步
温馨提示：由于简书不支持目录跳转，大家可通过command + F 输入目录标题后迅速寻找到你所需要的内容
目录
- 一、设计理念
- 1、存在问题的设计
- 2、好设计所具备的品质
- 3、平面设计原则
- 4、设计步骤
- 5、应用易用性评估
- 6、HIG 人机交互指南
- 二、安装设计工具
- 1、安装 Sketch 工具
- 2、安装 Apple的美术资源库
- 3、安装Apple的字体家族
- 4、安装Apple的图标系统 SF Symbols
- 三、用 Sketch 设计软件制作产品原型
- 1、基本界面
- 2、Canvas 画板
- 四、用 Sketch 将界面设计转为交互设计
- 1、UX、IxD、 UI 设计的区别
- 2、用 Sketch 将界面设计转为交互设计
- 五、应用图标制作
- 1、图标导入方案
- 2、应用图标制作工作流
- 参考文献
一、设计理念
1、存在问题的设计
下图是一位独立开发者分享的应用，这个应用中存在几个较为明显的设计问题。比如序号 1 所示的产品名称 ETTracker 字体间距设置过窄，字母好像被粘连在了一起；序号 2 所示的面板中，每一行的选项与文字都没有对齐；序号 3 中选单的透明度过高，导致选单中的 Anger 与后面的文字 #Tag 重叠在一起；序号 4 所示的字体选择不一致，Mood Level 为非衬线字体，Category 为衬线字体，观感上不一致。
设计问题
用上例讲解设计中存在的问题，并非为了批评这个应用。开发者来自不同背景，也许并不熟悉设计理论，初次尝试做应用多少都会犯错。上图中的应用从设计制作到最终在商店上架，作者可能也花了不少心思。但因其存在的设计问题，这个应用可能无法充分发挥其潜力，获得其应得的下载量，这便十分可惜了。
2、好设计所具备的品质
- 创新：好的设计既不是对现有设计的抄袭，也不是为了创新而硬憋出新的设计，创新源自于你对产品功能的思考。
- 实用：用户购买产品的本意是使用它，好的设计会提升产品的可用性，设计应履行产品的主要和次要功能。
- 美观：美学和易用性这两个词并不冲突，它们两是互相成就的。产品是用户生活的一部分，其美学品质与其易用性密切相关。美观的设计会让用户在使用时感受到喜悦，正面地影响用户心情。
- 易懂：好的设计应该是不言自明的，它应能准确地传达产品结构及用法。当用户上手产品时，设计本身能调动用户自身直觉，让用户理解产品所具备的功能。
- 克制：产品既不是装饰物也不是艺术品，其为明确的目的服务。设计本身应自然且克制，让用户自身来决定如何使用这款产品，从而实现自我意识的表达。
- 诚实：设计本身应充分表达产品所具备的功能，不夸大、不做作。设计不应通过无法兑现的承诺来操纵消费者的认知。
- 不受时间约束：许多产品为了追求潮流而一味追寻在设计上做文章，这类设计也许当下感觉不错，但其不具备长久性，几年后当潮流的风向变了，这些设计便会显得不入眼。好的设计是不受时间左右的，无论是当下、十年后，还是几十年后，都不会显得过时。
- 贯穿至产品的最后一丝细节：好的设计是从始至终的优秀。正如木匠不愿意在用户看不到的地方用糟木一样，好的设计是从一而终地维持高水准。与此同时，设计应经过充分测试，不让用户因不确定是否操作得当而感到无所适从。
- 环保：好的设计应尊重环境，索取有度而不过分消耗资源。设计者不应在被某个条框强制制约才去思考环境，而应在设计之初便将其对环境的影响纳入考量。
- 回归本真：回归本真指的不是懒惰地不经思考，也不意味着设计元素越少越好。回归本真是一种用心思考后的化繁为简，专注于产品想表达的最重要元素，不让用户因信息过多而分心。
上文提到的好设计所具备的品质，其用途不仅局限于应用领域。事实上，这些理念被广泛应用在设计的各个方面，无论是工业设计、软件设计、产品设计等都可以从中获得启发。
以下图 iPad 的 Pages 文稿应用为例，其界面设计十分克制，进入编辑模式后仍以文档为主体，仅显示共计 9 个未展开的功能按钮。当用户需要更改文字的设置时，将光标放在文字上右侧文本选单便会自动弹出，设计本身便传达了其功能。其设计也是对环境友好的，此时的环境指的是设备中所允许的其它应用，当用户只浏览文档而不需要编辑时，Pages 便不会开启编辑选项，节省下的内存可以避免系统中的其它应用因内存耗尽而被迫关闭。
3、平面设计原则
平衡
界面上所显示的所有内容，如图片、文字、按钮、开关等，都可以叫做视觉元素。每个视觉元素都带有视觉重量，较深的颜色视觉重量更重，较浅的颜色视觉重量较轻；较大的元素视觉重量较重，较小的元素视觉重量较轻。平面设计中的平衡指的是视觉观感上水平及竖直方向上的平衡，比如下图中，为保持左右两侧的视觉平衡，我将深色的色块缩小、浅色的色块增大，来维持这种相互制约的关系。
平衡
这类平衡不仅限于颜色和大小，比如你在某一边用了密集的文字，则该侧视觉重量较重。对应的另一边应放置视觉重量对等的东西与其平衡，让两侧维持一个均衡的重量。
相似
当想展现的界面元素属于一类时，你可以使用相似的设计来保持其一致性。当用户看到相似的界面元素时，他们会习惯性地将其归为同类。比如下图中的设计，左中右三组数据间距设置完全一致，唯独第三个采用了不同的设计。当用户看到这组内容时，会自动认为左边的两个指的是一类内容，而第三个指的是与前二者不同的其它内容。
相似
对齐
设计用心考量后的结果，不应存在界面元素随意摆放的情况，界面中的元素应保持视觉上的对齐。如下图所示，无论左侧对齐、居中对齐还是右侧对齐，都会给界面带来秩序与整齐的观感。
对齐
重复
当你想要保持界面元素一致性或强调某件事时，可以使用重复。重复指的是对同一个界面元素的复用，重复的元素可以是字体、颜色、布局安排等。复用会让用户体验到品牌的设计的一致性，也有助于用户识别并辨识你的应用。事实上，我们所用的许多应用都会在整个应用中重复使用某个主题色、界面风格和文字，目的正是在于强化用户对产品的认知。
重复
比如上图，即便将不同尺寸的方块、文字组合在一起，只要色彩是被重复使用的，你也会认为这是同一个产品。比如支付宝的蓝色、微信的绿色、淘宝的橙色。
反差
当你需要突出界面中两个元素具备不同含义时，可以考虑反差。反差与平衡和重复的目的恰好相反，是为了突出其差异性。比如 Apple 音乐中，用户最喜欢听的歌单用深色的大圆表示，偶尔听的歌单用浅色的小圆表示。
留白
设计不是堆砌，并不是信息呈现得越多越好。留白指的是在界面元素周边预留出空置区域，让界面元素呼吸，好像人不愿意挤在一起一样，界面元素也是一样。设计时应注意界面留白，留白区域有助于用户放松心情，独立思考，而不是被信息逼着走。留白并不意味着让你舍弃对新信息的呈现，而是思考什么东西要在什么时候呈现出来，不要一下子全部堆出来。
留白
比如上图中左侧，我给出了一个比较极端的例子，几乎不给留白全是信息。这类全是信息而没有留白的设计会给人非常压抑的感觉。而上图右侧则是采用留白设计的信息，信息的量处在一个合理可接受的范围内，也不会给人难受的感觉。生活中，我们不会把纸写满字，通常会在上下左右留出边距，这些边距就是留白。
结构
设计应用时，结构指的是个视觉元素之间的层级关系。比如一篇文章，你会希望用户从题图阅读起，然后是主标题，最后是正文。层级关系可以用下图所示的方法排列，其中题图是整个界面中的主导元素，主导元素告知用户从哪里开始，而后视线的动线会告知用户由上至下、由左至右浏览。
结构
以 iPhone 自带的天气应用为例，你会注意到整个界面元素沿屏幕中线对齐，界面左右两边几乎对称。顶部的当前天气为天气预报应用的重点，因此使用大字号加大反差，并在周边给出充分留白空间辅助用户定位。底部的每小时天气采用相似的设计，告知用户这些天气同属于以时间分类这个类别中。
天气应用
4、设计步骤
背景
和朋友制作独立游戏，我们去寻找了一些独立项目管理工具来辅助管理制作进程。在寻找这类工具的过程中，发现此类项目管理工具常偏向于团队项目管理，面向个人的项目管理工具较少且未看到我们在寻找的功能。这款应用的核心潜在用户是对某个东西抱有热情、却无法保障项目按时完成的兴趣爱好者、需要对项目规划管理的独立应用或游戏开发者。调研发现这是一个存在价值的机会后，我们使用了 SCAMPER 方法中的融合法则，向其中融合了计时器的功能，并准备制作这款应用用于案例讲解。
草图
草图也被称作 Low-fadility Prototype / Ideations / Sketches，其制作方法也很简单，就是用铅笔和纸把你的想法画出来。草图并非完美的项目设计，而是对你的想法的诠释，一般草图绘制用时也不长，5 至 10 分钟左右即可。
草图的优点在于非常容易制作，可以随时修改，也没有什么修改成本。草图制作成本很低，精度也不高，因此作者也不会特别执迷于某个设计，为项目留有修改余地。基于以上优势，草图很适合用于琢磨想法，以及验证应用的设计布局是否合理。下图是花了几分钟的时间将上述个人项目管理应用的想法绘制成草图。
草图
过渡图
草图也存在很多弊端，比如无法用于交互测试、也没办法仅凭草图去做应用设计。此时你便需要考虑提高设计的精度，用设计软件制作过渡图。过渡图只是从草图到高清图之间的完善工作，也叫 Mid-fidelity Prototype 中精度图或 Wireframes 线框图 ，其精度刚好处于草图和高清图之间。
高清图
也被称作 High-fadility Prototype，其主旨在设计软件中完善过渡图的内容，并将其制作成可被用于应用开发阶段的实际设计稿。高清图一般需要投入较多精力制作，且制作完成后于应用的成品非常相似。但由于高清图投入的时间与精力更多，修改起来更为复杂，因此不利于实践想法。
5、应用易用性评估
「我的应用好像存在问题，但我说不上哪做得不好。」无论是当你完成交互设计后遇到这个问题，应用已经发布后遇到此问题，还是在使用别的应用时遇到这个问题，都可以使用应用易用性评估 Usability Heuristics Evaluation 的方法来寻找问题的根结。易用性的评估包含下图中的 10 个衡量标准，下文将一一介绍并举例。
10 个衡量标准
明确的状态
应用本身应该随时告知用户所处的状态，不应让其感到困惑。比如我们常使用的微信视频聊天界面，如下图所示，左侧麦克风上划了一道杠，但用户到底静音了没有？中间的免提状态到底是开的还是关的？当用户无法判断这些信息时，说明该界面设计存在问题，用户会因为界面上的信息不明确而感到迷茫。
静音状态问题
部分应用滥用页面跳转，你可能会发现在使用的过程中，点了不同的链接之后应用一层层跳转。最终层数过多，用户不知道如何返回最初的页面，这也是一种状态丢失的表现。
告知用户状态的正面例子还有 Apple 新设计的睡眠界面。下图中高亮的颜色轮明确告知用户当前选中的时间，并允许用户随时拖拽调整。
睡眠状态
软件与真实世界认知的匹配
应用中的用词、配图等应该符合用户认知。比如若你在制作一款面向新人的健身应用，在不加解释的情况下使用减脂、有氧、箭步蹲、抓举、HIIT 等词汇，即便你可能对这些词很熟悉，但新人用户会感到非常迷茫。这便是因为应用中的用词与其个人经历不符。当你在考虑应用程序中的用词和设计时，应从用户的定位出发，给出他们可以理解的词汇。
用户掌握控制权
永远给用户提供紧急出口。比如当用户敲错了字需要更改的时候，应该有撤销或删除按钮在手边。比如消费应用的购物车就是这样的一个设计。用户把喜欢的东西放入购物车中，在还没有做出购买决定前，可以把它临时存储在一边。
标准和一致性
用户不应该因应用设计的不一致感到困惑。比如整个应用的返回方式，如果你依靠手势，可以一直是向左滑动来返回上一层。不能一会向左划，一会双击返回，一会长按返回；又比如你的应用一直是绿色代表确认，但忽然在确认按钮上用到了红色，此时用户便会因不一致性误操作。
辨识，而不是回忆
用户很擅长辨识，但不擅长回忆。这就好比你在经历考试，见到选择题会比较好做，而简答题就比较困难。这是因为简答题要求你回忆起答案，而选择题可以凭印象判断出哪个见过。
用户使用应用的情况有时就像考试。例如，当你登录应用程序时，如果它询问用户名和密码，你可能需要思考半天，也回忆不出用户与密码的正确组合。但如果你被问的是要登录 A 账号还是 B 账号，你可能不假思索就知道自己要用的是哪一个，这便是为用户提供可辨识的信息，而不是要求他们回忆。
以下图中的视频应用 Zoom 为例，每一个聊天室都有自己的 ID 账号。当用户输入完一次后，聊天 ID 便应该被记录在应用中。倘若没有记录，用户下一次打开应用便会面对这个界面，要求输入聊天室账号，大部分人是想不起来的。
Zoom的ID记忆
预防错误
在用户犯错之前就避免错误。等到用户犯了错之后再去纠正，用户不但会觉得反感，有时还会认为你的应用设计不合理。最好的方法便是在应用设计时尽可能消灭可能出现的错误，从而达到预防作用。
比如 iPhone 的键盘，当用户输入一个网址时，键盘便会切换至仅包含 .com 等与网页地址相关信息的版本。这样就可以避免用户错误输入一些其它信息，如数字或者 @ 这类与网页地址无关的特殊字符。
输入一个网址时的键盘
灵活且高效
新手用户需要明确指示，老手用户需要快捷实现目的。新手用户和老手用户的需求不同，你的应用应该灵活处理，满足不同类型用户的需求。举个例子，当你希望复制时，对于新用户也许会点击 「编辑 - 文本 - 复制」这三个菜单来找到这个按钮。为服务于老手用户，你可以提供一个快捷键 「Command + C」，这便是更周全的考虑。
又比如许多游戏的设计，一上来便是一个冗长的不可跳过的新手教学。若用户已经非常熟知同类型游戏，见到这些教学时便会想要跳过，不想白白浪费时间，游戏应该考虑到此类需求并提供跳过按钮。
简约且具备美感
应用传递的信息应简明扼要，避免过分堆砌信息。当信息过多时，用户便会感到困惑，不知道自己该点哪一个按钮。比如下图的 Photoshop 界面，当不必要的面板打开时，过量的信息会让人无所适从，反而降低效率。
Photoshop冗余信息
帮助用户纠正错误
如果用户犯错，应及时指出并提供解决方案。这一条与预防错误有所差异，错误预防指的是用户犯错前根治，不让问题发生。避免错误则指的是错误发生后，给出解决方案。比如 Xcode 中的自动错误纠正功能，便是在错误发生后，告知用户并试图提供解决方法。
Xcode 中的自动错误纠正功能
说明文档
即便你的应用设计非常地完美易用，也应该提供帮助文档。此类说明文档应专注于用户想做的事，避免呈现过度不相关的信息让用户迷茫。比如下图中的一个服饰销售应用，当用户好奇多久之内可以退货时，应用给出了一些列自动联想，以帮助用户提前筛选。
自动联想
6、HIG 人机交互指南
a、设计主旨
清晰明确
无论用户设置哪种字号，应用中的文字都应清晰明了，装饰图标等应恰当且呼应主题。你应始终关注用户与设备的交互体验，让设计服务功能。巧用前文提到的留白、字体、颜色等设计概念，用设计本身来告知用户哪些元素更重要，哪些元素可以被交互。
例如：下图中，我将系统的字号设置为最大。此时邮箱应用中的各收件箱名称依然清晰可辨。此外，重要的信息，诸如特别关注的 VIP 邮箱，被用黄色高亮，以帮助用户将其与其它界面元素的区分。
邮箱
界面退隐
界面本身不是应用的核心，不应该与重要内容争夺用户的注意力。当设计界面时，让重要内容占据屏幕的主体部分，适当采用透明、磨砂等特效来提示用户还有额外信息。克制的使用阴影、边框、渐变等设计元素，尽量保持界面设计的轻盈。
例如：下图中的应用文件夹功能，当点开文件夹后，你仍会依稀看到后面的其它应用。此时下图中展示的文件夹内部应用是界面主体，应该是用户最关注的东西。而半透明元素暗示了后面还有其它应用，不止这些可以被选用。
应用文件夹
层级关系
用清晰可辨的平面设计和交互来区分应用中不同元素的层级关系，进而帮助用户掌握应用的使用方法。当你希望提供更多信息时，可以采用恰当的过渡动画，加深用户对于这个操作从哪里出发，会把用户带到哪里去的理解。
例如：下图中在日历中创建了一个日程规划。当想调整该日程的时间时，可以长按这个图标并进行拖拽。在拖拽的过程中，日程的起点会用浅色标识，表明从这里出发。而移动中的日程则会随时跟着拖拽它的手指移动，明确告知这个日程最终会被改成什么时间。
日历
b、界面中的视觉元素
在应用程序设计中，主要的视觉元素分为三类，分别是： Bars、Views 和 Controls。
Bars
可以理解为界面中的各类边栏，其用途是告知用户处于应用中的哪一个页面中。这一部分边栏也可以进一步提供其它功能，比如添加功能性按钮。例如 Apple 音乐底边栏中的类别选择，本质上来说就是一个 Bar 的视觉元素，其用途是让用户在不同类别的视图中进行切换。
Apple 音乐底边栏
Views
可以理解为用户在应用中看到的绝大多数视觉元素，比如分割线、文本、图片等，这些视觉元素主要负责提供信息。例如 Apple 音乐中的推荐文字 Top Picks，音乐所配备的专辑图片等。
Apple 音乐
Controls
可以理解为控件，负责提供用户控制能力。比如文本框、开关、按钮、可拖拽的进度条等都属于此类。例如下图中音乐的操作界面，用户可以使用按钮暂停或播放音乐，也可以使用底部的拖拽条来调节音量。
调节音量
c、应用结构
首次启动应用
人与人相见第一印象很重要，应用程序也是。用户和你的应用第一次接触便是从商店下载后，首次启动应用时的感觉。第一印象的好坏直接决定用户是否还会打开第二次，也就是所谓的留存率高不高。在设计应用启动界面时，你应注意如下几点：
- 提供过渡界面：在应用进入主界面之前，通常会需要些微的时间进行载入。这一部分时间系统会将你的应用从硬盘转至内存中，并加载所需数据，初始化必要框架。你应该提供一份此阶段的过渡界面，给人一种应用已经在运作，马上就好的用户反馈。这份界面的显示时间的长短因设备而异，不应包含过量信息。
- 避免一上来就向用户索要权限和签订使用协议：用户下载好了你的应用便是准备开始做事，若你必须有设置需要咨询用户，也应该给出这些东西的默认选项，而不是一上来就开始询问问题。与之同理，避免一上来就把使用协议拍在用户脸上，并索要一堆权限。此时用户还不确定是否会使用你的应用，是否愿意放开这些权限，查户口式的询问很容易引起反感。
- 记录并恢复使用状态：用户不了解设备内存的运作原理，也没必要去了解。作为开发者，你的应用在启动之后应该恢复至上次用户离开时的状态，让用户可以继续操作。
- 避免展示广告：应用的载入界面不是宣传界面，应尽量让应用保持轻快地过渡到使用状态。
- 避免一上来就询问用户反馈：你可能使用过这类应用，打开后没多久就询问你喜欢吗，要不要去商店给个好评。用户需要一段时间的使用后，才会形成对使用体验的想法。若你过于迫切地想要反馈，容易引人厌恶而得不偿失。
一上来就利用应用启动页面载入广告，索要各种权限，强迫签订各种使用条款的例子比比皆是。差的例子我就不用多讲了，想必大家都有所感触。作为独立开发者，你的应用应致力于传递独特，美好的使用体验。这些优秀的体验，最终会转化为用户口口相传的好评。
欢迎界面
欢迎界面指的是应用启动后，可能会被显示的必要说明。比如应用的亮点更新、特性展示、使用说明等。繁琐的说明文档不能弥补应用设计存在不易用的问题，此类欢迎界面应尽可能地简短，并让用户快速进入使用状态。
一个优秀的范例是 Procreate Pocket 应用，这款应用下载后会提示一个简短的教学，专注于介绍用户不易察觉的手势操作。如下图所示，简单的动画指引过后便会进入主屏。
欢迎界面
展示临时信息
有时用户需要从当前场景中临时切换出来，专注于另一个需要输入信息的场景。这类场景被叫做展示 Modality。
如下图所示，展示所处的界面呈现方式更适合临时的信息索取，用户可以专注于信息输入中，并在结束时给出明确反馈，如取消或保存。比如下图中的新邮件发送界面，或前文提到的项目管理应用创建一个新项目。
展示临时信息
在不同界面中切换
用户不会太在意应用到底是如何存储数据的，只要他们能理清楚其中条理即可。作为开发者，我们的任务便是为应用提供明确条理，这些条理也被称作 Navigation。
有些应用会采用逻辑层级的导航方式，比如下图中的树状图。当用户一层层地前往树干的最深处时，想要切换到另一个菜单中，则需要一层层返回到那一层的原点，再进行切换。比如你想给设备改个语言，需要点击「设置 - 通用设置 - 语言和地区 - 显示语言」进行更改。此时若你还想调整耳机设置，则需要先从当前位置返回再前往新目标，如「语言和地区 - 通用设置 - 设置 - 蓝牙 - AirPods 设置」。
逻辑层级的导航方式
有些应用会采用水平层级的导航方式，如下图所示。这类导航方式有助于直接判断每一个选项会带他去哪里。以微信为例，点击「通讯录」会切换到好友列表，点击「我」则会切换到个人账户的设置。
水平层级的导航方式
有些应用会根据用户点击的内容决定导航路径。比如 Apple 图书应用中，用户可能从 11 页跳转到结尾处附录 1 去查看某一张图。读完了附录之后又可能直接跳转到 25 页的第二章阅读。
根据用户点击的内容决定导航路径
若你的应用内容非常丰富，你也可以采用以上几种导航方式组合的形式，来帮助梳理内容。比如下图所示的 Apple 播客应用，其中底部的选项卡采用的是水平层级的导航方式，让用户切换不同分页。而顶部则采用了逻辑层级的导航方式，让用户在播客节目和详情页中切换。
几种导航方式组合的形式
要求设备权限
为保护用户隐私，Apple 的设备会要求开发者在需要某些信息时向用户索要权限。比如地理位置信息、照片、通讯录等。上文提到，不要用户一打开应用就索要权限，这样又碍于体验而且很容易被拒绝。同时不应索取不必要的权限，比如一款天气应用，就完全没必要索取用户的通讯录。
具体什么时候申请这些权限呢？Apple 建议你在用户即将使用这个功能时再索要。在索要信息时，你需要明确说明需要这些信息的原因。比如一款健身应用，需要记录用户的地理位置来生成行动轨迹图。写明的原因需具体到点，不要模棱两可，如「我们需要你的地理位置信息来提供更优质的体验」，这样的说明和没说一样。
以下图的 Apple 的地图应用为例，倘若用户拒绝提供地理位置信息，地图应用会变成一个不以用户为基点，可以自由移动的纯地图展示应用。若用户需要导航，则需要手动输入地点。在设计之中，开发者需要灵活应对用户所做出的选择。
要求设备权限
设置
开发者应致力于提供最适合用户的设置，让用户上手就能用。不过有些时候，用户也许会倾向于定制应用的部分功能，来调整到一个更符合他们工作流的状态。此时你便可以提供一个应用中的设置菜单。
比如下图的书空应用中，部分界面可以被用户自由打开或隐藏。同时也可以根据自身喜好调节画布的反馈，像传统笔记应用一样只能上下滑动，或像绘画应用一样任意方向滑动。
设置
d、交互方式
长按菜单
Apple 对于呼出菜单的方式已经有过诸多尝试，比如前几年登陆 Apple Watch 和 iPhone 系列的 3D 压感交互。当用户重压设备后，设备会弹出应用的全局菜单。很可惜这一交互层级在真实设备交互时并不容易被感知，使用率不高。Apple 在 iOS 13 之后放弃了这一设定，转而走向了与内容关联度更高，可以跨平台应用的长按菜单方案。
其使用场景很多：比如用户在网页浏览，用户可以随时长按网页中的图片来呼出更多选项；在设备主屏幕点击应用图标进行快捷选项；甚至是如下图所示，在播客应用中点击节目来快速删除、下载、或分享。在不久的未来，用户会对长按菜单的使用场景越来越熟悉，若你的应用也支持长按菜单，用户能感受到它是系统的一致性体验的延伸。
长按菜单
Apple Pencil 手写
随着支持 Apple Pencil 的 iPad 设备种类的增加，更多的用户习惯让 Apple Pencil 成为他们与设备交互的一部分。在 iPadOS 14 更新后，Apple 为所有 iPad 用户增加了直接用笔在文本框中手写的能力，解决了一会用笔画一会点按输入文字在体验上有割裂感的问题。
假如你使用的是 SwiftUI 的默认组件，那么你的应用也会原生支持 Apple Pencil 手写。当用户进入手写状态时，你需要做的便是让被书写区域的位置保持不变，避免写着写着忽然滑动。
Apple Pencil 手写
手势
手势操作自 iOS 系统发布之初便是与设备的重要交互方式之一。基本手势有下图所示的点按、拖拽、滑动、缩放、旋转等。你甚至还可以在此基础上创建更复杂的手势，如双指点按。
- 尽可能使用标准的手势，用户对这些手势所代表的含义更熟悉
- 应用内的手势不应与系统手势冲突
- 手势仅作为辅助提升应用的易用性，并非完全替代某些功能
手势
拖拽
像 Mac 中拖拽文件就可以导出，拖拽图片就可以添加至聊天信息中一样，诸多 iPad 应用也支持这一操作，拖拽可以成为你的应用的易用性提升的一部分。
对于拖拽来说，你应该仔细考虑用户拖拽时和拖拽后的体验。比如下图中，拖拽时被选中的信息从高亮状态转为灰度状态，拖拽后界面显示出被拖拽物品的去向。
拖拽
光标
iPad 对光标的支持已单独开文讲解，若你对为应用添加对光标的支持感兴趣，可以阅读「从 iPadOS 光标设计看 Apple 的设计理念」。
验证身份
辨别用户身份可以帮助你为用户提供更定制化的体验，比如访问额外功能，同步信息，保护隐私信息等。若你的应用需要让用户登录和验证身份，可以考虑如下三种方式：Sign in with Apple 、Password AutoFill 或 Face ID & Touch ID。
其中 Sign in with Apple 常被用于与其它社交平台登录的位置，比如用微信登录等；Password AutoFill 常用在自动帮助用户输入之前记录的账号信息；Face ID 和 Touch ID 则被用在支持生物验证的设备上，便捷地访问某一类隐私信息。
设计应用时，不应一打开就让用户登录或注册，这样做容易打消用户探索应用的积极性。一般来说，要求用户验证身份的时机和申请权限的时机一致，在必须要使用这些信息的时候再去要求注册。比如在购票应用中，可以在用户浏览完，准备下单时，再要求用户登录或注册。
震动反馈
Apple Watch、iPhone 和 Mac 中的触摸板都搭载了精细度极高的震动反馈马达。对该马达的应用不仅局限于手机收到信息的提醒，也可以延伸至应用的各个方面。比如当你使用 iPhone 调节闹钟时，那个「咔哒咔哒」的触感便是触控马达的反馈，告知用户每一次震动都度过了一分钟。
若你的应用是个小游戏，可以使用触控马达在游戏胜利、失败、触碰机制时给出对应反馈；若你的应用属于其它类别，也可以使用触控马达在重要事件发生时给出与其对应的反馈。
在使用触控马达时，应注意不要过分使用，比如每按一个按钮就震动一次，用户也会感动厌烦。同样的震动模式应代表一个意思，比如轻微震动两次始终代表健身结束，轻微震动一次始终代表开始健身。这样能保证所感受到的震动和预期发生的事代表同一个含义。
二、安装设计工具
1、安装 Sketch 工具
市面上的设计工具品牌繁多，比如 Figma、Adobe XD 等。Sketch 便是其中一款广受欢迎的 UI 设计应用。它有许多适用于快速制作 Mockup 的实用功能，且 Apple 官方设计素材的 Sketch 版本会第一时间发布并自动更新，确保我们可以有最新素材使用，因此选用这个软件。
Sketch 是一款第三方付费应用，提供 30 天无条件试用，你可以自行决定是否购买。你可以在 Sketch 官网 下载并安装。
Sketch 是一次性付费的设计软件，若你暂时不想投入，也可以使用其试用版或免费设计软件 Figma、订阅制设计软件 Adobe XD 来跟着本文学习。这类设计软件功能与用法类似，一通百通。不过你需要自行适应各软件的界面差异。
安装 Sketch 工具
2、安装 Apple 美术资源库
Sketch 安装完成后，你还需要将 Apple 官方提供的美术资源库添加到 Sketch 中来。Apple 提供的美术资源库包括机身边框、常用系统 UI 等。在设计时，我们可以使用这些官方资源来快速制作出某个界面的感觉，让其具备系统原生控件的观感。应用程序发布时，我们也可以用这些资源来制作提交商店所需要的各种美术素材。
在Apple Design Resources 下载iOS Sketch Library。
下载iOS Sketch Library
也可以进入「Preferences」然后在窗口中打开「Libraries」选项卡进行下载。
下载完成后将.sketch文件拖动至右侧文件夹中即可完成安装。
安装完成后如下。
3、安装Apple的字体家族
大部分应用的主要内容均为文字，因此字体是应用辨识度的重要组成部分，稍微上心的字体选择可能让你的应用更容易被用户记住。我们在前期设计和后期编程中，均需要和这些字体打交道，建议优先安装。点击 Apple Fonts 依次下载安装所有字体即可。
安装Apple的字体家族
Apple 共为全平台设备设计了两种字体家族。分别以城市命名，其一为 San Francisco，为 sans-serif 无衬线字体，简称 SF；另一种为 New York，简称 NY，为 serif 衬线字体。
SF 为无衬线字体，清晰明了且非常适合在移动设备上阅读，因此是 Apple 绝大多数设备的默认字体。可惜显示屏较小的 Apple Watch 上使用标准 SF 字体未免太过于占用横向空间，因此 Apple 将 SF 家族以显示大小为依据分为 SF Pro 和 SF Compact，其中 Compact 版特别为小屏显示定制。在开发中，设备会自动根据显示设备和字体大小在这两种分类中切换。这里单独点出来是为了提醒你不要偷懒，都得安装，因为在设计软件中我们需要自行区分。
SF 字体还有几个风格上的区分。San Francisco为所有设备中最常见的，或者说默认风格的字体，开发中称作 .default；San Francisco Rounded为圆体字，被 Apple 用在如提醒事项等应用中，用于突出区分，开发中称作 .rounded；San Francisco Monospace为字符 character 等间距字体，适合用在需要对齐显示的区域，比如计算器中的数字，开发中称作.monospace。
NY 字体就比较好区分。它属于衬线字体家族，也就是字母的尾巴上会带一个小短线。它更为优雅，常被人与传统书信报刊联系起来，被 Apple 用在图书应用中，开发中称作 .serif。
4、安装Apple的图标系统 SF Symbols
前几年，开发者或 Apple 想要制作各种图标时，都需要自己准备。这样自行准备的方式会造成不同应用的图标风格，尺寸上很难保证一致性。那有没有更好的办法呢？ Apple 在 2019 年给出了官方答案，这套方案的名字叫做 SF Symbols 图标库。
从 SF Symbols 的名称上，你可以看出这套图标使用了和系统字体家族相同的命名方式。究其细节，是因为这套图标系统适配了 SF 字体下的不同风格，让图标与文字一同出现时并不显突兀。比如下图中长按弹窗适配的文字与图标，便采用了 SF Symbols 的方案。
长按弹窗适配的文字与图标
这套图标被 Apple 官方广泛使用，在 iOS 和 macOS 中，你会在几乎每个原生应用中见到这套图标的影子。开发者也可以在自己的独立应用中使用这套图标库，节省制作图标的时间外，还可以进一步缩小应用大小。
为方便开发者查找想要使用的图标，你需要在 Apple Developer - SF Symbols 下载并安装 SF Symbols 图标库。
安装Apple的图标系统 SF Symbols
安装完成后你会看到如下界面。部分图标的右下角有一个感叹号，这意味着对应图标已有明确功能指向，不得用做代表原功能外的其他用途。没有感叹号的图标开发者则可以自由使用。
图标库
对这套图标库的使用方式常见的有三种。当我们在 Sketch 中做设计时，若需要使用这些图标，直接将图标从 SF Symbols 图标库拖动至 Sketch 界面中即可；当我们在 Xcode 中开发应用时，则需要选中图标并按下 Shift + Command + C 键来复制图标名称到代码中。若 SF Symbols 图标库中没有找到你需要的图标，或者你希望自定义某个图标样式，则可以选中图标后按下 Command + E 来导出 SVG 文件进行编辑。
导出 SVG 文件进行编辑
三、用 Sketch 设计软件制作产品原型
1、基本界面
打开 Sketch 之后，你会看到其主屏幕分为 4 个区域，分别是：顶部菜单栏、左侧页面及图层、中部创作区域和右侧图层选项，如下图所示。与 Xcode 可以显示或隐藏不同区域不同，Sketch 的界面不支持分区控制，因此你的 Sketch 界面应与下图完全一致。
基本界面
菜单栏
顶部菜单栏包含了下图所示的各类功能选项。在这些选项中，画板 Canvas 指的是一个指定大小的绘图区域，素材 Data 指的是用于占位的临时图片或文字，控件 Symbol 指的是可以被反复使用的界面元素，图层 Layer 指的是文字、图片或任何其它界面元素。
菜单栏
作为应用设计者，这些菜单中你最常会用到的便是置入 Insert 选项。点击置入选项后，你会看到如下图所示的界面，询问你要添加什么内容。在这些选项中，有界面的基本形状，如矩形、直线等，还有字符、图片和画板。当你打开底部的控件、样式、颜色变量等组件时，会看到一系列 Apple 开头的控件，这便是Apple 官方资源库，你可以直接选择需要的元素添加至创作区域。
置入 Insert
图层及创作区域
在下图中，鼠标所点选的是中间深蓝色的矩形。左侧图层面板此时显示出了该矩形图层在创作区域中所处的位置，即处于名为平衡的画板中。在 Sketch 软件中，图层面板中图层位置越靠下，实际创作区域显示位置越靠前，这一点和 Photoshop 等工具的图层逻辑相同。
在右侧，你会看到图层选项中显示了被选择矩形的具体设置。对于该深蓝色矩形来说，没有边框、阴影等特殊设置，仅包含一个深蓝色的颜色填充。
图层及创作区域
2、Canvas 画板
a、新建画板
新建的空白 Sketch 文件中，创作区域是一块无限大区域，你可以在这片区域上创建任意内容。以少数派应用为例，若你想制作一个带壳截图，可以先在手机上截图，将图片拖拽至 Sketch 创作区域中，最后点击「置入 - Apple iOS UI - Device Bezels - iPhone」来添加手机边框。
添加手机边框
还有些时候，你需要更局限的操作空间来作为设计参考。比如当你希望制作应用在 iPhone 上的高清图时，所操作区域最好和真实设备等大，此时可以使用画板工具。画板指的是无限创作区域中的一小块指定大小的区域。以 iPhone 等大的画板为例，添加步骤为「+ - 画板 - iPhone」，如下所示。
画板
接下来的步骤中，我们将以此画板为起点，使用 SF Symbols、Apple 设计资源、Sketch 相关技巧来制作一个「城市指南」应用的主界面。
b、向画板中放置基本几何图形图层
首先使用上文提到的置入基本图案的方法向画布中放置一个圆，并在右侧图层设置选项中去除该圆的边框，流程如下图。
放置一个圆
c、用图层关联制作自定义图形
Sketch 是一款矢量设计工具。上一步中制作的圆，其目的是作为城市指南的照片展示之用。假设我们不想要一个标准的图形作为展示框，也可以在 Sketch 中直接对基本图形进行矢量运算，来创造新的形状。下图中，新增了一个方形，并选择了顶部菜单栏的矢量减法按钮，来制作了一个不标准的圆形。
用图层关联制作自定义图形
d、自动填充占位用的图片
在应用设计的过程中，我们经常会需要一些图片或者文字来模拟真实数据。你可以自己上传电脑中的图片，不过这或多或少有些麻烦。Sketch 为我们提供了一个很方便的在线素材库，可以一键导入随机图片。
下图中，我新建了一个方形用于容纳图片。接着选中「素材 - Unsplash - Random Photo」来为方形填充图片。Unsplash 是一个在线摄影分享网站，其与 Sketch 合作制作了这款素材工具，来帮助开发者和设计师快速地在设计中导入图片。若你对默认给出的随机图片不满意，也可以直接选择「Search Photo」来搜索你想添加的内容。
自动填充占位用的图片
e、用蒙版指定区域填充
有了图片之后，下一步便是将图片与之前制作好的圆形框组合在一起。此时图片是独立的图层，之前制作好的圆形也是独立的图层。将两个独立图层结合在一起的方法叫做「蒙板」，其用途是将位置于前方的图层内容保留下来，与位置于后方的图层结合，并给出组合结果。如下图所示，选中前后两个图层后，从菜单中选择蒙板即可对二者进行组合。
用蒙版指定区域填充
f、调整图层设置
针对任意图层，Sketch 一般提供「填充、边框、阴影、样式、模糊」这几个选项。当你希望给图层添加这些选项时，只需从左侧图层面板中选中图层，并在右侧图层选项中点击「+」选择想要的特效即可。下图中，我为城市预览图增加了阴影特效，并适当调低了其不透明度。
调整图层设置
g、置入 Apple 官方设计元素
Apple 官方的设计资源不仅包含了设备边框，还包含了诸多设备中常见的特效和视觉组件。比如 iPhone 中的毛玻璃特效、按钮、选单等等。其使用方法与上文所述添加边框的方法一致。依次点击「置入 - Apple iOS UI」并选择自己所需的组件即可。
下图中，我导入了一个 选项控制 Segmented Control 的组件，并为底边栏添加了切换视图 Tab View。若你对这些 Apple 提供的视图还不熟悉也没关系，未来介绍 SwiftUI 时我会详细讲解常见视觉元素的用途。
置入 Apple 官方设计元素
h、加入 SF Symbols 图标
导入了底部的切换视图后，你会发现这与设计所采用的全面屏 iPhone 设计不一致。不必担心，寻找 Apple 素材中全面屏 iPhone 底部的指示器，并调整背景色即可。如下图所示，我添加了这个全面屏 iPhone 的指示器，并对底部不搭的颜色做了修改。
添加全面屏指示器
当你需要在设计中增加图标时，最方便的方法便是 Apple 官方提供的 SF Symbol。用 SF Symbol 做设计图，可以保证未来在 Xcode 中写真实代码时无需额外导入步骤，且效果与设计图完全一致。SF Symbols 有两种导入方法，一种是直接作为文字导入，另一种是作为图片导入。这两种导入方式都在 Sketch 中得到了很好的支持。
下图中，我对底边栏的图标通过直接粘贴 SF Symbols 文字的方式进行了替换。打开 SF Symbols 软件，挑选你喜欢的图标，并点击顶部菜单栏「编辑 - 拷贝符号」来提取该图标所对应的文字。最终作为文字粘贴在 Sketch 的文本框中即可。
修改底边栏的图标
有时直接粘贴文本的方式也有些麻烦，此时你便可以直接使用拖拽的方式，将 SF Symbol 以向量图形的方式导入。如下图所示，我直接将所选的「喜爱」心形图标从 SF Symbols 应用中拖拽到了 Sketch 画布里。
I、将界面元素制作为控件以便复用
Sketch 的参考线功能非常方便，若你需要参考线，直接从尺子中拖出即可。当界面元素靠近参考线时，Sketch 会自动帮助你对齐。对齐时触控板会发出震动，此时松手就可以了。一般情况下，参考线会自动在恰当的时机出现，若你希望长期看到参考线，也可以使用上述方法手动添加。
高清图的设计常常面临后续修改的情况，若一个个手动选中修改则工作量极大。为解决这一问题，Sketch 提供了一个非常重要的功能，叫做控件 Symbol。控件和之前 Swift 编程语言中所述的类 Class 概念完全一致，其用途是创建一个模版，所有模版都可以都与该控件相连接。每一个使用控件所创建的界面元素叫做「实体 Instance」。若你修改其中任意一个实体，则与控件相连接的所有实体都会被改变。
控件的使用方法很简单，选中你希望重复使用的界面元素，点击顶部菜单栏的「创建控件」即可。当需要使用时，依次点击「置入 - 控件 - 当前文档」，并选择你需要的控件即可。下图中，为方便复制，我将城市温哥华及其城市图片做成了一个控件，取名为城市卡片。接着创建了多个控件实体，如下图所示。
将界面元素制作为控件以便复用
上一步中，我用参考线将每个卡片进行水平对齐。但竖直方向的间距没有好用的参考线，因此存在间距不等的问题。此时你可以选择使用 Sketch 右侧边栏的自动对齐工具，选中多个元素并点击对齐图标即可。如下图所示，我使用对齐等间距工具对竖直方向存在的间距问题进行纠正。
对齐
目前所有城市卡片中的城市和图片完全一致，这样的高清图不符合实际情况。此时又可以用到 Sketch 的自动填充图片和文字的功能，为其填写随机值。效果如下图所示，所有图片和文字都被改变，城市卡片的数据看起来更加真实。Sketch 提供了一些常用的图文，若这些不符合你的需求，你也可以自行创建一个随机值文档供 Sketch 使用。
随机图片
之前提到，控件的好处是可以随时调整设计，而不必一个个单独选中。当你创建第一个控件时，Sketch 会单独创建一个名为「控件」的页面，这个页面中包含了所有控件实体的唯一修改地点。当你对此页面的控件进行修改时，文件中其它地方的所有控件实体都会被改变。比如下图中，我将控件城市卡片的文字改为渐变色，返回后你会看到所有文字都被修改。
所有控件一起修改
修改控件所带来的全部控件实体修改，有时并不是我们想要的结果。比如在城市指南应用中，其具备用户点选「喜欢」城市的功能。以下图的上海为例，我想点选喜欢「上海」这个城市。但此时上海卡牌与控件绑定，修改单张卡牌会导致所有卡牌都被改变，此时可以对上海这一张卡牌进行「与控件解绑」的处理。解绑后的卡牌与控件再无关联，可以随意修改而不必担心其它界面元素被影响。
单个控件解绑修改
J、导出设计
高清图制作完成后，最后一步便是将其导出。Sketch 中导出的方法很简单，选择你希望导出的界面元素，点击右侧「制作导出项」旁边的加号即可。你可以直接将生成的文件拖拽至桌面以保存，也可以点击顶部菜单栏的「导出」按钮来对整个文档所包含的内容进行批量导出。
导出设计
H、完成图
经过以上这一系列步骤，我们完成了对城市指南主界面高清图的制作，效果如下。
效果如下
四、用 Sketch 将界面设计转为交互设计
1、UX、IxD、 UI 设计的区别
UX
是对应用操作逻辑的思考，这一步也叫做用户体验设计 User Experience，它代表着你对应用程序内在逻辑的思考。比如当用户想要在你的记账应用中统计当月账单时，UX 常会讨论的问题有：这个步骤需要几步操作，学习成本高吗？用户能否在合理的时间内完成这一步骤？为什么应用没有提供某个功能？
IxD
也叫做交互设计 Interaction Design。当你的脑中或草稿上已经大致有了对应用体验的构思后，下一步便是思考实现这些构思的步骤。比如用户打开一个账本后，统计账单需要先点击日历中的某个按钮，此时会弹出一个界面，询问要导出的日期范围。
UI
它最好理解，代表的是应用程序到底长什么样。比如按钮的外观、应用的主题色等，到底如何被展示出来，都属于界面设计 User Interface 的范畴。
这三个概念，从宏观的角度看，大概是如下图所示的包含关系。UX 相对抽象，代表你想给用户一个什么样的使用体验；IxD 则关注这些设计之间的关联性，如何从一个地方到另一个地方；UI 则是非常具体的元素样式。
2、用 Sketch 将界面设计转为交互设计
本例中我们希望制作一个交互，当用户点击左侧方形图案时，跳转至右侧圆形，步骤如下。
步骤 1
选中方块，点击右侧「原型 + 」按钮。
原型 +
步骤 2
点击加号后，你会注意到屏幕上出现了可以随意移动的箭头，如下图所示。这个箭头代表你希望这个交互带用户去哪里。我们需要它指向下一个画板，因此需要将箭头拖拽值右侧。
将箭头拖拽值右侧
步骤 3
除了跳转外，你还可以选择跳转时的动画，比如向左或向右滑动。这些设置可以在下图中的「动画」面板找到。本小节中，我将切换动画选择为向左滑动。
切换动画选择为向左滑动
步骤 4
制作应用交互时，许多时候我们不但需要跳转到另一个界面，还需要一条路径让其返回原界面。此时你可以选择右侧的圆形，并重复步骤 1 - 2 。在目标这一栏，你可以直接选择「上一块面板」，如下图所示，代表原路返回。
原路返回
步骤 5
想要看到最终交互效果时，点击 Sketch 顶部菜单栏右侧的「预览」按钮，效果图如下。
效果图
Sketch 的交互功能非常简单易用，介绍就到此结束了。我们使用此方法对所制作的「项目管理」应用平面设计图添加了交互，最终结果如下图。
若你对 Sketch 提供的基本功能不满，还需要更多的交互，比如你的应用支持长按弹出菜单等，可以考虑使用更专业的交互制作应用，如 InVision Studio。这款免费应用是由原 Sketch 第三方交互插件团队制作的，因此界面、操作逻辑和用法与 Sketch 几乎完全一样，甚至可以直接导入 Sketch 文件。除了交互功能更多外无额外学习成本，不再赘述界面及用法。
使用 InVision Studio 可以实现更多的交互效果，如下图中的点击时缩放等，你甚至可以像使用动画软件一样调整关键帧。若你需要向投资人展示你的应用，建议考虑使用这类更专业的交互软件制作交互，能更好的展现你的设计。
InVision Studio
五、应用图标制作
1、图标导入方案
应用图标制作是 Xcode 中一个独特但很重要的工作流。每个应用程序的图标，或许是应用程序开发中最小的、但又绝不可或缺的那个点。使用本工作流，可以确保你使用的图标框架始终是 Apple 官方提供的最新版本。无论你是图标设计师、还是程序开发者，都可以使用这个方法快速在设备上验证设计并完成图标制作。
a、方案一
若你没有设计背景，或在图标制作过程中卡壳，可以考虑使用第三方图标设计工具来组装出应用图标，比如 Assembly - Art and Design。
应用图标制作
b、方案二
下面的图标导入方案采用 Apple 官方模版并加以优化，输出图标满足 P3 色域、自动更新、方便填充等几个需求。你可以在这里下载所有素材：百度网盘
- 修改后用于自动填充图标的
JSON文件 - 其它程序制作的
SVG版图标原型 - 展示用的空
Xcode项目 - Apple 官方提供的 iOS 图标
P3色域Sketch模版
2、应用图标制作工作流
若你以后希望自行对这套工作流进行更新，流程如下：
第一步：将 Sketch 模版定义为模版类型
为避免误修改 Sketch 模版文件，最好的办法就是让 Mac 将模版原型文件认定为模版类型。右键点击文件 Sketch 模版文件，点击「查看信息」，勾选「将此文件用作模版」即可。此时，但凡你想使用此模版时，Mac 会自动帮你创建一个新文件，而不会覆盖原有官方模版。
定义为模版类型
第二步：将 SVG 图标导入 Sketch
从 Sketch 左侧的页码中，找到名为 Symbols 的这一页，将准备好的图标拖入空白方块「App Icon」中。此时 Sketch 会自动更新每一个所需图标大小。
将 SVG 图标导入 Sketch
第三步：取消圆角矩形蒙版
Apple 官方模版中添加了圆角矩形的蒙版以供你设计参考，但实际导出时，你需要隐藏此蒙版图层并导出正矩形的图标。从左侧列表中找到「App Icon Mask」并隐藏。
取消圆角矩形蒙版
第四步：将图标导出到 Xcode 项目中
此时图标已经准备完成，这一步中我们直接将生成的图标导出到 Xcode 项目的图标库中。点击导出，并将图标导出到「Demo Xcode Project - Demo Xcode Project - Assets.xcassets - AppIcon.appiconset」文件夹中即可。
将图标导出到 Xcode 项目中
第五步：更新 JSON 文件以保证图标自动链接
此时，所有的图标已经导出到 Xcode 的项目中了，但是 Xcode 自身提供的 JSON 文件中并没有这些图标的相关数据。因此我制作了一个修改版的 JSON 以便自动填充。仍在刚刚的导出文件夹 AppIcon.appiconset 中，将我提供的Contents.json覆盖原有JSON文件即可。
更新 JSON 文件以保证图标自动链接
第六步：打开 Xcode 检查图标是否正确导出
此时，若前几步执行正确，Xcode 中应该已经自动准备并填充好了所有图标。打开 Xcode 来检查下，看到的结果如下。此时，你可能会发现最底下有一个图标带一个黄色感叹号，这是因为 Apple 官方模版中提供的图标为照顾很久以前的 iOS 版本，提供了冗余图标，选中并将其删除即可。
打开 Xcode 检查图标是否正确导出
第七步：测试图标
在 Xcode 中，选择待测试的设备并点击运行。运行结果如下，所有位置的图标均应该正常显示。
测试图标
网友评论