【Smashing专栏】选择移动界面原型设计工具的12个因素

多年以前，一个小男孩正费力地用一把小刀尝试将树枝做成木弓。他的爷爷看到了这一幕，于是递给他一把锯子，并对他说“做事一定要选对工具”。作为这个故事中的小男孩，我学习了重要的一课：解决问题的工具有很多，但是总有一些比其他的更合适。

近年来，市面上出现了很多新的原型制作工具，其中不少是服务于移动界面设计的。这类工具不断更新迭代、推陈出新。本文并不会按部就班地介绍如何去选择合适的原型制作工具，而是讨论那些影响选择过程的重要因素。

我探索并使用过很多不同的工具，在此将设身处地地告诉大家为什么一些工具比另一些更合适。在文章的结尾，“参考资源”部分将给出更加详细具体的比较，从而帮助你更好地做选择。

如果你需要一个移动界面原型制作工具，你会怎么做？

尽管选择很多，但挑一个合适的工具并不是什么难事。你可以通过以下问题来缩小选择范围。

首先，根据项目的要求你可以先划定一个选择范围。项目是为了测试可用性吗？项目是否需要展示视觉效果？原型是为了展示一个抽象的概念还是成熟的产品？

UX设计师们常常会先评估问题再列出方案。我们也不妨这样挑选工具，先细化选择因素，再确定最终的选择方向。以下这些因素将会影响你的选择：

· 交互保真度

· 交互动效

· 手势

· 视觉设计

· 演示的便捷性

· 数字化协作

· 文档说明

· 响应式

需考虑的技术因素

每年都会新出很多令人振奋的原型工具，它们各有特点，可以帮助设计师们解决不同的问题。虽说某些工具在解决特定问题上更有优势，但是并不存在一个完美的工具！

以下介绍了各个工具在既定标准下的表现。你的选择应该依据项目需求，那些 “合适”（而非“最佳”）的工具也许才是项目更好的选择。

“合适”是我们推荐的，而“最佳”可能在功能上稍微突出一点、使得它在完成某些任务时更加方便。

分析原型工具需考虑的技术因素

1. 交互保真度

交互有不同的风格类型。有些仅仅需要表示流程，那么带有点击跳转效果的原型工具就很合适（概念或者可用性测试中常用到）。然而，有些项目（如果原型准备交付开发，需要完善的文档说明）可能需要你详细阐明多步骤交互逻辑。不论是哪种情况，你都能找到相应的原型工具。

元素间的相互作用关系（图片来源：丹尼尔·沃特斯）

合适

有些移动原型工具可以通过热点链接来实现点击跳转的效果，如keynote、Fluid UI 以及 Marvel。

更佳

随着工具支持的可操作状态、具体事件类型、元素可复用性越来越多，交互也会更加丰富。这类工具包括基于云计算的Pixate、Proto.io，以及电脑客户端的软件如Axure、Justinmind。编码工具如Bootstrap、jQuery、Mobile、Framer也有类似功能。这些工具的作用体现在制作原型的效率上。

2. 交互动效

动效在移动交互中作用重大。在项目启动时，需要明确谁应该负责实现原型中的动画效果，是你还是其他人（如开发人员或者动效设计师）？这个问题有助于明确原型中的动效实现到什么水平。

动效展现复杂的交互（图片来源：themonie）

合适

该类的移动工具通常都自带交互动效，但是缺少定制化（例如Blueprint及Xcode）。有些更强大工具可以提供动效编辑功能，包括时间线或弹性效果方面的编辑；Axure、Justinmind以及Proto.io都有此类功能。

更佳

如果需要定制更多模拟物理特性的动效，如速度、弹性、摩擦等，你可以尝试编码类工具，如Framer以及CSS3动画。这类工具大多可以实现特殊的元素属性，如大小、旋转、不透明度、颜色及虚化程度等。

3. 手势

移动原型包含对手势的设计，所以要考虑项目是否需要实现这点。多数UX专用工具支持手势设计——有一些工具自带常用的手势，另一些支持手势自定义及多手势操作。

