选择移动原型工具的 12 个因素

多年前，一个孩子试图通过用刀切割树枝来制作蝴蝶结。 祖父见状，递给他一把锯子，说：“做事要用对的工具！” 作为故事中的孩子，我在工艺方面学到了宝贵的一课：当您选择工具来解决问题时，有很多好工具，但有些工具比其他工具更适合任务！

近年来，出现了新的原型设计工具，其中许多用于移动设计。 环境在不断变化，一些工具失去了 UX 设计师（或 UXers）的青睐，而另一些工具则取而代之。 虽然本文不会作为选择原型工具的完整数字绘制手册，但我们将讨论影响选择过程的重要因素。

关于 SmashingMag 的进一步阅读：

• 怀疑论者的低保真原型指南
• 内容优先原型
• 使用 Sketch 进行响应式网页设计
• 使用 Sketch 制作 iOS 和 Android 应用程序原型

我将依靠我在使用和研究各种工具方面的个人经验来解释某些工具如何比其他工具更适合。 在文章结尾处，“资源”部分将为您指明更具体的比较方向，为您提供更多决策背景。

你需要一个移动工具。 你做什么工作？

尽管您有许多工具可供您的移动项目使用，但选择其中一个并不一定是一项艰巨的任务。 您可以通过回答问题以形成选择标准来缩小可能性。

项目的需求会给你很好的初始约束。 你在测试可用性吗？ 视觉设计会成为原型设计的一部分吗？ 原型会捕捉到高级概念还是完整的生产工作？

用户体验设计师不断评估给定的问题并制定路线图。 那么，为什么我们不采用相同的流程来选择原型制作工具呢？ 将选择分解为更小的因素将建立您对最终追求的方向的信心。 以下每一项都可以在您的决定中发挥重要作用：

• 交互保真度，
• 动画和动作，
• 手势支持，
• 视觉设计，
• 演示简单，
• 数字协作，
• 文件，
• 反应能力。

要考虑的技术因素

随着令人兴奋的新工具的出现，移动原型设计领域每年都在增长。 每个工具都有不同的功能，使设计人员能够解决各种问题。 有些工具对于一组任务比另一组更有价值。 没有一种工具能胜任一切！

根据我们的选择标准，以下是对常见原型工具和技术的适用性的一种解释。 请记住，您的选择将取决于项目。 您可能会发现下面标记为“适合”（而不是“最适合”）的工具是您项目的更好选择。

“良好匹配”评级仅表示强烈推荐特定工具，但另一个工具（表示为“最合适”）功能略高，使某些任务更容易完成。

1.交互式保真度

交互有不同的风格。 您可能只需要沟通流程； 因此，点击原型将是理想的（这是概念和可用性测试的典型）。 相反，该项目可能需要您说明多步骤条件交互（如果您需要生产就绪和以文档为中心的原型）。 无论如何，有一个原型工具可以提供帮助！

合身

一些移动工具能够通过热点链接点击原型。 演示软件，如 Keynote 和移动纸工具 Fluid UI 和 Marvel 就是很好的例子。

更适合

当工具支持用于管理状态、详细事件模型和元素重用的变量时，将获得交互灵活性。 符合此要求的工具包括基于云的工具，例如 Pixate 和 Proto.io，以及桌面软件，例如 Axure 和 Justinmind。 Bootstrap、jQuery Mobile 和 Framer 等编程技术也提供了这些功能，它们的有效性取决于您构建原型的速度。

2.动画和动作

动画在传达移动交互方面发挥着重要作用。 在移动项目开始时，确定您是负责在原型中创建动画还是由其他人负责，例如开发人员或动画设计师。 无论谁来处理这个问题，了解原型中需要对动画进行何种级别的控制都会有所帮助。

合身

此类移动工具通常带有内置动画，但缺乏可定制性（例如 Blueprint 和 Xcode）。 一些更强大的工具提供动画配置，包括时间和弹性设置； Axure、Justinmind 和 Proto.io 都有这个功能。

更适合

