作為專業(yè)從事設(shè)計(jì)工作的設(shè)計(jì)師來說，在選擇交互和原型設(shè)計(jì)工具方面他們通常有著最為寬廣的視野和最為靈敏的嗅覺。而作為新型的發(fā)行和交流平臺(tái)，Medium為設(shè)計(jì)師們提供了從模型到工作原型的嶄新視界。在增長見地的同時(shí)，設(shè)計(jì)師們可以取長補(bǔ)短，相互學(xué)習(xí)。以下是筆者對(duì)2014年上半年流行的交互式原型設(shè)計(jì)工具的一個(gè)簡單總結(jié)。

（16美元/月，Web應(yīng)用）

Webflow是一款用于設(shè)計(jì)瀏覽器上的網(wǎng)站的工具，通過它設(shè)計(jì)出來的網(wǎng)站生動(dòng)且完全實(shí)現(xiàn)編碼。Webflow友好的“所見即所得”的編輯器給予用戶完全的輸出控制，這種控制也包含于移動(dòng)設(shè)備。

Webflow還在不斷的添加新的特性——包含web字體、視頻支持、維持W3C合規(guī)、互動(dòng)狀態(tài)、托管等等。

（免費(fèi)，Web應(yīng)用）

Marvel是一款用于網(wǎng)站和手機(jī)設(shè)計(jì)的免費(fèi)web應(yīng)用工具。使用Marvel，你的工作完全可以達(dá)到在線完成——不僅和云存儲(chǔ)同步，還能夠讓你輕松地添加來自于私人或者公司文件中的模型。Marvel同時(shí)也支持PSD文件類型，所以在創(chuàng)建原型之前無需進(jìn)行文件轉(zhuǎn)換。

(99美元，Mac和Windows）

Macaw是電腦桌面上的一款包含生動(dòng)代碼的所見即所得的設(shè)計(jì)工具。它特別擅長于創(chuàng)建響應(yīng)式的設(shè)計(jì)：其內(nèi)置的斷點(diǎn)編輯器可以輕松地創(chuàng)建匹配任何尺寸窗口的完美像素的設(shè)計(jì)。

使用該產(chǎn)品無需編碼知識(shí)，基本的HTML和CSS的經(jīng)驗(yàn)就能夠完全駕馭這個(gè)產(chǎn)品。

（15美元/月，Web應(yīng)用）

UXPin是一款允許用戶在項(xiàng)目中使用線框圖進(jìn)行協(xié)作的web應(yīng)用。支持響應(yīng)設(shè)計(jì)、版本控制、使用拖拽UI對(duì)預(yù)制組件進(jìn)行填充，UXPin旨在讓設(shè)計(jì)師輕松快捷地構(gòu)建線框圖。

(免費(fèi)，Web應(yīng)用）

InVision不是嚴(yán)格意義上的交互工具，它主要用于原型和產(chǎn)品開發(fā)。在用于原型時(shí)，InVision允許用戶為靜態(tài)圖片增加交互事件以演示其交互活動(dòng)。同時(shí)，InVision的項(xiàng)目管理功能允許客戶與設(shè)計(jì)師在原型開發(fā)之前進(jìn)行交互。

(20美元/月，Web應(yīng)用）

Flinto允許用戶在網(wǎng)絡(luò)和移動(dòng)設(shè)備上創(chuàng)建交互式的原型。設(shè)計(jì)者可以通過對(duì)靜態(tài)圖片進(jìn)行滾動(dòng)、旋轉(zhuǎn)等各種操作以達(dá)到創(chuàng)建所需的原型的目的。

Flinto還有一個(gè)特別誘人的特性：其原型可以應(yīng)用于Android和iOS設(shè)備上的本地應(yīng)用。所以，你可以在自己的iPhone或Android設(shè)備上與你設(shè)計(jì)的最新原型進(jìn)行交互。

（免費(fèi)，Mac）

Origami是由Facebook設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的用于移動(dòng)設(shè)備上原型交互的Quartz Composer庫。通過圖像轉(zhuǎn)換和點(diǎn)擊按鈕，設(shè)計(jì)者可以在移動(dòng)設(shè)備上輕松的進(jìn)行常見動(dòng)畫的復(fù)制以及交互行為。

與Quartz Composer相類似的是Origami對(duì)于原型設(shè)計(jì)尤其有用，但它并不輸出可用的代碼。Origami的名氣來源于它是Facebook上設(shè)計(jì)最新移動(dòng)應(yīng)用，以及論文設(shè)計(jì)的有用工具。

（免費(fèi)，Mac）

與Origami相似，Avocado的目標(biāo)是改進(jìn)Quartz Composer——它增加了一個(gè)用于模仿移動(dòng)設(shè)備上普通交互行為的庫。

Origami關(guān)注于交互與動(dòng)畫，而Avocado則關(guān)注于iOS上的常見UI元素。比如，一個(gè)iOS鍵盤。Avocado可以讓用戶在不使用任何代碼的情況下 制作出iOS的原型出來。

（免費(fèi)，Javascript框架）

Framer.js是一個(gè)用于原型事件觸發(fā)器動(dòng)畫的Javascript框架。它擁有多種特性，其中之一是作為一個(gè)內(nèi)置生成器，可以處理來自于自身的 PSD文件的圖層組并輸出圖層中的每個(gè)群組以形成項(xiàng)目基礎(chǔ)。

Framer是一個(gè)Javascript框架，因此，它不同于這里介紹的其它工具，在使用它之前你需要了解HTML、CSS和Javascript。但同時(shí)，它也無需綁定到任何程序，你可以在任何地方、任何地點(diǎn)和它產(chǎn)生交互。

本文翻譯自