標籤：

做移動應用有什麼好的原型工具？

11-26

axure，visio除外！

因為題主沒有特別提到具體的要求，剛好這兩天自己也在研究，提兩個方向的：

第一個方向：快速開發

--- 2014.04.29 update---


0.Marvel

最近在使用 Marvel Free mobile and web prototyping for designers ，他們同時開發了網頁端和iOS端，初步使用秒殺了 POP(千年不更新了) 和 Finto(不給錢就不給你用)，Marvel網頁端有免費和付費的(付費的也相當實惠)，真的很好用，他們也結合了dropbox，對產品團隊的前期prototype構建起到很大的影響。這兩天使用完後再來修改詳細答案。

---end update---

1.POP
POP - Prototyping on Paper

  • 優點：主要的優點上面已經有知友提過了，方便，有交互效果，可以在紙上畫好每一個頁面，然後用POP把每個頁面拍下來，在POP裡面做具體的交互。又或者可以用手機裡面的照片進行交互，十分快捷。
  • 缺點：沒有高保真原型。對於被展示的客戶或者團隊成員，只知道個大概方向，並不知道真正做出來的是扁平化還是擬物化；並且上升到多個頁面，交互效果越來越複雜的時候不能很好表達設計者的想法。

2.Balsamiq Mockups
Balsamiq Mockups

  • 優點：這個軟體相信很多人都知道了，內置了大量的模塊，在需要的時候在搜索框里找，然後拖到畫布裡面進行排序組合，畫圖很快速，功能很強大（比如在tab選擇框里可以選擇哪個tab是active，哪些是default的）。很快就能畫出想要的app原型。如果你還覺得BM內置的模塊點少？Mockups To Go 可以滿足你需要的大部分需求！
  • 缺點：和POP一樣，在BM裡面畫的只是草稿，沒有配色，沒有設計風格。而且相比起與POP，BM只是每個頁面的布局，不能進行交互展示。

3.MockFlow
MockFlow - Online Wireframe Tool and Design Cloud

  • 優點：MockFlow感覺有點像是BM的升級版，類似BM的UI草圖和功能，並且可以進行交互展示。可以在網站上選擇不同的建站方案，可以有不同的功能。官方文檔說明部分高級功能可以在線編輯也可以離線編輯，可以以HTML形式下載到本地。
  • 缺點：有點可惜的是需要付費，可以根據不同的情況進行使用，可以試用。
  • 由於我是試用的，其它高級功能無法使用，如果其它知友有使用的可以提出並幫助完善。

之後還有像 @彭澎提到的 Fluid UI - fast and friendly mobile prototyping. 這樣的，同樣可以在線快速編輯並且可以有交互展示的，這個沒有用過，如有機會體驗完之後再在這補充。

第二個方向：高保真原型

有些客戶要求的就是一些半成品，需要看到設計，這時候我們可以運用這樣一些工具去製作交互。

1. OmniGraffle
OmniGraffle - The Omni Group

  • 優點：可以在上面作畫了簡直！基本可以用在網頁交互設計和移動端的交互設計。有畫布和圖層的概念，方便在進行交互的時候隱藏、出現和跳轉，懂adobe的都可以很快懂。可以用各種工具畫出各種圖形，貝塞爾曲線用起來很順手。有各種模板，內置了ios7模塊，也可以下載各種需要的模塊進行快速調用。有交互和展示的功能，結合畫布和圖層的概念可以快速使用。
  • 缺點：只能在mac環境運行，上手比較慢，製作時間比較長。如果單從交互的效果來說比下文將要提及的Flinto要遜色一點。
  • 答題的時候順手做的一個簡單ios7界面