要对动画的速度、弹性、摩擦力和其他基于物理的属性进行额外控制，您可以尝试使用 Framer 或 CSS3 动画等编码工具。 其中许多工具还可以为独特的小部件属性设置动画，包括大小、旋转、不透明度、颜色和模糊级别。

3.手势

移动原型设计涉及手势输入设计，因此请考虑您的项目是否需要这样做。 大多数 UX 特定工具开箱即用地支持这一点——一组工具将内置通用手势，而另一组将支持手势创建和多指输入。

合身

内置手势可以在 Blueprint 和 AppCooker 以及许多基于云的移动工具中找到，例如 Proto.io。 这些工具支持点击、滑动和轻弹。 有些具有触摸和按住和双击功能。 手势没有可配置的参数，如果您需要在手势输入时触发特定交互，这些参数可能会受到限制。

更适合

如果您的原型需要更精细的手势控制，包括阻力阻尼、速度和方向性，那么您将需要利用具有某种 API 形式的移动工具，无论是基于代码的还是以人类可读动作的形式抽象的。 很好的例子是 Hammer 和 Axure。 一些工具甚至支持多指手势：Justinmind、Pixate 和 Framer 执行两指捏合和旋转。

4.视觉设计

在为移动设备设计原型时，确定对可交付成果的视觉保真度的期望。 用户体验人员通常负责视觉设计，这是委托给大型组织中的专业设计师的责任。 保真度将由项目的目标和受众决定：高用于推销和生产工作，中到低用于可用性测试，低用于概念证明。

合身

蓝图等纸上移动工具、基于代码的工具（Framer 和 CSS3 动画）和基于云的工具（Flinto、Pixate 和 InVision）围绕从外部视觉应用程序导入的视觉资产创建交互。 其中一些工具甚至能够通过内置小部件进行视觉设计。 在这种类型的工作流程中，UX 用户可能会发现自己在原型工具和可视化应用程序（如 Sketch 或 Photoshop）之间切换。

更适合

一些原型制作工具能够进行复杂的视觉设计，包括渐变、阴影、自定义字体和可重复使用的样式（例如 Axure 和 Justinmind）。 这形成了一个独立的过程，可以满足您的大部分原型设计需求。 然而，对于更多涉及的视觉设计，包括遮罩、多路径矢量和照片增强，用户体验设计师必须依赖专用的视觉工具。

5. 演示简单

将移动原型呈现在观众面前对于验证设计至关重要。 演示移动原型有两种主要方法：在计算机上或直接在目标设备上。 两者之间存在差异，例如从计算机镜像到设备，反之亦然。 在开始一个项目时，请考虑哪种方法最有意义以及您的原型设计工具支持哪种方法。

合身

许多基于代码的工具（jQuery Mobile 和 CSS3 动画）需要将原型托管在云中并通过链接加载到目标设备上。 这可以创建额外的演示步骤。 iOS 上的 ProtoSee 等工具允许将生成的原型直接加载到设备上，从而使它们成为更快的解决方案。 一些移动工具更进一步，提供能够将原型从云端拉到设备上的应用程序，包括 Axure、InVision 和 Proto.io。

更适合

许多供应商已经开始为目标设备推出配套应用程序。 这允许 UXer 在桌面上进行原型设计，并通过 Wi-Fi 将原型实时镜像到移动设备上。 Pixate、Flinto 甚至 Framer 通过本机应用程序支持这一点。 请牢记 Wi-Fi 可靠性和原型的整体尺寸。

有趣的是，允许您直接在目标设备上创建原型的移动工具也提供了演示原型的最简单方法之一。 AppCooker、Blueprint 和 Marvel 具有在编辑和预览模式之间切换的内置功能。

6. 数字协作

设计师不会在真空中工作。 UXers 在项目的生命周期中与利益相关者和其他专业人士（包括视觉设计师和开发人员）合作。 因此，原型的协作创建很重要。 预先了解您应该如何与他人合作。

合身

许多移动原型工具是为单个用户体验设计的，因此不支持共同创建或捕获反馈； 想到 Pixate 和 Framer。 有些工具不支持共同创造，但提供某种程度的协作； Marvel 和 InVision 允许捕获外部反馈，最终推动迭代。

