零基礎(chǔ)如何輕松制作高保真原型？我不允許還有人不知道這款神器！

工欲善其事，必先利其器。對(duì)設(shè)計(jì)師而言，一款優(yōu)秀的軟件不僅能提高設(shè)計(jì)師的工作效率，也會(huì)幫助設(shè)計(jì)師快速呈現(xiàn)自己的想法，發(fā)揮創(chuàng)造力，而不是讓靈感囿于復(fù)雜的工具無法施展。

因此每年我都會(huì)關(guān)心設(shè)計(jì)軟件的趨勢(shì)，而在各大設(shè)計(jì)軟件的趨勢(shì)報(bào)告中，UXtools 以其樣本量大（從全世界設(shè)計(jì)師用戶中做調(diào)研）成為我的首選參考。

就在UXtools發(fā)布不久的這份全新設(shè)計(jì)工具報(bào)告中，我意外地發(fā)現(xiàn)了一匹黑馬，看到排名時(shí)著實(shí)讓我心里詫異：

原型設(shè)計(jì)軟件對(duì)比中，評(píng)分最高的竟然是一款名為ProtoPie 的軟件。

而在高級(jí)原型軟件的統(tǒng)計(jì)中，ProtoPie 更是一騎絕塵，成為設(shè)計(jì)高保真原型的必選項(xiàng)。

這款原型設(shè)計(jì)軟件究竟有何亮點(diǎn)？憑什么成為高保真原型設(shè)計(jì)的龍頭軟件？在我深度體驗(yàn)后，我不得不說，它配得上這份榮譽(yù)。

Protopie 官網(wǎng) ?? https://www.protopie.cn/

下面來詳細(xì)聊聊它的亮點(diǎn)。

1. 無需代碼基礎(chǔ)，像搭積木一樣輕松上手

臥槽！

這是我打開ProtoPie 官網(wǎng)的第一個(gè)想法，與別的網(wǎng)站不同，首屏沒有大篇幅的堆疊亮點(diǎn)，只有一個(gè)有趣的互動(dòng)：30秒制作地圖縮放原型。

5個(gè)步驟，你就能輕松制作出一個(gè)地圖縮放的原型。這無比絲滑的體驗(yàn)和小朋友都能學(xué)會(huì)的操作，以及最后出現(xiàn)的酷炫原型，甚至讓我有點(diǎn)恍惚，這是玩游戲還是做原型？

而這，也是ProtoPie 引以為豪的獨(dú)家概念模型：交互=對(duì)象+觸發(fā)動(dòng)作+反應(yīng)動(dòng)作。

顧名思義，任何復(fù)雜的交互都可以拆分成這3步，為了實(shí)現(xiàn)這個(gè)功能，ProtoPie 還創(chuàng)造了其獨(dú)有的「交互周期表」，表格由觸發(fā)動(dòng)作和反應(yīng)動(dòng)作組成，制作原型時(shí)只需將兩者搭配使用，就可以輕松創(chuàng)造任意形式的交互。

這難度和搭積木一比，似乎還更加簡(jiǎn)單？

2. 教程全面，服務(wù)貼心

盡管操作已經(jīng)簡(jiǎn)單到極致了，ProtoPie還是擔(dān)心設(shè)計(jì)師上手不夠快，為此編撰了一個(gè)詳細(xì)的用戶使用手冊(cè)。

B站也有ProtoPie的中文教程（101系列中文課程），總之對(duì)設(shè)計(jì)師而言，你完全不用擔(dān)心高保真原型的制作難度，它遠(yuǎn)比你想象的還要簡(jiǎn)單。

除了基礎(chǔ)教程，我發(fā)現(xiàn)ProtoPie 也會(huì)經(jīng)常做線上的工作坊（https://space.bilibili.com/602451792），從入門教程到進(jìn)階的交互邏輯和真實(shí)案例講解應(yīng)有盡有，合計(jì)40多篇視頻教程，針對(duì)企業(yè)端用戶還配備了專屬的定制培訓(xùn)和服務(wù)經(jīng)理。對(duì)個(gè)人用戶體驗(yàn)友好，對(duì)企業(yè)用戶服務(wù)升級(jí)，這大概就是它口碑天花板的原因。

3. 獨(dú)家功能：支持軟硬件交互

如果說3步做原型是ProtoPie的獨(dú)家特色，那多硬件平臺(tái)的高保真原型制作，就是它的大殺器了，對(duì)比其他原型軟件，堪稱降維打擊。

原諒我直接復(fù)制官網(wǎng)的一句話：不要讓硬件限制了你的設(shè)計(jì)。

這句話給我的震驚程度，不亞于“別讓顯卡限制了你的渲染速度”。是什么樣的功能，才會(huì)讓它有勇氣說出這句話？

然后我就看到了演示案例，是的，ProtoPie 絲毫沒夸大。

ProtoPie 不僅可以讓汽車設(shè)計(jì)師的想法在短時(shí)間內(nèi)帶入真實(shí)場(chǎng)景，甚至可以將物理的按鈕與屏幕的數(shù)據(jù)聯(lián)系起來：

