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

Webflow

https://webflow.com/
$16/月 | Web app

WebFlow是一款 web app，你可以直接在瀏覽器中完成網(wǎng)站的視覺和交互設(shè)計(jì)，還包括實(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í)時代碼預(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ì)的時候，InVision可以讓你創(chuàng)建互動活動，添加靜態(tài)圖像到活動中，便于和同事、用戶 交流，獲取反饋。與此同時，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é)在制作可交互原型 的時候，可以省去很多麻煩。最近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的代碼，但是它本身并不依附于特定的程序，所以你可以在任何時候任何地方輕松使用。

原文來自：優(yōu)設(shè)

原文地址：medium

優(yōu)設(shè)網(wǎng)譯者：@陳子木