2.Flinto
Flinto – iPhone and iPad Prototyping

  • Flinto是在上個月在sidebar看到的，剛好最近做了一個項目，用flinto做出來的效果十分出色，用戶體驗十分棒。
  • 優點：使用方便。可以把已經設計好的稿子全部上傳到Flinto，然後可以在操作面板上面看到所有的頁面。然後選擇其中一個頁面做這個頁面的交互，類似POP，把某個區域框起來，然後連接到另一個頁面，那麼當展示的時候點擊到這個區域，就會自動跳轉到相對的頁面。在上面的導航欄有多種效果，可以選擇使用。

    按Preview可以站內展示，按ShareInstall可以發送到手機安裝展示，可以設定你喜歡的icon和landing page，在iphone上面的體驗十分流暢。除了上面的基本功能外，還可以發現例如position:fixed的效果，有興趣的趕緊去使用。

  • 缺點：首先是要付費，看個人情況選擇使用。其次是Flinto只負責後期交互體驗的這個步驟，前期的畫草圖還是PS做設計就是看個人啦。不過鑒於良好的用戶體驗和流暢的展示效果，可以選擇付費使用。

3.Sketch
Sketch | The designer』s toolbox

  • Sketch應該也是很多人都知道的了，類PS的應用，可以快速開發桌面端或者移動端的頁面。這裡就不具體展開介紹，優點就是容易上手，效果眾多，類庫多可以快速調用，結合Sketch Mirror在手機上展示你做設計的效果，快捷方便。缺點是沒有交互效果，貌似不能在windows上使用？（這點不太清楚）
  • 有興趣的還可以看看這篇文章：Design with Sketch

4.Keynote
Apple - Keynote for Mac

  • 說道Keynote有人跪了。其實keynote的動畫效果完全可以做成很流暢的交互體驗。具體的操作可以看這個：http://keynotopia.com/

5.Webflow
Webflow

  • 之前有用webflow快速做過網站，所以也放上來了。
  • 優點：可以讓不懂代碼的設計師快速上手，懂代碼的程序員快速做設計。可以在右邊的工具欄裡面選擇調整樣式，組合所需要的所有元素，完成一個網站，導出所需要的代碼。
  • 缺點：不能交互？（之前做過一個單頁面的，所以沒試過多頁面，如果錯誤請提出，多謝）製作的時間較長。

上面的答案裡面都提到很多很好地工具，沒有全部都使用過，有機會使用完再補充。

推薦一下 POP（Prototyping on Paper）這款原型設計工具，專門為移動 app 原型而生。使用非常簡單，

1. 一桿筆+一張紙繪製出原型，最常規的幾個頁面、按鈕、主流程跑通就好
2. 使用 POP 這款 app 對一張張圖片拍照，存到POP app內部
3. 開始編輯，哪個圖片的哪個區域（按鈕）鏈接到什麼頁面，手控操作
4. 完成，你可以跟工程師、視覺設計師、老闆直接展示了

詳細介紹，來自：http://site.douban.com/ProductData/widget/notes/11047229/note/251856714/

個人認為移動端原型設計工具應該具備的幾個feature：
1. 組件庫專門對移動端定製過
2. 方便輸出到移動端查看效果
3. 支持移動端的手勢操作
4. 支持移動端視圖切換的轉場動畫
5. 可以快速生成全局流程圖

其他一些加分的feature
6. 低保真最好，不要帶太多iOS高光漸變效果
7. 組件庫豐富，有社區可以看其他設計師的作品
8. 自帶網格系統
9. 在線協作版本管理
10. 能做一些異常檢查，比如某個按鈕沒設鏈接，某個list沒有空置狀態等，這個完全可行

試用了這麼多工具，感覺這個 Fluid UI 符合上面1，2，3，4，5，6，7，8目前用的最順手的。
而且是html5版，全平台支持！
免費版只能創建一個10view的項目，另外有付費版29刀/月，可以說服公司買一個帳號，或設計師們合購。

另外在推薦一個國人出品的在線協作設計平台： 設計版
主打在線協作和版本管理，也有整體流程圖，但只能上傳圖片，無法製作原型，比較適合異地的設計師們溝通和視覺優化迭代。

最後還是那句老話，針對不同的用途選擇最好的原型方式才是王道

