在產品開發過程當中,最經常使用的展示構思的方式通常來講是紙筆原型,最簡單也最迅速,寥寥一畫,一個大體的線框圖就呈現出來了。可是若是想要把線框圖表現得更完美,你仍是有不少工做要作噠~YouTube上一位大牛在他的視頻裏展現了一套完整網絡郵件服務的紙質原型線框圖。由兩我的合做完成按鈕點擊和網頁跳轉的展現,看起來邏輯思路都很清晰完整,可是對於當下的快節奏工做環境,製做和展現這樣一套完整的原型仍是頗爲耗費時間。有網友問展現這套設計排練了多久,也有人擔憂紙片片的順序被打亂,或者文件容易缺失的問題。html
相較於這種傳統的操做方式,更高級一點的就是藉助於各類線框、原型設計工具。也看到網上有不少關於這類工具的介紹或者總結,爆炸式的陳列出大把大把的工具,可是,你真的會用嗎?授人以魚不如授人以漁。因此,這裏總結了一些常見原型工具的使用教程,但願對你有用。網絡
線框圖工具 - Balsamiqapp
這款工具聽說是獨創了手繪風格。界面和操做都比較簡單,只需拖出控件,調整屬性就能夠快速的繪製低保真的線框圖,手繪風格也很討巧。網站上很貼心的在首頁展現了一個3分鐘的短視頻,讓用戶即看即學。更多更詳細的使用教程YouTube上也很多,好比這個2013年11月份製做的Balsamiq Tutorial,達到了65K+的觀看量。工具
交互式原型設計工具 - Mockpluspost
Mockplus是一款很是簡單易學的交互式原型工具,特有的連接點,讓你輕鬆的在拖拽之間迅速完成組件、頁面交互,很是直觀。中文教程:10分鐘教學視頻,即學即用,快速上手。國外的童鞋也能在YouTube上搜到不少Mockplus的教學視頻,短短几個月的時間,Mockplus的教程已經累積10K+的瀏覽。Mockplus在交互方面的優點能夠從其中一個「30秒製做原型」的視頻中充分體現。網站
界面編輯工具- Sketch設計
Sketch是一款適用於全部設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁,圖標以及界面設計的最好方式。有經驗的設計師花上幾個小時便能將本身的設計技巧在Sketch中自如運用。若是你沒有使用過Sketch也沒關係,跟着我列出來的教程視頻看下去,你會收穫不少的。中文視頻,請移步這裏:Sketch視頻教程專輯。有興趣看更多視頻的同窗嗎,能夠去YouTube看一下LevelUpTuts家的Sketch App Tutorials - Series Introduction視頻,乾貨很多,兩年多的時間有300K+的觀看,相信有很多看過視頻的同窗都已經修煉成了大神。視頻
界面演示工具 - Invisionhtm
InVision 並非一款嚴格意義上的交互設計工具,但它能夠幫助設計師和設計團隊更加高效地作原型設計。用戶製做一個在線原型只須要四部:建立一個工程、上傳視覺設計稿、添加連接以及生成在線原型,便於和同事、用戶交流,獲取反饋。與此同時,InVision擁有完備的項目管理功能,團隊協做完成原型設計。3分鐘視頻快速瞭解Invision。一樣,能夠去YouTube找到更多詳細的Invision視頻教程。blog