對(duì)于現(xiàn)代設(shè)計(jì)師來說，它已經(jīng)成為不可或缺的設(shè)計(jì)工具之一。 各種原型設(shè)計(jì)工具也在悄然發(fā)生一些變化。 為了滿足設(shè)計(jì)人員的需求，開發(fā)了用于原型設(shè)計(jì)的插件。 既有傳統(tǒng)的桌面原型工具，也有基于云的工具。 似乎沒有一個(gè)標(biāo)準(zhǔn)規(guī)定你必須使用哪種工具，但如何在眾多+原型工具的組合中找到最適合你的工作流程并提高工作效率也是一項(xiàng)耗時(shí)的工作。

所以最近男伴為大家精心整理了一套+原型制作工具合集，希望能夠幫助各位優(yōu)秀的設(shè)計(jì)師和同事找到適合自己的工具組合，提高工作效率。

長(zhǎng)期以來，它在交互性方面仍然受到詬病。 其實(shí)官方希望把這個(gè)功能以插件的形式留給第三方開發(fā)者，靜靜地做一個(gè)小而美的繪圖軟件。 在去年更新的版本中，內(nèi)部還可以支持輕量級(jí)原型設(shè)計(jì)。 這對(duì)于球迷來說無(wú)疑是個(gè)好消息。

原型交互形式：

中的原型設(shè)計(jì)依靠畫板（）和熱區(qū)（）鏈接來實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)，實(shí)現(xiàn)動(dòng)態(tài)交互原型（類似于原型軟件中的拖放鏈接點(diǎn)）。 但我不得不抱怨的一件事是，添加太多的鏈接線會(huì)讓你眼花繚亂。

預(yù)覽形式：

1）支持軟件內(nèi)部預(yù)覽（類似F5本地預(yù)覽）。

2）內(nèi)部實(shí)時(shí)預(yù)覽（USB連接或同一局域網(wǎng)內(nèi)預(yù)覽操作）。

3）云端實(shí)時(shí)預(yù)覽（登錄云端后，可以將項(xiàng)目文件上傳到官方云端，實(shí)現(xiàn)在線多人預(yù)覽和討論。）

缺點(diǎn)：

過多的鏈接線會(huì)導(dǎo)致不好的體驗(yàn)。

鏈接轉(zhuǎn)換的功效有限。

相關(guān)資源：19 個(gè)必備線框圖套件

1.+

是一種更快、更容易的原型設(shè)計(jì)工具。 自發(fā)布以來，深受國(guó)內(nèi)外用戶的喜愛，適合軟件團(tuán)隊(duì)和個(gè)人在軟件開發(fā)的設(shè)計(jì)階段使用。 簡(jiǎn)單快速的交互功能也能很好地表達(dá)設(shè)計(jì)，幫助設(shè)計(jì)師“專注于設(shè)計(jì)sketch視覺設(shè)計(jì)教程，而不是工具”。 隨著越來越多的設(shè)計(jì)師對(duì)協(xié)作功能的需求，他們也推出了適合多人協(xié)作的團(tuán)隊(duì)版和企業(yè)版，為更多軟件開發(fā)/設(shè)計(jì)團(tuán)隊(duì)提高了工作效率。

原型交互形式：

1）下載插件

2）拖拽中組件旁邊的鏈接點(diǎn)，實(shí)現(xiàn)組件與組件、組件與頁(yè)面、組件本身狀態(tài)的交互效果。 一拖一放，3秒極速交互。

預(yù)覽形式：

提供8種預(yù)覽方式，包括軟件中F5本地預(yù)覽、在線發(fā)布為HTML網(wǎng)頁(yè)陌陌小程序（搜索小程序）、手機(jī)客戶端（）掃描二維碼等形式。

2.模擬器iDoc+

在認(rèn)識(shí)到快速交互、快速設(shè)計(jì)、快速演示、快速啟動(dòng)的敏捷開發(fā)（Agile）大趨勢(shì)后，團(tuán)隊(duì)于去年9月推出了 iDoc，朝著更高效的產(chǎn)品協(xié)同設(shè)計(jì)平臺(tái)發(fā)展。 和 的結(jié)合使得在原生原型和 iDoc 中實(shí)現(xiàn)高保真原型變得非常高效、便捷。

原型交互方法：

在 iDoc中，按住鼠標(biāo)在設(shè)計(jì)稿上畫一個(gè)圓形熱點(diǎn)，然后按住鍵盤通過右側(cè)的項(xiàng)目樹選擇熱點(diǎn)跳轉(zhuǎn)的目標(biāo)頁(yè)面，即可完成交互跳轉(zhuǎn)鏈接的設(shè)置。 您還可以為設(shè)置的交互鏈接設(shè)置跳轉(zhuǎn)動(dòng)畫。 有9種動(dòng)畫風(fēng)格可供選擇，默認(rèn)沒有動(dòng)畫。 您還可以通過下拉框或直接輸入值來更改動(dòng)畫執(zhí)行時(shí)間。

預(yù)覽形式：

在 iDoc中，點(diǎn)擊底部導(dǎo)航欄左側(cè)的播放按鈕即可演示交互式原型。 手機(jī)物品還可以生成二維碼，用手機(jī)掃描查看。

3. 工藝+

在制作高保真原型時(shí)，大多需要下載和上傳內(nèi)容。 那么你肯定會(huì)遇到一個(gè)問題，那就是你需要在界面中填充大量的真實(shí)圖片。 這個(gè)過程非常耗時(shí)。 有沒有辦法節(jié)省時(shí)間？ 事實(shí)上，是有的，那就是工藝。

Craft是一款功能強(qiáng)大的插件。 它不僅可以輸出視覺規(guī)范（比較偏向），還具有一些很酷的功能，例如復(fù)制和排列對(duì)象、定義寬度、手動(dòng)填充文本/圖片、手動(dòng)填充重復(fù)元素等等。 通過安裝此插件，您將體驗(yàn)到 和 之間的工作連續(xù)性。 通過結(jié)合設(shè)計(jì)和原型制作流程，可以快速輸出高保真原型。

原型交互形式：

從官網(wǎng)的介紹中我們可以了解到，原型設(shè)計(jì)方式也是采用添加鏈接的形式。 在界面元素中添加畫板鏈接，設(shè)置過渡動(dòng)畫并添加微交互，將靜態(tài)圖像轉(zhuǎn)換為交互式原型。

預(yù)覽形式：

軟件內(nèi)的播放按鈕預(yù)覽。

4.+

使用它可以創(chuàng)建一些小的交互和動(dòng)畫來實(shí)現(xiàn)多屏App的整體流程（Flows）。 使用它，可以非常快速地創(chuàng)建跳躍和過渡。 對(duì)于菜鳥來說，直觀、清晰，習(xí)慣后感覺很舒服。 菜單、工具和選項(xiàng)被最小化。 使用它來設(shè)計(jì)令人印象深刻的原型，而不會(huì)陷入太多分散用戶注意力的功能。

原型交互方法： .

它可以快速實(shí)現(xiàn)交互設(shè)計(jì)并與互聯(lián)網(wǎng)無(wú)縫連接，但通過插件可以將素材直接導(dǎo)出到，添加鏈接和過渡效果或添加手動(dòng)跳轉(zhuǎn)。 通過上傳圖片、添加熱點(diǎn)以及相應(yīng)的交互動(dòng)作快速生成原型，方便客戶通過網(wǎng)頁(yè)或手機(jī)觀看。

預(yù)覽形式：

1）點(diǎn)擊軟件內(nèi)的播放按鈕

2）下載iOS手機(jī)app預(yù)覽（手機(jī)和電腦在同一個(gè)局域網(wǎng)）

5.+

并且有很多相似之處。 作為原型設(shè)計(jì)工具，其設(shè)計(jì)方法是獨(dú)一無(wú)二的。 它更側(cè)重于轉(zhuǎn)換生產(chǎn)時(shí)間線和屏幕之間的交互。 對(duì)于不同習(xí)慣的設(shè)計(jì)者來說，有些人喜歡這些設(shè)計(jì)方式，而有些人則更喜歡使用像in或in這樣的Auto-Code（手動(dòng)編程）。

原型交互形式：

使用它可以輕松地為多屏應(yīng)用程序制作流程，或者只專注于微交互，它可以完成這兩項(xiàng)任務(wù)。 與本文介紹的其他工具相比，它缺乏一些改進(jìn)。 作為一款與眾不同的原型設(shè)計(jì)工具，它的原型設(shè)計(jì)方法也有些特殊。

1）下載插件并導(dǎo)出素材

2) 建立轉(zhuǎn)換和交互

3）用延遲和曲線打磨動(dòng)畫

4）添加滾動(dòng)/分頁(yè)/拖放

預(yù)覽形式：

1）軟件本地預(yù)覽

2）下載手機(jī)預(yù)覽

缺點(diǎn)：

1）畫圖不方便，建議您在國(guó)內(nèi)畫好圖，然后導(dǎo)出到中國(guó)

2）當(dāng)前頁(yè)面無(wú)法做動(dòng)畫。

3）文件中的素材不能隨意調(diào)整大小，只能通過兩側(cè)面板的縮放選項(xiàng)調(diào)整寬度和高度。

6、Axure+

眾所周知，Axure是一款老式的設(shè)計(jì)軟件。 作為一款專業(yè)的原型制作工具，它可以快速高效地創(chuàng)建原型。 輸入高保真原型，需要將國(guó)內(nèi)視覺設(shè)計(jì)師制作的矢量素材，如圖標(biāo)、控件、按鈕等導(dǎo)出到Axure，以提高交互設(shè)計(jì)的效率。

原型交互形式：

首先安裝插件。 選擇材料并單擊菜單中的--復(fù)制。 對(duì)于平時(shí)的交互，在Axure中，可以通過彈窗一一篩選設(shè)置，進(jìn)入屬性面板篩選目標(biāo)頁(yè)面（頁(yè)面多的時(shí)候就有點(diǎn)煩人了）。 稍微復(fù)雜一點(diǎn)的交互需要條件生成器來實(shí)現(xiàn)。 在Axure的交互設(shè)置中，可以添加條件判斷，但用戶需要有一定的編程知識(shí)，否則掌握起來會(huì)相當(dāng)困難。 尤其是第一次使用時(shí)。

預(yù)覽形式：

本地發(fā)布預(yù)覽

7.+

它是一款免費(fèi)的原型網(wǎng)頁(yè)應(yīng)用程序，可用于中國(guó)聯(lián)通的網(wǎng)頁(yè)設(shè)計(jì)和UI設(shè)計(jì)。 它遵循您設(shè)計(jì)的 PSD 或文檔，這意味著您的視覺草稿無(wú)需轉(zhuǎn)換格式即可使用。 事實(shí)上，線稿（.

原型交互形式：

首先通過插件將畫板同步到界面sketch視覺設(shè)計(jì)教程，選擇界面元素，通過()連接目標(biāo)畫板并設(shè)置頁(yè)面的過渡方式和操作手勢(shì)。 它不像連接形式那么直觀，因此很容易造成邏輯混亂。

預(yù)覽形式：

1）直接在網(wǎng)頁(yè)上進(jìn)行交互原型展示。

如有侵權(quán)請(qǐng)聯(lián)系刪除！