更适合

提供最强大协作的移动原型设计工具允许共享项目、版本控制和分布式共同创建。 Justinmind 和 Axure 都能够做到这一点。 两者都允许审阅者对原型发表评论。

7. 文档

并非所有的移动原型都需要文档； 互动和流动有时是足够的。 对于具有大量业务逻辑和复杂性的系统，文档成为为开发人员阐明细节的重要工具。 文档记录了交互设计中尚未实现但驻留在 UXer 脑海中的细节。

合身

许多原型设计工具依赖原型作为文档（Flinto 和 Pixate）。 一些工具更进了一步，使用户体验人员能够将设计导出为 PDF 或一堆 PNG。 在此类别中，工具对注释的支持不一。 例如，Proto.io 没有此功能，而 AppCooker 和 Blueprint 允许自定义注释和注释。

更适合

最灵活的文档来自 Axure 和 Justinmind 等平台原型工具。 使用它们，您可以对单个 UI 小部件或整个页面进行注释，创建动态文档类别，并通过单击按钮生成完整的规范！ 此外，许多基于代码的工具捕获内联文档（Framer 和 jQuery Mobile），这对开发人员很有帮助。

8. 响应能力

确定您的原型是支持原生体验还是响应式。 此外，如果您正在处理响应式网页设计，请考虑该工具是否支持自适应或流体布局，它是否具有响应式小部件库，以及如何在该工具中演示响应性。

合身

一些移动工具无法显示不同断点的屏幕； Marvel 和 Keynote 等演示软件就是很好的例子。 但是，可以单独记录断点并在并排比较中显示。

其他工具支持单个断点的不同方向，甚至支持跨断点的相同设计的变体，但它们尚未在演示期间跨断点动态切换。 Blueprint、InVision 和 Pixate 只是其中的一小部分。

更适合

支持响应式设计的专用 UX 工具正在兴起。 Axure 有一个功能可以让你为多个断点创建自适应原型。 流体设计是可能的，尽管它需要一些黑客攻击。 Proto.io 和 Justinmind 能够进行真正流畅的设计。

使用前端响应式框架（例如 Bootstrap 和 Foundation）可以实现更大的灵活性。 其他具有响应式支持的工具包括 HotGloo 和 WebFlow。

对您的选择的隐藏影响

您现在已经完成了对工具的调查。 您对自己的选择非常满意，并想跳入设计领域。 创造出色作品的前景是一个很好的动力，但有时它会阻止我们看到大局！ 除了技术方面，我们还必须考虑次要因素。 在获得建议之前，让我们简要回顾一下这些内容！

易学性

选择一个原型工具，尤其是你没有任何经验的工具，是一个棘手的提议。 除了花在项目本身上的时间外，您还将花时间学习移动工具的复杂性和错误以及重新设计设计的过程。 这不应该阻止你潜入水中。

熟悉工具的基础知识可能需要六个月到一年的时间。 精通伴随着持续使用和一些工具，这可能需要长达两三年的时间。 掌握需要立即知道如何解决问题而无需研究。 这些估计来自我的个人经验，但取决于您自己对编码和原型设计的熟悉程度。

您将不得不采用与开发相关的心态：划分、逻辑传播、事件检测和响应都需要时间来适应。 每个工具在 UI 级别以不同的方式处理这些方面，为您创建新的设计隐喻来处理。 但是，随着您掌握的每个连续工具，您将积累可转移的知识！

成本

对于可安装产品，请查看分层定价。 例如，Axure 有标准版和专业版，它们在成本和功能上有所不同。 其他考虑因素包括单个许可证支持的机器数量和升级频率。

基于云的工具按月定价。 计算六个月和一年的成本，适合大多数大中型项目。 这些工具的项目数量、功能甚至允许的审阅者数量都会有所不同。 查看此类别中的 InVision 和 Proto.io。 还有混合版本，包括独立版本和基于云的版本，例如 Justinmind 和 Pixate。

