在过去3.5周左右的时间里，我从零基础学习 iOS 开发到发布上线一款应用，一般很少有人在还在「非常入门的学习」的过程中就开始出来分享的，但是对我而言没什么可害羞的，正是由于 Xcode 的加入，才可以让我的设计开发产品工作流得到逐渐的完善。

注：本文提到的应用叫「如云」，是个美女自媒体主页展示应用，功能简单。此文不是为了推荐公司的 App（审核中，反正也下不到），而是将「如云」作为一个例子来讲述我的设计开发的过程。

为什么学 iOS 开发

1/ 我太爱 App 了，对背后的开发也充满了好奇，身边也是这群 iOS 开发，耳濡目染；

2/ 不想再过「 Idea 整天在脑子里打转却又无能无力」的日子；

3/ 作为产品设计师，会UI，会交互，会制作高质量原型是不够的，想视图去减少设计和开发之间的鸿沟，比如当我一开始写到 UICollectionView 的时候觉得太复杂了，只能对我的导师萌哥说「不如我改设计吧，我还是改成 UITablveView 吧，我要哭了」，你懂我的意思吧？

4/ 公司发展需要，我司的 iOS 开发其实只有2员大将，但是要兼顾到3个应用，而且要花挺多时间在重命名Asset，修改Asset，布Storyboard，一个一个约束 Autolayout，连接各种UIButton, UIView, UILabel到 ViewController 上，一遍遍改文案，写 UI和动画，调 UI 和动画上，以及「打包」这种浪费生命的活中，所以我打算去解放下他们；

怎么学

对于代码，2012年时我只写过一个已经关闭的网站的前端部分，可现在也很久没有碰，几乎可以说是零基础学习 iOS 开发，在正式加入公司开发新项目之前，我陆陆续续看了 Design+Code 13节视频，这个帮助还是很大的，即使还没有把教程里的 Designer News App 做出来，但是已经理解了 Xcode 的工作方式。

至于 Swift, 只能呵呵哒了，什么语法，什么是变量，方法，属性，如何查看 API，如何用别人的开源项目，如何打包，什么是 delegate都不懂。

但就是这样，我们的 iOS开发@王宜萌 跟我说「加入吧，一起开发」然后他就成了我的导师，我觉得那个时候他说这句话背后有道「圣光」在闪耀。找个可以在一个项目带你的人，比学教程至少高效10倍，因为可以问些非常白痴的问题而不用害羞，关键可以让你进入「天天写」的状态。

找到适合自己的工具

基于此前的产品设计经验加这几周的 iOS 开发学习经验，我逐渐完善了自己的工作流，以前在探索更好的标注工具，切图工具，原型工具，同步资源工具上花了很多时间，同一种功能需求其实有很多工具可以解决，特别是2015年，可以说是原型工具大爆发的一年。

以下是我的工作流，今年最大的改变是加入了 Principle，以及用上了 Xcode 和 Git 工作方式。当然线框部分是在笔记本上完成的，并没有加入到下面的「软件」工具部分中。完善自己的工作流是无止境的，如果你还可以写点 Code，可以自己造轮子，跟Ray 和 Ashung Hung 一样写自己的 PS 插件和 Sketch 插件 ，或者持续保持对业界新工具的关注，比如接下来可以在 Sketch 软件里直接做交互动画的 Silver flows，和可能要颠覆设计方式的 Adobe Project Comet.

My workflow

MindNode

「如云」1.0版本信息结构

MindNode 是个思维工具，可以方便的写出对于产品的想法和信息结构，以及1.0版本要开发什么功能，在需要综合团队成员想法的时候，此时 MindNode 可以快速导出图片，然后拖到微信群里就可以了，修改起来也非常方便。

笔记本

「如云」模特卡片界面的 Wireframe

我用的是 MOLESKINE 红色空白口袋型笔记本，记录了我这一年所有产品想法、设计原型、图标素描，笔记本在我看来永远是最佳的起步工具，不过这本快用完了，我新入了一本 Leuchtturm 1917 的浅蓝色圆点口袋型笔记本。

其实笔记本品牌都不重要，又不是装品位，只要是个你携带方便稳定使用的本子就行，别换来换去，每次落笔前给本子一点点爱，珍惜每一处空白释放你的灵感。每次开发借我本子写他的逻辑，涂来涂去的，我就会非常疼惜，事后只能被我撕掉，可有时撕了会造成对称页的掉落。

笔记本是绝佳的线框图原型施展之地，如何有效的使用自己的笔记本，画出更好看专业的 Wireframe 是挺考验基本功，点这里可以看到 Dribbble 上的设计师那些 wireframe 的作品。

Sketch

Sketch 不必多说，高效的设计，全面的插件支持，One Page One Project. 我是在购买 Design+Code 的时候拿到的6折优惠，所以当时大概也只花了300多块钱，对于好东西，更不用说可以为你的工作提升效率的产品了，真的是「早买早享受」，晚买？你早干嘛去了？！

Sketch 是我们团队的主要设计软件，同时我也推荐了不下10个「无设计经验，不会使用 PS」的人使用 Sketch 作为他们的UI 设计入门工具。

「如云」是需要快速做出来的产品，所以我跳过了在电脑里做线框和交互，直接进入高保真设计，依据个人的习惯我是在@2x 下设计的，因为需要 Sketch Mirror 到 iPhone 6s，实时的去看每一个细节。但Xcode 是以@1x 为视图的，幸好接下来提到的 Zeplin 可以直接把 Sketch 文件转出@1x的标注。

Page 1 是主要面包括列表页的2个视图模式，个人主页，自媒体指数和筛选美女的 Popup，为空界面。

Page 2 是注册登录流程

Zeplin

Sketch 如何导入到 Zeplin

谢天谢地，终结标注和切图问题的工具终于出现了，我在Zeplin 内测的时候开始使用，也在微博作过推荐，当时就被震惊了，如下图。

Mind-blowing

虽然那个时候 还只有标注的功能，但是我同步Sketch Artboards 到 Zeplin，加入的开发人员可以立即看到界面摸到每一个元素的宽、高、 X、Y，字体大小、颜色、阴影和透明值。如今的版本更是支持 Android iOS 图片资源的导出，在「如云」这个案例里我轻松的导出了PDF 素材到Xcode，也添加了Swift 格式项目涉及到的颜色库，帮助在 Xcode Storyboard 布UI时快速选择颜色，而且始终如一，和开发之间也不再有「这个颜色不对，这个像素下来一点」的纠缠。

Zeplin项目颜色库直接在 Xcode 里使用

自从 Xcode 支持 PDF 后，有些设计师是不是还不知道？你根本就不需要再去切@1x @2x @3x 的图了。当然因为 Zeplin 所有上传的设计都在云端，国内访问并不是很良好。Zeplin 是免费的软件，支持一个免费项目，如果想要增加 Project，需要按月付费。

Principle

我们做原型的目的是减少和开发之间的关于动画主观描述性沟通，也同时可以让所有团队成员在未进入开发之前就知道「App 是怎么工作的」甚至「Hi，我们真的可以很酷」，原型能力现在也逐渐变成了UI/UX 设计师必备能力之一。

我试过AE, Origami, Pixate, Framer, Principle, Flinto for Mac 这么多原型工具之后，用排除法的方式，最后决定把 Principle 作为主原型工具。

Adobe After Effect 功能强大，但使用起来比较复杂，学习成本太高，目前我也只会10%左右；

Origami 是 Facebook 出品但又不是经常更新的强大原型软件，甚至可以导出 iOS Android 动画代码，我做了所有的官方教程案例后，虽然会了一点，但还是感觉乏力，还没有到可以「随心所欲」的地步去实现原型效果，学习成本也同样很高；

Framer 是可以用 Javascript 写的原型的工具，所以你最好懂点 JS, 这就是门槛，你觉得 OK 就可以迈进去。

Pixate 被Google 收购便完全免费了，我在1.6版本的时候进去尝试，花了一周时间学习，效果其实都还不错，学习成本低但需要你不停的做练习，做好的原型可以导入到 Pixate for iOS 里看到并真实操作和录屏，可以说挺完美了，Lyft 设计团队是全员使用并带到自己的工作流中的。

下面是我之前用 Pixate 实现的活动现场聊天室原型，照片文字群聊，同时可以投映到墙上。

Flinto for Mac 是 Flinto 的新产品，Flinto 起初是个可以进行简单「串连」完整界面的 Web 原型工具，for Mac版本做的更强大和简单，动画效果也比Web丰富了许多，学习成本也低，可以很方便 build 到 Flinto for iOS 里面去真实的点触体验，非常适合做产品整体使用体验，但不适合做单个细致一点的小动画。

Principle 原型制作界面

以上说了这么多，终于说到Principle，它首先是基于 Core Animation的，而这个就可以解决设计和开发关于动画实现上的鸿沟，少一点「这个延迟多一点，那个回收的动画位置不对」等等这类不确定性的语言，Principle 上实现的原型效果是精确到双方都容易理解的「数值」的，只要把 duration, delay, x,y,scale, angle,opacity, curve 都给开发看，然后看一遍执行的完整效果就好了。学习成本非常低，几乎5分钟就可以做出一个你想要的动画效果，然后录屏选择视频或者 GIF 发微信给搭档。我问过 Principle 开发者，未来「导出Native 代码」也是在开发列表之中的。Principle 的弊端就是和 Flinto for Mac 刚好是相反的，不适合做App 全部界面的交互动画的，因为会有点累。

以下是我用 Principle 在「如云」里实现的一个「切换卡片和宫格视图」的原型效果。如你想要学习接触 Principle，可以下载我这个原型效果的源文件。

SourceTree

