这篇文章写给那些对现有原型工具不满意的产品汪，
以及那些想要入门的产品小白们。
tip：本文不是教程，是工具介绍
目前市面上的原型工具层出不穷，Axure，Justinmind，Pixate，Protopie，Flint，Princple，Mockup，Mockingbot等等。功能上大同小异，但细化到特性又各有千秋，实现原理多为基于Javascript实现的动效，触发逻辑为对象——动作——效果的人机交互方式。
但这么多工具该怎么挑选？
主流原型工具比对
图来截屏自https://www.cooper.com/prototyping-tools
下面推荐三款原型工具和一个代码管理工具的相互协作——Sketch、Princple、Axure和Git。
Sketch的ICON
Sketch界面
图片来自https://www.sketchapp.com/
相信不少同学，我指那些那些公司给配Mac的产品汪和设计狮会熟悉这门工具(说多了都是泪)。这是一款一款轻量，易用的矢量设计工具，强大的插件库为产品设计带来了很多便利。
很多人会把她和Adobe的图像处理工具Photoshop作比较，对于这点我只能说，对于产品狗而言Sketch足矣，因为在我们日常工作中不需要处理复杂的图像，Ps相较于Sketch，学习成本较高，加载和运行速度较慢，如果你用Ps在画布上放了几十个甚至上百个画板，每个画板上又有N多的图层，那你可能需要一台服务器来作为主机来运行Ps，才能让你不那么想砸了电脑。Sketch定位为GUI设计工具，可以快速产出线框图，表现页面关系结构，可以快速切图，用来制作高保真原型，你可以用Sketch的移动端App实时预览你的设计稿，电脑上一改动，你的手机可以快速刷新更新效果。
Sketch产出的线框图，图片来自知乎
而且Sketch和接下来要讲的另外一门工具——Princple，可以完美兼容。如果你会写点Javascript，那最好不过，Sketch的plugin功能可以让你自定义插件，用JS来写你想要的插件效果，比如操让JS来替你完成一些重复的机械劳动，以提高工作效率。最后讲下，Sketch最大的缺点，就像他的slogan所说的——Sketch - Professional Digital Design for Mac.
for Mac.
Mac.
c.
.
这款工具，仅为Mac而生。(逃
princple界面
图片来自http://principleformac.com/.
上来先吐槽，在某度搜索Princple的关键词，搜索结果里会发现它官网的域名是http://principleformac.com/
没错，还是for mac(人类已经阻止不了苹果统治世界了...
Princple输出的动效
Princple最大的特点还是上手快，界面和Sketch如出一辙，你可以开着Sketch设计完页面元素直接Command+C复制到princple上，整个操作一气呵成，就好像princple是sketch的一个新窗口一般。Princple有四个特性——事件Events、动画Animation、连续交互Continued Intereaction和联动Drivers。同个元素在不同的artboard上样式看一样让使用者一眼看出他的交互前后状态，这点不同与大多数原型工具，简单的来说就是结合了PPT式的学习成本和堪比AE般细腻的交互动效，只能说四个字——赏心悦目，这点我相信深得交互设计师们的喜爱。而且在原型演示的时候支持录制，可以导出mov或gif格式的文件，真的良心之作，你可以用与投资人一起乘电梯的时间来阐述你的产品规划。
下面是一个早年做过项目的路演视频，整个视频的剪辑和特效是AE做的，但页面里动画效果都是Princple做的
项目已破产，创始人联系方式在最后
Axure，这款老牌原型设计工具已经称霸IT行业数年，第一次接触到这款工具时可以追溯到笔者读大学的时候。初学时轻视了这款原型工具，觉得和PPT没什么差别，做出的原型比较粗糙，交互效果体验起来不是很好。但随着工作中用到了越来越多的工具，都会拿回来和Axure比较，才会发现Axure的使用更可控一些。
比如你要做一个简单的页面拖动，里面细分成三块：垂直拖动、拖动结束后的惯性停止和拖动极限的橡皮筋效果，倘若用墨刀之类的工具兴许一步就能完成大概的效果，但是如果想要调整运动曲线，却难以做到。用Axure实现后和前端开发交流会发现，可以用对象-事件-条件-用例的方式绘制流程图交付开发，事半功倍，协助产品落地。
图片来自网络
Axure的交互逻辑更接近实际开发会碰到的情况，比如JS单线程没优化好逻辑造成的动效卡顿，多层嵌套造成鼠标事件冒泡(前端术语)。中继器功能能让你做到快速做出Feeds或者表格，而不必去一个个调整样式，省下很多时间去优化细节。
下面链接为近期做的一个Demo(首页的Banner用Princple实现效果更佳)
PC端打开 https://ryeyang.coding.me/zhexinit/he/mobile.html
iPone6/6S/7/7S在safari中打开 https://ryeyang.coding.me/zhexinit/he然后添加到主屏幕即可体验。
Axure出品的移动端预览App——Axshare，也能做到在移动端预览原型的效果，但令人诟病的是它的速度。接下来要讲的Git就是它完美的解决方案
Git的ICON
Git - We bring the awesome Git SCM to Windows
相信不少产品汪是从程序猿转岗的，你们一定用过SVN或Git，甚至是RCS和CVS，那你们可以跳过这里直接看文末了。
Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。关于项目部署的服务器，这里用码市Coding举例。用Axure或者其它的原型工具生成html文件包后，上传到Coding的项目板块后，Coding会自动帮你生成一个仓库，以.git结尾。
例.https://git.coding.net/你的账号名/项目名.git
在第一次连接仓库后，后边每次原型更新完都可以快速更新线上的原型，而用Git Bash所用的指令不多，学习成本低。具体的教程网上公开的很多，观众老爷可自行学习，如有疑问可在公众号问笔者，我会回答你的~
git add -A
git commit -m "demo_sync"
git push origin master
//基本用上述几个指令基于可完成迭代，相当方便
最后，
一般在工作中用Axure作为主要输出工具，辅以Princple和Sketch就能够时限各种迸发的灵感。但有些特殊的产品需要用到更多的交互效果，比如多点手势、传感器交互或者3D Touch，你可以试试Protopie。
其实工具本身不重要，它是你向上下游同事对接时表达想法的方式，重要的要是看你怎么合理使用。有的产品汪靠嘴，有的产品汪自己上阵设计稿撸代码，矛锤弓弩，刀剑拐斧，这十八般兵器，总有一把你趁手的。
我们下次再见~
公众号搜索：老杨陪你来说事儿
联系客服
