原型設計分爲兩種,一種是靜態的線框圖,咱們通常叫wireframing;另外一種是動態的原型,通常叫做prototyping。目前在prototyping設計中涉及到的交互主要分爲三種:頁連接、交互狀態和組件之間的交互。而動態原型的設計工具中比較常見的可以包括這三種交互設置功能的也有不少,好比:Axure、Justinmind、Mockplus和Proto.io等等,種類之多,數不勝數。可是,這些工具無一例外,都在宣傳本身的過程當中說本身是快捷迅速的。咱們平時說的Axure,全名叫作Axure RP,而RP表明的意思偏偏就是Rapid Prototyping(快速設計原型);Mockplus也說本身是更快更簡單的原型設計工具。既然都說本身是快速簡單,咱們今天就來比較實際操做一下,大家到底有多快。api
頁連接設置:速度勢均力敵,可視化體現差別工具
在Axure全部的交互設置中,頁面連接是最簡單的一種了,只須要點擊右側屬性面板中的建立連接,並在下拉菜單中選中須要跳轉的頁面就能夠了。可是Axure在這一過程當中有一個明顯的不足,就是對於可視化的缺失。若是在這個項目中各個頁面的名稱比較相近,那麼這樣使很發生連接錯的狀況的。設計
而Justinmind應該是也體會到了Axure的這一問題,它採用的是一種拖拽的方式來實現頁連接的設置。可是這彷佛並無真正的解決可視化的問題。由於,這個表示拖拽的圖標實在過小了。原型
若是說Axure和Justinmind比較類似,那麼Proto.io和Mockplus也應該是一見如故了。二者都採用了拖拽連接點的方式來進行頁連接設置的操做,並且這個拖拽的過程是有明顯的連接線顯示的。這就大大提升了可視化,從而下降了操做的難度。更加難得的是,Mockplus中組件的連接點在停留在頁面上的時候還會顯示該頁面的縮略圖,這使得錯誤連接的可能性降到了最低。io
組件交互設置:速度差別開始變得明顯可視化
這裏的設置中,四款工具的在交互設置上的速度差異就體現出來一些了。Axure在這裏採用的方法是點擊添加用例,而後彈出一個設置的面板,在面板中選擇對應的命令,交互動做,和動效。Justinmind仍是察覺到了Axure這裏設置的不方便,可是,就像頁連接的設置同樣,Justinmind也仍是沒有拿出更好的解決辦法。設置中Justinmind沿用了Axure的模式,只是在選擇的過程當中採用了下拉菜單。雖然在選擇目標時使用了可視化的窗口,但並無從根本上解決操做繁瑣的問題。軟件
反觀兩個年輕人,Mockplus和Proto.io在組件交互設置的模式上使用了更加簡單快捷的拖拽,也就是在各類工具中流行的Drag-and-Drop。只是簡單的對連接點的拖動就能夠實現組件之間的交互。Mockplus的命令選擇相對更加直接,Proto.io的交互命令可能還須要在進一步的進行調整。這種在交互設置上的拖拽模式和高度的可視化,使得操做中目標更加明確,動做更加清晰,Proto.io的組件大綱的功能也使得組件之間的關係更加有條理。Mockplus也在計劃推出相應的功能,這裏咱們一塊兒期待一下吧。方法
組件交互狀態設置:Mockplus只需三秒。im
做爲一款新興的原型設計工具,Mockplus不斷強調本身快速和敏捷。在大部分原型設計工具軟件沒有爲組件的交互狀態單獨設置功能選項的時候,Mockplus已經有了相對完善的組件交互狀態設置的體系。主要的操做體如今屬性面板中,這個閃電同樣的標誌就是交互狀態設置的按鈕,在彈出的面板中,能夠設置鼠標通過和鼠標落下兩種狀態。而並非像Axure、Justinmind或者Proto.io那樣把交互狀態做爲一種組件之間的交互來設置。這個功能看似簡單,可是它從這一個方向推進着原型設計向着更簡單、更快速靠攏。像這樣改變顏色的交互狀態設置,三秒足夠了!拖拽
咱們不能否認,Axure和Justinmind在功能的全面性上確實佔有優點,可是咱們也同樣可以像Mockplus這種新興的力量的崛起。隨着行業發展,你們對原型設計工具需求和要求不斷提升,但願這樣的新力量會帶給咱們更多的驚喜。