工欲善其事,必先利其器,本章将会带你了解独立开发中需要用到的工具作为准备工作。在软件和技术的选择倾向上,我们会使用 Apple 官方出品的软件,并使用最新的技术流程开发。在设计方面,我们会使用 Apple 官方素材更新最及时的第三方软件。

做独立开发,你需要一台电脑。Mac 电脑仍是为 Apple 设备开发的最佳选择 ,下文所有准备工作将以 macOS 系统下的工具为准。若你暂时只有 Windows 电脑或者 iPad 但仍想学习 iOS 独立应用开发,请阅读文末介绍的替换产品。

教程后续用到的工具不会再单独列出安装说明,所有工具以本文为准。我会明确说明会在第几章用到这一软件或工具。

Apple 开发者帐户

Apple 开发者帐户 是针对应用商店上架应用,向开发者收取的会员费用。学习本教程的绝大多数内容时,你只需要免费的 Apple ID 即可,不需要 Apple 开发者帐户。免费帐户可以让你使用开发工具 Xcode 及它的绝大多数功能。

Apple Developer Program

当应用制作完成,你希望分发给其他用户进行测试、或在商店发售时,无论以免费还是付费的形式分发,你都需要缴纳 99 美元的年费将自己的免费帐户升级为 Apple 开发者帐户。这 99 美元的年费中包含两次直接向 Apple 工程师做技术咨询的机会。若你的应用程序已经接近这一步,你可以点击 Apple 开发者帐户网址 进行升级。

核心开发工具 Xcode

外出野营时,很多人会选择一把功能齐备的瑞士军刀。在软件开发领域,这种多功能的开发工具叫做 IDE (Integrated Development Environment)。用于开发 iOS 及 Apple 各平台软件的 IDE 叫做 Xcode,它由 Apple 官方开发并维护,支持与可靠性有所保障。

Xcode 会为每个开发中的应用创建一个文件夹,你可以把它理解为一个容器。开发中应用所需要的全部素材,包括代码,图片等都需要放在这个容器中。如下图所示,左侧的根文件夹便是一个名叫 Siderbar 的应用程序。

Xcode 项目文件

此外,Xcode 还包含许多常用开发工具,下图中展示了其中一些。比如在 Mac 上模拟不同设备的模拟器 Simulator、用于检查程序问题的 Instrument、负责代码版本管理的 Git、训练机器学习模型的 CreateML、负责创建 AR 场景的 Reality Composer 等。Xcode 界面及核心功能会在文章 1.3 中介绍,其余开发工具会在用到时逐一讲解。 

Xcode 自带的开发工具

Xcode 是应用程序开发的核心工具。不仅覆盖了编程语言、框架、编译器等核心资源外,还是应用上架过程的重要一环。我们开发周期的大部分时间都需要它,因此要优先安装。Xcode 每年会更新一个大版本号,而此大版本号的第一个正式版会在每年 9 月发布至应用商店以便所有人下载。2020 年发布的版本是 Xcode 12。每年 6 月 WWDC 开发者大会后便会放出 Beta 版本,以便开发者提前学习测试新功能,

2020 年是 ARM 版 Mac 的改版年,macOS 因此获得全新设计,为配合新时代的设计风格,Xcode 的界面也有较大变动。为保障时效性,本教程使用最新版本配图。免费版的Apple ID 只能下载正式版,开发者帐户则允许下载 Beta 测试版。你可以在 Xcode Releases 下载 Apple 帐户允许的最新版 Xcode,并进行安装。

Xcode 的性质稍有特殊,它会在安装完成后创建与系统其它部分的联动。建议下载完成后直接拖动到本机的应用程序文件夹中,不要安装在外置硬盘,以防出现未知错误。安装过程中可能会出现开启开发者模式或安装其它组件的提醒,选择允许即可。

设计工具 Sketch

市面上的设计工具品牌繁多,比如 Figma、Adobe XD 等。Sketch 便是其中一款广受欢迎的 UI 设计应用。它有许多适用于快速制作 Mockup 的实用功能,且 Apple 官方设计素材的 Sketch 版本会第一时间发布并自动更新,确保我们可以有最新素材使用,因此选用这个软件。

Sketch 是一款第三方付费应用,提供 30 天无条件试用,你可以自行决定是否购买。我们将在文章 3.3 中详细介绍并使用 Sketch 软件,到时候你可以在 Sketch 官网 下载并安装。

设计软件 Sketch

Sketch 安装完成后,你还需要将 Apple 官方提供的美术资源库添加到 Sketch 中来。在 Apple Design Resources 下载 iOS Sketch Library。下载完成后将 .sketch 文件拖动至右侧文件夹中即可完成安装。

Apple Design Resources

Apple 提供的美术资源库包括机身边框、常用系统 UI 等。在设计时,我们可以使用这些官方资源来快速制作出某个界面的感觉,让其具备系统原生控件的观感。应用程序发布时,我们也可以用这些资源来制作提交商店所需要的各种美术素材。

字体家族

Apple 共为全平台设备设计了两种字体家族。分别以城市命名,其一为 San Francisco,为 sans-serif 无衬线字体,简称 SF;另一种为 New York,简称 NY,为 serif 衬线字体。

SF 为无衬线字体,清晰明了且非常适合在移动设备上阅读,因此是 Apple 绝大多数设备的默认字体。可惜显示屏较小的 Apple Watch 上使用标准 SF 字体未免太过于占用横向空间,因此 Apple 将 SF 家族以显示大小为依据分为 SF Pro 和 SF Compact,其中 Compact 版特别为小屏显示定制。在开发中,设备会自动根据显示设备和字体大小在这两种分类中切换。这里单独点出来是为了提醒你不要偷懒,都得安装,因为在设计软件中我们需要自行区分。

