藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù).

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：http://www.woshipm.com/pd/128751.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

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

Webflow

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

WebFlow是一款 web app，你可以直接在瀏覽器中完成網(wǎng)站的視覺(jué)和交互設(shè)計(jì)，還包括實(shí)時(shí)預(yù)覽和代碼編寫(xiě)功能。WebFlow的編輯器界面友好，所見(jiàn)即所得，設(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)頁(yè)設(shè)計(jì)和移動(dòng)端的UI設(shè)計(jì)。和WebFlow一樣，你可以使用Marvel完全在線完成設(shè)計(jì)，并且可以和你的Dropbox同步，可以方 便你進(jìn)行共享或者分享。值得一提的是，Marvel 支持PSD格式文檔，也就是說(shuō)你的視覺(jué)稿無(wú)需轉(zhuǎn)換格式就可以使用。

Macaw

http://macaw.co/ 
$99 | Mac & Windows

Macaw 是一款桌面端的所見(jiàn)即所得的設(shè)計(jì)工具，實(shí)時(shí)代碼預(yù)覽，便捷輸出。比較獨(dú)特的是Macaw可以創(chuàng)建響應(yīng)式設(shè)計(jì)，內(nèi)置的斷點(diǎn)編輯器可以幫你輕松地在不同尺寸的 屏幕上實(shí)現(xiàn)完美的響應(yīng)式顯示。盡管Macow中的代碼編輯功能并沒(méi)有太大必要，但是版的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ì)，通過(guò)拖拽預(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)建互動(dòng)活動(dòng)，添加靜態(tài)圖像到活動(dòng)中，便于和同事、用戶 交流，獲取反饋。與此同時(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)頁(yè)和移動(dòng)端設(shè)備上運(yùn)行。設(shè)計(jì)師可以在Flinto中使用靜態(tài)圖片創(chuàng)建原型，按照自己的想法令其旋轉(zhuǎn)、與之互動(dòng)。

Quartz Composer

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

Origami

http://facebook.github.io/origami/ 
免費(fèi) | Mac平臺(tái)獨(dú)占

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

Avocado

http://labs.ideo.com/2014/05/27/avocado/ 
免費(fèi) | Mac平臺(tái)獨(dú)占

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

Framer.js

http://framerjs.com/ 
免費(fèi) | Javascript framework

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

掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）