Justinmind使用教程(1)——概述部分


Justinmind(http://www.justinmind.com/),類似於Axure的一個原型設計工具。就眼下而言,最適合移動端進行原型設計的工具,預計拋開Axure幾條街了,可是眼下國內站點論壇關於Justinmind的學習資料比較少。本人將結合自己的工作經驗。逐步帶領大家學習Justinmind。


第一章主要是介紹Justinmind,眼下有一篇文章《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提供了多樣的組件。你能夠創建自己定義組件庫,方法是將排列好的單個組件放在一起,並將它們集體框選拖動到組件庫。

這樣下次你就能夠直接使用自定義好的組件。
 
 
4.更為便捷的定義樣式。
相比Axure,JustinMind更好的提供了屬性窗體,而且更好的支持捕獲PS等軟件的圖像屬性。

 
 
5.JustinMind可以導出原型的全部信息到Microsoft Word。

可以一鍵生成及其規范的文檔。

 
 
6.共享原型進行測試。
JustinMind支持將原型上傳到server並提供給他人進行測試,為產品的改進做出了良好的貢獻。最為特別的是,基於usernote的服務同意你將原型放到移動設備上進行測試。

 
 
7.更友好的定義交互方式。

在JustinMind中。你能夠通過拖拽等方式來實現跳轉、定向等交互效果,無需像Axure一樣每一步都僅僅能通過點擊來完畢。而且顯示更為直觀,如進度條。
同一時候能夠通過一些簡單的無代碼邏輯語句實現更為高級的交互效果。
 
 
 
 
8.全球范圍內的復用、數據共享。
每個模板都讓這一套組件有不同的視覺風格。變量同意將數據從一個屏幕遷移到還有一個。甚至使用它們來檢查是否滿足條件。
 
     
 
9.公布和收集反饋意見。

公布Prototyper作品到usernote后,全球各地的人將通過Web瀏覽器訪問您的原型。

他們的反饋結果將會實時的呈如今您的原型頁面。

 
 
 
 因為JustinMind在交互方式的實現以及原型的生成方面比較具有特點,所以我做了以下一些演示:
 
1.事件與交互
事件是JustinMind的一個關鍵功能。Justinmind Prototyper的事件由兩個主要部分組成:一個是事件的觸發(或用戶事件)。還有一個是一組操作。每個事件必須在屏幕上定義
一個特定的元素,這將作為事件的觸發源。

 
這個就是事件窗體。在上文的主界面介紹中有過簡單的介紹。
 
 
            
交互動作依照順序依次排列下來。運行的順序從上到下一目了然。       每一個交互動作中有非常多的操作。這些操作是從左到右依次運行的。僅僅有這些操作運行完畢后。才會到下一個交互動作。

 
 
2.關於鏈接的設置
 
使用鏈接最簡單的操作就是。比如。點擊Button跳轉到Screen3,那么直接將Button拖拽到Screen3上面就能夠了。
 
 
3.以下列舉了一些經常使用的事件,能夠看出來JustinMind的圖標還是很形象化的:
click On Click: 當用戶單擊鼠標左鍵並松開
mouseup On Mouse Up: 當用戶釋放鼠標按鍵
mousedown On Mouse Down: 當用戶按下鼠標按鍵
doubleclick On Double-click : 當用戶雙擊鼠標左鍵
rightclick On Right-click: 當用戶單擊鼠標右鍵並松開
toggle On Toggle: 當用戶單擊鼠標左鍵后,自己定義的事件將被運行。用戶再次點擊后。事件將被還原
mouseover On Mouse Over: 當用戶鼠標位於所定義區域之上
mouseenter On Mouse Enter: 當用戶鼠標進入所定義區域
mouseenter On Mouse Leave: 當用戶鼠標離開所定義區域
dragstart On Drag Start: 當用戶按住鼠標左鍵並拖動至少5像素時
drag On Drag: 當用戶按住鼠標左鍵並保持鼠標移動時
drop On Drag Stop: 當用戶停止移動鼠標而且松開鼠標右鍵
keyup On Key Up: 當鍵盤按鍵被釋放
keydown On Key Down: 當鍵盤按鍵被壓下
swipeup On Swipe Up: 當用戶一根手指向上滑動
swipedown On Swipe Down: 當用戶一根手指向下滑動
swipeleftup On Swipe Left Up 當用戶一根手指向左上方滑動
swipeleft On Swipe Left 當用戶一根手指向左滑動
swipeleftdown On Swipe Left Down 當用戶一根手指向左下方滑動
swiperightup On Swipe Right Up 當用戶一根手指向右上方滑動
swiperight On Swipe Right 當用戶一根手指向右滑動
swiperightdown On Swipe Right Down 當用戶一根手指向右下方滑動
pinchopen On Pinch Open:當用戶兩根手指互相張開滑動
pinchclose On Pinch Close:當用戶兩根手指收縮活動
rotateleft On Rotate Left 當用戶兩根手指向左旋轉滑動
rotateright On Rotate Right 當用戶兩根手指向右旋轉滑動
taphold On Tap Hold: 當用戶手指按住屏幕超過2秒
orientationportrait On Orientation Portrait: 當設備由橫屏切換為豎屏
orientationlandscape On Orientation Landscape: 當設備由豎屏切為橫屏
change On Change: 當元素的值通過用戶的直接操作發生變化時
focusin On Focus In: 當輸入框獲得焦點時
focusout On Focus Out: 當輸入框失去焦點時
pageload On Page Load: 當頁面載入時
pageunload On Page Unload: 當用戶離開頁面時
 
舉個簡單可是實用的樣例,當你要實現usernamepassword驗證的交互效果時,在大多數原型工具中,我們須要對輸入框做一些邏輯上的設定,填好其屬性中的數值。而在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
網上有各種各樣的組件、模板。能夠依據須要選擇對應的進行使用。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM