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

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

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

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

這三個工具,都是基於桌面的應用。基於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是一個力圖讓你作交互更快更簡單的工具。

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

相關文章
相關標籤/搜索