在过去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 和动画上，以及「打包」这种浪费生命的活中，所以我打算去解放下他们；

怎么学

找到适合自己的工具

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

MindNode

笔记本

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

Sketch

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

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

Zeplin

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

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

Principle

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

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

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

SourceTree

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

Git 之流真是艺术啊！

Xcode

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

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

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

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

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

总结

Should Engineer Design?