從使用你原型的人來說，應該主要是下面這三種吧：
1. 自己設計師團隊：要求盡量發散，追求效率，手繪和白板是最好的工具，Balsamiq Mockups也是這時候非常好用的工具。
2. 公司高層，客戶，投資人等：原型不要求一定華麗，但至少要美觀，在交互方式和元素布局上儘可能追求與真實產品接近。主要流程可以走通即可，不必關注異常流程。如果是移動端應用，務必可以在移動端做演示。這裡就要祭出Axure等可以作出交互效果並且方便在移動端演示的工具。如果已經有設計搞，前面推薦的 POP 也非常適合這時使用。
3. 開發團隊視覺設計師：要求流程完備，最好有操作時序圖（流程圖），其他同上。Fluid UI 這種可以完善設計出各交互元素，並輸出流程圖的工具是不二法寶。

推薦 MockingBot.我是MockingBot的開發者，在開發這款工具時，我們的首要目標就是保持它儘可能的簡潔輕量，同時確保整個工作流程儘可能的順滑，我們的工具專註於移動應用的交互原型設計，為了避免過早的考慮設計因素而分神，所以我們只提供了樸素的線框圖界面，讓您可以專註於應用交互本身。

首先如果你小團隊或者個人開發，當然可以用Xcode，如果大公司跨部門審核調整各種，還是有個快速的原型。


如你要求，可交互。包括常用的Axrue，我試用過下面提到的所有軟體，分別完整產出過不同的原型，還有一些市面上的你一看它介紹圖還在用ios6的就知道不必了，說明很久沒更新了。

下面這些是我按照不同的特點進行了歸類，視你的具體情況而定吧。


我在選擇軟體這個過程中糾結了很久，也是用過在領悟真正的原理。但是這段時間的摸索對我以後也有很大幫助。


輕巧型
低保真；無控制項；iOS；少交互；免費。

Pop

非常火的一款原型軟體，第一次滿足了大家人人都是產品經理的感覺。

方法：拍照--添加觸控區--轉場方式--選擇圖片

平台：全手機操作

缺點：分享不便。動畫有如側滑、展開、消失，快現的搖一搖。操作只可以單擊。沒有控制項，所有東西都靠你的照片。


Tapcase

基本和pop一樣，就是軟體本身的UI更ios7一點，其他都一樣，也是導入圖片，加熱區就好了。缺點也是一樣的。

**總結：**輕巧型的就是適合簡單軟體且是早期，在手機上稍微複雜一點的就痛不欲生了。但問題是，如果簡單到這麼輕鬆了，那真的還需要用軟體模擬嗎？真的在紙上畫更輕鬆吧。點擊這種交互也不需要模擬了吧。

專業型
高保真度；自帶控制項；Mac+iOS；全交互；收費+免費

UIDesigner + UIDPlayer

騰訊出品的原型軟體，中文，操作簡單，符合國人習慣，容易上手。方便分享。

方法：windows電腦安裝UIDesigner，使用現成控制項進行可視化搭建，調試後通過網盤等方式發到iOS設備，用UIDPlayer打開即可。

平台：只支持Win+ iOS。可能也是優點，僅有的專門支持Win平台的原型軟體。

缺點：吹毛求疵吧，逼格不高。


Briefs + Briefscase

這是我最近發現非常好的一款軟體，好在對交互的支持上，如果調整細膩一點，幾乎可以以假亂真。我是用它在UI定稿的情況下，提前當完成品測試交互體驗的。當然也自帶控制項，用於原型設計。

還有三種模式，場景模式（Scene View ）和細節模式（Details View）分別負責交互設計和UI設計兩個部分，在設計完成後可以在第三個模式（Overview）查看整個APP的架構。

方法：在場景模式中，添加Actors（按鈕，文本段落，文本熱點）和Actions（觸發動作），可以設置界面跳轉時的TRANSITION效果，聲效，延時，Retina 空間等交互體驗輔助特效。

然後在iOS設備上安裝Briefscase，通過Dropbox同步後使用。

缺點：貴。1298元，感受一下。標註起來還是不太趁手。通過dropbox同步有點慢，又沒辦法加快，只能生等。可以先試用一下，覺得好再入手吧。


Blueprint + viewer

我最早用的原型軟體，現在製作出的原型已經出現在App Store里拉。Sakura Day。

當時用免費的功能（2個項目，無法導入dropbox圖片，無自定義控制項）就做出來了。後來接手公司大項目，專門買了完整版128元。

但是注意，這是用iPad做，iPhone或者iPad看，沒有電腦版的。我當時就是為了地鐵上可以用，是優點也是缺點。

方法：基本都一樣，就是在iPad上操作。觸控不那麼精確，但是操作體驗很好，完整版的自定義庫按鈕很多很豐富。

平台：iPad + iOS

缺點：最重要的就是只能在iPad上編輯，我做了個大型的項目，打開還是稍慢點，但是穩定，操作多了有點累。分享需要對方裝軟體，而且生成的項目文件會很大。

總結： 專業軟體還有很多，各有千秋，這兩個是最快支持iOS7的，說明他們很重視產品保證更新。但是價格確實也是不菲，優缺點很明顯，不符合國人習慣。騰訊那個整體是很不錯了，除非你和我一樣只用mac。


HTML型
中保真度；自帶控制項；全平台；需聯網；少交互；收費+免費

Flinto

在Flinto中快速製作iOS原型

我是通過下面提到的Icon Stricker發現的這個網站，試用了一下發現，它的特點是快捷的熱區和轉場操作，但是完全不帶控制項，也就是網頁版的 pop。需要你自己準備好圖片，不管是UI還是UE，這裡只負責交互。

最大的亮點就是支持滾動，前面提到的那些軟體，都需要通過轉場實現長圖滾動，這個可以原生支持。

方法：傳圖，熱區，轉場。看起來操作很簡單。

平台：全平台。

缺點：30天免費期，按月收費。不支持控制項。需要瀏覽器支持。


Fluidui

極簡風格的Fluid UI快速原型圖工具

最受推崇的網頁版原型網站。控制項從iOS到Android到WP。也是可以免費一個項目少量屏幕，然後按月收費。

方法：添加控制項，熱區，轉場。

缺點：我用網頁版的還是感覺有點遲緩，不痛快。勝在控制項實在很全，這個是很多桌面軟體都不支持的。如果針對安卓或者WP,實在沒什麼更好的選擇了。

**總結：**分享方便，輕量級是最大優點。但是按月付費這個我覺得大公司不會承擔這筆費用，小公司有沒有必要花費在這方面都值得商榷。速度也確實有點問題。交互也不如專業型那麼靈活。


超大型
高保真度；可拓展控制項；自定義庫；適配；少交互；收費。

Axure

繞不開的巨人，就像圖片界的PS，文字界的Word。它最大的特點就是別人都用它（雖然大多是盜版），我之前也存了顯出不同逼格的心試了前面那麼多軟體，最後繞了一大圈還是回到了它的懷抱。

回來的原因主要有三

  1. 大家都在用。這個沒辦法，溝通，傳輸，修改都方便，PC+mac都可以看。你自己逼格到了，人家都感受不了有什麼用呢。

  2. 確實強大，熟練使用庫和自定義控制項後，效率大幅提升，遠勝專業型。

  3. 生成的HTML頁面自帶左側目錄邊欄。是的，這就是我棄用OmniGraffle的主要原因。

方法：不再贅述了，總之要用好自定義控制項，這個會讓效率成倍提升。

缺點：生成的原型在移動端很難用。是有方法的，其實也不錯了，但是我還是懶得費心研究。之所以用這個就是為了給開發和寫文檔，很多標註和邏輯流程，沒必要做出交互。所以不考慮用它做交互，你真都做成交互了，難道還要工程師挨個點開才能看到邏輯？


OmniGraffle

為了捍衛mac的逼格，我用了幾天就放棄了。不可否認，OG在調整控制項時的流暢穩健，草圖的美觀（前提是你用英文）等方面，能讓你享受整個製作過程，這是很少見的。但是我一直搞不懂畫布層共享層等等的關係，用起來失誤頻繁，而且，生成的html沒有目錄啊，文檔可讀性差。

