設定互動要多久？最快只需三秒！

標籤：原型設計工具   線框圖   設計軟體   

原型設計分為兩種，一種是靜態線框圖，我們一般叫wireframing；另一種是動態原型，一般叫作prototyping。目前在prototyping設計中涉及到的互動主要分為三種：頁連結、互動狀態和組件之間的互動。而動態原型的設計工具中比較常見的能夠包括這三種互動設定功能的也有很多，比如：Axure、Justinmind、Mockplus和Proto.io等等，種類之多，數不勝數。但是，這些工具無一例外，都在宣傳自己的過程中說自己是快捷迅速的。我們平時說的Axure，全名叫做Axure RP，而RP代表的意思恰恰就是Rapid Prototyping（快速設計原型）；Mockplus也說自己是更快更簡單的原型設計工具。既然都說自己是快速簡單，我們今天就來比較實際操作一下，你們到底有多快。

頁連結設定：速度平分秋色，可視化體現差異

在Axure所有的互動設定中，頁面連結是最簡單的一種了，只需要點擊右側屬性面板中的建立連結，並在下拉式功能表中選中需要跳轉的頁面就可以了。但是Axure在這一過程中有一個明顯的不足，就是對於可視化的缺失。如果在這個項目中各個頁面的名稱比較相近，那麼這樣使很發生連結錯的情況的。

而Justinmind應該是也體會到了Axure的這一問題，它採用的是一種拖拽的方式來實現頁連結的設定。但是這似乎並沒有真正的解決可視化的問題。因為，這個表示拖拽的表徵圖實在太小了。

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/89/BA/wKiom1ga2o-xkbHCAABqV650FHE406.jpg-wh_500x0-wm_3-wmp_4-s_1732147803.jpg" title="justinmind (1).jpg" alt="wKiom1ga2o-xkbHCAABqV650FHE406.jpg-wh_50" />

如果說Axure和Justinmind比較相似，那麼Proto.io和Mockplus也應該是一見如故了。兩者都採用了拖拽連結點的方式來進行頁連結設定的操作，而且這個拖拽的過程是有明顯的連結線顯示的。這就大大提高了可視化，從而降低了操作的難度。更加可貴的是，Mockplus中組件的連結點在停留在頁面上的時候還會顯示該頁面的縮圖，這使得錯誤連結的可能性降到了最低。

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M02/89/BA/wKiom1ga2p_jlbfEAAGcaq1Rkhk046.png-wh_500x0-wm_3-wmp_4-s_2702263704.png" title="Mockplus.png" alt="wKiom1ga2p_jlbfEAAGcaq1Rkhk046.png-wh_50" />

組件互動設定：速度差異開始變得明顯

這裡的設定中，四款工具的在互動設定上的速度差別就體現出來一些了。Axure在這裡採用的方法是點擊添加用例，然後彈出一個設定的面板，在面板中選擇對應的命令，互動動作，和動效。Justinmind還是察覺到了Axure這裡設定的不方便，但是，就像頁連結的設定一樣，Justinmind也還是沒有拿出更好的解決辦法。設定中Justinmind沿用了Axure的模式，只是在選擇的過程中採用了下拉式功能表。雖然在選擇目標時使用了可視化的視窗，但並沒有從根本上解決操作繁瑣的問題。

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/89/B8/wKioL1ga2q7iol_aAAG-wDOeY5w887.png-wh_500x0-wm_3-wmp_4-s_2483667763.png" title="Axure.png" alt="wKioL1ga2q7iol_aAAG-wDOeY5w887.png-wh_50" />

反觀兩個年輕人，Mockplus和Proto.io在組件互動設定的模式上使用了更加簡單快捷的拖拽，也就是在各種工具中流行的Drag-and-Drop。只是簡單的對連結點的拖動就可以實現組件之間的互動。Mockplus的命令選擇相對更加直接，Proto.io的互動命令可能還需要在進一步的進行調整。這種在互動設定上的拖拽模式和高度的可視化，使得操作中目標更加明確，動作更加清晰，Proto.io的組件大綱的功能也使得組件之間的關係更加有條理。Mockplus也在計劃推出相應的功能，這裡我們一起期待一下吧。

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/89/BA/wKiom1ga2r3A0GYFAADqYZzlrao154.png-wh_500x0-wm_3-wmp_4-s_3944457287.png" title="protoio.png" alt="wKiom1ga2r3A0GYFAADqYZzlrao154.png-wh_50" />

組件互動狀態設定：Mockplus只需三秒。

作為一款新興的原型設計工具，Mockplus不斷強調自己快速和敏捷。在大部分原型設計工具軟體沒有為組件的互動狀態單獨設定功能選項的時候，Mockplus已經有了相對完善的組件互動狀態設定的體系。主要的操作體現在屬性面板中，這個閃電一樣的標誌就是互動狀態設定的按鈕，在彈出的面板中，可以設定滑鼠經過和滑鼠落下兩種狀態。而並不是像Axure、Justinmind或者Proto.io那樣把互動狀態作為一種組件之間的互動來設定。這個功能看似簡單，但是它從這一個方向推動著原型設計向著更簡單、更快速靠攏。像這樣改變顏色的互動狀態設定，三秒足夠了！

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/89/B8/wKioL1ga2srTv7EZAADtWCtUWmQ218.png-wh_500x0-wm_3-wmp_4-s_955205177.png" title="Mockplus2.png" alt="wKioL1ga2srTv7EZAADtWCtUWmQ218.png-wh_50" />

我們不可否認，Axure和Justinmind在功能的全面性上確實佔有優勢，但是我們也一樣能夠像Mockplus這種新興的力量的崛起。隨著行業發展，大家對原型設計工具需求和要求不斷提高，希望這樣的新力量會帶給我們更多的驚喜。

設定互動要多久？最快只需三秒！