作为网站设计师，我们可以选择很多工具和软件，网站设计师不仅仅需要设计网站原型图，还需要设计网站效果图，网站动态图。所以就涉及到很多工具了，下面我们来说说一些非常好用，必备的软件。

案绘制 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。