幾年前交互設(shè)計(jì)師還是一個(gè)不明覺厲的工作，而現(xiàn)在，交互設(shè)計(jì)師和UI設(shè)計(jì)師一同戰(zhàn)在設(shè)計(jì)最前線。UI設(shè)計(jì)師們擁有經(jīng)典的PS和先鋒的Sketch來開疆拓土，相比之下交互設(shè)計(jì)師這個(gè)新興的職業(yè)還沒有比較統(tǒng)一的設(shè)計(jì)工具。不過，交互設(shè)計(jì)社區(qū)的成熟催生出越來越多功能完善的新工具，也使得2014年成為了交互設(shè)計(jì)工具之年。

　　在設(shè)計(jì)之初，UI設(shè)計(jì)師所提供的視覺稿和最終的可交互原型之間，需要交互設(shè)計(jì)師借助工具來補(bǔ)足，讓靜態(tài)的視覺轉(zhuǎn)化為富有生命力的可交互界面。2014年所涌現(xiàn)出來的這些交互設(shè)計(jì)工具，在不斷迭代升級中走向了成熟，易用性和可靠性得到了明顯提高。如果你是一名交互設(shè)計(jì)師，這些優(yōu)秀的交互設(shè)計(jì)工具里面總有一款符合你的需求，徹底告別說明靠吼、交互靠手的蠻荒時(shí)代!

　　Webflow

　　https://webflow.com/

　　$16/月 | Web app

　　WebFlow是一款 web app，你可以直接在瀏覽器中完成網(wǎng)站的視覺和交互設(shè)計(jì)，還包括實(shí)時(shí)預(yù)覽和代碼編寫功能。WebFlow的編輯器界面友好，所見即所得，設(shè)計(jì)師擁有完全的控制權(quán)。WebFlow一直在持續(xù)更新功能，包括Web字體，視頻支持，交互的狀態(tài)，W3C標(biāo)準(zhǔn)化，乃至于主機(jī)托管。

　　Marvel

　　https://marvelapp.com/

　　免費(fèi) | Web app

　　Marvel是一款免費(fèi)的原型設(shè)計(jì) Web 應(yīng)用，可以進(jìn)行網(wǎng)頁設(shè)計(jì)和移動端的UI設(shè)計(jì)。和WebFlow一樣，你可以使用Marvel完全在線完成設(shè)計(jì)，并且可以和你的Dropbox同步，可以方便你進(jìn)行共享或者分享。值得一提的是，Marvel 支持PSD格式文檔，也就是說你的視覺稿無需轉(zhuǎn)換格式就可

　　Macaw

　　http://macaw.co/

　　$99 | Mac & Windows以使用。

　　Macaw 是一款桌面端的所見即所得的設(shè)計(jì)工具，實(shí)時(shí)代碼預(yù)覽，便捷輸出。比較獨(dú)特的是Macaw可以創(chuàng)建響應(yīng)式設(shè)計(jì)，內(nèi)置的斷點(diǎn)編輯器可以幫你輕松地在不同尺寸的屏幕上實(shí)現(xiàn)完美的響應(yīng)式顯示。盡管Macow中的代碼編輯功能并沒有太大必要，但是最新版的Macaw在HTML和CSS代碼編輯上體驗(yàn)還是蠻好的。

　　UXPin

　　http://uxpin.com

　　$15每月| Web app

　　UXPin 是一款比較著名的設(shè)計(jì)類的web應(yīng)用，用戶可以借助UXPin在線協(xié)作完成線框圖和原型的設(shè)計(jì)。UXPin旨在幫設(shè)計(jì)師快速便捷地進(jìn)行線框圖和原型設(shè)計(jì)，擁有完備的版本管理，支持響應(yīng)式設(shè)計(jì)，通過拖拽預(yù)制控件進(jìn)行UI設(shè)計(jì)。

　　InVision

　　http://www.invisionapp.com/

　　免費(fèi) | Web app

　　InVision 并不是一款嚴(yán)格意義上的交互設(shè)計(jì)師工具，InVision 可以幫助設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)更加高效地做原型設(shè)計(jì)。在制作原型設(shè)計(jì)的時(shí)候，InVision可以讓你創(chuàng)建互動活動，添加靜態(tài)圖像到活動中，便于和同事、用戶交流，獲取反饋。與此同時(shí)，InVision擁有完備的項(xiàng)目管理功能，團(tuán)隊(duì)協(xié)作完成原型設(shè)計(jì)。

　　Flinto

　　https://www.flinto.com/

　　$20每月 | Web app

　　Flinto 可以幫你創(chuàng)建可交互式的設(shè)計(jì)原型，并且可以在網(wǎng)頁和移動端設(shè)備上運(yùn)行。設(shè)計(jì)師可以在Flinto中使用靜態(tài)圖片創(chuàng)建原型，按照自己的想法令其旋轉(zhuǎn)、與之互動。

　　Quartz Composer

　　Quartz Composer是一款圖形化的編程工具,專門用來生成各種動態(tài)視覺效果,包括可交互的界面原型。作為一款圖形化的編程工具，設(shè)計(jì)師同學(xué)在制作可交互原型的時(shí)候，可以省去很多麻煩。最近Facebook和IDEO也為之提供了專門的庫，使得程序和原型的開發(fā)更加方便。

　　Origami

　　http://facebook.github.io/origami/

　　免費(fèi) | Mac平臺獨(dú)占

　　Origami 就是Facebook 為Quartz Composer專門提供的素材庫，F(xiàn)acebook 的設(shè)計(jì)團(tuán)隊(duì)正是借助它實(shí)現(xiàn)了自家程序在移動端設(shè)備上運(yùn)行原型設(shè)計(jì)，測試動效，交互等等。Origami 可以近乎完美地幫你制作高保真可交互的原型，但是無法生成可用的代碼。

　　Avocado

　　http://labs.ideo.com/2014/05/27/avocado/

　　免費(fèi) | Mac平臺獨(dú)占

　　和Origami一樣，Avocado是IDEO針對Quartz Composer所制作的庫，用來模擬常見的移動端設(shè)備的交互。Origami 專注于交互和動效，而Avocado則更側(cè)重于替代常用的UI元素，比如你可以無需任何代碼就可以在原型中將iOS默認(rèn)的鍵盤替代掉。

　　Framer.js

　　http://framerjs.com/

　　免費(fèi) | javascript framework

　　Framer.js 是一款JS框架，用來制作動效觸發(fā)事件的原型。Framer擁有許多功能，其內(nèi)置的生成器能夠讀取PSD文檔中的圖層，并且將其中每組圖層都輸出成為單獨(dú)的項(xiàng)目。Framer能夠識別HTML、CSS和Javascript的代碼，但是它本身并不依附于特定的程序，所以你可以在任何時(shí)候任何地方輕松使用。