如果你想成為一名專業(yè)的產(chǎn)品設(shè)計師，除了在設(shè)計領(lǐng)域不懈努力外，借助專業(yè)高效的武器產(chǎn)品原型設(shè)計工具也是不可或缺的因素。

畢竟俗話說“工具選得好，下班回家早”！今天給大家分享10個產(chǎn)品原型設(shè)計工具！

即時設(shè)計

即時設(shè)計是一款免費(fèi)的在線 UI 設(shè)計工具，無系統(tǒng)限制，瀏覽器打開即可使用，更有豐富的在線素材、云端字體、交互動畫等功能滿足多種需求，輕松應(yīng)付移動端、Web端、可視化大屏等設(shè)計場景，還可和產(chǎn)品、開發(fā)輕松協(xié)作，實(shí)時在線評審、交付切圖、查看代碼標(biāo)注，大幅提高團(tuán)隊(duì)工作效率。

復(fù)制鏈接到瀏覽器：js.design/?source=bz&plan=ysbz9051

流程連線插件，頁面流程同樣輕松完成

當(dāng)我們發(fā)現(xiàn)在「即時設(shè)計」里畫原型的人越來越多時，更多的需求自然也就出現(xiàn)了，既然要畫原型，那肯定也少不了頁面流程連線，盡管已有的交互連線可以滿足一部分需求，但是在視覺和操作上，還不是很容易適應(yīng)。

而由此開發(fā)的流程連線插件，我們在滿足基礎(chǔ)交互的需求之外，還加入了更加便捷的快捷鍵操作，并利用設(shè)計工具的屬性，開放了對連線更豐富的編輯設(shè)置，當(dāng)然，這個連接線的功能后續(xù)也可能會直接內(nèi)置到工具中，進(jìn)一步提升使用效率。

Before

After

反復(fù)選中頁面/畫板，拖拽設(shè)置連線

按住 Shift，直接順序點(diǎn)擊頁面，自動添加連線

復(fù)制鏈接到瀏覽器：js.design/?source=bz&plan=ysbz9051

在線打點(diǎn)評論設(shè)計稿，信息對齊確實(shí)更快了

產(chǎn)品經(jīng)理在日常工作中還有一個很重要的環(huán)節(jié)，就是與設(shè)計、開發(fā)對齊信息，那作為一款在線協(xié)作設(shè)計工具，這一環(huán)的優(yōu)化自然是必不可少的。

直接在設(shè)計稿上的某個位置或區(qū)域錨定評論備注，同時支持實(shí)時回復(fù)討論，這解決的不僅是遠(yuǎn)程辦公的信息對齊，還同時滿足了面對面溝通都無法避免地，需要將針對性問題一一記錄整理的需求。

Before

After

遠(yuǎn)程辦公時，需要投屏、截圖、說明和整理文檔

遠(yuǎn)程辦公時，直接指定位置評論，實(shí)時對齊信息

面對面討論時，針對性優(yōu)化也要一一截圖整理，確認(rèn)位置，防止遺漏

面對面討論時，優(yōu)化項(xiàng)及備注直接標(biāo)記在設(shè)計稿，設(shè)計師和開發(fā)一目了然

Proto.io

Proto.IO是一種基于云的產(chǎn)品原型設(shè)計工具，可以幫助用戶設(shè)計交互式移動應(yīng)用程序原型，對用戶沒有編碼要求，只需注冊，選擇模板，可以根據(jù)需要定制創(chuàng)建，并與所有瀏覽器和設(shè)備兼容。

使用須知：Proto.io對小白設(shè)計師很友好，可以作為初學(xué)階段的學(xué)習(xí)工具。

Sketch

Sketch可以說是一款用戶友好的軟件，是一款流行的基于圖形的產(chǎn)品原型設(shè)計工具，具有將概念轉(zhuǎn)化為模型功能和強(qiáng)大的協(xié)作工具，可以與Invision和Invision的生態(tài)系統(tǒng)完美融合，適合創(chuàng)建線框和產(chǎn)品原型。

使用須知

Sketch只提供一個操作系統(tǒng)，Sketch是MacOS獨(dú)有的。

