編者按：近年來，交互設(shè)計(jì)被越來越多的提及，并且還產(chǎn)生出了新的工作崗位「交互設(shè)計(jì)師」，而且交互設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中所占的地位也越來越重要。我也是一直想轉(zhuǎn)交互，了解過Flinto、Principle、Framer、Origami等等，但不是原型保真度不滿意，就是學(xué)起來太難，或者就是各種代碼表達(dá)式，很難上手。

我對交互工具的要求：

• 別讓我寫代碼
• 支持Sketch導(dǎo)入
• 支持Windows和Mac（因?yàn)槲矣袃膳_電腦）
• 協(xié)作時(shí)方便分享，最好線上線下都可以
• 保真度一定要高，不能只停留在頁面跳轉(zhuǎn)

一天在網(wǎng)上閑逛的時(shí)候，無意中看到一篇文章說有款原型設(shè)計(jì)工具獲得了設(shè)計(jì)界大獎(jiǎng)——紅點(diǎn)獎(jiǎng)「紅點(diǎn)獎(jiǎng)是設(shè)計(jì)界3大獎(jiǎng)項(xiàng)之一」點(diǎn)進(jìn)去一看是一個(gè)叫ProtoPie的工具。谷歌了一下: 韓國團(tuán)隊(duì)開發(fā)，2017年1月上線，國內(nèi)有阿里、一加等很多團(tuán)隊(duì)在用，國外有谷歌、Line、星巴克在用。

Protopie

（http://www.protopie.cn/）

△ ProtoPie官網(wǎng)截圖

其實(shí)之前聽圈里朋友提過，但沒用過。既然這次又被我碰上了，索性就下載試一下吧。下面是ProtoPie的測評：

節(jié)約時(shí)間，先說結(jié)論：

• ProtoPie適合做單頁面移動(dòng)端的原型
• 保真度比Flinto和Principle高，學(xué)習(xí)難度比Framer要低（很多）
• 交互全，原型制作時(shí)間平均在1-2個(gè)小時(shí)左右。（單畫面的交互動(dòng)作）
• 傳感交互是亮點(diǎn)，尤其是手機(jī)和硬件Arduino交互的功能眼前一亮
• 工具學(xué)習(xí)時(shí)間 2個(gè)小時(shí)（有可能和我學(xué)過一些其他工具有關(guān)，挺快的）
• 適合制作微交互原型，如果只制作頁面跳轉(zhuǎn)有點(diǎn)屈才

一. 大福利：支持Windows和Mac，擁有中文界面

像我這種一臺Windows一臺Mac辦公的設(shè)計(jì)師，簡直太良心了。用Windows的設(shè)計(jì)師都知道，除了Adobe家大業(yè)大，知道開發(fā)Windowns的設(shè)計(jì)工具以外，留給我們可選擇的交互工具寥寥無幾，ProtoPie可以說絕對是Windows用戶設(shè)計(jì)師的福利。ProtoPie說是支持Win10，不過在我的Win7上運(yùn)行似乎也沒有什么毛病。

△ 支持Mac和Win64、Win32

其實(shí)英文界面對我也還好，不過有中文界面的話，確實(shí)上手的時(shí)候會(huì)輕松很多。

△ ProtoPie歡迎界面

二. 界面設(shè)計(jì)：功能區(qū)分清晰，不需要寫代碼，操作簡單

△ ProtoPie的直觀界面

△ ProtoPie交互制作邏輯

ProtoPie的邏輯其實(shí)和我跟開發(fā)人員說交互時(shí)候的邏輯挺像的。官網(wǎng)上有這樣一個(gè)表，列舉了移動(dòng)端上常用到的交互動(dòng)作，動(dòng)作雖然不全，但這種思維方式是我很推崇的。

△ 交互思維邏輯寶典

三. 學(xué)習(xí)成本低：有中文教程，用了2個(gè)小時(shí)全部學(xué)完

用ProtoPie做一個(gè)交互只需4步：

• 添加素材
• 添加點(diǎn)擊動(dòng)作
• 添加反應(yīng)動(dòng)作
• 預(yù)覽效果

點(diǎn)擊動(dòng)作和反應(yīng)動(dòng)作，ProtoPie都給好了，根據(jù)需要選擇就行。整個(gè)過程和玩拼圖一樣，很簡單。

官網(wǎng)也提供了詳細(xì)的教程：