不要小看免费的力量！ 一些云服务为一到三个项目提供免费计划。 可下载的工具通常有一个月的试用版。 对于还在上学的 UX 用户，公司提供免费或打折的工具： Pixate 在被 Google 收购之前曾经有一个“学术帐户”； Axure 有很好的学生项目； Proto.io 提供 50% 的教育折扣。

如果您打算将一个工具用于多个项目，您将通过购买该工具而不是使用订阅获得最佳的投资回报。 对于个人和小型设计工作室来说，这是最好的选择。 通过订阅，在工具的整个生命周期内花费的总资金可能不具有成本效益，除非您的团队在地理上分布很广并且依赖于实时协作。 大型设计机构和公司拥有采用这种方法的财务灵活性。

技术支援

您的决定不仅取决于工具的功能，还取决于所提供的技术支持。 我指的是视频教程、分步演练、API 库等形式的公开文档。 Proto.io 的网络研讨会月度计划做得很好； Axure 有详细的分步演练； Framer 有一个 API 网站和社区构建的示例。

另一个考虑因素是更新工具以适应不断变化的用户体验需求的速度。 每三个月发布一次小版本，每六到十二个月发布一次主要版本的原型工具能够保持领先于设计曲线。 例如，Framer 有许多用于错误修复和新功能的小更新，而 Axure 通常每 12 个月发布一次主要版本，中间有增量更新。

第三方资源

移动原型工具供应商专注于社区建设。 设计师经常解决同样的问题； 因此，知识共享是高度相关的。 许多工具都带有在线论坛，用户可以在其中贡献自己的原型和信息，包括 Axure、Proto.io 和 Justinmind。 包括 Framer 在内的其他供应商使用 Facebook 群组等替代解决方案。

您的选择还应该基于 UX 社区对工具的接受程度。 出版物和专业活动的数量是设计师兴趣的一个很好的指标。 对于更广泛采用的工具，您将看到用于销售设计资产的认证课程和市场。 例如，Axure 有书籍、文章和年度网络研讨会，而 Framer 在多个城市有专业研讨会和用户贡献的 GitHub 存储库。

概括

在本文中，我们介绍了为 UX 选择移动原型工具的实际考虑因素，涵盖了技术因素和更具战略性的选择标准。 请记住，没有正确或错误的决定——设计师有不同的工作风格、专业知识和需求！

为了使您的选择更加明智，请确定您的优势。 你知道编码吗？ 你是一个优秀的视觉沟通者吗？ 你确定了多少需求？ 回答这些问题并收集有关项目的信息将帮助您确定正确的工具。

建议

没有人想成为一匹特技小马。 因此，我们建议在您的移动原型设计工具包中至少包含以下每个类别中的一个：

• 解决各种移动问题的完整平台：Axure、Justinmind
• 用于控制交互和动画的基于代码的工具：Framer、jQuery Mobile
• 用于协作和分布式工作的基于云的工具：Flinto、Proto.io、Pixate
• 用于快速概念模型的设备原型设计工具：Blueprint、AppCooker、Fluid UI

努力成为您学科中的佼佼者； 对新的交互工具（例如 Principle、InVision Motion 和 Adob​​e Experience Design CC）保持好奇； 并继续为您的业务合作伙伴和最终用户打造出色体验的原型。 我期待听到您在为移动设备选择原型工具方面的经验！

资源

工具的高级比较

• “设计师工具包：原型设计工具”，艾米丽·施瓦茨曼，Cooper
• “UX 工具”，Fabricio Teixeira 和 Caio Braga，UXdesign.cc
• “UX/UI 原型工具列表，”Michael McDearmon
• 原型工具，Javier-Simon Cuello

深入探讨利弊

• “分析当今一些最流行的原型设计工具和应用程序的优缺点，”Stephen Meszaros
• “比较每个设计师应该考虑的 9 个移动原型设计工具，”Dave Crow
• “比较流行的基于层和基于代码的原型工具，”Bona Kim，UX 杂志
• “比较四种流行的、基于页面的交互式原型工具，”Bona Kim，UX 杂志