隨著設(shè)計(jì)領(lǐng)域的細(xì)分以及用戶群體的發(fā)展，各類設(shè)計(jì)工具開始涌現(xiàn)，這些新興工具分別針對不同的使用情景和需求，讓產(chǎn)品的設(shè)計(jì)、運(yùn)營甚至靈感的獲取都更為順暢、系統(tǒng)地完成。然而要找到一款最適合的工具也并非易事。在這里，我們整理了10款專為UX/UI設(shè)計(jì)師打造的熱門工具，它們能有效地幫助你制作交互原型、網(wǎng)頁設(shè)計(jì)，并提供收集、管理設(shè)計(jì)素材的便利。
1. Mockplus－全平臺“更快、更簡單”的原型設(shè)計(jì)工具
?
Mockplus是一款支持全平臺的快速原型設(shè)計(jì)工具，滿足包括手機(jī)項(xiàng)目、平板項(xiàng)目、網(wǎng)友項(xiàng)目、桌面項(xiàng)目、自定義項(xiàng)目及自由項(xiàng)目的原型設(shè)計(jì)需求。它以“更快、更簡單”的特點(diǎn)在國內(nèi)甚至國際原型市場中占有一席之地。最近3.0版本中發(fā)布的團(tuán)隊(duì)協(xié)作功能，更是大大提高了團(tuán)隊(duì)溝通默契和效率。此外，高度封裝的智能交互組件、完全可視化的交互設(shè)計(jì)，在同類原型工具中也是獨(dú)有的。
官網(wǎng)地址：http://mockplus.cn/
更多信息：https://www.mockplus.cn/blog
2. Figma－協(xié)作式界面設(shè)計(jì)工具
?
Figma可以說是一款新興的協(xié)作式界面設(shè)計(jì)工具，它的界面布局和Sketch幾乎一樣。這款工具以云端為基礎(chǔ)，允許多人同時合作一個項(xiàng)目，設(shè)計(jì)稿會根據(jù)評論及修改進(jìn)行實(shí)時更新。美中不足的是，這款工具對中文的支持不太好，經(jīng)常出現(xiàn)字體無法識別（實(shí)際已安裝）的情況。免費(fèi)版本中，只能創(chuàng)建3個項(xiàng)目，最多支持查看30天內(nèi)的歷史版本。
官網(wǎng)地址：https://www.figma.com/
更多信息：https://www.facebook.com/figmadesign/
3. Framer－開源型原型工具
?
與其他原型設(shè)計(jì)工具有所不同，F(xiàn)ramer允許用戶以編代碼的形式（Coffeescript－精簡版的JavaScript）進(jìn)行設(shè)計(jì)，對于大多數(shù)設(shè)計(jì)師來講，上手難度和學(xué)習(xí)曲線相當(dāng)高。盡管Framer憑借其強(qiáng)大的交互和動畫優(yōu)勢逐漸在原型設(shè)計(jì)領(lǐng)域有一定熱度，但所有設(shè)計(jì)只能通過代碼才能實(shí)現(xiàn)這點(diǎn)，讓它注定更受程序員的歡迎。
官網(wǎng)地址：https://framer.com/
更多信息：https://blog.framerjs.com/
4. Sketch及插件－矢量繪圖軟件
?
Sketch想必大家并不陌生了，另外兩款被大家所熟知的矢量繪圖軟件還有Photoshop和Adobe Illustrator這兩款工具。通常大家提到的Sketch是指與其相關(guān)的插件，比如ContentGenerator、Icon Stamper、Measure等等。不過，它只支持基于制作好的UI視覺圖進(jìn)行交互，而且只有MAC版本，對于Windows用戶來講不太友好。
官網(wǎng)地址：https://www.sketchapp.com/
更多信息：https://www.sketchapp.com/extensions/
5. Protopie－新興原型工具
?Protopie這款交互工具最近比較火，它是來自韓國的創(chuàng)業(yè)團(tuán)隊(duì)產(chǎn)品，可以通過不同模塊組成一個完整的交互原型，使用時無需編碼且以可視化的方式進(jìn)行設(shè)計(jì)。不過，它比較大的缺點(diǎn)在于目前不支持電腦預(yù)覽、文字輸入、Web端網(wǎng)頁制作和導(dǎo)出。
官網(wǎng)地址：https://www.protopie.io/
更多信息：https://www.facebook.com/protopie/
6. Pidoco－基于Web的原型設(shè)計(jì)軟件
?
Pidoco是一個基于網(wǎng)頁和云端的在線原型圖、線框圖制作工具，可以在瀏覽器、iOS、Android設(shè)備上實(shí)時演示原型。但它的不足之處在于，沒有密碼保護(hù)，而且內(nèi)置的組件模板十分有限。
官網(wǎng)地址：https://pidoco.com/en
更多信息：https://pidoco.com/en/company/press
7. Webflow－在線響應(yīng)式網(wǎng)頁設(shè)計(jì)工具
?
Webflow是試圖幫助那些對編程毫無概念的設(shè)計(jì)師更好地制作網(wǎng)頁設(shè)計(jì)的平臺，一直以“傻瓜式”著稱。它提供的模板可以在三種設(shè)備（桌面設(shè)備、平板和智能手機(jī)）上實(shí)現(xiàn)響應(yīng)式效果。但免費(fèi)版本會限制某些功能，且在注冊之前看不到控制面板。
官網(wǎng)地址：https://webflow.com/
更多信息：https://forum.webflow.com/
8. Atomic－給予瀏覽器的Web應(yīng)用程序
?
這是一款擁有漂亮的用戶界面和直觀的時間軸的設(shè)計(jì)工具，需要GoogleChrome來運(yùn)行，沒有桌面應(yīng)用程序。對于iOS設(shè)計(jì)人員，這款工具推出了帶有iOS設(shè)計(jì)元素的套件，比較方便。
官網(wǎng)地址：https://www.atomic.io/
9. Blocs－MAC網(wǎng)頁代碼編輯器
?
Blocs是一款針對Mac的視覺網(wǎng)頁設(shè)計(jì)工具，提供Retina視網(wǎng)膜支持，可離線工作，且支持創(chuàng)建靜態(tài)的網(wǎng)頁。
官網(wǎng)地址：https://blocsapp.com/
更多信息：https://forum.blocsapp.com/
10. IconFinder
?
這是一個Icon素材站點(diǎn)，通過關(guān)鍵字進(jìn)行搜索，同時根據(jù)需求（圖標(biāo)格式、價格、許可類型、圖標(biāo)尺寸等要素）來選擇喜歡的圖標(biāo)。它宣稱是目前世界上最大、最全的圖標(biāo)資源庫網(wǎng)站。
官網(wǎng)地址：https://www.iconfinder.com/
更多信息：http://blog.iconfinder.com/
寫在最后的話
以上就是推薦給設(shè)計(jì)師的熱門工具清單，希望對你有所幫助。筆者相信，好的工具一定是在具備強(qiáng)大功能的同時，又能讓設(shè)計(jì)者專注于設(shè)計(jì)本身、不為工具所累，這其中最有發(fā)言權(quán)的便是Mockplus。反正我已經(jīng)入坑了，你不也來試試？????
