网页设计师的UI设计工具

2019年网页设计师最感兴趣的发展之一是UI设计工具的爆炸式增长，这些应用程序标志着我们在创建现代用户界面方面的一个转变，在Photoshop中创建PSD模型的日子可能就要结束了。

不相信吗？在过去的几年里，Sketch和Figma都有了一批忠实的追随者。但或许最大的进展是设计软件巨头Adobe携其XD产品跃入游戏。这表明我们的工作方式确实在向更专业的工具转变。

考虑到这一点，让我们来看看这些"三大"应用程序中的每一个。我们将介绍一些核心特性以及可能影响哪一个最适合您的需求的其他因素。

UI设计工具的独特之处是什么？

多年来，网页设计师使用前面提到的Adobe Photoshop创建网站原型。这比直接跳到代码中更好，因为它允许我们构建一个非常详细的界面，并且可以轻松地进行编辑——而不需要分解Html、CSS等。

虽然这仍然是一种有效的工作流，但这种新型应用程序具有特定于web设计的特性。诸如导航和按钮之类的UI元素是交互式的——您可以看到悬停效果或单击其他页面。

此外，UI设计应用程序构建的接口通常是响应性的。这意味着您可以看到它们如何在不同的视图中工作。您不再需要为电话、平板电脑和桌面设备构建一个完全独立的PSD文件。

还有大量现成的UI工具包和模板，为设计过程提供了一个良好的开端。

本质上，你不再创建一个静态的屏幕，而是一个完全沉浸式的原型。

现在，让我们看看这些应用程序！

草图

Sketch是第一个投放市场的新奇工具，最早发布于2010年。这让这款应用在这篇综述中领先于其他应用。因此，这也意味着有大量的可用资源。

有一个包含各种扩展的库，它们带来了新的功能并增强了工作流。功能范围从调整各种设计元素到与库存摄影服务相结合，以便更容易地导入。

在它的主要功能中，你会发现：

矢量图编辑；

通过智能布局响应式设计；

支持可变字体；

与同事及客户合作；

轻松添加文本和基于图像的数据到您的演示；

草图云服务，分享你的创意；

用于跨文档共享资源(符号、图像、文本、样式)的库；

能够创建和使用模板；

大量可用的插件；

Sketch是一个桌面应用程序，提供30天的免费试用，但其他方面的商业许可费用为99美元。每年的续签以折扣价提供。

这里需要注意的是，Sketch只适用于macOS。如果你使用的是Windows或Linux，你将无法加入到乐趣中。

Figma

Figma于2016年首次发布，是一个基于浏览器的应用程序，它宣扬一种协作的设计方法。这样做的好处是，不管您的操作系统是什么，您都可以方便地随时访问它。

另外，当你与他人共享项目时，你是在使用一个实时链接。这意味着您不必首先导出到PDF或其他图像。他们看到的正是你所创造的。

此外，Figma还支持实时协作。团队成员可以相互沟通并管理自己的项目任务。包含的版本历史记录允许您在需要时回滚更改。

除此之外，你会发现：

能够创建一致的样式并在项目中应用它们；

直接从设计文件复制CSS；

一个可搜索的资源库；

用户权限；

创建动画，交互式原型；

响应式设计的自动布局功能；

一个插件库，并能够创建自己的插件；

Figma有一个免费的计划，允许3个项目，2个编辑器和一个30天的版本历史。全功能的商业套餐起价为每月12美元(按年计费)。

Adobe XD

现在，给新来的孩子。adobexd于2017年10月发布测试版，目标用户是那些希望创建网站、移动应用程序甚至游戏的设计师。它拥有一个内置的协作系统，称为"协同编辑"，以及客户和同事提供反馈的能力。

与它的竞争对手一样，XD使您能够一次又一次地重用设计组件。您还可以一次编辑一个组件并将其推到所有实例，从而提高设计的一致性。

也许最大的优点是adobexd可以很好地与其他Adobe应用程序配合。例如，你可以从XD直接在Photoshop中打开和编辑图像(只需右键单击图像来打开它)。您对映像所做的任何更改都将自动反映在XD中。它还可以从adobeillustrator、Photoshop甚至Sketch中导入文件。

其他值得探索的功能包括：

状态允许您编辑基于用户交互的设计组件，例如悬停或单击；

轻松复制设计元素；

Adobe字体集成；

为原型创建交互和触发器；

通过配套应用程序在实际设备上预览移动应用程序；

文档历史允许您回滚到以前的版本；

开发人员友好的资产，如CSS，颜色，可下载的资产；

支持功能并与第三方服务相结合的扩展；

adobexd是基于订阅的软件，它需要一个完整的创意云会员资格，或者你可以选择以每月9.99美元的价格订阅XD。如果您想先尝试一下，有一个免费的XD Starter计划可以让您尝试一些限制。您可以在macOS或Windows上运行应用程序。

做出正确的选择

这些工具都有自己的一组引人注目的特性，这样的话，很难说你会做错任何一件事。

但是，为了缩小你的选择范围，考虑一下你打算如何以及在哪里使用这个应用程序。例如，如果你是Windows用户，你将无法使用Sketch。如果您更喜欢基于浏览器和/或使用Linux，那么Figma是您的选择。如果你是一个Mac用户，想要一些有很多模板和插件选择的东西，Sketch是赢家。忠实的Adobe客户会喜欢XD的互操作性。

否则，你会发现许多相似之处。每个应用程序至少有一些协作能力。它们都创建向量图形并提供资产库。所有人都擅长创建一个设计系统。另外，它们在某种程度上都是可扩展的。

不管你朝哪个方向走，你都可以确定一件事。你将站在网页设计的前沿。