移動端交互原型設計軟體Justinmind:為移動設計而生

據國內三大運營商披露的最新數位,截止 2012 年 1 月份,中國的手機使用者數已達 9.8758 億,即將逼近 10 億大關。CNNIC最新的調查顯示,截至 2012年6月,大陸5.38 億的線民中,有 15.3%的

線民不使用PC(桌上型電腦),也不使用NB(筆記型電腦)上網,只使用手機上網。磚家解釋,這個現象來自互聯網向某些不便使用PC或NB的人群擴散的結果。閱讀全文

智慧手機功能越來越強大,同時價格不斷走低,讓手機上網變得廉價、方便,降低了移動智慧終端機的使用門檻,把原本用普通手機的使用者轉化成手機上網使用者。

目前此現象還在發展中,推估單用手機上網的人群規模還將繼續增長。
移動已經是不可阻擋的趨勢,未來人們的獲取資訊、娛樂、交流的最主要管道就是移動終端。交互在移動應用上發揮的作用更大,能夠實現基於感應器的多種效果。
這裡推薦一款專注移動端的交互設計軟體:JustinMind。它是由西班牙JustinMind公司出品的原型製作工具,可以輸出Html頁面。HTTP://www.justinmind.com/
與目前主流的交互設計工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更為專屬於設計移動終端上app應用。
下面先對JustinMind做一個簡單的認識,這是該軟體的主介面,共有5個功能分區:
下面是JustinMind的一些特性:
1.使用JustinMind,你可以在幾分鐘內利用其廣泛的元件和交互繪製高保真原型。它提供了一些基本的形狀,如矩形和文本,還有特定的元件,如功能表,表單或資料清單。
2.關於手勢的交互效果:
JustinMind提供了多種觸屏的交互效果,例如滑動、縮放、旋轉,甚至捕捉設備方向等等。在需要產生效果的部件中選擇對應的手勢即可。
3.可以創建自己的元件庫。
JustinMind為iPhone ,iPad,黑莓,Android提供了多樣的元件。你可以創建自訂群組件庫,方法是將排列好的單個元件放在一起,並將它們集體框選拖動到元件庫。
這樣下次你就可以直接使用自己定義好的元件。

<div>4.更為便捷的定義樣式。

