原型交互設計入門，我該選哪一個工具？

交互設計是咱們原型設計中很重要的一部分， 如何快速掌握一個原型設計工具，儘快入門，高效地完成工做？

這裏選擇了三款原型設計工具做對比，但願給想入門或者剛入門的童鞋提供一些參考。

• Axure - 知名而強大的原型設計工具
• Mockplus - 新興的快速原型設計工具
• JustinMind - 高保真原型設計工具

這三個工具，都是基於桌面的應用。基於Web的在線工具，之後若是有機會再做介紹。

第一部分 設置交互

設置交互，是完成一個交互設計的開始。我暫時把交互設置分爲兩類：頁面連接和組件交互。

設置頁面連接

Axure - 彈窗篩選

不夠直觀 - 先選中組件，而後到屬性面板上去篩選目標頁面（頁面多的時候就有點煩了）。

Mockplus - 一鍵拖拽

簡單直觀 - 與其餘原型設計工具不同，Mockplus採用了直觀的拖拽方式來實現頁面交互。紅色的線指哪裏連哪裏。

JustinMind - 支持拖拽

簡單 - 與Mockplus相似，Justinmind也能夠經過拖拽的方式實現頁面跳轉。不一樣的是，須要拖動整個組件到項目樹上。因爲沒有鏈接線，不夠直觀，也不容易看清。

設置組件交互

Axure - 添加用例，不能拖拽完成

對於通常的交互，在Axure中能夠經過彈窗來逐個篩選設置。稍微複雜的交互，則須要條件構建器來實現。Axure在交互設置中，能夠添加條件判斷，但須要用戶有必定的編程常識，不然掌握起來有至關難度。尤爲是初次使用的時候。

Mockplus - 直接拖拽，所見即所得

與其它任何一款原型工具都不同，Mockplus是經過拖拽組件上的連接點來實現交互。拖動組件的連接點到目標組件鬆開，彈出的面板會清晰地顯示出觸發條件和動做效果。只需跟着提示操做，就能夠輕易地完成交互。

JustinMind - 添加事件，不能拖拽完成

Justinmind設置交互的方式與Axure有些相似。

當選中須要交互的組件，設計界面的下方面板中會顯示出「事件」窗口，點擊「添加事件」，也會彈出一個編輯面板。面板彈出後，分別對觸發條件、事件的效果、交互對象進行設置。Justinmind也支持條件判斷和變量，不過要掌握相關的技能仍是要費一番功夫。在這個方面，Justinmind作了一些圖形化的方式來表達設置，力圖讓用戶好懂，這個是優於Axure的地方。

第二部分 實現交互

咱們經過一個實例來看看：

在交互設計中，第一次交互發生後，第二次回到交互初始狀態，是特別經常使用的場景。爲了直觀地說明問題，這裏我就以左右移動組件爲例子吧。

測試內容：

點擊一個圖片，讓它按照線型動畫右移200px，而後再次點擊這個圖片，讓它移動會原來的位置。

看起來很簡單，是嗎？

Axure - 添加多個用例

我嘗試了在Axure中可以實現這個交互的全部方法：

方法一：使用動態面板的狀態。

在動態面板中，創建2個狀態，而後用條件構建器判斷動態面板狀態，而後設置動態面板移動參數，最後經過點擊換動態面板狀態的可視性。我把最後的交互用例的樣子截圖出來吧：

方法二：使用條件判斷。

也須要用到條件構建器（Condition Builder）。實話講，你須要一些編程的常識，好比：「變量」、「全局變量」、「賦值」，「初始化」、「條件判斷」，不然你作起來可能比較費力。圖中，是通過多步設置後，最後的結果。

方法三：「假裝法」。

用2個徹底同樣圖片（A和B），經過「假裝」的方式來完成。首先設置A顯示，B隱藏，點擊A，移動到位後，讓B顯示，A隱藏，此時，點擊B，移動到位後，讓B隱藏，A顯示。

JustInmind 

我嘗試了兩種方法：

方法一：使用Toggle事件+Move命令。

實現起來仍是比較簡單。但若是是雙擊動做，這個方法就不奏效了。

方法二：也是「假裝法」。

方法和上述Axure中的同樣，我不囉嗦了。反正是有點繞。

Mockplus - 一鍵自動還原

Mockplus中，須要兩步，拖拽一個交互連接到圖片本身，而後在交互面板中勾選「自動還原」，以下圖。

咱們不得不說，這個「自動還原」真是太妙了。

固然，在Mockplus中，咱們也能夠經過上面所說的「假裝法」來實現這個交互，不過已經沒有必要了。

 

建議

以上咱們嘗試探索了3個工具的交互功能狀況。

其實若是但願透徹瞭解一個工具，我建議你直接取去用，不要停留在某個視頻或教程上。那麼，到底該使用哪個呢？個人見解是：

若是你作事喜歡有條有理，不太在乎時間約束，喜歡全面系統地掌握一個工具併成爲專家，你能夠選擇Axure。Axure功能很全面，還有不少值得你去一步步熟悉和掌握的地方。

若是你對交互的複雜度和保真度的探索有信心，樂在其中，並有必定的編程基本常識，我的以爲你選擇JustInmind比較合適。Justinmind對於移動應用的交互保真作得很到位。

若是你但願當即上手一個工具，同時很是在乎設計的時間效率，不須要作特別複雜的交互，建議你選擇Mockplus。Mockplus是一個力圖讓你作交互更快更簡單的工具。

一句話，對於工具軟件來講，它的功能是而你而生，用最小的代價達到你的需求，是你選擇的關鍵。