移动端需要原型中包含手势操作（图片来源：尼古拉斯·诺瓦）

合适

Blueprint、AppCooker以及许多基于云计算的移动工具如Proto.io都内置手势设计组件。这类工具通常支持点击、横扫、滑动，其中一些支持长按及双击等。不过这些手势没有可配置的参数，不利于处理某些特殊的手势操作。 

更佳

如果原型需要更精细的手势操作，例如拖拽的减缓、加速、方向，这时就要求移动工具带有应用程序编码接口，该接口可以是基于编码的，也可以是基于可读指令的。Hammer和Axure就是很好的例子。不少工具甚至支持多点触摸，Justinmind、Pixate以及Framer都可以执行双指缩放及旋转的操作。

4. 视觉设计

在做移动原型时，应确认好需要实现的保真度。用户体验师们（UXers）常常也负责视觉设计，而在大公司则是交由专门的设计师来完成的。保真度由项目的目标及受众来决定：产品推介会和交付开发使用高保真，可用性测试使用中至低保真，概念验证使用低保真。

原型中的颜色传递了不同的情感（图片来源：See-ming Lee）

合适

移动原型工具（如Blueprint）、编码工具（如Framer及CSS3 animation）、云端工具（如Flinto、Pixate及InVision）支持使用外部导入的视觉元素来制作交互。其中有些甚至支持视觉设计的插件。使用这类工具时，用户体验师们常常需要在原型工具及设计工具（如Sketch及Photoshop）之间来回切换。

更佳

有些原型工具支持细致的视觉设计，包括渐变、投影、自定义字体及可复用的样式（如Axure及Justinmind）。这有利于一体化的制作流程，满足了原型设计的大部分需求。不过，相对于更高要求的视觉设计，如蒙版、多路径矢量图以及图像编辑的操作，用户体验师们还需要依靠专门的视觉工具。

5. 演示便捷性

向受众群体演示移动原型，对验证设计来说至关重要。

演示移动原型通常有两种方式：在电脑上演示或直接在最终设备上演示。两者之间有所不同，如从电脑端投射至设备端还是相反的方式。在项目启动时，需考虑到哪种方式更合理以及使用的原型工具支持哪种方式。

原型应在对应的情境中演示（图片来源：K2_UX）

合适

很多编码工具（jQuery Mobile及CSS3 animation）都将原型存储在云端，再通过链接加载到设备上，增加了演示步骤。而像iOS上的ProtoSee等工具则可以直接在设备上生成原型，方便演示。有些工具做得更好，如Axure、InVision及Proto.io，它们允许从云端将原型拖拽到设备上。

更佳

很多供应商为各类设备推出专门的配套软件。用户体验师们可以一边在电脑上制作原型，一边连接Wi-Fi使用移动设备浏览原型。Pixate、Flinto以及Framer都推出来了原生应用支持这一功能。我们在使用时应注意Wi-Fi的稳定性以及原型的尺寸。

有趣的是，支持在移动端直接制作原型的工具也都提供了更方便的演示方式。AppCooker、Blueprint以及Marvel都可以在编辑与预览模式间相互切换。

6. 数字化协作

设计不是封闭式工作。在整个项目中，用户体验师需要和利益相关者及其他专家们协同作业（包括视觉设计师以及开发人员）。因此，原型设计的协作创建尤为重要。应先找到大家认同的合作模式。

原型制作需要团队合作（图片来源：Kevin Dooley）

合适

很多原型工具仅仅服务于用户体验师们，并不支持共同编辑以及收集反馈，例如Pixate及Framer。有些工具虽不支持共同编辑但是提供了一定程度的协作功能，例如Marvel及InVison支持收集外部反馈，最终驱动原型改进。

更佳

有些移动原型工具提供更多协作功能，如项目共享，版本控制，多线程创建。Justinmind及Axure都做到了这一点，并且支持预览者对原型进行评论。

7. 文档说明