设计师用 Git 的工作方式已经不新鲜，很多公司的招聘设计师要求里都已经开始出现「会 Git 的优先」。Git 对设计和开发最大的帮助就是同步设计切图资源，设计师在自己电脑创建一个文件夹同步到 Git 上，持续的往这个文件夹「增删改」资源，然后 Push到工程师那边，对方 Pull 一下就可以完成设计资源的交付，不过这个「交付」还只是停留在把资源同步到了开发那边的电脑里，而这对大多数团队已经够用了。

有些团队是在用 InVision Sync 文件夹，其实本质跟共享同步一个 Dropbox 文件夹差不多（我不知道百度云盘 for Mac 是否也那么好用？），只是省去了很多时间，而提升效率正是我们完善工作流目的，你可以自我对比。

在「如云」里，我们用 SourceTree 是全部来干「正事」的，把刚才说到的设计资源的「交付」也提升到了直接把「增删改」后的资源塞入到Xcode Assets.xcassets 里面了，iOS 开发就不需要从文件夹里再去找这次用到的资源拖入到 Xcode。我和@王宜萌 每天都要「拉推合并」代码，一开始我对代码的「暂存」不理解，我这边已经改了5个文件了，然后就去拉代码就会报错，一报错我就懵，也遇到过「提交后之前布的 Storyboard 里的一个 VC 不见了」等问题，幸好@王宜萌 可以帮我进行再次合并或者解决冲突，之后独立使用就比较顺利，直到合并完最后一个已经完成测试要提交 App Store 的版本，都是如此。

Git 之流真是艺术啊！

Xcode

以前我看到 Xcode 这种界面是「害怕」的，卧槽这些都是什么啊，根本没有动力学下去啊！这种感觉跟当年一开始接触设计接触Photoshop 有点类似，我就扣个图要这么多功能干什么？

在「如云」里我们全部是用 Swift2.0 在 Xcode 写，幸好 Xcode Storyboard 对设计师而言是个绝佳的起点，结合使用 MengTo 的Spring动画库可以非常方便的做出真实的原型，真实到已经是开发里的真实代码，同组里的 iOS 开发会感谢你的这种地步。Storyboard 里的 Autolayout 也挺好玩，Autolayout 是帮助在开发一个屏幕的基础上去自动适配 iPhone 所有机型，出现红色的小箭头说明这个 VC 是约束错的，出现黄色小剪头代表需要update。

Xcode Storyboard

除了 Storyboard 里学习，在这个项目中我还学到了使用 delegate，使用 UITablveView 部署大部分界面, UICollectionView 部署照片瀑布流, UIImagePickerController 调用系统相册接口上传头像和照片，加入和测试真实的数据接口，加入音效，EmojiLoader 和 EmojiMessageTips 动画，NSTimer发送验证码，打印错误或者成功的 Session 信息，如何使用 Git，如何打包上传到 FIR进行测试，学会如何 import 开源项目，学会 Stack Overflow 搜问题，也看懂YouTube Swift视频教程等等很多东西，之后也需要不断再尝试复习才能掌握的更好。

我总是想让一切变的有趣一点，为了让开发过程也变的有趣点，我临时做了 2个 Emoji相关的动画idea.

EmojiMessageTips

1/ EmojiMessageTips 就是用 Emoji 来做所有消息类型的提醒，因为Swift 本身可以使用 Emoji，所以很自然可以利用 Emoji 的不同表情来代表错误😂，成功👏，提醒😍，网络不好😭等消息。

EmojiLoader

2/ EmojiLoader 就是每个应用都需要的「加载中」动画，不然会卡在那边非常不友好，我用 EmojiLoader 代替了菊花 Loading，因为「如云」是美女模特主页的主题，所以很自然找到了跳舞的 Emoji 👯，可是我一直没法左右镜像一个字符，所以这个 EmojiLoader 其实是用两张图片做的桢动画而已，因为项目开发时间的关系，我没有深究下去而选择了最简单的解决方式，这样其实好也不好，不知道收看到的人有谁知道如何左右镜像一个字符，可以@我告知一下，非常感谢。

Application Loader

为了体验整个开发上架过程，@王宜萌 让我把打包上传到 App Store 这一步也做了，首次使用了Xcode自带的 Application Loader 上传到 App Store，之后需要等待2个小时左右的「构建」时间才能在iTunes Connect提交审核，为此还以为是 iTunes Connect 的 bug.

Xcode 的学习和探索才刚刚开始，虽然自身也有 bug，但是这是我用到过的最令人兴奋的工具，因为它可以把之前的设计和 idea 都变成现实。

总结

以上就是我目前探索到的工作流，我深知要继续深入到 iOS 开发会需要用到更多的工具，产品设计领域也会有更强大的工具出现，所以没事，继续学习继续得知继续分享，管它好或者不好，去做，做出来。以下是触达我的几个地方: 微博，Dribbble，Twitter.

Should Engineer Design?