項(xiàng)目管理實(shí)戰(zhàn)編者記
交互設(shè)計是我們原型設(shè)計中很重要的一部分， 如何快速掌握一個原型設(shè)計工具，盡快入門，高效地完成工作？
這里選擇了三款原型設(shè)計工具作對比，希望給想入門或者剛?cè)腴T的童鞋提供一些參考。
◆ Axure - 知名而強(qiáng)大的原型設(shè)計工具
◆ Mockplus - 新興的快速原型設(shè)計工具
◆ JustinMind - 高保真原型設(shè)計工具
這三個工具，都是基于桌面的應(yīng)用?；赪eb的在線工具，以后如果有機(jī)會再作介紹。
第一部分 設(shè)置交互
設(shè)置交互，是完成一個交互設(shè)計的開始。我暫時把交互設(shè)置分為兩類：頁面鏈接和組件交互
設(shè)置頁面鏈接
Axure - 彈窗篩選
不夠直觀 - 先選中組件，然后到屬性面板上去篩選目標(biāo)頁面（頁面多的時候就有點(diǎn)煩了）
Mockplus - 一鍵拖拽
簡單直觀 - 與其他原型設(shè)計工具不一樣，Mockplus采用了直觀的拖拽方式來實(shí)現(xiàn)頁面交互。紅色的線指哪里連哪里
JustinMind - 支持拖拽
簡單 - 與Mockplus類似，Justinmind也可以通過拖拽的方式實(shí)現(xiàn)頁面跳轉(zhuǎn)。不同的是，需要拖動整個組件到項(xiàng)目樹上。由于沒有連接線，不夠直觀，也不容易看清
設(shè)置組件交互
Axure - 添加用例，不能拖拽完成
對于一般的交互，在Axure中可以通過彈窗來逐個篩選設(shè)置。稍微復(fù)雜的交互，則需要條件構(gòu)建器來實(shí)現(xiàn)。Axure在交互設(shè)置中，可以添加條件判斷，但需要用戶有一定的編程常識，否則掌握起來有相當(dāng)難度。尤其是初次使用的時候
Mockplus - 直接拖拽，所見即所得
與其它任何一款原型工具都不一樣，Mockplus是通過拖拽組件上的鏈接點(diǎn)來實(shí)現(xiàn)交互。拖動組件的鏈接點(diǎn)到目標(biāo)組件松開，彈出的面板會清晰地顯示出觸發(fā)條件和動作效果。只需跟著提示操作，就可以輕易地完成交互
JustinMind - 添加事件，不能拖拽完成
Justinmind設(shè)置交互的方式與Axure有些類似。
當(dāng)選中需要交互的組件，設(shè)計界面的下方面板中會顯示出“事件”窗口，點(diǎn)擊“添加事件”，也會彈出一個編輯面板。面板彈出后，分別對觸發(fā)條件、事件的效果、交互對象進(jìn)行設(shè)置。Justinmind也支持條件判斷和變量，不過要掌握相關(guān)的技能還是要費(fèi)一番功夫。在這個方面，Justinmind做了一些圖形化的方式來表達(dá)設(shè)置，力圖讓用戶好懂，這個是優(yōu)于Axure的地方
第二部分 實(shí)現(xiàn)交互
我們通過一個實(shí)例來看看：
在交互設(shè)計中，第一次交互發(fā)生后，第二次回到交互初始狀態(tài)，是特別常用的場景。為了直觀地說明問題，這里我就以左右移動組件為例子吧。
測試內(nèi)容：
點(diǎn)擊一個圖片，讓它按照線型動畫右移200px，然后再次點(diǎn)擊這個圖片，讓它移動會原來的位置。
看起來很簡單，是嗎？
Axure - 添加多個用例
我嘗試了在Axure中能夠?qū)崿F(xiàn)這個交互的所有方法：
方法一：使用動態(tài)面板的狀態(tài)
在動態(tài)面板中，建立2個狀態(tài)，然后用條件構(gòu)建器判斷動態(tài)面板狀態(tài)，然后設(shè)置動態(tài)面板移動參數(shù)，最后通過點(diǎn)擊換動態(tài)面板狀態(tài)的可視性。我把最后的交互用例的樣子截圖出來吧：
方法二：使用條件判斷
也需要用到條件構(gòu)建器（Condition Builder）。實(shí)話講，你需要一些編程的常識，比如：“變量”、“全局變量”、“賦值”，“初始化”、“條件判斷”，否則你做起來可能比較費(fèi)力。圖中，是經(jīng)過多步設(shè)置后，最后的結(jié)果
方法三：“偽裝法”
用2個完全一樣圖片（A和B），通過“偽裝”的方式來完成。首先設(shè)置A顯示，B隱藏，點(diǎn)擊A，移動到位后，讓B顯示，A隱藏，此時，點(diǎn)擊B，移動到位后，讓B隱藏，A顯示。
JustInmind
我嘗試了兩種方法：
方法一：使用Toggle事件+Move命令
實(shí)現(xiàn)起來還是比較簡單。但如果是雙擊動作，這個方法就不奏效了
方法二：也是“偽裝法”
方法和上述Axure中的一樣，我不啰嗦了。反正是有點(diǎn)繞
Mockplus - 一鍵自動還原
Mockplus中，需要兩步，拖拽一個交互鏈接到圖片自己，然后在交互面板中勾選“自動還原”，如下圖。
我們不得不說，這個“自動還原”真是太妙了。
當(dāng)然，在Mockplus中，我們也可以通過上面所說的“偽裝法”來實(shí)現(xiàn)這個交互，不過已經(jīng)沒有必要了
建議
以上我們嘗試探索了3個工具的交互功能情況。
其實(shí)如果希望透徹了解一個工具，我建議你直接取去用，不要停留在某個視頻或教程上。那么，到底該使用哪一個呢？我的看法是：
如果你做事喜歡有條有理，不太在意時間約束，喜歡全面系統(tǒng)地掌握一個工具并成為專家，你可以選擇Axure。Axure功能很全面，還有很多值得你去一步步熟悉和掌握的地方。
如果你對交互的復(fù)雜度和保真度的探索有信心，樂在其中，并有一定的編程基本常識，個人覺得你選擇JustInmind比較合適。Justinmind對于移動應(yīng)用的交互保真做得很到位。
如果你希望立即上手一個工具，同時非常在意設(shè)計的時間效率，不需要做特別復(fù)雜的交互，建議你選擇Mockplus。Mockplus是一個力圖讓你做交互更快更簡單的工具。
一句話，對于工具軟件來說，它的功能是而你而生，用最小的代價達(dá)到你的需求，是你選擇的關(guān)鍵。
END
聯(lián)系客服