不是所有的原型都需要文档说明。交互及流程有时已经足够了。而在那些包含很多业务逻辑且复杂的原型中，文档说明成为开发者们梳理细节的重要工具。文档说明包含了用户体验师们考虑到但在交互设计中没有展示的特性。

文档说明记录了原型中没有体现的细节（图片来源：Domiriel）

合适

很多原型工具通过原型本身展示说明文档（Flinto及Pixate）。有些工具则能够支持导出为PDF或者PNG图片。这类工具对注释功能不一定支持，例如Proto.io并没有注释的功能，而AppCooker及Blueprint则允许用户标记注释。

更佳

Axure及Justinmind这类平台工具拥有更灵活的文档说明功能，支持注释单个UI组件或者整个页面，制作动态的文档说明类别，一键生成完整的规范说明。另外，很多可编码工具支持内联文档说明（Framer及jQuery Mobile），对开发者十分友好。

8.响应式

明确原型是否需要做成响应式。另外，如果你做的是响应式网站设计，也需要考虑到工具是否支持自适应或流体布局，是否自带响应式组件，以及演示的方法。

在真实的设备上测试响应式（图片来源：Jeremy Keith）

合适

有些工具无法展示屏幕的断点切换效果，例如Marvel以及Keynote一类的演示软件。不过，断点可以单独标记说明，在旁边对比展示出来。

有些工具支持单个断点的不同方向切换，甚至是同一个设计在不同断点上的连续变化，但是还不能在演示过程中动态地跳转断点。这类工具并不多，包括Blueprint、InVision以及Pixate。

更佳

支持响应式设计的UX工具已经出现。Axure就有此类功能，允许用户设计不同视图时的自适应原型。利用一些黑科技，流体设计也能实现。Proto.io和Justinmind可以实现真正的流体设计。

前端响应式架构可以实现更灵活的样式，例如Bootstrap和Foundation。其他工具如HotGloo以及WebFlow等也支持响应式。

选择的潜在影响因素

结束了对工具的研究，你对自己选择的工具十分满意，迫不及待地想要进行设计了。对成果的期待让你充满动力，却也可能让你变得盲目！除了技术因素，也需要考量其他因素。在给出建议之前，我们一起来简单地了解一下这些因素。

易学性

选择一个原型工具，尤其是完全陌生的工具，是个技术活。除了项目本身的时间，你还可能需要花时间学习工具的各种复杂特性和工具漏洞，然后重新设计。这些因素不应该打击你投入学习的勇气。

学习需要你转身进入新的情境（图片来源：wplynn）

熟悉一个工具的基本功能大概需要半年到一年时间。而精通一些工具，需要两到三年不断练习使用才可以。精通意味着遇到问题能够立即解决，不需要细细琢磨。这些是根据我的个人经验来说的，也取决于你对代码以及制作原型的熟悉程度。

你需要养成一个成长相关的心态：分类、逻辑表达、事件监测及响应都需要时间去适应。在这些方面，每一个工具的用户界面表现都是不同的，需要你自己去摸索。然而，你所掌握的每一个工具都会增加你触类旁通的知识。

成本

需要安装的工具，先了解它们的阶梯定价。例如，Axure有标准版和专业版，在费用和功能上都有所区别。另外，单个证书所支持的设备数以及升级频率也需要考虑。

云端工具通常都是按月收费。计算一下半年至一年的费用，这个时间通常可以满足大部分中等规模至大规模的项目。这些工具所支持的项目数量、功能、甚至允许的预览者人数都不一样。不妨查查InVision和Proto.io在这方面的限制条件。另外，也有些既可以单机又支持云端的工具，例如Justinmind和Pixate。

不要低估免费的作用！有些云端服务提供了一至三个免费项目。可下载的工具通常都有一个月的试用期限。有些供应商为尚未毕业的用户体验设计师提供免费或者打折的工具：Pixate在被谷歌收购之前一直都有“教育优惠”；Axure有优秀学生项目；Proto.io提供了50%的教育折扣。

