一小時上手，分分鐘作出高大上交互動效。Win&Mac雙平臺，支持Sketch和AdobeXD無插件導入...

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

今天就來說說設計工具里面的小分支：交互原型工具。選個好的交互工具很重要，而好的原型工具應該具有以下基本特質：

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

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

• 小白也可以馬上學會，我當時用了30分鐘做出了第一個交互原型
• 支持Sketch、?Adobe XD?等無插件導入
• 支持?Windows?和Mac，以及?安卓?和iOS上的預覽
• 支持線上分享，離線預覽
• 高保真，除了頁面串聯還要能打造交互細節（后面有作品）
• 隱藏福利：支持傳感交互 + 多屏幕間的互動

△ 外媒對ProtoPie的評價

下面具體來說一下。

優設獨家5元優惠券 →??https://partner.lizhi.io/uisdc/protopie

一、國內外大公司為其背書

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

△ ProtoPie官網上寫的背書公司

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

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

△ 支持Mac和Win64、Win32

ProtoPie由制作部分 - Studio和演示部分-Player組成。這個Player是真真的不錯：除了可以保存原型方便實時拿出來查看，還可以在離線狀態下用USB連接Studio。但我個人最最最最喜歡的是?演示速度調節功能?，給開發看細節邏輯的時候經常用到，如下：

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

三、真假難辨的保真度

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

△ Dashboard設計 - 鼠標懸浮效果

△ 鍵盤輸入效果

△ 利用表達式制作

△ 金融App - 選擇銀行卡

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

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

△ ProtoPie交互制作邏輯

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

△ 交互思維邏輯寶典

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

△ 查看動態ProtoPie制作交互邏輯 - 小白設計師也可馬上舉一反三

五、支持Adobe XD和Sketch無插件導入

根據需要，可以選擇帶入整個畫板或單個圖層，導入后不需要重新排版，直接開始添加交互動作即可。

△ ProtoPie and Adobe XD CC

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

△ 多個屏幕間的互動將是設計新趨勢

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

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

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

△? 查看動態ProtoPie制作的跨手機和平板的游戲互動。

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

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

官網?注冊會員，可以免費獲得17天試用，之后就要付費了。

優設獨家5元優惠券 →?https://partner.lizhi.io/uisdc/protopie

寫在結尾

• 交互設計不難：目標用戶+用戶應采取的行動+給個動作的目的+需帶給用戶的情感每個交互的設計只需都把這幾點考慮清楚。
• 原型設計不難：工具很多，上面是我選擇的標準，如果你和我有相似的需求，別猶豫，開始學習ProtoPie吧。
• 小白入門交互不難：多模仿，多訓練思路，從學習工具開始也是一個不錯的上路方法