作者：张子怡
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
自己动手做iOS App：从设计开发到上架App Store试读：
前言
关于这本书
这几年Apple产品的迭代速度变快，连带着对应用制作需要学习的知识更新也加快了。连有经验的制作者都感叹今天学习的知识很快就用不上了，对于新人来说，恐怕更不知道如何下手接触应用制作。但是即使知识更迭得再快，只要沉淀下基本的构建思想和制作过程，便能以不变应万变，一步步深入地学习应用制作技能。
我喜欢把做软件应用比作设计制造一辆汽车，有各种专业书籍对怎么设计车的外型、用什么材料、发动机应该怎么组装、以及车内该如何布置等详细讲解，但是对于一个新人来说，这些书籍摆在他面前，他也无法知道从何开始，即使把发动机部分学得滚瓜烂熟，去实际生产一辆车恐怕也是障碍重重。本书将需要用到什么工具、如何设计、如何开发、如何发布到市场等知识贯穿起来，手把手地带领新人从零开始，我想从这个角度切入iOS应用制作，来得更实际一些。
2016年年底我设计、开发并上架了一款名为Oslo的iOS应用，可以在https:// itunes.apple.com/us/app/oslo-mobile-unsplash/id1184226442?mt=8，或者在App Store中搜索Oslo Mobile Unsplash 下载。这款应用的UI设计是Sketch，应用图标设计是Affinity Designer，开发环境是Xcode 8.2.1，开发语言是Swift 3.0.2。我相信边学习、边实践是最快、最有效的途径，因此这本书会以这款应用为案例，带你一步一步制作一款最终上架到App Store的应用。学习过程中不但涉及设计或者开发方面的概念讲解，同时还结合了实际的制作，让你对iOS的应用制作有更深刻的了解。
当你跟随这本书全部做下来后，你将会充满信心地做出属于自己的iOS应用，当初那种对设计缺乏自信，对编程敬而远之的心情将不复存在。所以，上路吧！
谁需要读这本书
如果你是一名没有接触过iOS应用制作的新人，你是否有过这样的问题：
· 我该从哪里入手学习iOS应用制作，哪些资源是针对初学者的，又如何入门？
· 要使用哪些工具，如何快速上手？
……
如果你是一名设计师，你是否有过这样的问题：
· 我应该用什么规格的画布来做UI，应该导出什么样尺寸的图标应用到开发中？
· 怎样才能快速填充好各种头像？
· 怎样做快速原型（Fast Prototype）？
· 看到代码就害怕，即使学习了也无法应用到实际中，该怎么办？
……
如果你是一名工程师，你是否有过这样的问题：
· 怎样通过Storyboard快速、简单地实现多屏幕适配？
· 对色彩和绘图完全不在行，这样如何做设计？
· 我想了解一些最新的语法和开发环境的特性。
……
所以无论是入门者或专业人士，都可以从本书吸取到适合自己的新的知识，或者对平常模棱两可的问题得到答案。当然如果你只是初次接触iOS应用制作，那么这本书会由浅入深，一步一步带你拓展和提升，最终获得不输给专业人士的能力。同时，本书适合有热情制作iOS应用的所有人。
使用到的工具
本书使用到的硬件有MacBook、iMac、Mac mini三种，使用系统为macOS。Xcode 8.3.3
Xcode是Apple系列产品开发的主要工具，同时包含了Swift。在Mac App Store 中搜索Xcode 下载，或者在https://developer.apple.com/download/下载测试版。书中使用的版本是Xcode 8.3.3。注意，Xcode 8.0才包含Swift 3，这也是书中主要使用的程序语言。Sketch 44.1
Sketch帮助快速实现应用原型，也能满足界面要求较高的制作。在http:// sketchapp.com/下载。书中使用的版本是Sketch 44.1。Swift 3.1
Swift为书中使用的编程语言。同时也是Apple系列产品开发的主要编程语言。Swift还在不断演化过程中，可以在https://swift.org/了解学习。正式版Xcode包含了最新的稳定版Swift，如果想体验测试版的Swift，可以下载测试版Xcode。书中所使用的版本是3.1。
本书主要使用到的工具就是以上这些，在学习过程中需要使用到其他软件时会单独说明。
设计资源和源代码
在章节讲解的过程中，会指出资源的下载地址。这些资源能够自由用于个人或商业用途，用于公开演说或者教育用途时，希望能够注明来源。
源代码可以在https://github.com/hipposan/Oslo获取，但不能用于出售或其他交易。
随着Sketch、Xcode和Swift的不断更新换代，对于可能出现的制作方式及语法的更新，我也会尽自己所能更新本书，同时更新下载地址中的资源。
勘误和反馈
对于书中出现的任何错误，或者在使用过程中有不明白的地方，可以发送邮件到zzy0600@gmail.com，我会认真查看每一封信件，希望能和大家多多交流。
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
· 提交勘误：您对书中内容的修改意见可在 提交勘误 处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
· 交流互动：在页面下方 读者评论 处留下您的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http://www.broadview.com.cn/32019设计
用Sketch制作精准像素（pixel perfect），可直接用于开发的设计。
从现在开始，我们将会从0到1，设计并开发一款名为Oslo的Unsplash第三方客户端。在这个过程中边做边学习设计理念、工具使用、程序编写等知识。如果你做好了准备，那我们就开始吧！Sketch介绍
早些年大家做设计时基本都用Photoshop。但Photoshop毕竟是一款作图软件，在做Web/App UI设计，尤其是原型设计时，通常不需要用到精细的图片打磨或者多样的笔刷，反而是合适的画布选择和方便的资源（assets）导出等是首选需要。因此对于新手来说，打开Photoshop后要先去了解大量的非常用功能，让人十分头疼。
由于这个原因，Sketch出现了。Sketch在作图方面与Phtoshop的定位不同，Sketch定位于Web/App UI设计，因此对于这部分设计人员来说更易上手，使用起来也更加直接，并且完全是矢量图，于是很多设计师马上从Photoshop转移到了Sketch阵地。
安装好Sketch后，请打开Sketch，选择New Document，展现的界面如下图所示。
首先是顶部的Toolbar，如下图所示。
工具栏主要是一些常用的快捷操作，可以通过单击右键来进行自定义。在实际操作过程中，用顶部菜单、右键菜单或者快捷键也能达到相应目的。
接下来的三个区域是在实际项目中最为常用的。由左开始，分别是Layer List，Canvas和Inspector，如下图所示。
Layer List是图层的结构，类似于文件目录。这里需要注意的是Page和Artboard。
按下图顺序单击可以新建一个Page。
单击下图中的Artboard，然后在中间Canvas区域随意拖曳会新建一个Artboard。
可以看到Artboard是从属于Page的，它们的关系是怎样的呢？对于Web设计来说，由于同一页面不同状态较多，用Artboard做同一页面间的不同状态，用Page做不同页面的设计，比如下图的几个页面应该都属于同一个Page，但却是不同的Artboard。
下面这个页面应该属于不同的Page，不同的Artboard。
对于App设计来说，由于交互复杂，所以大多数情况下都在一个Page内，而使用不同的Artboard来完成，如下图所示。
使用不同的Page完成各种不同的设计用途，比如Page 1是App设计，Page 2是App Store截图，Page 3是App Icon设计等。
Canvas是主要的作图区域，也就是中间部分，所有的设计将在这里完成。右侧的Inspector用来调整元素属性。
Sketch整体结构就是这样，很简单吧。- 模板Template -
在Sketch刚推出的时候，没有什么模板可以用。设计者需要去看iOS Human Interface Guidelines，学习iOS上边距设置多少是合理的，字体应该怎么用，适合手指大小的单击区域是多大等知识，然后才能开始自己的设计。无可厚非的iOS Human Interface Guidelines融合了很多设计理念，是设计者们的思维结晶，但是从学习到实际应用的时间还是有点长。
模板为设计者提供了更快捷的学习方法。比如Great Simple Studio推出的iOS 10 GUI（http://ios10.greatsimple.io/）。
这些模板都遵照iOS Human Interface Guidelines的标准规范，并且附带很多原生的iOS界面。我们可以从里面直接可视化地学到很多实用知识，以Great Simple Studio的iOS 10 GUI为例，下载iOS10 GUI后打开Sketch文件，具体如下。
比如iOS的状态栏（Status bar）设置宽度为375，高度为20。
将编辑或返回按钮的左边距设置为16，上下边距设置为12。如何查看间距值？选定元素后，按住键盘Alt键，移动鼠标到其他元素上，便能看到间距值。
Tab bar设置为适合手指触摸大小的25 × 25。
使用模板启动项目还可以方便地插入供项目重复使用的Symbol，比如需要在界面中多次插入系统默认键盘，便可如此地操作。什么是Symbol和Styled Text？比如返回按钮，需要在很多界面中用到，如果每次都复制粘贴，显得笨效率又低，所以可以把它定义成一个Symbol，在使用的时候直接插入就可以了。在顶部菜单栏选择 Create Symbol ，右侧Inspector中为Symbol命名，然后在工具栏Insert - Symbol 中插入。Styled Text也是相同道理，只不过它是基于文本的定义，不是图形的，但操作方式都一样。在项目中应该灵活运用Symbol和Styled Text，这样可以让所用到的设计元素成为一个系统，查找、使用和更新都十分方便。
模板为快速原型（Fast Prototype）提供了基础，因为模板自带了很多方便的组件，所以也是项目设计中的起始点。
由于模板能够帮助设计者快速建立起项目可能使用到的数据资源，就像每次做饭时食材和配料都已经准备好了一样，所以把它保存，在菜单栏中选择File - Save as Template ，命名后单击确定就可以保存备用了。在菜单栏选择File - New from Template ，选中刚才保存好的文档。- Artboard -
按照之前的方法，新建一个Page用来放之后的页面设计，将它命名为Oslo。接下来建立Artboard来设计界面。当选择建立一个Artboard时，会发现右侧有一些Sketch默认提供的常用设备尺寸，如下图所示。
以iPhone 7为例，实际上应该是750 px × 1334 px或375 pt × 667 pt。为什么Sketch用375 px × 667 px和两者都不符合的尺寸呢？因为Sketch不知道你的显示器是什么样的，但为了保持原型和开发的单位是一致的，Sketch让这里的px尺寸和真机的pt尺寸一样了。比如设计中1 px的边框，在开发时就很容易对应到1 pt的边框上，不用再做单位的转换。
选择iOS Devices中的iPhone 7，建立一个iPhone 7尺寸的Artboard，并改名为Photos。
应该选用哪个尺寸的设备
遵循三个原则：（1）现有设备。 为了能在真机上更好地感觉自己的设计，要求设计尺寸和设备尺寸相符。在使用Xcode中的Storyboard进行原型模拟时，也会很有帮助。（2）目标人群拥有的设备 。比如应用的目标人群是中国人，那就应该在5.5英寸屏幕（iPhone 7/7S Plus）上进行设计，如果是欧美人，可以在4.7英寸屏幕（iPhone 7/7S）上设计，如果是非洲人，可以在3.5英寸屏幕（iPhone 4/4S）上……这样可以更好地保证你的设计能够服务好更多目标用户。（3）保证设计的可伸缩性 。如果在3.5英寸上做设计，可能很难想象在5.5英寸上的表现是什么样的。同样如果在5.5英寸屏幕上做设计，在4英寸屏幕上有些元素看起来可能会觉得有点别扭。所以最好是能够在一个大小适中的设备上进行设计。-导航栏Navigation Bar -
选择iOS 10 GUI Page中的Messages - TopBar ， 按键盘Command+C进行复制，切换回Oslo page，选中Photos Artboard，按Command+V粘贴。
你看，不用去学习导航栏（Navigation Bar）的高度是多少合适，图标间距多少，一个基本导航栏就做好了！
双击编辑，按Delete键删除。还记得怎么确认Left Bar Button与导航栏左侧的间距吗？按住Alt 键，鼠标移动到导航栏就设计好了。这里应该是16的边距，确认后删除Left Bar Button，这里我们用自己的图标。在https://www.dropbox.com/s/ bjqyk2cuge5paqv/icons.sketch?dl=0下载icons.sketch 。
打开icons.sketch ，找到User 图标，复制粘贴到Photos Artboard中，在Layers List中选中所有layer，在Inspector - Fills 中，单击Fill， 将Alpha （ 透明度）降到80%，或者拖动上方透明度调节条。
这是未登录状态下的图标。选中User这个文件夹，按Command+D复制新的文件夹并命名为User logined，作为登录后的图标。用同样的方法将其中layer颜色改为#FFD528。
单击User logined文件夹右侧“眼睛”的图标来隐藏layer。
在Layers List中选中Background，然后在Inspector - Fills 中单击Fill 。 因为我们要做Unsplash的客户端，所以视觉风格可以保持一致——打开unsplash.com，单击Fill中的吸管图标或按Control+C，单击网站Logo吸取颜色，使导航栏颜色变为#000000。
选中title，使用同样的方法将颜色改为#FFFFFF，Alpha降到80%。将内容改为Featured ，保持Unsplash默认的展示页面标题。
将User中的group拖曳进Top Bar这个group中。group有两个好处：一是内容的从属关系明确，二是设计之后的元素定位会更清楚。这样应用的导航栏就设计成功了！
HSB/RGB当鼠标单击图中RGB部分时，会看到HSB和RGB的模式切换。这其实是两种色彩的定义方案。这里不过多地解释这两者的区别，只不过有些颜色可能是HSB，也可能是RGB形式，为了兼容Sketch 提供了两种形式的切换。- Craft -
在进行下面的设计之前，先介绍一款实用的Sketch插件——Craft（https://labs. invisionapp.com/craft）。因为在设计过程中，经常会碰到需要填充背景图或用户头像，或同一元素出现很多次等问题，但是又没有便捷的办法。Craft就可以解决这些问题，所以下载安装好它，在Inspector左侧会出现组件。
例如插入一个长方形，单击Toolbar - Insert - Shape - Rectangle ，
试读结束[说明：试读内容隐藏了图片]