誰說交互原型制作難？那是你還沒用過這個(gè)神器！

一小時(shí)上手，分分鐘作出高大上交互動(dòng)效。Win&Mac雙平臺(tái)，支持Sketch和AdobeXD無插件導(dǎo)入...

孔子曰：「工欲善其事必先利其器！交互制作太不易，選個(gè)工具善待自己。」我本人是做UI設(shè)計(jì)的，同時(shí)也是個(gè)工具癖，市面上新出的工具都會(huì)去用一下，為的就是以后工作上有需要的時(shí)候，能快速判斷應(yīng)該選擇哪個(gè)工具。?

今天就來說說設(shè)計(jì)工具里面的小分支：交互原型工具。選個(gè)好的交互工具很重要，而好的原型工具應(yīng)該具有以下基本特質(zhì)：

• 現(xiàn)代人，?效率?很重要。學(xué)習(xí)成本大，用起來還麻煩的，就算了吧
• 一定可以制作?逼真?的交互：設(shè)計(jì)本就比較主觀，交互體驗(yàn)更是一個(gè)摸不著的東西。沒有一個(gè)可以演示，且逼真的原型，僅憑幾張圖，你的說服力在哪里？
• 工具使用?邏輯?要符合開發(fā)邏輯：交互的開發(fā)不是時(shí)間軸的邏輯，更不是前后頁面一連接的邏輯，如果你是這樣思考，那我保證，當(dāng)開發(fā)說「這個(gè)難實(shí)現(xiàn)」的時(shí)候你一定是一臉不理解的。

符合上面要求的，市場上不少見，比如Principle，F(xiàn)ramer、Axure、ProtoPie等。而我自己最終選擇了ProtoPie。理由有六：

• 小白也可以馬上學(xué)會(huì)，我當(dāng)時(shí)用了30分鐘做出了第一個(gè)交互原型
• 支持Sketch、?Adobe XD?等無插件導(dǎo)入
• 支持?Windows?和Mac，以及?安卓?和iOS上的預(yù)覽
• 支持線上分享，離線預(yù)覽
• 高保真，除了頁面串聯(lián)還要能打造交互細(xì)節(jié)（后面有作品）
• 隱藏福利：支持傳感交互 + 多屏幕間的互動(dòng)

△ 外媒對ProtoPie的評價(jià)

下面具體來說一下。

優(yōu)設(shè)獨(dú)家5元優(yōu)惠券 →??https://partner.lizhi.io/uisdc/protopie

一、國內(nèi)外大公司為其背書

ProtoPie在2017年1月正式上線，國內(nèi)有阿里、一加等很多團(tuán)隊(duì)在用，國外有谷歌、Line、星巴克在用。Oneplus首席設(shè)計(jì)師Crayon和支付寶團(tuán)隊(duì)在采訪中都提到過：「?ProtoPie是設(shè)計(jì)流程中重要的一環(huán)?」。

△ ProtoPie官網(wǎng)上寫的背書公司

二、支持Windows和Mac，可在安卓和iOS演示

ProtoPie絕對是Windows用戶設(shè)計(jì)師的福利。?Windows不知道得罪了誰，很多設(shè)計(jì)工具都只有Mac版。所以Windows設(shè)計(jì)師，你們沒得選擇，只有ProtoPie了。好在我們公司有給配Mac（賤賤的笑）

△ 支持Mac和Win64、Win32

ProtoPie由制作部分 - Studio和演示部分-Player組成。這個(gè)Player是真真的不錯(cuò)：除了可以保存原型方便實(shí)時(shí)拿出來查看，還可以在離線狀態(tài)下用USB連接Studio。但我個(gè)人最最最最喜歡的是?演示速度調(diào)節(jié)功能?，給開發(fā)看細(xì)節(jié)邏輯的時(shí)候經(jīng)常用到，如下：

△ 慢速演示，一切盡收眼底

三、真假難辨的保真度

追波?上隨便搜一下ProtoPie，就可以看到手機(jī)app、平板、橫屏、網(wǎng)頁、車控屏、智能冰箱、微波爐等多種平臺(tái)上的交互設(shè)計(jì)。原型保真度讓我很難分清是原型還是真實(shí)的產(chǎn)品。你也來看看下面這些我摘自Dribbble的作品，夠逼真不。