Sketch通過Web檢查器檢查Sketch文件并導(dǎo)出產(chǎn)品原型設(shè)計工具。

Figma

Figma作為矢量圖形的產(chǎn)品原型設(shè)計工具，可以處理線框圖、原型制作、UI設(shè)計、開發(fā)人員交接，F(xiàn)igma可以通過交互格式查看原型設(shè)計，無需編寫代碼。

使用須知

適用于Widows、Macos和Inbrowser三大基礎(chǔ)操作系統(tǒng)。

Figma的團(tuán)隊(duì)項(xiàng)目、團(tuán)隊(duì)文件和版本歷史數(shù)量有限。

AdobeXD

Adobexd是一種基于矢量的產(chǎn)品原型設(shè)計工具，是專門為UX設(shè)計的產(chǎn)品原型工具。因此，它為不同屏幕尺寸的設(shè)計提供了選項(xiàng)，允許設(shè)計師根據(jù)需要進(jìn)行調(diào)整、切割和拉伸設(shè)計。此外，它還為過渡和交互設(shè)計提供了各種動態(tài)功能，是UX設(shè)計工具的好選擇。

使用須知

Adobexd適用于MacOS和Windows10上的操作系統(tǒng)。

InVision

Invision是原型制作和網(wǎng)頁設(shè)計行業(yè)的最愛。它是一種多功能產(chǎn)品原型設(shè)計工具，專注于實(shí)現(xiàn)頂級用戶體驗(yàn)。設(shè)計師可以利用Invision實(shí)現(xiàn)多人合作、線框圖應(yīng)用和網(wǎng)站開發(fā)。對于大團(tuán)隊(duì)來說，Invision是產(chǎn)品原型設(shè)計工具的好選擇。

使用須知

Macosion適用于Macosion、MozillaFirefox、Chrome、Windows等操作系統(tǒng)。

Invision最多只能使用3個免費(fèi)文檔。

Framer

Framer是一種基于代碼的產(chǎn)品原型設(shè)計工具。學(xué)習(xí)曲線較低，可以幫助用戶快速創(chuàng)建原型。

使用須知

Framer適用于macoss、Windows、iOS、在Android和瀏覽器中。

Framer要求用戶具備基本的CSS和HTML代碼知識。

Framer最多可創(chuàng)建3個免費(fèi)設(shè)計文檔。

UXPin

UXPin是一種基于矢量的云產(chǎn)品原型設(shè)計工具，可以幫助您設(shè)計數(shù)字產(chǎn)品、移動應(yīng)用程序和登錄頁面。UXPin可以從創(chuàng)建低保真線框圖到高保真原型。同時，UXPin可以導(dǎo)入Sketch或Photoshop設(shè)計文件。

使用說明：UXPin支持MacOS（10.12或更高版本）、Windows10、GoogleChrome等操作系統(tǒng)。

OrigamiStudio

Origamistudio是Facebook旗下的矢量產(chǎn)品原型設(shè)計工具。該產(chǎn)品原型設(shè)計工具的目標(biāo)是幫助設(shè)計師創(chuàng)建高保真原型，提供動畫、開關(guān)、布爾運(yùn)算符等設(shè)計元素，并將Sketch、Photoshop直接復(fù)制到Origami中，唯一的缺點(diǎn)是Origamistudio缺乏協(xié)作選項(xiàng)。

使用須知

OrigamiStudio的使用需要一定的技術(shù)技巧，適合開發(fā)人員和設(shè)計人員一起使用。

OrigamiStudio支持Mac操作系統(tǒng)，其他系統(tǒng)可通過獲取預(yù)覽應(yīng)用程序使用。

FluidUI

FluidUI是另一種基于Web的產(chǎn)品原型設(shè)計工具。它可以隨時隨地創(chuàng)建原型，無需任何下載或安裝。它有2000多個現(xiàn)成的組件。同時，UXPin還提供了完整的設(shè)計系統(tǒng)解決方案，幫助設(shè)計產(chǎn)品UI元素的一致性。

使用說明:FluidUI適用于Windowss、MacOS、Linux、Chrome、Firefox等操作系統(tǒng)。