设计工具对决 – Adob​​e XD 与 Sketch (2019)

Sketch 是一种成熟的设计工具，自 2010 年推出以来，取得了惊人的增长。2016 年，Adobe 推出了 XD 作为强大的竞争对手。 经过近三年的发展，Adobe XD 是否为设计师提供了足够的挑战来考虑改变？

用户体验设计过程很复杂，需要使用特定的工具、方法和框架。 用户研究、分析、线框图、模型、迭代、可用性测试和 UI 原型设计只是设计师在与开发人员、利益相关者和其他团队成员沟通时使用的一些工件和流程。

用户体验设计师依赖的两个广受认可的设计工具是 Adob​​e XD 和 Sketch。

由于其简单的界面、大量的插件、完整的工具包功能和频繁的更新，Sketch 已成为绝大多数数字设计师的事实上的标准。

虽然 Sketch 成为 UX 设计师的首选工具，但长期以来以其屡获殊荣的设计软件和与设计社区的深厚联系而闻名的 Adob​​e 却没有类似的选择。 他们有 Photoshop、Illustrator 和 Fireworks，但设计师没有兴趣使用三种工具来完成 Sketch 可以在一个应用程序中提供的任务。

2016 年，Adobe 推出了 XD（体验设计）。 作为 Sketch 的有力竞争者，他们还有很多工作要做。 当时 Sketch 才六岁，拥有广泛的用户群和完整的插件生态系统，使其成为强大的设计工具。 竞争在接下来的两年中升级，Adobe XD 从一个灵活的竞争对手成长为一个备受推崇的设计工具，赢得了许多专业设计师的青睐。

Toptal 设计博客在 2017 年发表了一篇关于 Sketch 与 Adob​​e XD 的文章，当时它仍处于测试阶段。 两年后的现在，Adobe XD 看到了多次修订，其目标明确：提供 UX 设计师本机所需的一切，并具有出色的性能。

UX 设计师是时候从 Sketch 切换到 Adob​​e XD 了吗？

Adobe XD 与 Sketch

让我们探索一下 Adob​​e XD 与 Sketch 的比较。 我们将比较以下功能：

• 用户界面
• 重复网格
• 符号和资产面板
• 响应式设计工具
• 附加组件和插件
• 使用自动动画制作原型
• 分享和评论
• 与开发人员合作
• 版本控制和实时协作

用户界面

熟悉 Photoshop 等工具的设计师在学习 Adob​​e XD 或 Sketch 时应该没有问题，因为它们都共享相似的 UI。

一个显着的 UI 差异是 Adob​​e XD 中没有工具栏。 位于 UI 顶部的工具栏是 Sketch 中的一项有用功能，可自定义常用功能和工具的快捷方式，例如对对象进行分组。 Adobe 提供了一个类似的缩减功能，称为工具箱，位于软件的右侧。

Sketch vs XD ： Sketch 的优势在于其有用的工具栏。

重复网格

Adobe XD 中的一个显着功能是重复网格。 这是一个方便的工具，可以轻松创建可调整的列表和基于网格的屏幕。 虽然 Sketch 缺少此功能，但它或多或少可以通过插件进行复制。

Sketch vs XD ： Adobe XD 具有软件原生的重复网格的优势。

符号和资产面板

符号是一个早期功能，对 Sketch 的成功做出了重大贡献。 符号之于 Sketch 就像 CSS（层叠样式表）之于网站设计。 它们允许设计人员轻松重用和批量编辑资源，从而节省大量时间，帮助创建现成的设计系统，并提供所有屏幕的一致性。

Adobe 从基本符号开始，然后引入了将符号、字体和颜色组合到一个位置的资产面板。 编辑这些元素中的任何一个都会实时显示结果更新。 Sketch 确实具有这些功能，但 Adob​​e XD 提供了更具凝聚力和改进的用户体验。

Sketch 与 XD ：由于资产面板中的 UI 元素组合，Adobe XD 略有优势。

响应式设计工具

Adobe XD 提供了一组强大的响应式设计工具。 一个突出的功能，响应式自动模式，猜测屏幕应该如何响应不同的设备尺寸。

这是一个非常有用的功能，可以使用简单的滑块按钮打开和关闭。 如果自动模式达不到其预期行为，设计人员可以手动更改响应属性。

Sketch 没有内置这个功能，但它有很多插件，比如 Anima Toolkit，可以很好地完成这项工作。

Sketch 与 XD： Adobe XD 在这里具有优势。 它们提供了一种内置方式来查看 UI 元素上的响应效果。

附加组件和插件

Sketch 中的插件生态系统可以说是其最大的功能之一。 有数百个插件可以扩展 Sketch 的功能，并允许设计人员在留在 Sketch 生态系统中的同时使用增强的功能。

