快速掌握 Origami Studio。學習如何搭建、預覽和分享原型。

▼

1. Getting Started 入門

本篇將講解如何搭建一個簡單的基礎原型。通過跟隨教程一起搭建原型可以更快度的了解 Origami Studio 的基礎知識。并講解了如何從Sketch等設計工具導入設計圖 ... 查看更多

▼

2. Previewing and Sharing 預覽和分享

在 Origami 上制作的原型可以在電腦模擬器上和移動設備上操作，所有的變更實時同步到模擬器和移動設備。原型可以導出 ... 查看更多

▼

3. Coming From Code 來自代碼

在 Origami 原型中使用函數和添加邏輯很簡單，但如果以編程的角度出發可能會有跟您預期的有一些不一樣。
如果你 ... 查看更多

Common Interactions 常見交互

▼

4. Adding Logic 添加邏輯

有時候我們希望原型上的交互只在特定的的情況下發生 - 當布爾值為真或假時，或者讓多個事物控制一個交互，比如兩個不同的按鈕 ... 查看更多

▼

5. Scrolling Views 滾動

滾動在 Origami 中很簡單，也非常靈活。通過創建基本的 Messenger 原型學習如何使用滾動。 先下載 ... 查看更多

▼

6. Horizontal Scrolling 水平滾動

有時候需要實現分頁滾動或循環幻燈片。通過我們已經掌握的知識搭建這個Facebook Events 的原型，學會如何分頁滾動 ... 查看更多

▼

7. Screen Transitions 屏幕切換

在 Origami 中創建屏幕流程比你想的要容易得多，并且仍然允許在屏幕內進行復雜的交互。通過搭建 Instagram Boomerang 界面 ... 查看更多

▼

8. Timed Animations 延遲動畫

有時你會想要一個動畫自動啟動 - 原型開始時，或有一個定時器觸發它。有時你想要多個 ... 查看更多

Smarter Interactions 更智能的交互

▼

9. Multiple States 多個狀態切換

我們已經學會了用 Switch 模塊在兩個狀態間切換，那怎么在兩個以上的狀態間切換呢？如 Tab 欄 ... 查看更多

▼

10. Masking Layers 剪切蒙版

剪切蒙版在 Origami 中跟在其他的設計工具一樣，還可以使用來創建高級互動和動畫，我們將 ... 查看更多

▼

11. Introduction to Loops 介紹循環

循環相當于 Sketch 里的模板。使用循環能降低原型復雜度，當常見元素能復用時也是節省時間的好方法。這個 Facebook 通知的原型包含一個循環通知，跟 ... 查看更多

▼

12. Interactive Loops 交互循環

Looped items in Origami are able to have interaction applied to them like any other layer in Origami would. In this Facebook Notifications prototype, we have applied a Color property
在 Origami 中循環能像圖層一樣相互應用。
在這個 Facebook 通知原型中，我們已經應用了一個Color屬性 ... 查看更多