02
从软件开始放飞自我

02-01　如何选择适合自己的UI设计工具

1．UI设计学习者的工具学习路径

在如今，设计工具越来越多，让广大初学者眼花缭乱，无从下手。很多初学者都会产生这样的疑问，作为入门工具，我该如何选择？需要说明的一点是，在UI设计师逐步进阶为复合人才的背景下，软件的利用也越来越复合，单一软件已经无法完成整个UI项目的制作。因此，我们不妨从一些简单的工具入手，让自己更快速地获得学习成就感，进而再进阶到较复杂的工具，从而完成自身的提升和进阶。

目前从实践中，我们发现，阻碍学习者学习的一个很大动力是电脑系统，Mac电脑对于UI设计具有天生优势，不少业界通用的设计工具只有Mac版本。但是，Windows用户也有很强烈的UI设计学习诉求，那么我们不妨从Figma学起，因为Figma是基于网页的，只要打开网页，即可进行流畅的操作，对电脑系统没有要求。另外，Figma的操作逻辑与Mac下常用的UI设计工具Sketch非常类似，所以通用性很强，后期方便设计师在不同的工具间随意切换。可以说，Figma解决了系统兼容性问题，符合未来云应用的大趋势，是一个非常具有潜力，也越来越被广大设计师接受和认可的工具。

不同操作系统平台的学习者，UI学习路径稍有不同，主要依据各个平台所支持的软件而有所区别。依据由浅入深、层层进阶的学习方式，我们为正在阅读本书的你做了学习路径的规划，这是我们在教学实践过程中为大家推荐的UI设计师学习路径的最优选择。

Windows平台的用户学习推荐路径，如下图所示。设计师可以首先从Figma入手进行UI的排版工作，这是UI设计师最核心的能力，虽然在Windows中没有大名鼎鼎的Sketch，但Figma同样可以代替它，快速高效地协助设计师来完成这方面的工作，从而让设计师有更多的时间来思考如何将UI做得更好。另一方面，图形绘制能力也是UI设计师在进阶过程中应该着重去掌握的项目，这项目Adobe系列的相关工具完全可以胜任。同时，UI设计师所关注的交互逻辑及高保真动效设计，则可以借助Protopie及现在广受欢迎的墨刀等工具完成。

如果你有一台Mac电脑，那么对于UI的学习将如虎添翼。相对于Windows系统，Mac系统中有更多的设计工具可供选择，效果也更好，推荐的学习路径如下图所示。但是核心工具大同小异，图形能力和UI的排版能力都是重中之重，所以大家大可不必为自己的电脑系统发愁。

2．一切为我所用：正确认知使用工具的目的

对于任何职业，特别是设计师，使用软件是为了解决设计问题，所以对于任何工具，我们都要抱着一颗开放的心，发挥其优点，摒弃其缺点，将多种工具的优势相结合，最终呈现出满足设计需求的作品。切不可只盯着一个工具，就算这个工具不善于某些方面的设计，也一定要用这个工具完成，那最终的结果就是赔了夫人又折兵，不值。比如Figma的强项是快速完成UI排版与设计流程之间的协作，那么如果你一定要在Figma中绘制插画，那可能就有点不太明智了。

下面简述一下不同工具的优缺点，如果你是刚接触UI的小白，可以综合参考。以下这些工具，都是我建议UI学习者使用的工具，学习的时候，遵循先易后难、循序渐进的方式即可。

Figma

优点：无须安装客户端，没有操作系统限制，打开网站即可开始设计，操作简单，上手容易，兼容性强，可以轻松导入多种格式如Sketch、XD等文档，且设计效率高，操作顺滑。便于分享与协作，自带标注工具插件，便于后期开发工程师协作。

缺点：图形绘制功能较弱，工具较少。当文档较大的情况下，打开速度稍慢。

Sketch

优点：涵盖UI设计的方方面面，功能相对完善，可以绘制一些不太复杂的矢量图形。软件上线时间较长，插件相对较多。

缺点：仅仅支持Mac平台，Windows用户无法使用。且无后续Windows系统开发计划，对于多平台用户不友好。

Adobe Photoshop

优点：老牌的巨无霸级别图形设计工具，适合图像处理及复杂图形绘制。功能完善复杂。

缺点：功能繁杂，上手难度大。其操作模式不适合用来做UI设计，后期设计稿交付时对接困难，用作UI设计，效率低。

Adobe illustrator

优点：同样是老牌的巨无霸级别的矢量图形设计工具，适合复杂图形绘制。功能完善复杂，适合用来做图标及插画。

缺点：功能繁杂，上手难度大。因其没有专为UI设计开发功能，不适合用来做UI设计。

Adobe After Effect

优点：老牌的视频动画制作工具，在UI设计领域中焕发了新生，After Effect适用于一些微交互、动画效果的制作。由于采用了时间线的工作模式，所以比较适合动画的细节处理和打磨。

缺点：只能输出视频文件，无法进行手势交互操作，传播不方便。

Principle与Flinto

优点：Mac平台下流行的两款动效工具，Principle结合时间线，擅长做一些转场效果和微动效。 Flinto适合做将整个应用穿起来演示的效果，并可以在手机上操作。

缺点：目前市面上的可视化交互工具或多或少存在问题，不少交互效果很难实现。另外，这两款工具仅仅支持Mac系统。

Protopie

优点：Protopie适于Windows和Mac全平台，也是Windows用户比较好的高保真UI动画解决方案。同样可以手机端展示及交互。

缺点：虽然没有代码，但学习成本稍高。一些效果同样无法实现。

3．顺应设计及工具发展趋势

从之前的Photoshop，到XD、Sketch以及Figma，UI设计工具现在已经不是一家独大，而是呈现出百花齐放的态势。在前几年，Sketch一直凭借着优秀快捷的设计体验统治着UI设计领域，而随着软件上云，疫情影响，工具具备完善的协作功能，无端化已经成为另一个趋势。Figma的核心优势并不仅仅是云工具，更重要的是它与客户端别无二致的操作体验及相对完善的工具及格式支持，这才成为它越来越受欢迎的主要原因。

另外，某个软件使用的人数决定了它自身的生态环境，如果整个行业都在使用某款工具，而你选择了另一款，那会对协作带来非常多的不便，你无法融入总生态环境中，在UI设计领域中的发展也就无从谈起。

那么，不妨先人一步，从现在开始熟悉Figma吧！