應用原型：開始使用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中文網其他相關文章！