附加组件是相当于插件的 Adob​​e XD。 Adobe 于 2018 年启动了他们的附加生态系统，因此它不如 Sketch 强大。 这不是 Adob​​e 关心的问题，因为他们的目标是尝试减少对附加组件的需求，并专注于制作软件内置的功能。

Sketch vs XD： Sketch 的优势在于其广泛的插件库。

使用自动动画制作原型

Adobe 最近更新了 XD，为 UX 设计师提供了一个非常有用的功能：自动动画。 它的工作原理是在不同屏幕的元素之间进行巧妙、平滑的过渡。 结果令人印象深刻，使原型制作成为吸引潜在客户的愉快体验。 即使使用插件，Sketch 也不提供此功能。

Adobe 引入的另一个出色的原型设计功能是支持微交互，例如，从屏幕边缘拉出面板或显示键盘。 Adobe XD 还支持基于语音的 UI（如 Alexa 或 Google Home）的原型设计。

Sketch vs XD： Adobe XD 的优势在于节省时间的自动动画功能和对 Sketch 缺乏的微交互的支持。

分享和评论

设计师经常与其他团队成员、开发人员和利益相关者互动——共享设计和接收反馈的能力是设计过程的关键部分。 因此，Adobe XD 包含用于在线共享模型和原型的内置功能，因此任何人都可以添加一般评论，或指向布局上的特定位置并留下反馈。

这些功能与 Adob​​e XD 的动态原型制作模式相结合，还可以在手机上使用原生 Adob​​e XD 应用程序进行测试，甚至可以录制下来用于非交互式演示。

Sketch 可以使用 Zeplin 等协作工具或与 Invision 等 3rd 方工具集成来共享和评论。

Sketch vs XD： Adobe 在这方面略胜一筹，内置在线共享和评论功能。

设计规格

在设计项目的过程中，用户体验设计师经常需要与开发人员分享设计规范。 Adobe 将此功能包含在 XD 中，而 Sketch 用户将需要使用 Zeplin 或 InVision 等集成。

Sketch vs XD： Adobe 比 Sketch 有优势，因为设计规范是内置的，不需要第三方集成。

版本控制和实时协作

设计人员和开发人员依赖的两个重要功能是版本控制和实时协作。 在同一个项目上一起工作的大型设计团队需要能够查看何时进行了更改，并访问这些更改的历史记录。

Adobe 通过引入云文档解决了协作问题。 这为团队中的每个人（包括开发人员）提供了一个工作的中心位置。 根据 Adob​​e 的说法，云文档功能的下一步将是版本控制。

Sketch 提供版本控制和与插件的实时协作，但这些功能并未内置在产品中。

Sketch vs XD： Sketch 赢得了这场比赛。 他们有版本控制，尽管有插件； XD 目前不提供此功能。

功能摘要：Adobe XD 与 Sketch

当前版本的 Adob​​e XD 和 Sketch 之间既有相似之处，也有不同之处。 以下是每种产品的比较：

是时候改变用户体验设计工具了吗？

比较特征，Sketch 和 XD 很接近。 Sketch 缺少一些 XD 原生的功能，如自动动画、自动响应设计和重复网格。

Adobe XD 唯一缺少的就是版本控制，这要归功于 Sketch 的插件。 随着 Adob​​e 继续开发云文档功能集，预计这将很快出现在 XD 中。

从 Sketch（和 Photoshop 或 Illustrator）转换到 XD 比从其他方式转换更容易，因为 XD 可以以出色的保真度打开 Sketch 文件。 如果您依赖像 Abstract 或 InVision Craft 这样的纯 Sketch 插件，您可能会遇到一些问题。

在某些情况下，选择是显而易见的：对于 Windows 用户，Sketch 不可用，而对于 Adob​​e Creative Cloud 订阅者，XD 是免费提供的，并且可以无限共享原型。 这不是偶然发生的。

但 Sketch 正在反击。 该公司最近完成了 2000 万美元的融资，并承诺在 2019 年推出团队协作、本地切换和网络版应用程序等重要功能。

如果版本控制不是关键问题，那么现在正是考虑使用 Adob​​e XD 的最佳时机。 Adobe 对用户体验设计社区的承诺通过自动响应模式、重复网格和内置原型等功能显而易见。 尽管起步较晚，但 Adob​​e 已经证明他们可以为 Sketch 带来巨大的挑战。

进一步阅读 Toptal 设计博客：

• Adobe XD 与 Sketch - 哪个 UX 工具适合您？
• 原子设计和草图 - 改进工作流程的指南
• 精确设计 - Adob​​e XD 评论
• 关于 Sketch 中的排版你可能不知道的事情
• 熟悉 Sketch 插件开发