Facebook Origami：無需編碼即可創(chuàng)建交互式應用原型的利器

核心要點：

• Facebook的Origami工具允許創(chuàng)建交互式應用程序原型，無需任何編碼知識。它已被Facebook用于構建眾多旗艦應用程序，證明了其可靠性和功能性。
• Origami與Sketch無縫集成，在設計工具中進行更改時，原型會自動更新。它還具有代碼導出功能，使工程師能夠?qū)С鰅OS、Android和Web動畫所需的代碼。
• 雖然Origami是一個相對較新的工具，可能缺乏廣泛的支持資源，但它易于使用且能夠快速調(diào)整原型。它在進行更改時會向查看器提供實時更新，并且補丁屬性可以平滑地集成，使其更易于理解和使用。

在軟件開發(fā)領域，原型是應用程序（或網(wǎng)站）的工作原型，通常用于測試和收集反饋。

一個精心制作的原型總是比幾十個靜態(tài)模型頁面更可靠地展現(xiàn)最終應用程序的工作方式。

但是，并非所有設計師和團隊都具備構建此類原型的能力。從頭開始編寫代碼需要時間和專業(yè)技能，而許多在線工具需要某種訂閱。

令人高興的是，一年前，F(xiàn)acebook發(fā)布了Origami——一個免費的工具，用于設計現(xiàn)代UI和交互式原型，無需編寫任何代碼。

它肯定經(jīng)過了實戰(zhàn)檢驗——Facebook已使用Origami構建了其幾款旗艦應用程序，例如Instagram、Messenger、Slingshot和Facebook Paper。

簡介：

Facebook Origami本身就是一個大型的Quartz Composer“補丁”堆棧，可以輕松開發(fā)包含演示動畫和其他復雜交互的工作模型。

補丁是預先存在的動畫、圖形或交互模塊。您可以將補丁視為用于構建原型的積木。

理解Quartz Composer的最佳方法是將其視為一個可視化編程工具，它可以接收輸入?yún)?shù)并輸出結果。它允許您以補丁的形式導入Sketch或Photoshop圖層，然后將它們與動畫和事件連接起來，直到您制作出模擬最終應用程序體驗的內(nèi)容。

一旦掌握了Quartz Composer，您應該能夠立即輕松地組合原型。此處有關于Quartz Composer歷史的更詳細說明。要下載Origami，請按照其官方網(wǎng)站下載部分中的步驟操作。

界面和基本工具：

啟動Quartz Composer時，首先會看到“模板選擇器”窗口。要啟動新的Origami項目，請轉(zhuǎn)到：“文件>新建Origami文件”或??N。

創(chuàng)建Origami項目后，系統(tǒng)會提示您使用三個重疊的窗口。要使您的工作區(qū)外觀更好、更整潔，請轉(zhuǎn)到：“窗口>調(diào)整為三分之一”或???0。

1. 編輯窗口

編輯窗口是您的主要工作區(qū)——一個工作臺，您可以在其中拖放補丁，并通過將設計的不同圖層連接起來來組裝動畫和交互的最佳組合。

從編輯窗口，您還可以訪問其他工具和窗口，例如補丁庫、查看器窗口、補丁檢查器和基本工具按鈕，例如后退/前進和放大/縮小。

2. 補丁庫窗口

補丁庫包含構建原型所需的所有組件。這些是實現(xiàn)神奇效果的螺栓和螺母。只需雙擊或拖放，即可將事件和補丁庫中的不同元素添加到編輯窗口。

3. 查看器窗口

查看器窗口看起來像一個實際的設備模擬器。您在工作區(qū)（編輯窗口）中執(zhí)行的所有操作都會在此處反映出來。您可以通過將“類型”的“查看器大小”補丁屬性更改為您選擇的設備類型的首選值來更改顯示的設備類型。

默認情況下，下拉菜單中甚至還有Windows Phone和Apple Watch類型。

代碼導出

批準原型后，工程師就該動手了。顯然，對于設計師和程序員來說，這可能是一個非常具有挑戰(zhàn)性的過程，他們需要密切合作以確保最終產(chǎn)品與原型非常匹配。

當最終產(chǎn)品與已批準的原型不夠相似時，可能會出現(xiàn)問題。