四. 交互效果：交互細(xì)致，支持條件判斷

ProtoPie在做移動(dòng)端交互上很牛，尤其是有條件判斷（If else 這種）所以做的原型都很高大上。比如下拉刷新、立體旋轉(zhuǎn)等等。其實(shí)自己也有做，不過沒有官網(wǎng)上的絢麗，就先不出來丟人了，等回頭再研磨一下再發(fā)，下面是官網(wǎng)上的案例。

△ 官網(wǎng)4個(gè)小案例

這些在其他工具上做就太費(fèi)勁了，頁面和代碼一堆一堆的，做不做得出來還不一定。

五. 預(yù)覽和分享：iOS &安卓手機(jī)、網(wǎng)頁、電腦即時(shí)預(yù)覽

現(xiàn)在我已經(jīng)陸續(xù)在工作中用ProtoPie，并推薦給開發(fā)了。是的，不是設(shè)計(jì)師，是開發(fā)。我們的開發(fā)和我不在一層樓，能用企業(yè)QQ說的就敲字，說不清的時(shí)候直接丟一個(gè)Pie鏈接過去，讓他自己看效果。

預(yù)覽和分享方法一共三種：

• 在電腦預(yù)覽窗上看，實(shí)時(shí)同步
• 發(fā)送到手機(jī)上的ProtoPie App，保存到手機(jī)，隨時(shí)可以離線查看
• 上傳到網(wǎng)頁上，生成鏈接，發(fā)到工作群里大家一起看

最后，看的人不需要安裝ProtoPie，有個(gè)鏈接就能看，良心功能啊。

六. 傳感交互：手機(jī)原型能控制智能燈？

這個(gè)功能一定要留到最后壓軸說，很神！先看下面的視頻。請注意，所有設(shè)備上的畫面都是ProtoPie做的原型！

跨設(shè)備交互，很高大上的感覺！以前從來沒想過，像我這種表達(dá)式代碼不太靈的人還能做這種交互。而且ProtoPie上做起來超級容易。好心寫一下做法：

• 新建一個(gè)文檔，像配圖左邊一樣插入觸發(fā)動(dòng)作和發(fā)送
• 在新建一個(gè)文檔，插入接收和移動(dòng)
• 在發(fā)送和接收的豎向那里寫一樣的代碼，比如123
• 一個(gè)文檔的交互發(fā)送到手機(jī)1，另一個(gè)發(fā)送到手機(jī)2
• 單擊手機(jī)1，手機(jī)2上的圖層就會(huì)移動(dòng)了

七. 支持Sketch導(dǎo)入，多觸點(diǎn)手勢

用Sketch的話這個(gè)功能不多說，正是我需要的。導(dǎo)入后不需要重新排版，直接開始加交互動(dòng)作就可以。

支持5根手指的手勢。不過你的設(shè)備屏幕不夠大，一般2個(gè)足以了。

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

獨(dú)家優(yōu)惠來了！

正值雙11，優(yōu)設(shè)和ProtoPie 、數(shù)碼荔枝合作給讀者專屬優(yōu)惠，中國版僅需299元，就能永久提高工作效率，附上優(yōu)設(shè)專屬優(yōu)惠券，領(lǐng)取后再減五元 →?https://partner.lizhi.io/uisdc/protopie

其實(shí)交互設(shè)計(jì)并沒有你想象中的那么難上手，想要做出高大上的交互效果就是如此簡單。

歡迎關(guān)注作者的微信公眾號「UIfaner」

「從新人到大牛的交互設(shè)計(jì)完全修煉手冊」

想做交互設(shè)計(jì)師？先來了解一下它是什么！

《5分鐘看完！一份簡單易懂的交互設(shè)計(jì)入門手冊》

阿里資深設(shè)計(jì)師手把手帶你認(rèn)識交互設(shè)計(jì)！

《交互設(shè)計(jì)那些事兒（一）》

《交互設(shè)計(jì)那些事兒（二）》

多位資深前輩經(jīng)驗(yàn)合集！交互設(shè)計(jì)師自學(xué)指南！

《寫給完全零基礎(chǔ)新人的交互設(shè)計(jì)入門指南》

《超全面！給交互設(shè)計(jì)初學(xué)者的完全自學(xué)指南》

《高手總結(jié)！交互設(shè)計(jì)基礎(chǔ)知識的精華版參考手冊》

《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com