如果你需要用一个工具进行多个项目，那么购买比订阅更值得，对个人或者小的设计工作室来说，购买是最好的选择。你花在订阅上的总计费用可能并不划算，除非你的团队遍布各个地方，你们的工具依赖了实时的沟通协作。较大的设计机构和公司都有此类的财务预算。

技术支持

你对工具的选择不仅需要参照工具的性能，也需要考虑它们所提供的技术支持，包括视频教程、使用攻略、API库等等。Proto.io每月举办的网络研讨会是个很好的例子；Axure提供了详细的使用攻略；Framer建立了API网站以及应用案列。

另外需要考虑的是工具更新的速度，以便满足不断提高的用户体验需求。每三个月一次小迭代以及每半年至一年一次大迭代的原型工具基本上可以跟上设计需求。例如，Framer有很多修复故障以及发布新功能的小升级；而Axure通常每年一次大的迭代，其间会有增值更新。

第三方资源

原型工具的供应商都比较注重社区的建设。设计师们也是如此；因此，知识分享很普遍。很多工具都有网上论坛，包括Axure、Proto.io以及Justinmind，用户上传自己的原型设计并相互交流。也有一些供应商使用其他方式解决问题，例如Framer，建立了Facebook交流小组。

第三方资源能够帮助你解决原型设计中遇到的问题（图片来源：r.nial bradshaw）

另外，也需要参考用户体验社区对工具的接受度。出版物以及专业活动的数量表明了设计师们的喜好。对于被广泛认可的工具来说，你常常可以找到相应的培训教程以及出售的设计素材。例如，Axure有很多相关的文章、书籍以及每年一度的网络研讨会，而Framer在许多城市都有专业的工作坊以及用户自发建立的GitHub资源库。

总结

本文介绍了如何为用户体验挑选合适的移动原型工具，从技术因素以及更加策略性选择标准的角度作出了分析。要知道，选择没有对错之分——设计师们各自有着不同的工作方式、专业技能以及需求。

更明智的选择建立在了解自己的强项之上。你知道编码吗？你擅长视觉传达吗？你知道自己的主要诉求吗？回答这些问题、收集项目相关的信息，有助于你更好地作出选择。

推荐

只懂一技之长还是不够，在此希望大家掌握以下各类工具组中的至少一个原型工具：

· 能解决各类移动问题的大平台：Axure、Justinmind

· 能定制交互及动效的编码工具：Framer、jQuery Mobile

· 云端协作工具：Flinto、Proto.io、Pixate

· 在移动设备本地安装的、可快速实现概念原型的工具：Blueprint、AppCooker、Fluid UI

对自己使用的工具保持精通水准；对新工具保持好奇之心（例如Principle、InVision Motion以及Adobe Experience Design CC）；为你的业务伙伴以及终端用户提供良好的原型体验。我期待听到你在为移动设备选择原型工具方面的经验。

参考资源

工具深度比较的文章

“Designer’s Toolkit: Prototyping Tools,” Emily Schwartzman, Cooper

“UX Tools,” Fabricio Teixeira and Caio Braga, UXdesign.cc

“The UX/UI Prototyping Tools List,” Michael McDearmon

Prototyping Tools, Javier-Simón Cuello

深入分析工具优劣的文章

 “Breaking Down the Pros and Cons to Some of Today’s Most Popular Prototyping Tools and Applications,” Stephen Meszaros

“Comparing 9 Mobile Prototyping Tools Every Designer Should Consider,” Dave Crow

“Comparing Popular Layer-Based and Code-Based Prototyping Tools,” Bona Kim, UX Magazine

“Comparing Four Popular, Page–Based, Interactive Prototyping Tools,” Bona Kim, UX Magazine

原文链接:https://www.smashingmagazine.com/2016/04/factors-selecting-mobile-prototyping-tool/

翻译：丫丫  王晓芳 

终审：赵艳兵

作者：Svetlin Denkov

本文转载自异步社区。

原文链接：https://www.epubit.com/articleDetails?id=Na74aef59-8604-4a79-a408-82e3f544b225