应用原型：开始使用Facebook折纸

Facebook Origami：无需编码即可创建交互式应用原型的利器

核心要点：

• Facebook的Origami工具允许创建交互式应用程序原型，无需任何编码知识。它已被Facebook用于构建众多旗舰应用程序，证明了其可靠性和功能性。
• Origami与Sketch无缝集成，在设计工具中进行更改时，原型会自动更新。它还具有代码导出功能，使工程师能够导出iOS、Android和Web动画所需的代码。
• 虽然Origami是一个相对较新的工具，可能缺乏广泛的支持资源，但它易于使用且能够快速调整原型。它在进行更改时会向查看器提供实时更新，并且补丁属性可以平滑地集成，使其更易于理解和使用。

在软件开发领域，原型是应用程序（或网站）的工作原型，通常用于测试和收集反馈。

一个精心制作的原型总是比几十个静态模型页面更可靠地展现最终应用程序的工作方式。

但是，并非所有设计师和团队都具备构建此类原型的能力。从头开始编写代码需要时间和专业技能，而许多在线工具需要某种订阅。

令人高兴的是，一年前，Facebook发布了Origami——一个免费的工具，用于设计现代UI和交互式原型，无需编写任何代码。

它肯定经过了实战检验——Facebook已使用Origami构建了其几款旗舰应用程序，例如Instagram、Messenger、Slingshot和Facebook Paper。

简介：

Facebook Origami本身就是一个大型的Quartz Composer“补丁”堆栈，可以轻松开发包含演示动画和其他复杂交互的工作模型。

补丁是预先存在的动画、图形或交互模块。您可以将补丁视为用于构建原型的积木。

理解Quartz Composer的最佳方法是将其视为一个可视化编程工具，它可以接收输入参数并输出结果。它允许您以补丁的形式导入Sketch或Photoshop图层，然后将它们与动画和事件连接起来，直到您制作出模拟最终应用程序体验的内容。

一旦掌握了Quartz Composer，您应该能够立即轻松地组合原型。此处有关于Quartz Composer历史的更详细说明。要下载Origami，请按照其官方网站下载部分中的步骤操作。

界面和基本工具：

启动Quartz Composer时，首先会看到“模板选择器”窗口。要启动新的Origami项目，请转到：“文件>新建Origami文件”或⌥⌘N。

创建Origami项目后，系统会提示您使用三个重叠的窗口。要使您的工作区外观更好、更整洁，请转到：“窗口>调整为三分之一”或⌃⌥⌘0。

1. 编辑窗口

编辑窗口是您的主要工作区——一个工作台，您可以在其中拖放补丁，并通过将设计的不同图层连接起来来组装动画和交互的最佳组合。

从编辑窗口，您还可以访问其他工具和窗口，例如补丁库、查看器窗口、补丁检查器和基本工具按钮，例如后退/前进和放大/缩小。

2. 补丁库窗口

补丁库包含构建原型所需的所有组件。这些是实现神奇效果的螺栓和螺母。只需双击或拖放，即可将事件和补丁库中的不同元素添加到编辑窗口。

3. 查看器窗口

查看器窗口看起来像一个实际的设备模拟器。您在工作区（编辑窗口）中执行的所有操作都会在此处反映出来。您可以通过将“类型”的“查看器大小”补丁属性更改为您选择的设备类型的首选值来更改显示的设备类型。

默认情况下，下拉菜单中甚至还有Windows Phone和Apple Watch类型。

代码导出

批准原型后，工程师就该动手了。显然，对于设计师和程序员来说，这可能是一个非常具有挑战性的过程，他们需要密切合作以确保最终产品与原型非常匹配。

当最终产品与已批准的原型不够相似时，可能会出现问题。

但是，由于Origami的代码导出功能，工程师可以通过导出在iOS、Android和Web中实现相同动画所需的代码来轻松解决此难题。

Sketch集成

Origami的Sketch集成允许您将Sketch App中设计好的图层直接链接到您的原型。这意味着每次在Sketch中编辑设计时，更新都会自动反映在您的Origami项目中。

演示模式

使用演示模式，您可以在全屏模式下向观众精美地展示您的原型，其中包含不同的背景图像、拿着设备的人手和触摸指针。

如果您有任何iPhone或iPad，或者通过Apple设备的触控板，您可以直接控制原型。

您可以通过此链接在Origami官方网站上找到有关各个功能的更多详细信息。

结论：

Facebook Origami运行良好，并且确实能够完成工作。调整原型速度很快，因为在编辑补丁或导入新图像时，您无需编译或点击刷新按钮。所有内容都会实时反映到查看器中。

当从其他人那里获得原型时，您不必费尽心思才能理解它的含义。补丁属性通常不言自明，并且似乎可以平滑地集成而不会破坏其他任何内容。

不利的一面是，Origami相对较新，目前还没有大量的支持资源。尽管如此，现有的资源制作精良且组织有序。

您可以在此处找到的官方网站上找到示例和教程。

如果您想在此入门文章中添加内容，或者只是有疑问，请随时在下面的评论部分留言。

关于使用Facebook Origami进行应用程序原型设计的常见问题解答：

Facebook Origami与其他应用程序原型工具有何不同？

Facebook Origami是一个独特的工具，它提供各种应用程序原型设计功能。与其他工具不同，Origami提供设计的实时预览，让您能够实时查看更改。它还提供各种预构建组件，使创建复杂的交互变得更容易。此外，Origami允许您导出代码片段，这些代码片段可以直接用于您的项目中，从而节省您的时间和精力。

Facebook Origami是否免费使用？

是的，Facebook Origami完全免费使用。它是一个开源工具，这意味着任何人都可以使用它来创建自己的应用程序原型。这使得它成为个人和企业具有成本效益的解决方案。

我可以在任何操作系统上使用Facebook Origami吗？

目前，Facebook Origami仅适用于macOS。但是，Origami背后的团队正在不断努力更新和改进，因此它将来可能适用于其他操作系统。

如何分享使用Facebook Origami创建的原型？

Facebook Origami允许您通过多种方式分享您的原型。您可以将原型导出为视频、GIF或交互式原型。您还可以分享原型链接，让其他人可以直接与之交互。

我可以在没有任何编码知识的情况下使用Facebook Origami吗？

是的，Facebook Origami的设计易于使用，不需要任何编码知识。它使用可视化界面，允许您只需拖放组件即可创建复杂的交互。

我可以使用Facebook Origami制作哪种类型的应用程序原型？

Facebook Origami是一个多功能工具，可用于制作各种应用程序的原型。无论您是创建社交媒体应用程序、移动游戏还是生产力工具，Origami都具有将您的想法变为现实的功能和灵活性。

如何开始使用Facebook Origami？

要开始使用Facebook Origami，您需要在Mac上下载并安装Origami Studio软件。安装完成后，您可以开始使用各种可用的工具和功能创建自己的原型。

我可以在Facebook Origami上与其他人协作吗？

虽然Facebook Origami目前不提供内置的协作功能，但您仍然可以通过分享原型和收集反馈来与其他人协作。

如何了解更多关于使用Facebook Origami的信息？

有很多资源可以帮助您了解更多关于使用Facebook Origami的信息。Origami网站提供各种教程和指南，并且还有许多在线社区，您可以在其中与其他Origami用户联系并学习他们的经验。

Facebook Origami的系统要求是什么？

Facebook Origami需要macOS 10.13或更高版本。它还需要具有64位处理器的Mac。

以上是应用原型：开始使用Facebook折纸的详细内容。更多信息请关注PHP中文网其他相关文章！