我们都知道每一款设计工具都有其不完美的地方。我们习惯使用熟悉的软件之后，就不愿尝试新的应用软件。然而，本文恰恰

将鼓励你开始使用和发现新的工具!

 

我们的所在 UX STUDIO 并不属于 Adobe 集团的一部分。我们中也有一些设计师根本不喜欢他们的软件。尽管如此，我也要

告诉你 Adobe XD 将主导 UI 设计工具和原型开发的五个原因。它提供：

 

• 与其他 Adobe 产品无缝协作

• 一键生成1惊艳的动效

• 原型的语音控制

• MacOS 和 Windows 的本地应用程序

• 与开发人员轻松协作

 

 

与其他 Adobe 产品无缝协作

在 UX STUDIO，我们每周都会举办一次名为 UI 挑战的自我成长训练。对于公司的 UI 设计师们而言，这一挑战有两条规则：

 

• 设计师必须选择一个挑战主题（他们可以从列表中选择）

• 设计师应该将完成的设计呈现给整个 UI 设计团队

   

我的挑战是尝试 XD 自动生成动效的功能。它给了我一点时间来试验这个令人兴奋的特性。但是首要，我必须做好先前准备：

要剪裁的图片，要绘制的图标，还要设计的一个简介的登陆页面。在这些任务中探索 Adobe 程序过程简直要了我的命。

 

一个经验丰富的设计师，我们需要导出 PNG 格式的图片和 SVG 格式的图标。但在应用程序之间我只想复制粘贴所有的元

素。所以我这么做了，而且……成功了！像我预期的一样天衣无缝！你能想象吗？我们都知道 Adobe 软件有时会工作异常，

但在这种情况下就不一样了!

 

UI 设计工作流程将来会变得更加舒适和快捷。我们不必导出所有文件或创建装有所有资料的庞大的文件夹。我们只需复制和

粘贴 - 仅此而已。只要一下，就操作成功了！

（ Adobe 软件之间是不能直接复制粘贴的元素的，除了 Adobe XD）

在我轻松地导入所有文件之后，我迫不及待地想要在 After Effects 中打开我的项目。我主要想尝试在 XD 中自动动画功能，但

我认为如果我在原型中添加一些额外的 After Effects 微调不会有什么坏处，我只能建议你尝试一下。

 

 

一键生成惊艳的动效

Adobe Max 在 2018 年10月推出了新的功能。正如他们所描述的自动动效，Adobe XD 已经从一个点击进行操作的程序演变为

为设计师提供不同的原型选项提高工作效率的工具，如时间、点击、拖动和声音。它们使得自动生成动效与拖动手势结合起

来，并为丰富的原型体验（如登机流程、旋转木马动画、卡片、列表或进度指示器）创建跨画板的微交互。

 

看似简单的操作，自动动效却能创建惊人的效果和过渡，帮助设计师表达动效最终呈现在用户面前的效果。在 XD 中的拖动手

势操作使自动生成动效的功能更进一步，允许设计师模拟具有触摸功能设备的拖动体验。

 

上文中，我提到了我决定对这个新功能进行测试。我通过完成 UI 挑战中的设计主题（一个 Nike webshop 的登陆页面概念）

获得了一些经验。

免责声明：我做的只是简单的界面设计实验，所以请不要评判这些概念的可用性。 

             

第一部分：

这个动效由一系列分类列表组成，这些列表的移动类似于 iOS 的日期/时间选择器。我不需要再做什么，只需要绘制两种状态

的页面，并使用 0.3 秒的缓动效果将动作设置为自动动画过渡到下一个画板。没有别的，制作这个动画没有费很大力气，太简

单了！

                                           

不过 XD 也有缺陷。目前你无法在原型中设置悬停状态，所以我不得不将动画设置为点击播放。这意味着我必须明确命名所有

图层，以防止动画效果崩溃。除了命名，其他轻松的操作也让我感到惊讶！XD 自动将选中卡片的产品信息放大，将另外两张

卡片两个向外推。我本来没打算这么做，但还是发生了。这确实为我的设计增添了一抹亮色。

可以说我给枪装好了子弹，却没有全部射出去。这只是自动动画功能的皮毛。虽然有时会发生错误，但它仍然给我留下了深刻

印象。这个功能的改进空间很大，因为容易使用的特点，它将会变的非常重要。我期待 XD 的更新，关注着有关自动动画功能

的每个变化。

用你的声音控制原型

和带给我们便捷的更新功能自动动效功能一样，XD 允许我们和原型进行前所未有的交互。语音触发和语音回复让我们将用户

带到屏幕之外，实现对原型的语音控制。这是 XD 独有的功能，并且（目前）没有其他原型设计软件有这个功能。随着

Alexa、Siri 和 Google Assistant 等新型语音优先服务变得越来越重要，用户正逐渐习惯与手机对话。这一点至关重要。 回到

