一、Design Tools for UI/UX Designers

在近两年出现了很多的设计工具，在我刚接触UI设计的时候并不是这个情况，之前的UI设计一直都是PS独树一帜。只要你会一定的PS基础技能和一些设计规范就基本可以做UI设计了。虽然说也有人用AI做过UI设计，但并不是主流，甚至我记得google的Material Design的规范竟然有用Ai做过，不知道现在还能不能下载到那个源文件。

相比现在，能用来做UI设计的工具可以说是百花齐放。纵观从整个产品的0到1这个生产链路中可以使用到的工具，可以说已经是巨多无比。这还不包括那些没有投入市场使用的工具。例如有些公司内部会专门针对自己团队情况开发适合团队工作流的工具。当然这都是大公司的做法。但是大公司能有几个，想想现在App Store和Google Play应用商店里有几百万个应用；网站就更不用说了。做这些app和网站理论上都是需要设计师设计，而工具，就是ps，这个图形合成软件。

现在来说，开发一个软件的成本已经是非常低的了，而且互联网行业发展这么迅速，版本迭代必然是非常快的，大家都喜欢用能提高效率的工具。大家有个这个诉求，必然就会现在出现很多提高效率的工具。

这里我例举一些我接触过的工具简单对比一下，今天讨论的范围是做一个产品在以下几个点所用到的工具：交互设计，界面设计，动效设计，团队合作，文件共享，辅助代码。

二、这里是我总结的四种类型工具

1. 基于Photoshop

首先交互设计是或者产品经理输出了线框图wireframe；然后制作可操作原型Prototype（或者UI Flow页面流程图）；再到UI设计师设计界面标注切图输出给研发；最后研发代码实现。
通常这里用到的设计工具有Axure、Photoshop。
这是最传统的产品设计流程。各负其责，分工明确，没有太多重合交叉工作。

2. 基于Sketch的插件

这里在UI之前和上面的流程是一样的，但是用Sketch做UI可以提高设计师和研发的效率，这里用到的工具主要是只能标注切图插件 Sketch Measure/Zeplin/Marketch 目前我用过这三个插件算是比较完善的。

Sketch Measure是一个国人开发，免费好用，良心工具，缺点是只能导出静态文件，不利于后期改动后更新给研发同学，当然也可以用SVN。相对比较非常适合小团队小项目使用。

Zeplin是个国外团队在做的，我在17年的时候公司项目有几个月一直是用Zeplin的标注，因为Zeplin是有自己的独立服务器，并且Zeplin的规范设计也比较好用。研发宝宝可以实时看到更新的内容。缺点是服务器速度太慢未付费用户功能限制。

Marketch这个插件是我最开始用的，和SM比较类似，我用的比较早，大概在2016年的时候比较火，当时用来导出网站标注。

3. 独立APP

这一种是交互，设计，开发都有用到提升效率的工具。分为两类：第一是Marvel App基于sketch能够快速制作UI交互原型和只能输出标注切图。第二种是脱离Sketch有自己的UI和交互设计软件。 inVision Studio/Figma/ProtoPie/Framer/Adobe XD 这几个软件目前可以说是非常火的了，一开始都是有自己的特点，但是现在发展来看他们之间越来越多的共同点。国内的蓝湖APP也是在做这个事情。Adobe XD在自己的生态中还是有一定的吸引力，除了界面的设计功能之外XD爷可以做简单交互。但是目前的售价貌似是比较高的了。

4. UI Kit

这一类是有单独分离的交互组件库，在之前的网站开发中很常见，类似Ant Design。有固定的设计语言，完整的交互控件库，完善的界面控件库和代码组件库。但是对于移动App来说这类并不是很实用。
这里还有一个类似这种的是UI原型库 JD FINANCE APP 。这是我在面试京东金融的时候和设计leader聊到的。当时他们是打算做一个移动手机端的这类“UI组件库”的东西，可以直接实现UI到代码实现的步骤。但是这就需要很成熟的UI设计规范和UI控件库。我其实并不是很赞成这种做法，首先维护组件库是一个非常复杂的工程，而且移动开发趋势变化很快，能用到的控件种类可能性太多，完全覆盖可能比较难。这个方向不适合大众小公司。但是用这个库来达到维护设计语言还是有一定作用的。

三、总结

总的来说其实工具并不是最重要的，在选择了合适的工具之后，能用工具真正提高工作效率才是最终的目的。现在的工具还是在一个百花齐放的时期，并没有哪个是垄断地位。这些创造工具会越来越完善，现在的互联网产品设计开发周期也越来越短。我们都说前人铺路，后人享福，相信这些工具的创造者们的愿景也是这样子。