交互設計是咱們原型設計中很重要的一部分, 如何快速掌握一個原型設計工具,儘快入門,高效地完成工做?編程
這裏選擇了三款原型設計工具做對比,但願給想入門或者剛入門的童鞋提供一些參考。工具
這三個工具,都是基於桌面的應用。基於Web的在線工具,之後若是有機會再做介紹。測試
設置交互,是完成一個交互設計的開始。我暫時把交互設置分爲兩類:頁面連接和組件交互。動畫
設置頁面連接ui
Axure - 彈窗篩選spa
不夠直觀 - 先選中組件,而後到屬性面板上去篩選目標頁面(頁面多的時候就有點煩了)。設計
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是一個力圖讓你作交互更快更簡單的工具。
一句話,對於工具軟件來講,它的功能是而你而生,用最小的代價達到你的需求,是你選擇的關鍵。