移動互聯網爆發催生原型工具百花齊放。2014年被譽為「原型工具元年」，從代碼級Framer.js到Quartz Composer，筆者實測後最愛Xcode與Keynote。Facebook設計團隊力薦的Origami（QC插件）在2.0版本大幅降低門檻，支持手機實時交互，迅速成為熱門選擇。本文基於官方教程《Introduction to Origami》實踐整理，附加進階內容，直奔幹貨。

環境搭建與界面認知

打開QC，新建Origami File。左側編輯區，右側Viewer可點擊「Resize to third」調整比例。編輯區右側有Viewer Patch（視圖模塊）：

核心模塊類型解析

• 方角尖角（Macro/宏）：可雙擊進入編輯，類似代碼函數，可嵌套子視圖，工具欄「Edit Parent」返回上層
• 圓角（普通模塊）：基礎功能單元
• 藍色（輸出模塊）：會在Viewer中顯示
• 紫色（容器模塊）：內部包含其他模塊

資源導入與圖層操作

拖拽圖片至編輯區，自動創建圖片模塊與圖層模塊。圖層模塊可設置X/Y/Z位置、錨點、遮罩、不透明度、縮放：

按Command + Enter調用QC庫（含Origami庫）。選擇「Interaction 2」交互模塊，提供Down（按下）、Up、Tap（輕觸）、Drag（拖拽）四種觸發。

動效核心：過渡與彈跳

過渡模塊：將0-1進度值映射為起始值與結束值區間。示例中設置起始1、結束0.4，配合默認頁面狀態演示：

Pop動效：懸停圓點按A快捷添加。但需解決狀態保持問題——引入Switch開關：

• 記錄開/關狀態，類似燈光開關
• Flip端口適合對稱交互（如反覆點擊縮放切換）
• 快捷鍵：Shift + ⌥

完整交互鏈路構建

1. 添加Chrome圖片（非瀏覽器，僅素材名）
2. 為含評論的Chrome圖層添加透明度過渡
3. 將過渡模塊Progress輸入口連接Switch的On/Off輸出
4. 完成！首個Demo交互閉環打通

圖層順序規則：數字越大優先級越高、越靠前。

實機預覽與實戰場景

下載Origami Live，iPhone連接Mac，即可實時同步交互，無需網絡。實戰場景想像：會議室滿座，你展示高保真原型，老板上手把玩拍板，程序員憂慮實現難度，你一鍵導出iOS代碼並補充「Facebook POP動畫引擎開源可直接用」——全場震驚，才華橫溢：

已知限制與協作價值

• 需指定機型演示（如iPhone 6原型在5上顯示不全），不如Xcode Auto Layout自適應
• 設計師可將表現層調試完畢交付工程師，讓雙方專注各自專長領域