方法：不再贅述。

缺點：除了前面所說，僅支持mac，生成的交互原型更難用到手機上。

總結： 是的，這兩個軟體不光是用來做移動交互原型的，他們的強大體現在非常多的領域，但是針對移動交互原型而言，都不適合。A勝在文檔和大家都用，所以在個方面就屈從了吧。

輔助型
特定功能（動畫；圖標；投影）

Quartz Composer

就是專門用來製作交互動畫原型的產品，免費，但是需要蘋果開發者賬號，學習曲線非常高，但是可以製作非常精美的強交互動畫。

Facebook Paper的動畫原型製作工具Origami及實現代碼Pop


Liveview

PS play等都可以快速把電腦上的內容投影到手機上。但是唯獨liveview可以支持交互。打開交互模式後，電腦端可以接受手機的點擊和滑動手勢。非常強大。


Icon Stricker

專門用來測試icon的網站，出自Flinto。快速在主屏查看圖標。

輕量級圖標測試工具ICON STRIKE：快速主屏查看


總結

我現在對原型的流程是這樣的：

  1. 用Axure繪製UE圖，導出成手機尺寸圖片
  2. 導入Briefs或者pop，加入交互，體驗一下
  3. 把UI圖轉成黑白，在Axure里標註，寫文檔，生成html
  4. UI定稿再導入briefs，高保真體驗
第一步：PS 畫圖標 + Axure 畫線框和交互
第二步：用axure mobile的模式發布，隱藏瀏覽器地址欄，設置好ICON
第三步：用手機瀏覽器打開，add to home screen（iphone）
在手機上就可以像其他app一樣點擊icon測試了，模擬度80%

flashbuilder

myAxure
myAxure | show Axure prototype on mobile devices

1. 設計。用Axure 6以上的版本，生成原型的時候選上「手機/移動設備」
2. 上傳。把原型壓縮成zip格式文件，上傳到http://myaxure.com，生成二維碼
3. 搖一搖，掃一掃。手機掃一掃二維碼。
4. ok優點：
1. 習慣用Axure的人不需要再去花時間學別的工具。
2. 上傳之後方便分享。

獨立項目，歷時一年傾心打造！

xiaopiu - 國內最新上線的一款免費在線原型工具

首先介紹xiaopiu.com是一款雲應用，您打開瀏覽器就能立即使用xiaopiu。作為一款雲應用，首先它具備了雲應用的基本屬性：即取即用，雲端存儲，應用版本實時更新，手機掃碼直接預覽，一鍵分享等功能。同時它還擁有下面幾個高級功能。

雲端資源，一鍵引用

但xiaopiu作為一款新型的原型工具，它的最大特點就是，提倡資源共享。你可以隨便引用他人公開的共享資源，可以在他人公開的資源裡面，直接編輯，學習他們的製作過程，選取你想用到的任何組件和素材。比如某位用戶做好了一個彈窗或者底部導航，他公開了資源，你就可以直接前往獲取，將樣式簡單調整為匹配自己頁面即可。我們的資源可以以組件為最小單位保存，同時會將它的事件和交互狀態同時保存下來。舉個小例子，如果你看中他們，點擊預覽或者編輯，直接對他們進行操作。

共享資源除了下載當然不夠，我們還推出了一個引用功能。通過對公開庫的引用，庫的作者實時更新，你就能獲取到最新的更新資源，直接放入到你的編輯界面左側的資源庫里。是不是很酷！讓大家想到了github是吧。喜歡創作資源共享的小夥伴們，趕緊來吧，xiaopiu在這裡等著您！

當然xiaopiu不像github，免費用戶必須公開項目，我們讓免費用戶也可以支持私有化和密碼設置訪問，讓你的項目和素材都可以作為私有資源。同時我們為免費用戶提供的功能許可權完全滿足個人使用。

精確到每一幀動畫

（點擊圖片放大，查看gif動圖）