相比Axure,JustinMind更好的提供了屬性視窗,並且更好的支援捕獲PS等軟體的圖像屬性。
5.JustinMind可以匯出原型的所有資訊到Microsoft Word。能夠一鍵生成及其規範的文檔。
6.共用原型進行測試。
JustinMind支援將原型上傳到伺服器並提供給他人進行測試,為產品的改進做出了良好的貢獻。最為特別的是,基於usernote的服務允許你將原型放到行動裝置上進行測試。
7.更友好的定義對話模式。
在JustinMind中,你可以通過拖拽等方式來實現跳轉、定向等交互效果,無需像Axure一樣每一步都只能通過點擊來完成。並且顯示更為直觀,如進度條。
同時可以通過一些簡單的無代碼邏輯語句實現更為高級的交互效果。
8.全球範圍內的複用、資料共用。
每一個範本都讓這一套元件有不同的視覺風格,變數允許將資料從一個螢幕遷移到另一個,甚至使用它們來檢查是否滿足條件。
9.發佈和收集回饋意見。
發佈Prototyper作品到usernote後,全球各地的人將通過Web瀏覽器訪問您的原型。他們的回饋結果將會即時的呈現在您的原型頁面。
由於JustinMind在對話模式的實現以及原型的生成方面比較具有特點,所以我做了下面一些演示:
1.事件與交互
事件是JustinMind的一個關鍵功能,Justinmind Prototyper的事件由兩個主要部分組成:一個是事件的觸發(或使用者事件),另一個是一組操作。每一個事件必須在螢幕上定義
一個特定的元素,這將作為事件的觸發源。
這個就是事件視窗,在上文的主介面介紹中有過簡單的介紹。
交互動作按照順序依次排列下來,執行的順序從上到下一目了然。       每個交互動作中有很多的操作,這些操作是從左至右依次執行的。只有這些操作執行完成後,才會到下一個交互動作。
2.關於連結的設置
使用連結最簡單的操作就是,例如,點擊Button跳轉到Screen3,那麼直接將Button拖拽到Screen3上面就可以了。
3.下面列舉了一些常用的事件,可以看出來JustinMind的圖示還是非常形象化的:
clickOn Click: 當使用者按一下滑鼠左鍵並鬆開
mouseupOn Mouse Up: 當使用者釋放滑鼠按鍵
mousedownOn Mouse Down: 當使用者按下滑鼠按鍵
doubleclickOn Double-click: 當使用者按兩下滑鼠左鍵
rightclickOn Right-click: 當使用者按一下滑鼠右鍵並鬆開
toggleOn Toggle: 當使用者按一下滑鼠左鍵後,自訂的事件將被執行。使用者再次點擊後,事件將被還原
mouseoverOn Mouse Over: 當使用者滑鼠位於所定義區域之上
mouseenterOn Mouse Enter: 當使用者滑鼠進入所定義區域
mouseenterOn Mouse Leave: 當使用者滑鼠離開所定義區域
dragstartOn Drag Start: 當使用者按住滑鼠左鍵並拖動至少5圖元時
dragOn Drag: 當使用者按住滑鼠左鍵並保持滑鼠移動時
dropOn Drag Stop: 當使用者停止移動滑鼠並且鬆開滑鼠右鍵
keyupOn Key Up: 當鍵盤按鍵被釋放
keydownOn Key Down: 當鍵盤按鍵被壓下
swipeupOn Swipe Up: 當使用者一根手指向上滑動
swipedownOn Swipe Down: 當使用者一根手指向下滑動
swipeleftupOn Swipe Left Up: 當使用者一根手指向左上方滑動
swipeleftOn Swipe Left: 當使用者一根手指向左滑動
swipeleftdownOn Swipe Left Down: 當使用者一根手指向左下方滑動
swiperightupOn Swipe Right Up: 當使用者一根手指向右上方滑動
swiperightOn Swipe Right: 當使用者一根手指向右滑動
swiperightdownOn Swipe Right Down: 當使用者一根手指向右下方滑動
pinchopenOn Pinch Open:當使用者兩根手指互相張開滑動
pinchcloseOn Pinch Close:當使用者兩根手指收縮活動
rotateleftOn Rotate Left: 當使用者兩根手指向左旋轉滑動
rotaterightOn Rotate Right: 當使用者兩根手指向右旋轉滑動
tapholdOn Tap Hold: 當使用者手指按住螢幕超過2秒
orientationportraitOn Orientation Portrait: 當設備由橫屏切換為豎屏
orientationlandscapeOn Orientation Landscape: 當設備由豎屏切為橫屏
changeOn Change: 當元素的值通過使用者的直接操作發生變化時
focusinOn Focus In: 當輸入框獲得焦點時
focusoutOn Focus Out: 當輸入框失去焦點時
pageloadOn Page Load: 當頁面載入時
pageunloadOn Page Unload: 當使用者離開頁面時
舉個簡單但是有用的例子,當你要實現使用者名密碼驗證的交互效果時,在大多數原型工具中,我們需要對輸入框做一些邏輯上的設定,填好其屬性中的數值。而在JustinMind中則更為直觀:
在交互視窗中,選擇條件運算式:
將需要驗證的輸入框拖拽到相應判斷視窗:
將相應的判斷邏輯拖拽到判斷視窗,例如等號,並在右側輸入框輸入需要的值
OK,That’s it !在主介面點擊生成,就可以及時預覽效果了
關於範本
你可以為頁面上的不同元件選擇使用不同的範本,從而不改變內容只改變樣式,切換起來非常靈活。

總結

JustinMind相比Axure最讓人喜愛的4個原因有:
1.Easy Drag and Drop
JustinMind裡面對於元件的交互效果有著及其方便的操作方式,點擊一個物件,拖動到另一個物件,OK,這兩個物件已經產生了交互的碰撞。
2.Powerful Interactions
JustinMind提供了強大的交互效果,滑鼠hover的狀態、點擊後的效果,非常逼真。同時在行動裝置上能夠高度模擬的實現各種手勢效果。
3.Quickly Simulate
JustinMind提供了一鍵生成,不用再像Axure那樣多步操作,點擊後直接在瀏覽器視窗打開。
4.Great Extras
網上有各種各樣的元件、範本,可以根據需要選擇相應的進行使用。
歡迎加入到我們的Justinmind中文愛好者小組,一起為國內使用者奉上各種教程、資源和元件庫:HTTP://www.wejustinmind.com/

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.