但是，由于Origami的代碼導出功能，工程師可以通過導出在iOS、Android和Web中實現(xiàn)相同動畫所需的代碼來輕松解決此難題。

Sketch集成

Origami的Sketch集成允許您將Sketch App中設計好的圖層直接鏈接到您的原型。這意味著每次在Sketch中編輯設計時，更新都會自動反映在您的Origami項目中。

演示模式

使用演示模式，您可以在全屏模式下向觀眾精美地展示您的原型，其中包含不同的背景圖像、拿著設備的人手和觸摸指針。

如果您有任何iPhone或iPad，或者通過Apple設備的觸控板，您可以直接控制原型。

您可以通過此鏈接在Origami官方網(wǎng)站上找到有關各個功能的更多詳細信息。

結論：

Facebook Origami運行良好，并且確實能夠完成工作。調(diào)整原型速度很快，因為在編輯補丁或?qū)胄聢D像時，您無需編譯或點擊刷新按鈕。所有內(nèi)容都會實時反映到查看器中。

當從其他人那里獲得原型時，您不必費盡心思才能理解它的含義。補丁屬性通常不言自明，并且似乎可以平滑地集成而不會破壞其他任何內(nèi)容。

不利的一面是，Origami相對較新，目前還沒有大量的支持資源。盡管如此，現(xiàn)有的資源制作精良且組織有序。

您可以在此處找到的官方網(wǎng)站上找到示例和教程。

如果您想在此入門文章中添加內(nèi)容，或者只是有疑問，請隨時在下面的評論部分留言。

關于使用Facebook Origami進行應用程序原型設計的常見問題解答：

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

Facebook Origami是一個獨特的工具，它提供各種應用程序原型設計功能。與其他工具不同，Origami提供設計的實時預覽，讓您能夠?qū)崟r查看更改。它還提供各種預構建組件，使創(chuàng)建復雜的交互變得更容易。此外，Origami允許您導出代碼片段，這些代碼片段可以直接用于您的項目中，從而節(jié)省您的時間和精力。

Facebook Origami是否免費使用？

是的，F(xiàn)acebook Origami完全免費使用。它是一個開源工具，這意味著任何人都可以使用它來創(chuàng)建自己的應用程序原型。這使得它成為個人和企業(yè)具有成本效益的解決方案。

我可以在任何操作系統(tǒng)上使用Facebook Origami嗎？

目前，F(xiàn)acebook Origami僅適用于macOS。但是，Origami背后的團隊正在不斷努力更新和改進，因此它將來可能適用于其他操作系統(tǒng)。

如何分享使用Facebook Origami創(chuàng)建的原型？

Facebook Origami允許您通過多種方式分享您的原型。您可以將原型導出為視頻、GIF或交互式原型。您還可以分享原型鏈接，讓其他人可以直接與之交互。

我可以在沒有任何編碼知識的情況下使用Facebook Origami嗎？

是的，F(xiàn)acebook Origami的設計易于使用，不需要任何編碼知識。它使用可視化界面，允許您只需拖放組件即可創(chuàng)建復雜的交互。

我可以使用Facebook Origami制作哪種類型的應用程序原型？

Facebook Origami是一個多功能工具，可用于制作各種應用程序的原型。無論您是創(chuàng)建社交媒體應用程序、移動游戲還是生產(chǎn)力工具，Origami都具有將您的想法變?yōu)楝F(xiàn)實的功能和靈活性。

如何開始使用Facebook Origami？

要開始使用Facebook Origami，您需要在Mac上下載并安裝Origami Studio軟件。安裝完成后，您可以開始使用各種可用的工具和功能創(chuàng)建自己的原型。

我可以在Facebook Origami上與其他人協(xié)作嗎？

雖然Facebook Origami目前不提供內(nèi)置的協(xié)作功能，但您仍然可以通過分享原型和收集反饋來與其他人協(xié)作。

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

有很多資源可以幫助您了解更多關于使用Facebook Origami的信息。Origami網(wǎng)站提供各種教程和指南，并且還有許多在線社區(qū)，您可以在其中與其他Origami用戶聯(lián)系并學習他們的經(jīng)驗。

Facebook Origami的系統(tǒng)要求是什么？

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

以上是應用原型：開始使用Facebook折紙的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！