在產(chǎn)品開發(fā)過程中二打,最常用的展現(xiàn)構(gòu)思的方式一般來說是紙筆原型,最簡(jiǎn)單也最迅速僧凰,寥寥一畫探颈,一個(gè)大致的線框圖就呈現(xiàn)出來了。但是如果想要把線框圖表現(xiàn)得更完美训措,你還是有很多工作要做噠~
YouTube上一位大牛在他的視頻里展示了一套完整網(wǎng)絡(luò)郵件服務(wù)的紙質(zhì)原型線框圖伪节。由兩個(gè)人合作完成按鈕點(diǎn)擊和網(wǎng)頁跳轉(zhuǎn)的展示光羞,看起來邏輯思路都很清晰完整,但是對(duì)于當(dāng)下的快節(jié)奏工作環(huán)境怀大,制作和展示這樣一套完整的原型還是頗為耗費(fèi)時(shí)間纱兑。有網(wǎng)友問展示這套設(shè)計(jì)排練了多久,也有人擔(dān)心紙片片的順序被打亂化借,或者文件容易缺失的問題潜慎。
相較于這種傳統(tǒng)的操作方式,更高級(jí)一點(diǎn)的就是借助于各種線框蓖康、原型設(shè)計(jì)工具铐炫。也看到網(wǎng)上有很多關(guān)于這類工具的介紹或者總結(jié),爆炸式的陳列出大把大把的工具蒜焊,但是倒信,你真的會(huì)用嗎?授人以魚不如授人以漁泳梆。所以鳖悠,這里總結(jié)了一些常見原型工具的使用教程,希望對(duì)你有用鸭丛。
線框圖工具?-Balsamiq
這款工具據(jù)說是首創(chuàng)了手繪風(fēng)格竞穷。界面和操作都比較簡(jiǎn)單唐责,只需拖出控件鳞溉,調(diào)整屬性就可以快速的繪制低保真的線框圖,手繪風(fēng)格也很討巧鼠哥。網(wǎng)站上很貼心的在首頁展示了一個(gè)3分鐘的短視頻熟菲,讓用戶即看即學(xué)。更多更詳細(xì)的使用教程YouTube上也不少朴恳,比如這個(gè)2013年11月份制作的Balsamiq Tutorial抄罕,達(dá)到了65K+的觀看量。
交互式原型設(shè)計(jì)工具?-Mockplus
Mockplus是一款非常簡(jiǎn)單易學(xué)的交互式原型工具于颖,特有的鏈接點(diǎn)呆贿,讓你輕松的在拖拽之間迅速完成組件、頁面交互森渐,非常直觀做入。中文教程:10分鐘教學(xué)視頻,即學(xué)即用同衣,快速上手竟块。國(guó)外的童鞋也能在YouTube上搜到很多Mockplus的教學(xué)視頻,短短幾個(gè)月的時(shí)間耐齐,Mockplus的教程已經(jīng)累積10K+的瀏覽浪秘。Mockplus在交互方面的優(yōu)勢(shì)可以從其中一個(gè)“30秒制作原型”的視頻中充分體現(xiàn)蒋情。
界面編輯工具-Sketch
Sketch?是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用。矢量繪圖也是目前進(jìn)行網(wǎng)頁耸携,圖標(biāo)以及界面設(shè)計(jì)的最好方式棵癣。有經(jīng)驗(yàn)的設(shè)計(jì)師花上幾個(gè)小時(shí)便能將自己的設(shè)計(jì)技巧在Sketch中自如運(yùn)用。如果你沒有使用過Sketch也不要緊夺衍,跟著我列出來的教程視頻看下去浙巫,你會(huì)收獲很多的。中文視頻刷后,請(qǐng)移步這里:Sketch視頻教程專輯的畴。有興趣看更多視頻的同學(xué)嗎,可以去YouTube看一下LevelUpTuts家的Sketch App Tutorials - Series Introduction視頻尝胆,干貨不少丧裁,兩年多的時(shí)間有300K+的觀看,相信有不少看過視頻的同學(xué)都已經(jīng)修煉成了大神含衔。
界面演示工具?-Invision
InVision?并不是一款嚴(yán)格意義上的交互設(shè)計(jì)工具煎娇,但它可以幫助設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)更加高效地做原型設(shè)計(jì)。用戶制作一個(gè)在線原型只需要四部:創(chuàng)建一個(gè)工程贪染、上傳視覺設(shè)計(jì)稿缓呛、添加鏈接以及生成在線原型,便于和同事杭隙、用戶交流哟绊,獲取反饋。與此同時(shí)痰憎,InVision擁有完備的項(xiàng)目管理功能票髓,團(tuán)隊(duì)協(xié)作完成原型設(shè)計(jì)。3分鐘視頻快速了解Invision铣耘。同樣洽沟,可以去YouTube找到更多詳細(xì)的Invision視頻教程。
Grace