所見即所得的交互動畫編輯方式，預覽，回放，拖拽停留，快捷方便。曲線和延時的調整，又能讓您的動畫更加生動，更好的表達動效之美。

為了滿足用戶創作交互動畫，xiaopiu提倡的是將組件的動效轉化為狀態的理念。

比如你需要製作一個小按鈕，你只需要將按鈕的基礎樣式製作完成後。給他創建兩個狀態，一個狀態為開啟狀態，一個狀態為關閉狀態。然後根據它所在狀態，調整為相應的呈現樣式，我們就會自動創建狀態之間的補間動畫。所以在動效的製作過程中，用戶只需要想好每個動態組件它需要呈現的各個狀態的樣子，動畫交互就為你自動關聯好了。&< 按鈕小示例 &> 打開底部的狀態動畫面板進行查看動效。

當然大家想更好的學習xiaopiu的動效製作，我們這裡也提供了實例教程。教程比較長，大家可以分成幾段去完成。如果大家想要先快速學習一下xiaopiu，我們也提供了入門教程。

全局架構，自在掌握

（點擊圖片放大，查看gif動圖）

您可以直接快速切換至多視圖面板，所有頁面一覽無餘，對您的頁面進行快速處理和邏輯排列，使整個項目層次清晰。

大家在一個app原型項目的製作過程中，全局的預覽和邏輯頁面的排列一定是至關重要的，xiaopiu專門為大家提供了多視圖模式，讓大家在創作過程中，一直都有一個全局的概念。這樣可以讓原型項目的邏輯更加清晰，頁面切換更加方便，更能關注到風格的統一和公用元素的使用，跨頁面之間的複製也都更好的處理。

關於項目

xiaopiu是一個獨立項目，由兩人全職開發完成，項目啟動至今已一年。經歷了3個月的內測，12月中進行公測，收穫一波種子用戶以後，進行推廣。我們希望能通過xiaopiu，讓更多的用戶在創作原型時更加高效，同時讓資源共享，避免重複造輪子。

推薦：Flinto
Flinto – iPhone and iPad Prototyping

我的操作步驟：
1、畫界面，用axure 畫出原型；（這裡需藉助其他工具，Flinto 不生產界面）
2、界面上傳，將原型截圖以一張張圖片的方式上傳到 Flinto 網站上；
3、設置交互事件，哪個控制項或區域跳轉到哪個頁面，及跳轉的動效；
4、原型展示，交互設置好後將生成一個URL 地址分享給小夥伴。

將原型保存到手機上？
舉個官方栗子：https://www.flinto.com/p/21108dbc

用 iPhone的 Safari 瀏覽器打開生成的原型地址，然後「添加到主屏幕」。So easy，一個APP 原型就保存到手機裡面了，支持離線保存。

Flinto ，在原型的交互和演示上幫了我大忙。它跟 POP 異曲同工，不過 Flinto在電腦上設置交互更便捷。 在接觸到的眾多類似工具中，Flinto是用得最爽的一個。試試吧。對了，它是需要付費的，免費試用30天。

fireworks ...

Tster - 直接在手機上畫線框圖、高質量設計圖以及原型

這款產品的核心在於隨時隨地創造、測試、分享你的設計，介於線框圖與高保真設計稿之間，操作並不複雜，你可以在等車、喝咖啡甚至躺在被窩裡。掏出手機就可以創造，原型工具本應如此，簡單快捷高效。

亮點：
&>無限的項目和畫板
&>設計工具
&>自帶iOS系統控制項、布局
&>內置Ionic、Material Design、Awesome圖標
&>原型分享
&>很快將支持Sketch下載地址：http://www.tsterapp.com/

為什麼沒有人提Xcode 故事板,Storyboard?
1.免費，簡單運行模擬器所見即可見，無縫切換到開發。
2.無需編程即可進行窗口跳轉，和多窗口之間的組織
3.只需簡單化代碼即可實現換膚功能。（即貼上設計師的圖片）
4.可以快速實現交互代碼進行討論。

------------------------------------------
現在很多國外的設計師銷售自己的設計直接出xcode項目來發布的，比什麼原型工具都來得簡單直接！不用再費心找什麼模板了！

UIDesigner For Mobile
騰訊出品
http://uid.cdc.tencent.com/

JustinMind
Rich interactive wireframes to define web and mobile applications

  • 針對移動設備的高保真組件庫，iPhone、iPad 以及各種 Android。
  • 支持手勢的交互效果以及捕捉設備方向。
  • 導出規範文檔。
  • 共享測試，瀏覽器（免費）或移動設備（試用三次後需要付費）。

Pro 版試用 30 天後需要付費購買。Free 版永久免費，做移動應用基本夠用了。

Bootstrap + Jade + Edge Inspect

Mockups比較簡單，但沒有交互

用Axure用到哭的感覺，畫web原型時候分分鐘完成，結果後來轉移動端產品的時候心就很累，給老闆展示的時候他說你畫了一個禮拜就畫出個這！小公司的悲哀，老闆是看不懂線框圖的優雅的...
後來在知乎上看到有人推薦Mockingbot（現在改名叫墨刀）http://modao.io/，當時的版本根本不需要學習成本，整個app框架幾個拖拽操作用了三小時就完成了，還可以直接在手機上查看整個app的運行效果，簡直碰到了神物，於是我變成了一枚墨刀腦殘粉。

國外的一些工具也找來用過，有的很好用，只不過翻牆、翻英文，對英文渣來說簡直噩夢，浪費了更多時間糾結如何操作......

另外其實最初確定的時候都是紙筆來溝通整理思路的，自己的手才是王道啊！

在過去幾個月的項目中，我大量地使用原型工具（Flinto，Principle，Keynote，Framer.js）以輔助我的設計表達。因此，對這四款工具也積累了一些使用心得。下面，我將結合我的實踐經驗，由淺入深對四款工具進行對比分析，以此為大家提供選擇依據。此外，我還會附上自己製作的案例以及一些有效的學習資源。

原型工具一：Flinto

學習途徑：

  1. 官網的指導視頻：Flinto中文網-致力於分享Flinto原型設計教程與資源
  2. Youtube的經典案例：
    1. https://www.youtube.com/channel/UCKQ7xHm52MlA8MSxjVj-Nwg
    2. https://www.youtube.com/playlist?list=PLWlUJU11tp4eh1sLw2VTuc5CuZDPNnsBr

學習方法：

  • 由淺入深，先學習基本的功能，然後模仿簡單和複雜的動效製作案例，最後結合個人項目進行創新。

基本概念：

  • 這款工具是需要手動建立過渡動畫中各元素之間的關係（當頁面元素比較多時，這會有一點麻煩）。在設計兩個頁面跳轉效果時，用戶會進入新的頁面，在裡面做細節的調整，比如持續時間、阻尼等。 功能亮點：

  • 一旦建立一個新的過渡關係，就可以快速沿用這個過渡效果或其反轉形式。

sketch導入：

  1. 在sketch中有Send to Flinto的插件，可以導入一張或多張畫板。
  2. 更新畫板時，如果元素的名稱或位置發生變化，則需要重新鏈接它與其他界面的過渡動畫。但與Principle相比，大部分鏈接都能保留下來。
  3. 在sketch中編為一組的元素會在導入Flinto時變為一個圖層元素。

高效小貼士：

  1. 可以將頁面中保持不變的元素都編為一組，那麼在手動鏈接時就可以大大減少工作量。
  2. 適合製作微動效，比如loading小動畫等等，能流暢地顯示出一個元素的變形過程。

原型工具二：Principle

學習途徑：

  1. 官網的指導視頻：http://principleformac.com/
  2. Youtube的經典案例：
    1. https://www.youtube.com/playlist?list=PLWlUJU11tp4deQOnSFNn_ekpS9GA5_7yP
    2. https://www.youtube.com/playlist?list=PLgwNtYvZGv9STGDSx_knjYyzS7XzmpK84

