我用什么来做 iOS app mockup

前段时间写了篇多亏 Sketch，我这个小码农可以自己设计 app 了，短短几周内获得了不少访问和 like，发现不少朋友对 mockup 也挺感兴趣，于是再写一篇个人的经验文，请大家多多指教。

1. 做 mockup 的流程

做 app mockup 的工具不少，根据产品的功能、用户群、团队协作关系的不同，还有对应适合的工具。而且有的工具只适合做 UI，有的更适合搭建 wireframe，功能也各不相同。

我的 app mockup 经验特点为：较小的团队、设计师资源稀缺、社交或功能类 app、只用快速好用的工具。

以下4个工具我都用过。如果要我完整地使用它们来做一次 mockup 的话，我会：

用 fluidui 或 Sketch 做出每个界面的 UI，再用 POP 或 Keynote 模拟交互体验。

或者

用纸和笔画出每个界面的 UI，再用 POP 模拟交互体验。

或者

用 keynotopia 上的资源在 Keynote 里做出每个界面的 UI，再用 Keynote 模拟交互体验。

2. 四个工具比较

Fluidui (UI + flow)

优点：有原生 UI elements，有非原生的界面跳转功能，首个 mockup 免费，可在手机上查看。
缺点：不够可自定义，设计感不够，界面多时编辑起来有点慢，有时还会显示出错。

fluidui

POP (flow)

优点：模拟真实的界面跳转，可在手机上体验，基本功能免费，可以对单个界面做评论。
缺点：从电脑上导入设计比较麻烦。

POP

Sketch (UI)

优点：轻便型设计工具，丰富的免费素材，高度可自定义，可在手机上体验，有非原生的页面跳转功能，可导出 asset 直接供开发者使用。
缺点：付费，需要一定的设计技能。

Sketch

Keynote (UI + flow)

优点：可制作出原生的交互体验，搭配 keynotopia 有丰富的原生素材，可在手机上体验。
缺点：没有全局感，素材和工具都要付费，不够可自定义。

Screen Shot 2014-08-05 at 10.51.25 PM.png

其他工具推荐

以上我推荐了我使用过的几个不错的工具，另外向大家推荐我收藏的2个知乎答案：答案1和答案2，内容包括只做 flow 的 flinto、只做 animation 的 Quartz Composer、和 POP 非常类似的 TapCase ，以及建立在 Quartz Composer 上的 Facebook 出品的 Origami。

。
。
。
。
。
。
。
。

谢谢阅读此文，希望它能对你多少有些用。

你可能会对我（一个不想只写代码的小码农）的其他文章也感兴趣：

How to Start a Startup 课后感（HomeJoy篇）：带着你的创业点子，跟我一起学习+思考
多亏 Sketch，我这个小码农可以自己设计 app 了：和你分享程序员走向设计道路的经验
What an engineer learns from the marketing team at a startup – Part 1 ：看看我在这家 startup 学到了什么吧

如果你想与我交流移动产品、硅谷生活、startup 体验、运动健身，或者想看到我写某个方面的文章，请站内信联系我 :)