△ Dashboard設(shè)計(jì) - 鼠標(biāo)懸浮效果

△ 鍵盤輸入效果

△ 利用表達(dá)式制作

△ 金融App - 選擇銀行卡

四、交互制作邏輯清晰，小白也可以分分鐘上手

上面的作品看起來很高大上，感覺難以企及，其實(shí)再難的交互效果都是由?觸發(fā)動(dòng)作、反應(yīng)動(dòng)作、對象?，三者拼接起來的。不知道大家有沒有看過《微交互》這本書，里面就提到了和這個(gè)類似的公式(觸發(fā)+反應(yīng)+規(guī)則+循環(huán))。而ProtoPie就是還原交互本質(zhì)，不管是高手還是小白，都可以遵循這個(gè)本質(zhì)，馬上上手。

△ ProtoPie交互制作邏輯

在ProtoPie里，你需要做的就是把下面觸發(fā)動(dòng)作和反應(yīng)動(dòng)作拼到一起，逐漸組成最后的完整原型。

△ 交互思維邏輯寶典

直接上視頻吧，幫大家瞬間秒懂：（兩個(gè)交互模塊以拼接，搞定！）

△ 查看動(dòng)態(tài)ProtoPie制作交互邏輯 - 小白設(shè)計(jì)師也可馬上舉一反三

五、支持Adobe XD和Sketch無插件導(dǎo)入

根據(jù)需要，可以選擇帶入整個(gè)畫板或單個(gè)圖層，導(dǎo)入后不需要重新排版，直接開始添加交互動(dòng)作即可。

△ ProtoPie and Adobe XD CC

六、交互不再停留在界面元素，傳感交互+跨屏幕交互是新趨勢

△ 多個(gè)屏幕間的互動(dòng)將是設(shè)計(jì)新趨勢

生活中屏幕越來越多，觸發(fā)方式也增加了語音、手勢、傾斜角度等。那么IoT等產(chǎn)品的設(shè)計(jì)師要使用什么工具制作交互原型呢？ProtoPie站在技術(shù)前沿很好地填補(bǔ)這個(gè)空缺，推出了無代碼傳感交互制作功能。現(xiàn)在支持麥克風(fēng)、陀螺儀、指南針、距離、震動(dòng)等傳感。

△ ProtoPie 傳感交互-3個(gè)模塊無代碼完成語音交互界面

除了傳感，ProtoPie也是獨(dú)家支持無代碼跨屏幕交互。什么叫跨屏幕？手機(jī)遙控電視；手機(jī)點(diǎn)擊音樂播放后電腦上播放；多部手機(jī)掃描同一個(gè)平板上的二維碼...信息的輸入和顯示在多個(gè)屏幕上完成時(shí)，就稱為跨屏幕。

△? 查看動(dòng)態(tài)ProtoPie制作的跨手機(jī)和平板的游戲互動(dòng)。

不僅是屏幕間互動(dòng)，軟硬件的互動(dòng)也完全沒有問題，比如arduino。（估計(jì)小米的設(shè)計(jì)師會(huì)比較喜歡這個(gè)）這個(gè)功能我還沒用過，就不在這兒班門弄斧了，懂硬件的大牛可以再去找找相關(guān)資料。

七、價(jià)格99美元，永久使用，一年更新

官網(wǎng)?注冊會(huì)員，可以免費(fèi)獲得17天試用，之后就要付費(fèi)了。

優(yōu)設(shè)獨(dú)家5元優(yōu)惠券 →?https://partner.lizhi.io/uisdc/protopie

寫在結(jié)尾

• 交互設(shè)計(jì)不難：目標(biāo)用戶+用戶應(yīng)采取的行動(dòng)+給個(gè)動(dòng)作的目的+需帶給用戶的情感每個(gè)交互的設(shè)計(jì)只需都把這幾點(diǎn)考慮清楚。
• 原型設(shè)計(jì)不難：工具很多，上面是我選擇的標(biāo)準(zhǔn)，如果你和我有相似的需求，別猶豫，開始學(xué)習(xí)ProtoPie吧。
• 小白入門交互不難：多模仿，多訓(xùn)練思路，從學(xué)習(xí)工具開始也是一個(gè)不錯(cuò)的上路方法