神器一箩筐！交互设计师必备的装机软件大全（Mac系统）

@Sophia的玲珑阁：作为交互设计师具体的工作内容包含几个方面，一是绘制线框图，二是制作动态Demo，三是团队协作。网络上每天都会推出新的工具，能留在电脑里面的不过几款，能经得住时间考验的才是最好的。

小伙伴咨询工具类的问题也不少，于是罗列出一些，不定期进行更新吧（我自己的偏向，供参考，网站链接很多需要搭梯子访问）。

我按照工作需求分类，将电脑上的工具分为这几类：方案绘制、图片处理、动效原型、视频相关、思维整理、储存、Mac系统相关。

方案绘制

Sketch

在方案绘制这个环节，大家应该不陌生。首推的是Sketch，配合它使用的还有插件CraftManage，在绘制图片时使用它custom这个功能，可以随机更换填充图片，在做用户头像和APP里面的图片时特别方便。

Photoshop

Photoshop的功能在这里不再强调，在交互设计中，用来绘制方案没有sketch高效（原因我在之前的文章强调过多次）。但它强大的处理图片的功能，让人也忽视不了，经常能帮忙解决一些关于图片的裁切、格式调整、颜色等等的一系列问题。

图片处理

这里的图片处理主要是指在导出供程序员使用的APP图片资源。为了降低图片所占内存大小，需要进行压缩，ImageOptim 是个不错的选择，但它有时候压缩的大小并不是很大，因为是对图片基本是无损压缩。另外一个是在线工具TinyPNG，但对图片耗损比较大，适合图片透明区域比较多的情况。

gif制作主要是将一些小视频（主要是APP的demo）其中的某一小段做成图片，方便和运营的童鞋们进行沟通，他们在发文时有时候需要用到。GIPHY Capture，操作简便，对录制的gif也可以进行编辑，使用非常方便。

动效原型

Flinto

动效原型我试过很多种，最后剩下的是这三种，当然只供大家参考。Flinto是制作demo非常高效的工具，支持sketch导出。只要在sketch做好原型图然后通过插件就可以导入到Flinto。但Flinto的缺点在于，它缺少逻辑判断的功能。比如说点击一个区域可能有两张状况出现，此时Flinto并不能表现出这种逻辑关系，于是有了Origami作为补充。

Origami

Origami是Facebook开发的一款动态工具，它的优点是能很细致地表达一款动效的状态出来，支持各种逻辑的跳转，并且可以调动手机摄像头，模拟拍照功能，可以调用JS代码。但它的缺点在于不能做太多的页面，二十个页面以上的效果就会卡，不支持sketch的导入，需要手动拷贝文件夹。对设计师来说，因为代码思维操作，学起来也稍微显得有点困难。

Framer

Framer比Origami更接近代码。兼容sketch和ps的文件导入，熟悉以后按照适合Framer的操作来组织sketch图层在导入Framer的话，非常便捷。有些重复的事情用结构控制使用代码更方便，可实现的效果跟Origami差不多。程序员学起来特别容易上手。这个我也才刚接触，很感兴趣，希望有一天也能成为大神。

视频相关

1. 视频制作

动效demo有时候需要输出视频文件，想我做视频类的APP也经常接触到视频，所以这一块也有些鸡肋。视频制作软件功能最强大的就是Adobe After Effects，简称AE。学习成本不太高，跟其他视频制作软件的原理比较相似，就是在某个时间段内，将每个元素每个属性的变化进行拆分，一个个进行实现。

Final Cut 是Apple公司开发的视频软件，它更偏向于视频的拼接与合成，作为交互设计师，并不像动画师那样去制作，在视频这一块很多功能它就可以搞定。但Final Cut做出来的视频内存会非常大，一般5s左右1280x720px的视频可能就有200MB。

2. 视频压缩

别担心，与它配套的有视频压缩和格式转化软件，即 Compressor，压缩完成之后恢复正常，成了1~2MB。另外一款视频压缩软件叫HandBrake，该软件量感较轻，压缩速度比较快，操作更简便，功能没有Compressor强大，也是一个不错的选择。

3. 音频处理

对，声音的事情也会遇到，比方说按钮在按下去的时候有类似“咔哒”声音，这些也需要接触到声音的编辑。Adobe Audition 就是最强大的声音处理软件，对声音的时长、高低、格式、批量处理等都非常强大，操作也不难。

思维整理

脑图试用过很多种，最后锁定在MindNode 不换了，它是我见过最好的脑图绘制软件，没有之一。但没有Windows版，Windows的用户可以使用Xmind，也是很好用的一款工具。

邮件接收我也归类为思维整理这一块，推荐Spark，它能帮助用户自动分类邮件，颜值也高，还支持emoji的回复，可以体验一下。

储存

储存类我分为记录和保存两大块。记录呢，主要是印象笔记Evernote，国内的为知笔记WizNote也做得不错，两者选其一就行。大家都很熟悉，功能我就先不介绍了，主要来说说用法。两个笔记选一种就行，分散到两地笔记不统一，不方便进行整理。主要用于浏览网页时一些有用的材料收集。但能把Evernote玩出花的教程网上也有不少，可以搜搜看。

保存这方面，Dropbox 的对团队协作更为有利，企业版的Dropbox方便将一个文件夹分享给团队所有人，并且分配不同的权限，同时APP也行进行本地的同步，体验流畅，爱不释手。百度网盘作为国内一些资料的补充。

系统相关

OmniDiskSweeper

用来清理系统内存，我Mac是250G的空间，系统就占了将近100G，说起来都是类，这个我也上网查过，貌似没有什么特别好的方法去解决，通过这个软件能有所缓解。再就是在用sketch的时候将自动保存的功能关掉会省不少空间的。

Sublime Text

在与工程师交接的过程中有项任务是整理好APP里面的多语言翻译文件。即，一个button上中文是“完成”，英文变成“Done”，整体进行整理完善后再发给对方，有时候这项工作由PM（产品经理）来完成。但多方进行沟通的过程中免不了要打开或者编辑一些这样的文档。Sublime Text对于批量查找和编辑来说，对设计师是比较友好的。

总结，每款软件和工具都有它主要的特色，基本上没有一款软件能解决所有问题的情况，所以我在某一个方面的软件时，经过时间的沉淀都会剩下两到三款。这两到三款就是精华所在了。但市场瞬息万变，长江后浪推前浪，所不定会有更好的适合阶段性的工具存在。但咱们的宗旨是，主要的还是自己的想法，能实现自己目的的工具就是好工具，在上面所费的时间适可而止。

作者简介：Sophia的玲珑阁，一枚爱折腾，爱健身的交互设计妹纸。

职场设计技能，更多教程抢先看，请关注作者的微信公众号：「Sophia的玲珑阁」

神器一箩筐！交互设计师必备的装机软件大全（Mac系统）

「设计师必备软件合集」

【优设网原创文章投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量190万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com