學習方法：

  • 先掌握principle的基本功能，然後看Youtube視頻，知道能用它實現什麼樣的效果，並結合sketch好好實踐。

基本概念：

  • Principle會自動將相同名稱的圖層或是組鏈接起來併產生過渡動畫（此處，圖層的命名很重要），在此基礎上，我們可以調整各元素的時間軸關係以及進場出場效果。

功能亮點：

  1. 組件：利用組件你可以實現頁面內部的動效，並將其復用於其他界面。比如說星級打分，或者點贊等小控制項，見以下實例。

  2. Driver（英文版，中文大致譯為聯動器）：這個也是運用於頁面內的。這個功能的使用方式是設置一個基準元素，然後以它的動效為變數設置多個節點，以此節點設置頁面其他元素的動畫效果。最終的效果是當你操縱一個控制項時，頁面其他元素也會跟著變化。可參考以下案例，另外附上該功能的講解視頻（https://www.youtube.com/watch?v=yhx0S02lEx0）。

  3. 此外這款軟體有很多智能化的效果，可以大大簡化設計人員的操作。比如頁面內的橫縱向滾動、快速縮放等等。

sketch導入：

  1. 一個頁面內的畫板全部導入，同時保留組。
  2. 更新時，需要重新鏈接，因為一個頁面內的畫板都會重新更新一遍，所以會丟失很多之前的鏈接關係，也會產生圖層元素的混亂。

高效小貼士：

  1. 命名很重要。在sketch中完成設計圖時一定要好好命名並調整圖層順序。
  2. 適合做微交互，如果做一個完整App的交互效果會比較耗時耗力。
  3. 導入Principle前，在sketch中將每一個界面分別放在一個頁面中。這樣一來，在製作動效時若需要回過頭去對界面進行小範圍調整時才不會影響到其他界面的動效。

原型工具三：Keynote

學習途徑：

  • Youtube的經典案例：

學習方法：

  • 掌握keynote中的神奇移動效果以及其他動畫效果，並靈活使用。

基本概念：

  • 在keynote中，圖層的名稱及其之間的關係都是無法直接調整的，使用「神奇移動」可以在前後兩張幻燈片中的共有元素間建立，適用於頁面元素的位移或形變動畫。

sketch導入：

  1. 從sketch中複製各個圖層，直接在keynote中粘貼。
  2. 在sketch中的「導出」面板可以設置1x，2x等導出頁面大小。

高效小貼士：

  1. 在圖層動畫比較明確，圖層內元素的關係比較明確時，建議使用keynote進行設計。這樣你只要調整前後兩張幻燈片內元素的相對位置，然後點擊「神奇移動」就可以將前後兩個界面無縫地鏈接起來。因為，此功能相對於其他軟體更加智能化，因此當界面內的元素很多時，建議使用keynote實現動畫效果，見如下案例。

  2. 不適合於微交互，比如一個元素的形變不能在keynote中直接調節而需要引入新的元素時。
  3. 對幻燈片內元素的動畫效果好好利用，比如打字機效果、抖動等。缺點是它不能和神奇移動同時進行，在時間軸上兩者只能是先後關係。

總結

以上三款原型工具，其核心都是建立起前後頁面中對應元素的鏈接關係從而實現過渡效果，只是具體的功能與細節處理有一些不同。

每一款工具都有其長處和不足，結合我本人的學習經驗，我推薦大家都上手操作一下。因為三者的核心原理基本相同，只要掌握了其中一個，就能快速掌握其他兩個。而到你實戰的時候，因為有了上手經驗，你就可以快速選擇合適的工具而大大減少試水的時間，進而提高工作效率。

歡迎關注我的專欄（https://zhuanlan.zhihu.com/ux-huiye @愛吃愛花愛生活的UX人），裡面會分享一些和用戶體驗設計相關的乾貨。


**以上實例都是gif，若無法正常顯示，請查看我的專欄文章 知乎專欄。

pencil 不錯

推薦閱讀：

TAG:移動應用 | 原型工具 | iOS 應用設計 | 移動應用開發平台 | Android 應用設計 |