语音原型功能，两种可能性使其有用：

• 设计依赖语音导航的界面

• 在没有“物理”输入的情况下进行设计演示

   

   

在开始设计语音界面之前，首先创建对话流程。对话流程使用户和机器之间的整个对话可视化。用户询问，机器就会回答。

为你的设计构建对话流程草稿后，将触发器设置为“语音”而不是“单击”或“拖动”。你可以输入所需的命令。除了为用户输入添加

触发器之外，您还可以使用“语音回放”功能来模拟 Siri 的响应。在我的示例项目中，对话流程如下所示：

- 我：Siri，给我挑一双耐克鞋。

- Siri：我选择了 Nike Air Max 720，因为它最适合！

- 我：Siri，选择41码。

- Siri：没有冒犯的意思，你有一双小脚。

- 我：Siri，请加入购物车。

- Siri：我已经把耐克鞋加到了你的购物车里了！祝您有一个“耐克”日！

在这里你可以看到语音原型结果：

如上所述，除了设计依赖语音导航的界面外，你甚至可以通过“语音原型”演示获得客户的参与。

想象一下，站在众多人面前或与客户会面。手里什么都没有，你没有架子，也没有电脑，只有你的声音。幻灯片一张接一张

，您在没有任何物理输入的情况下在屏幕上完成演示，然后启动语音控制原型的“约定火箭”(engagement rocket)。这会让你感

到轻松，因为不会遇到任何电缆或互联网连接的问题。一切都会顺利解决的。此外，它会让参与者感到惊喜。试试吧，你不会

后悔的！

MacOS 和 Windows 的本地应用程序

在我的 UX / UI 设计师职业生涯开始时，我开始在 Adobe Photoshop 中设计用户界面（我想当时每个人都是这样做的）。第

一次还可以，但我注意到当我复制一些画板时，它试图破坏我的计算机内存。这是我需要改变的第一个、也是最令人信服的理

由。

因此，我转向 Sketch 一段时间，但我发现并阅读了 Adobe XD 的承诺。Adobe 集团承诺，他们将发布 Windows 版本的 XD，

并在平台之间进行协作。为什么我觉得这很重要？

在用户体验中信，我们在 Mac 上工作，因为我热爱 UX / UI，当我回到家时，我不能停止设计工作。然而，在家里，我有一台

强大的 Windows 系统电脑，我不打算购买苹果。感谢 Adobe 在 2018 年发布了便于协作的 XD 和 Windows 原生应用程序。

即使您拥有 Windows 和 MacOS 电脑创建用户界面，现在也可以随时随地进行。

与开发人员轻松合作

每一个设计过程都会给开发人员带来许多困难。每个人都有同样的问题：资源库（asset）问题。一个又一个的的文件夹总是

消失在电脑“空间”中。

为了解决设计师和开发人员之间的问题和冲突，来自伊斯坦布尔和旧金山的一个小团队创建了目前全球知名的应用程序

Zeplin。我认为 Zeplin 解决方案使 Adobe XD 将成为“开发人员共享”的机会，以帮助开发人员和设计人员高效地协作。这甚至

没有提到集成功能如何激励你继续使用 Adobe XD，你会这样做的。而且，它不会像我在 Zeplin 经常遇到的那样，被视为第三

方问题。

Adobe XD 自动从 UI 设计中生成准确的规范、资源库和代码详细信息。您可以在编辑时选择任何元素、图标或图片设置为“资

源库”。然后开发人员可以在开发人员视图中以合适的大小下载它们。他们不会再看到大量设计文件丢失或担心设计中的随机

更改，因为我们不必向他们发送源文件。

小贴士

总而言之，Adobe XD 将主导 UI 行业，因为：

• 我们不需要在我们的计算机上创建文件夹，只需复制粘贴所有创建的资源库

• Adobe XD 自动动效将由于其易于使用的特性而发展成更重要的功能

• 除了自动生成动效，独特的 XD 语音导航功能将改变原型设计

• 由于 MacOS 和 Windows 的本地应用程序，设计永远不会停止

• 最后但同样重要的是，多亏了 Adobe XD，开发人员视图（与开发人员共享）有助于与开发人员进行有效沟通和协作

   

作为 UX/UI 设计人员，我们致力于寻找可用工具制作可用产品的最佳方法。

原文作者 |  Gabor Lakner

原文地址 | https://uxstudioteam.com/ux-blog/why-adobe-xd-will-rule-ui-design-tools/#Takeaways

编译作者 | 砂糖  无锡-产品经理-江南大学（微信ID：dool_e）

编辑整理 | 三分设翻译小组（微信ID：sanfen-design）

非特殊说明，本文版权归原作者所有；仅供学习使用，转载请注明出处。