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

核心要點：

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

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

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

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

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

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

簡介：

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

補丁是預(yù)先存在的動畫、圖形或交互模塊。您可以將補丁視為用於構(gòu)建原型的積木。

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

一旦掌握了Quartz Composer，您應(yīng)該能夠立即輕鬆地組合原型。此處有關(guān)於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ū)——一個工作臺，您可以在其中拖放補丁，並通過將設(shè)計的不同圖層連接起來來組裝動畫和交互的最佳組合。

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

2. 補丁庫窗口

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

3. 查看器窗口

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

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

代碼導(dǎo)出

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

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

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

Sketch集成

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

演示模式

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

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

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

結(jié)論：

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

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

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

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

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

關(guān)於使用Facebook Origami進行應(yīng)用程序原型設(shè)計的常見問題解答：

Facebook Origami與其他應(yīng)用程序原型工具有何不同？

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

Facebook Origami是否免費使用？

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

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

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

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

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

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

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

我可以使用Facebook Origami製作哪種類型的應(yīng)用程序原型？

Facebook Origami是一個多功能工具，可用於製作各種應(yīng)用程序的原型。無論您是創(chuàng)建社交媒體應(yī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é)作。

如何了解更多關(guān)於使用Facebook Origami的信息？

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

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

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

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