ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

比较

8

阅读时间

ProtoPie 如何让 Adobe XD 变得更出色

了解 ProtoPie 如何让 Adobe XD 更出色,并学习如何同时使用两者来建立无缝的工作流程。

尤利娅·索罗多克, ProtoPie 的产品营销经理

摘要

  • Adobe XD 提供了一系列出色的基于矢量的 UI 和 UX 设计功能。

  • 然而,ProtoPie 是一款无代码原型工具,允许设计师创建高度逼真的交互式原型。

  • 通过使用适用于 Adobe XD 集成的 ProtoPie 插件,设计师可以创建无缝的端到端设计工作流,并受益于每个工具的特定能力。

通过使用正确的工具,设计团队可以高效协作、创建高保真原型、在早期获得宝贵的用户反馈,并从头到尾加速开发流程。

但哪些工具才适合你的团队?你如何知道该实施哪些解决方案、又该避免哪些?

在 ProtoPie,我们正在深入解析当前市场上一些最受欢迎且备受喜爱的原型工具。我们已经分析了 ProtoPie 与 FigmaFramer 的对比。现在,让我们看看 ProtoPie 与 Adobe XD 的比较。

本文将说明 ProtoPie 的 Adobe XD 集成如何让你在设计流程中同时使用这两款工具。

具体来说,本文涵盖:

Adobe XD:概览

Adobe XD 是一款基于矢量的 UI 和 UX 设计工具,可用于设计从智能手表应用到完整网站的各种产品。它功能强大、易于使用、支持跨平台,并可在 Mac 和 Windows 系统上使用。简而言之,Adobe XD 为设计团队提供了高效协作并打造惊艳体验所需的一切。

Adobe XD 功能

Adobe XD 拥有多种功能,帮助用户设计一流的数字体验。

其中包括:

adobexd-repeatgrid


借助“重复网格”功能,用户可以创建一组复制元素,并在 Adobe XD 中探索不同设计。

在 Adobe XD 中制作原型:你可以对 XD 原型有哪些期待

Adobe XD 确实提供了有限范围的交互式原型能力。例如,用户可以在 Adobe XD 中创建简单动画,使用自动动画功能为 XD 原型引入动效。然后,他们可以使用原型功能,通过连线和过渡在视觉上将交互区域连接到其他界面。

如果你正在使用 Adobe XD 并希望实现更多复杂交互,ProtoPie 是你工作流的完美补充。

adobexd-prototype


Adobe XD 的原型模式。

在下一部分中,我们将更深入地说明 ProtoPie 如何补充 Adobe XD。

ProtoPie 的独特之处是什么?

ProtoPie 是市面上最易用的高保真原型工具。它完全无需代码,却能让设计师通过高级交互、公式和变量创建逼真的设计。

事实上,ProtoPie 提供了某些功能,使其原型比 XD 原型丰富得多(这也是我们创建 Adobe XD 集成 的原因)。其中一些功能包括:

现在让我们深入了解这些功能分别能提供什么。

体验多点触控手势

在 ProtoPie 中,当用户实际触摸智能设备显示屏时,触控触发器会被激活。例如,可通过轻点、长按或拖拽来激活触发器。ProtoPie 动画还支持其他多点触控手势,如捏合、拉动和旋转。

protopie-map-prototype

在 ProtoPie Studio 中使用拖拽和捏合触发器创建的可拖动地图原型示例。

如果你想了解如何复现上面的原型,请查看这个 AskProtoPie

使用条件逻辑实现更复杂的交互

与触控触发器不同,条件触发器基于特定条件激活交互。例如,用户可以选择在原型开始运行时,自动将某个图层移动到另一个预设位置。

ProtoPie 动画还支持一系列额外的条件触发器,包括 chainrangestartdetect


protopie-conditional-interactions


在 ProtoPie 中使用条件进行密码验证示例。

使用 ProtoPie 原生传感器功能创建逼真的相机交互

在 ProtoPie 中创建原型时,用户可以利用设备的原生能力,例如相机、震动、倾斜、指南针和 3D Touch。查看下面的教程,学习如何使用 ProtoPie 的原生传感器功能创建一个简单但可信的相机交互。

视频

无需任何代码即可使用传感器构建原型

还不相信 ProtoPie 相比 Adobe XD 是更好的原型工具吗?如果是,这一点应该会改变你的看法。

ProtoPie 允许你尝试倾斜、指南针、声音、3D Touch 和接近等传感器触发器。例如,倾斜触发器会根据设备角度改变原型响应。如果你将设备侧转,原型会做出相应反应。同样,如果你将指南针触发器应用到原型中,其响应将由设备所指方向决定。

使用 ProtoPie 无需编码即可利用传感器制作原型。

总之,ProtoPie 让你能够创建远超 Adobe XD 自动动画过渡效果的高度逼真交互。

想进一步了解使用 ProtoPie 还能实现什么吗?来看看我们的用户制作的一些示例原型

ProtoPie + Adobe XD:让你更具优势的工作流

许多数码设计师喜欢在 Adobe XD 中开始设计流程。不过,借助适用于 Adobe XD 的ProtoPie 插件(可用于 macOS 和 Windows),用户随后可以将初始设计从 XD 导入 ProtoPie。可一次性将多个画板导入为场景,并在导入对象时保留与在 Adobe XD 设计时相同的图层层级、位置和约束。

一旦你的设计进入 ProtoPie,你就可以开始创建可拿在手中、可触摸并可完整体验的逼真交互原型。

adobe-protopie-plugin

在 ProtoPie Studio 中导入 Adobe XD 设计,并添加动态的条件交互以创建高保真原型。

填补你的原型能力缺口

Adobe XD 拥有许多功能,帮助设计师将模糊概念转化为强大设计。然而,通过 ProtoPie 插件,你可以利用更高级的原型能力。

使用 ProtoPie 功能提升你的原型。借助 ProtoPie,你可以创建:

  • 逼真、可定制的交互

  • 条件交互

  • 因果交互

  • 涉及文本输入、语音、媒体播放、传感器和多设备的交互

  • 具有特定触屏触发器的交互

了解更多,了解如何通过 ProtoPie 与 Adobe XD 建立无缝工作流。

相关文章