设计工具对决-Adobe XD vs.Sketch(2019)

本文概述

• Adobe XD与草图
• 功能摘要：Adobe XD与Sketch
• 现在该更换UX设计工具了吗？

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

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

用户体验设计师依赖的两个广为接受的设计工具是Adobe XD和Sketch。

由于其简单的界面, 广泛的插件数量, 完整的工具包功能以及频繁的更新, Sketch已成为大多数数字设计人员的事实上的标准。

尽管Sketch已成为UX设计师的首选工具, 但以其屡获殊荣的设计软件和与设计社区的紧密联系而闻名的Adobe却没有类似的选择。他们拥有Photoshop, Illustrator和Fireworks, 但设计人员没有使用三种工具来完成Sketch可以在一个应用程序中提供的任务的食欲。

2016年, Adobe推出了XD(体验设计)。作为Sketch的有力竞争者, 他们还有很多工作要做。当时Sketch才6岁, 拥有广泛的用户群以及完整的插件生态系统, 使其成为功能强大的设计工具。在接下来的两年中, 竞争加剧了, Adobe XD从一个灵活的竞争对手发展成为一个备受赞誉的设计工具, 赢得了许多专业设计师的青睐。

srcmini设计博客在2017年仍处于测试阶段时发表了一篇有关Sketch vs Adob​​e XD的文章。现在, 两年后, Adobe XD看到了多个修订版本, 其目标明确：提供UX设计人员本机所需的一切, 并提供出色的性能。

UX设计人员现在该从Sketch切换到Adobe XD吗？

Adobe XD与草图

让我们探讨一下Adobe XD与Sketch的比较。我们将比较以下功能：

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

用户界面

熟悉Photoshop之类的工具的设计师在学习Adobe XD或Sketch时不会遇到问题, 因为他们都共享相似的UI。

Adobe XD和Sketch共享相似的用户界面, 但两者之间有一些区别。

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

草图与XD：草图具有其有用的工具栏的优势。

重复网格

Adobe XD中的一个显着功能是重复网格。这是一个方便的工具, 可轻松创建可调整列表和基于网格的屏幕。尽管Sketch缺少此功能, 但可以使用插件或多或少地复制它。

Adobe XD中的”重复网格”功能允许快速创建列表和基于网格的屏幕。

草图与XD：Adobe XD具有软件固有的重复网格边缘。

符号和资产面板

符号是早期功能, 对Sketch的成功做出了重大贡献。就像CSS(级联样式表)一样, 符号也代表网站设计。它们使设计人员可以轻松地重用和批量编辑资产, 从而节省大量时间, 有助于创建现成的设计系统, 并在所有屏幕之间保持一致性。

Sketch的成功很大程度上归功于符号功能。 Adobe XD在资产面板中提供了类似的功能。

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

草图与XD：由于在资源面板中合并了UI元素, 因此Adobe XD略有优势。

响应式设计工具

Adobe XD提供了一组强大的响应式设计工具。一种出色的功能, 响应式自动模式, 可以猜测屏幕应如何响应各种设备尺寸。

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

Sketch没有内置此功能, 但是它具有许多插件, 例如Anima Toolkit, 可以很好地完成工作。

Adobe XD提供了一个健壮且自动化的响应式设计系统, 而无需使用插件, Sketch便无法做到。

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

附加组件和插件

Sketch内的插件生态系统可以说是其最大的功能之一。有数百个插件可扩展Sketch的功能, 并允许设计人员在不影响Sketch生态系统的情况下使用增强的功能。

插件是Adobe XD的等效插件。 Adobe于2018年开始了其附加生态系统, 因此它不如Sketch强大。由于Adobe的目标是设法减少对附加组件的需求, 并着重于开发软件内置的功能, 因此, 这并不是Adobe所关心的。

Sketch vs XD：Sketch凭借其丰富的插件库而具有优势。

使用自动动画制作原型

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

Adobe XD的自动动画功能使原型制作变得简单而简单。

Adobe引入的另一个出色的原型制作功能是对微交互的支持, 例如, 从屏幕边缘拉出面板或使键盘出现。 Adobe XD还支持基于语音的原型用户界面(例如Alexa或Google Home操作)。

Sketch vs XD：Adobe XD在此具有优势, 它具有省时的自动动画功能, 并支持Sketch所缺乏的微交互。

分享和评论

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

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

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

Sketch vs XD：Adobe在内置在线共享和注释方面略有优势。

设计规格

在设计项目过程中, UX设计人员通常需要与开发人员共享设计规范。 Adobe在XD中包含了此功能, 而Sketch用户将需要使用Zeplin或InVision之类的集成。

Adobe XD的内置设计规范为开发人员和设计人员之间提供了一个平稳一致的工作环境。

Sketch与XD：Adobe具有优于Sketch的优势, 因为它内置了设计规范, 并且不需要第三方集成。

版本控制和实时协作

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

Adobe通过引入云文档解决了协作问题。这为团队中的每个人(包括开发人员)提供了一个集中的工作场所。根据Adobe的说法, 云文档功能的下一步将是版本控制。

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

Sketch vs XD：Sketch赢得了这一冠军。它们具有版本控制, 尽管带有插件。 XD当前不提供此功能。

功能摘要：Adobe XD与Sketch

当前版本的Adobe XD和Sketch之间既有相似之处, 也有不同之处。这是每个产品的比较：

现在该更换UX设计工具了吗？

比较功能, Sketch和XD接近。 Sketch缺少XD固有的一些功能, 例如自动动画, 自动响应设计和重复网格。

Adobe XD仍然缺少的唯一重要的东西是版本控制, Sketch借助插件实现了版本控制。预计随着Adobe继续开发云文档功能集, 此功能将很快出现在XD中。

从XS(和Photoshop或Illustrator)过渡到XD比从其他方法更容易, 因为XD可以以高保真度打开Sketch文件。如果你依赖诸如Abstract或InVision Craft之类的仅限Sketch插件, 则可能会遇到一些问题。

在某些情况下, 选择是显而易见的：对于Windows用户, Sketch不可用, 对于Adobe Creative Cloud订户, XD是免费提供的, 具有无限的共享原型。那不是偶然发生的。

但是Sketch正在反击。该公司最近关闭了2000万美元的融资, 并承诺在2019年提供重要功能, 例如团队协作, 本地切换和该应用程序的网络版本。

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

• • •

在srcmini设计博客上进一步阅读：

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