對(duì)于視覺設(shè)計(jì)師、交互設(shè)計(jì)師來說，他們需要做的不僅僅是設(shè)計(jì)一張張靜態(tài)的頁面和獨(dú)立的icon，他們需要將這些元素整體組合在一起，根據(jù)整體畫面感和視覺體驗(yàn)來做出修改。與此同時(shí)，開發(fā)人員查看網(wǎng)站交互設(shè)計(jì)時(shí)也需要通過一定的工具。因此，一款快速、方便的視覺稿設(shè)計(jì)工具就顯得尤為重要，通過這些工具，設(shè)計(jì)師可以真實(shí)地看到網(wǎng)站呈現(xiàn)的效果，并且可以傳遞至其他同事，還可以更加便利地與用戶進(jìn)行溝通交流，查看反饋。

1、Invisionapp

InVision 是一款強(qiáng)大的設(shè)計(jì)原型開發(fā)工具，可以幫助設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)更加高效地做原型設(shè)計(jì)。在制作原型設(shè)計(jì)的時(shí)候，InVision可以讓你創(chuàng)建互動(dòng)活動(dòng)，上傳設(shè)計(jì)文件并添加動(dòng)畫、手勢(shì)等，便于和同事、用戶交流，獲取反饋。與此同時(shí)，InVision擁有完備的項(xiàng)目管理功能，幫助團(tuán)隊(duì)協(xié)作完成原型設(shè)計(jì)。

2、Mockupr

做了一個(gè)網(wǎng)站樣機(jī)？想看看它在瀏覽器中什么樣子？Mockupr需要你的圖像文件，并將其在線顯示在瀏覽器中，給你和客戶展現(xiàn)一個(gè)真實(shí)的網(wǎng)站。你的設(shè)計(jì)將會(huì)獲得自己獨(dú)特的鏈接，不會(huì)對(duì)外顯示。

3、Flinto

Flinto可以幫你創(chuàng)建可交互式的設(shè)計(jì)原型，并且可以在網(wǎng)頁和移動(dòng)端設(shè)備上運(yùn)行。它最大的特點(diǎn)就是快，無需額外的過渡，并且樣機(jī)屏幕還可以上下滾動(dòng)。記住，只有30天免費(fèi)哦！

4、Flinto Icon Strike!?

上傳圖標(biāo)，在你的iPhone中打開鏈接，安裝圖標(biāo)。在這里，你可以在主屏幕上輕松地測(cè)試iOS圖標(biāo)設(shè)計(jì)。

5、Webflow

Webflow無需編寫代碼，你可以直接在瀏覽器中完成網(wǎng)站的視覺和交互設(shè)計(jì)并實(shí)時(shí)預(yù)覽，設(shè)計(jì)師可以隨時(shí)修改。Webflow一直在持續(xù)更新功能，包括Web字體，視頻支持，交互的狀態(tài)，W3C標(biāo)準(zhǔn)化，乃至于主機(jī)托管。

6、Mockuuups

已有25000名設(shè)計(jì)師加入，可永遠(yuǎn)享受優(yōu)質(zhì)設(shè)計(jì)資源。包含iPhone、Apple Watch、Macbook、iPad各型號(hào)以及AndroidPSD樣機(jī)，不是全部免費(fèi)的哦。

7、Red Pen

Red Pen是一個(gè)超級(jí)基本的Web應(yīng)用程序，可以讓你上傳文件，并與客戶和團(tuán)隊(duì)成員共享反饋信息。如果你要搜索一個(gè)非常輕量級(jí)的解決方案?（零建立時(shí)間）并且不希望訴諸電子郵件大型文件來回，你可以通過Red Pen完成。

8、PSD Covers

PSD Covers是一個(gè)免費(fèi)的資源站點(diǎn)，不是Web應(yīng)用程序或復(fù)雜的軟件，在這里你可以下載到一套Photoshop動(dòng)作，它提供PSD實(shí)體模型模板來渲染你的設(shè)計(jì)，以及高分辨率的仿3D產(chǎn)品拍攝。

作者：平面設(shè)計(jì)seven（微信公眾號(hào)：Designer-seven）