三種原型工具的簡單嘗試

01-30

https://zi.com/w/a/17fc6tM

作者：Tim Wu

如果是三年前，我會覺得用一個動畫來展示交互過程做起來很費勁，只會用 AE 勉強模擬效果，而且是無法與之進行交互的。但現在可選的工具很多了，這些工具具備了目前滿足設計師做原型的一些基本需求：

1.支持從Sketch導入素材

2.封裝好常見的Animation選項（例如Spring這種抖動效果）

3.支持點擊、長按、滑動等常規的交互動作

4.靈活的展示和導出（移動端app可預覽）

這篇文章分享的是用Principle 、Origami Studio 和 Framer 三個工具做同一個原型的使用感受，先來看下這個原型的效果。

Principle

Principle是我最常使用的原型工具，對於項目的日常需求大都可以滿足。上手速度快，直觀的畫布變化邏輯，快速設定動作和 Animation，可導出 .gif & .mov，有獨立 app 方便體驗和展示。

因為只有一個點擊的動作，所以兩張畫布一個開始一個結束，就足夠了。

兩個畫布上都有相同的全部元素，部分元素透明度被設成 0 或者被移出了畫布外。比如 navigation bar 在第二張畫布上就被移到了畫布上方，表示這個動作讓 navigation bar 上移淡出了。

其他變化還包括 tab bar 的下移淡出，列表的縮小淡出，被選中 item 的放大和結束時加投影，歌單列表從頁面中下位置淡入。

在第一個畫布上對交互區域加上交互動作，選擇「tap」，按住指向第二個畫布，就代表一個點擊動作，當然為了可以循環，我在第二個畫布上也加了個點擊動作指回來。

這個點擊動作使得兩個畫布上相同元素的屬性發生了變化，每個變化都默認有個「default」的速度曲線，其實就是 ease ，你可以修改成別的 animation ，也可以調節動畫的時間。

用 Principle 做這種簡單的轉場動畫只需要5分鐘就可以了，非常快，但用它做比較複雜的整套原型的時候就不太靈光了。

Origami Studio

Origami Studio去年知道這個工具的時候還是 Quartz Composer 的插件，當時被這個各種模塊相互連接的可視化界面驚呆，跟連電路似得，還能導出代碼，但我裝了之後感覺這玩意不是給設計師用的。今年變成獨立應用後重新撿起來試了下，看一些官方案例，上手難度較大。相較於 Principle 可以做更多頁面、更複雜變化的交互，可以看這個官方例子，我一進去就嚇到了，側面說明功能很全面。

上面說的那個官方例子的截屏，略嚇人

紫色代表一個交互動作的開始，深灰色代表一個參數變化模塊，藍色代表素材的某個屬性參與這個變化。

這個界面怎麼看怎麼美，當你連接起兩個模塊的時候，有種莫名的新奇感，而且實際操作時，這些patch 上的數字會跟著變化，也很有科技感的樣子。

對比下我做的這個，就真的很小兒科了。

紫色的 patch 表示這個點擊動作，選擇右側圖層，上面會出現一個「touch」，然後你可以選擇動作類型：tap、double tap、scroll、swipe、long press等。

switch模塊收到紫色模塊的動作後，在 on / off 間切換，on 就執行後續變化，off 就回到原位。然後加入 transition 模塊，選擇素材的哪個屬性參與變化，然後設置素材屬性變化的開始值和結束值，然後連接對應素材，我做的這個案例主要都是簡單的 opacity、scale 和 position 變化。

注意 transition 這個模塊是可以右擊選擇類型的，我一開始看文檔以為只能做 0-1 的變化，但 position 不是 0-1，就研究了好久，太傻了。

然後給整組動作加上 pop animation。

Framer

Framer的邏輯是「某個圖層，經過某個事件，產生了狀態變化」。例如我想讓圖片點擊後消失，做法是把圖片拖進來後，加一個點擊事件 Click ，讓圖片發生一個狀態變化：opacity 屬性變成 0 就可以了。然後可以對這個事件加上 Animation 讓消失過渡更自然。Framer 上手也比較難，因為也有一堆規則要記。

剛開始我以為和 Origami 差不多呢，以為就是 Origami 的「非可視化」版，但還是不一樣的，需要點代碼基礎，不看案例和文檔感覺基本上動不了。

導入素材後，你可以對素材做很多變化，如上圖所示。然後設置 states 來控制屬性的變化，然後設置動作來執行這些 states 變化。我是看了幾個案例之後做出來的，因為變化比較簡單嘛，要是做更複雜的，肯定要好好讀文檔啦。

這是圖片插入代碼和狀態變化代碼：

john_grant = new Layer nwidth: 345 nheight: 345 nimage: "images/john_grant.jpg" nx: 20 ny: 148 nborderRadius: 8n

john_grant.states.a = nwidth: 670 nheight: 670 nx: 40 ny: 40 nborderRadius: 10 nshadowSpread: 1 nshadowColor: "rgba(0,0,0,0.3)" nshadowY: 12 nshadowBlur: 28n

例如下面這句代碼是給動作加上 animation，我是純 copy 案例的......

Framer.Defaults.Animation=curve: spring()n

有種找回大學時候寫代碼的感覺.......

這三個工具在移動端都有 app 可以讓你身臨其境的體驗自己做的交互，拿給 boss 看讓他體驗下，肯定比只看視覺稿更直觀，給人一種功能已經開發完的錯覺哈哈，稿子當然也更容易通過啦。

重要的是，你的所有思考過程都能被實現，且都能精準的輸出給後面流程的開發，保證了設計的還原度，尤其是後兩個工具。

當然工具只是工具，找到最適合自己，最適用於需求的就行。

最後安利界面中的那位歌手 John Grant，可以在雲音樂搜索他和 BBC 愛樂樂團合作的 live 專輯《John Grant and the BBC Philharmonic Orchestra : Live in Concert》。

閱讀原文