針對(duì)車載交互，它還能直接通過汽車的OBD端口收集數(shù)據(jù)，將車載交互中的實(shí)際數(shù)據(jù)運(yùn)用到原型制作中，還可以創(chuàng)建車載語(yǔ)音交互原型，讓設(shè)計(jì)師擁有沉浸式的體驗(yàn)。

這兩年新能源汽車和國(guó)產(chǎn)汽車急速興起，HMI設(shè)計(jì)也逐漸成為大家關(guān)注學(xué)習(xí)的內(nèi)容，這樣一個(gè)汽車交互原型神器，相信未來會(huì)成為各大汽車廠家的標(biāo)配。（雖然現(xiàn)在已經(jīng)是寶馬、奧迪等大廠的御用原型制作工具了）

除了車載交互，ProtoPie 在智能手表、游戲交互、智能電視等硬件，也做了專門的優(yōu)化，用一句話概括就是：別讓你的原型，只停留在腦海里。

手表交互原型

游戲交互原型

智能電視交互原型

看完上面這些令人瞠目結(jié)舌的演示案例，別驚訝，接下來要聊的，正是這些案例涉及到的，ProtoPie 獨(dú)家的核心技術(shù)。

4. 能創(chuàng)建音交互原型，還支持手勢(shì)/眼動(dòng)跟蹤

在上面的案例里，你可以看到汽車的跨屏幕交互、汽車油門與顯示數(shù)值變化的軟硬件交互，但ProtoPie 的技術(shù)遠(yuǎn)不止于此，你還可以創(chuàng)建語(yǔ)音交互原型（支持52種語(yǔ)言包括中文），甚至你還可以借助Socket.IO和ProtoPie Connect，讓手勢(shì)/頭部識(shí)別和眼動(dòng)跟蹤從想象變成現(xiàn)實(shí)。

別忘了，所有這些看起來極其酷炫的交互原型，都不需要設(shè)計(jì)師掌握任何編程基礎(chǔ)就可以完成。

除了強(qiáng)大的高保真原型制作功能，ProtoPie 在提高設(shè)計(jì)師效率的細(xì)節(jié)體驗(yàn)上也可圈可點(diǎn)。

5. 輕松預(yù)覽，自動(dòng)生成交互開發(fā)文檔功能

除了支持雙系統(tǒng)（Win＆Mac），ProtoPie還支持Figma、Sketch和Adobe XD等平臺(tái)導(dǎo)入，只需安裝插件即可。預(yù)覽原型也非常方便，通過ProtoPie Playe 就可以輕松預(yù)覽。

但真正值得拎出來講的，還是它貼心的自動(dòng)生成交互開發(fā)文檔功能，設(shè)計(jì)師錄制好交互部分給到開發(fā)小哥，工程師可以通過開發(fā)文檔直觀查看交互動(dòng)作的數(shù)值（如持續(xù)時(shí)長(zhǎng)、延遲、運(yùn)動(dòng)方式等）和圖層信息。

案例演示 ?? https://cloud.protopie.io/p/f53cf5733b/r/c4121801

團(tuán)隊(duì)交互組件庫(kù)也是ProtoPie 為了提高團(tuán)隊(duì)協(xié)作效率特意開發(fā)的功能，設(shè)計(jì)師不僅可以創(chuàng)建個(gè)人組件庫(kù)和團(tuán)隊(duì)組件庫(kù)，也可以直接參考公共組件庫(kù)（Material Design和iOS組件庫(kù)等）。團(tuán)隊(duì)組件庫(kù)可以邀請(qǐng)多人共同編輯，Sketch 熱門的編組功能也有，批量修改極其方便。

由于ProtoPie 已經(jīng)和全世界許多大公司（Meta、Google、微軟等）有深度合作，所以在企業(yè)端，他們也下足了功夫，除了開頭提到的定制培訓(xùn)，針對(duì)企業(yè)的安全性需求，他們也提供了2種服務(wù)器版本：

1. 本地服務(wù)器：安裝到公司自家服務(wù)器，即使是ProtoPie 內(nèi)部人員都無法訪問，安全度最高，適合中大團(tuán)隊(duì)。
2. 私有云：AWS（亞馬遜云服務(wù)）上為客戶獨(dú)立劃分出來的空間，也可保證信息的安全。安裝流程簡(jiǎn)潔快速，適合小團(tuán)隊(duì)。

對(duì)于對(duì)保密性要求極高的車企以及各個(gè)B端企業(yè)，這個(gè)服務(wù)應(yīng)該是雪中送炭了。

結(jié)語(yǔ)

絮絮叨叨說了很多，但依然無法完整覆蓋到這款交互原型神器的許多實(shí)用功能，它究竟有多強(qiáng)大，還得大家自己探索。但我敢打包票，這是一款你用了就回不去的軟件。

ProtoPie 官網(wǎng) ?? https://www.protopie.cn/

有任何軟件的使用問題也可以添加官方的中國(guó)區(qū)經(jīng)理咨詢：