SF 与 NY 字体

上图中,我将 SF 和 NY 字体分别列出来,你会发现 SF 字体似乎还有几个风格上的区分。其中第一个为所有设备中最常见的,或者说默认风格的字体,开发中称作 .default;第二个为圆体字,被 Apple 用在如提醒事项等应用中,用于突出区分,开发中称作 .rounded;第三个为字符 character 等间距字体,适合用在需要对齐显示的区域,比如计算器中的数字,开发中称作 .monospace。

NY 字体就比较好区分。作为上图中最后一个字体,它属于衬线字体家族,也就是字母的尾巴上会带一个小短线。它更为优雅,常被人与传统书信报刊联系起来,被 Apple 用在图书应用中,开发中称作 .serif。

字体下载界面

大部分应用的主要内容均为文字,因此字体是应用辨识度的重要组成部分,稍微上心的字体选择可能让你的应用更容易被用户记住。我们在前期设计和后期编程中,均需要和这些字体打交道,建议优先安装。点击 Apple Fonts 依次下载安装所有字体即可。

图标系统 SF Symbols

前几年,开发者或 Apple 想要制作各种图标时,都需要自己准备。这样自行准备的方式会造成不同应用的图标风格,尺寸上很难保证一致性。那有没有更好的办法呢? Apple 在 2019 年给出了官方答案,这套方案的名字叫做 SF Symbols 图标库。

从 SF Symbols 的名称上,你可以看出这套图标使用了和系统字体家族相同的命名方式。究其细节,是因为这套图标系统适配了 SF 字体下的不同风格,让图标与文字一同出现时并不显突兀。比如下图中 Safari 浏览器长按弹窗适配的文字与图标,便采用了 SF Symbols 的方案。

点按图片后的弹窗 - 周远玉 Extoris Project Design Concept Art

这套图标被 Apple 官方广泛使用,在 iOS 和 macOS 中,你会在几乎每个原生应用中见到这套图标的影子。开发者也可以在自己的独立应用中使用这套图标库,节省制作图标的时间外,还可以进一步缩小应用大小。

为方便开发者查找想要使用的图标,你需要在 Apple Developer - SF Symbols 下载并安装 SF Symbols 图标库。安装完成后你会看到如下界面。部分图标的右下角有一个感叹号,这意味着对应图标已有明确功能指向,不得用做代表原功能外的其他用途。没有感叹号的图标开发者则可以自由使用。

SF Symbols 软件

对这套图标库的使用方式常见的有三种。当我们在 Sketch 中做设计时,若需要使用这些图标,直接将图标从 SF Symbols 图标库拖动至 Sketch 界面中即可;当我们在 Xcode 中开发应用时,则需要选中图标并按下 Shift + Command + C 键来复制图标名称到代码中。若 SF Symbols 图标库中没有找到你需要的图标,或你希望自定义某个图标样式,则可以选中图标后按下 Command + E 来导出 SVG 文件进行编辑。更具体的使用方式我们会在教程范例的使用中谈到。

使用 iPad 下的替代品

目前 Xcode 暂时还没有 iPad 的版本,但是你可以使用其它替代软件来跟随本教程学习。请注意,替代软件的使用方法会和本文中描述的有些许差别,虽核心思想类似,但你可能需要自行适应不同软件。

Swift Playground 是 iPad 端一款由 Apple 官方开发的编译平台,它支持完整的 Swift 语法和部分系统框架,你可以在学习 Swift 和 SwiftUI 语言的地方使用这款软件。只需要在 iOS 应用商店搜索即可免费下载。下载完成后,从模版中选择 Blank 空白模版即可开始编程。

在 Swift Playground 上使用 SwiftUI 需要导入 PlaygroundSupport 框架。在空白模版中输入下图中代码即可获得和 Xcode 类似的预览视图。但和 Xcode 端有区别地方是,Swift Playground 的预览视图不会自动更新,因此你需要每次修改完代码后都需要重新运行。

Swift Playground

对于设计软件 Sketch 的替代品,你可以考虑配合触摸板使用网页版的 Figma,其使用方法与 Sketch 大同小异。当你的想法已经比较成熟时,可以去租借一台 云 Mac 来使用 Xcode 创建项目。

使用 Windows 下的替代品

Windows 平台下设计软件替代品较多,比如 Figma 或者 Adobe XD 都可以,不再赘述。Swift 语言学习这方面也比较好解决,你只需要选择一个好用的 Swift 在线编译器 即可。

值得注意的是,这些在线编译器 Swift 语言版本进度可能不是最新,因此你会在极少数情况下遇到语法不支持的情况。这个问题不大,目前 Swift 语法也很稳定了,若你遇到这个情况,只需要去搜索下在线编译器支持版本的 Swift 写法即可。

在线编译器

有些麻烦的依旧是 Xcode 的替代品,第三方的 Swift 在线编译器普遍不支持包括 SwiftUI 在内的 Apple 第一方框架。若你已经完成语言和设计的学习,找到了兴趣并希望能更进一步,你可能仍需考虑租借一台 云 Mac 的方案。

总结

文中下载链接汇总:XcodeSketchiOS Sketch LibraryFontsSF Symbols

本文中,我们简单认识了开发流程中的最重要的瑞士军刀 Xcode,用于制作产品原型的设计工具 Sketch, Apple 官方美术资源 Sketch Library,系统字体家族 SF 和 NY,以及图标系统 SF Symbols。你可能会一下觉得工具众多,别担心,我们会用整个教程来梳理这些工具的用法。

下一篇文章中,我们将用一个随机地点生成器应用为例,来完整介绍独立开发的工作流程。