好的工具是利器，壞的工具是鈍器。每個(gè)人都可以找得到最適合他的利器，我希望你也一樣。

如果你是 UX/UI 設(shè)計(jì)師，你一定會(huì)聽說過無數(shù)個(gè)交互原型工具。設(shè)計(jì)資訊網(wǎng)站總是不厭其煩地介紹新的交互原型工具，標(biāo)題通常是：

• 《這款最新的設(shè)計(jì)工具，也許你該上手試試》
• 《動(dòng)效設(shè)計(jì)神器！Sketch 絕佳搭配》
• 《30 秒制作交互原型的新晉神器》
• 《這才是適合設(shè)計(jì)師的動(dòng)效制作工具》
• 《2016 年十佳原型制作工具》

所以現(xiàn)狀很尷尬：在決定該學(xué)習(xí)哪個(gè)工具這件事上，很多人花費(fèi)的時(shí)間比學(xué)習(xí)工具的時(shí)間還要多。

如果你恰好就在猶豫，我希望這篇文章對(duì)你有幫助。

你可能還不需要

其實(shí)很多設(shè)計(jì)團(tuán)隊(duì)還沒有在實(shí)際項(xiàng)目中真正使用到交互原型。這跟設(shè)計(jì)流程有很大的關(guān)系。使用交互原型，意味著在設(shè)計(jì)流程中需要增加一個(gè)“制作交互原型”階段，甚至還需要在設(shè)計(jì)早期增加“用戶測試”。而大多數(shù)時(shí)候囿于“敏捷”，我們的流程僅僅是“需求評(píng)審-畫圖-設(shè)計(jì)評(píng)審-跟進(jìn)開發(fā)-觀察用戶反饋”。

所以，盡管全世界都在吆喝著交互原型工具非常重要，你也要知道：你學(xué)了，不一定能用得上。也就是說，如果你還有很多工具要學(xué)習(xí)，那么交互原型工具可能適合放在“重要而不緊急”的象限里。從 2015 年，也就是交互原型工具開始井噴的那一年，到現(xiàn)在，我在工作中從沒有遇到過不得不親自做交互原型的情況。

當(dāng)然，如果你所在的團(tuán)隊(duì)，或者你即將要加入的團(tuán)隊(duì)，他們的設(shè)計(jì)流程已經(jīng)包含了“制作交互原型”，那自然是非常緊急了。你肯定不愿意成為團(tuán)隊(duì)里唯一一個(gè)只會(huì)畫靜態(tài)原型的同學(xué)。

又或者，你發(fā)現(xiàn)工作中經(jīng)常需要用到的工具自己都掌握得差不多了，那也不妨開始著手學(xué)習(xí)。相信我，這是一個(gè)提升設(shè)計(jì)技能的好方式。

我們?cè)谑裁磿r(shí)候使用交互原型？

這兩年來我做過的交互原型不多，但是每一個(gè)都發(fā)揮了應(yīng)有的作用。在設(shè)計(jì)流程的不同階段，交互原型的作用會(huì)有所不同：

1. 探索方案的時(shí)候，給自己體驗(yàn)。當(dāng)你要嘗試一個(gè)市場上還沒有出現(xiàn)過的設(shè)計(jì)方案時(shí)，你一定會(huì)非常糾結(jié)，因?yàn)槟悴恢缹?shí)際用起來會(huì)怎樣。
2. 展示設(shè)計(jì)方案的時(shí)候，說服同事。對(duì)于設(shè)計(jì)方案的傳達(dá)，語言是蒼白的，畫圖要有用的多；線框圖是蒼白的，高保真的效果圖要有用的多；而有些時(shí)候，效果圖也是蒼白的，只有真正動(dòng)起來的界面，才能最真實(shí)地傳達(dá)你的想法。
3. 早期用戶測試的時(shí)候，驗(yàn)證方案。在設(shè)計(jì)早期開發(fā)通常不會(huì)介入。這時(shí)候如果需要做用戶測試的話，你希望用戶拿著幾張截圖去想象自己會(huì)怎么用嗎？
4. 輸出設(shè)計(jì)方案的時(shí)候，保證還原度。工程師恍然大悟地說“哦我知道是怎樣的效果了”的時(shí)候，你們倆腦海里的畫面可能根本不一樣。別問我是怎么知道的……

把交互原型帶入日常工作中之后，我發(fā)現(xiàn)自己的思維方式發(fā)生了改變。以前想到一個(gè)新方案，可能會(huì)擔(dān)心開發(fā)出來并沒有想象中好用，于是擱置；現(xiàn)在不管想到什么奇怪的方案，如果真心喜歡，總會(huì)先把交互原型做出來，然后找同事一起討論。以前提出一個(gè)方案如果被否定了，會(huì)糾結(jié)幾天，覺得一個(gè)偉大的創(chuàng)意被埋沒了；現(xiàn)在一言不合就去把原型做出來給大家看，然后大家發(fā)現(xiàn)原來還真的不錯(cuò)——哪怕大家還是覺得不好，我也不會(huì)再糾結(jié)了，因?yàn)槿绻麄凅w驗(yàn)到了最真實(shí)的效果卻仍然不為所動(dòng)，說明這個(gè)方案確實(shí)沒那么好。

如何選擇

如開頭所說，現(xiàn)在的交互原型工具已經(jīng)多到需要評(píng)出個(gè)“十佳”。幸好，時(shí)間不僅是個(gè)庸醫(yī)，還是個(gè)篩子。兩年過去了，孰好孰壞我們至少能略知一二。

選擇交互原型工具首先要看團(tuán)隊(duì)。如果你的團(tuán)隊(duì)都在用 Principle，并且使用得非常愉快，那么你也很適合選擇 Principle。因?yàn)楫?dāng)你在學(xué)習(xí)的道路上遇到困難，尋求你旁邊的同事幫忙顯然會(huì)比跪求論壇上的“大神”幫忙更加有效。而且，源文件共享也可以提高團(tuán)隊(duì)的協(xié)作效率。

然后是看需求。有些設(shè)計(jì)師想做的原型包含著非常復(fù)雜的頁面跳轉(zhuǎn)，而有些設(shè)計(jì)師想做的原型只是兩三個(gè)頁面間的細(xì)膩動(dòng)效。這兩種需求分別對(duì)應(yīng)著基于頁面和基于圖層的交互原型工具。對(duì)于后者，我推薦 Principle、Origami 和 Framer。而對(duì)于前者，我沒有相關(guān)需求，所以并沒有深入了解，如果真要選的話，Adobe XD、InVision 和 Flinto 可能不錯(cuò)。需要強(qiáng)調(diào)的是，基于頁面的原型工具做不了復(fù)雜的微交互。

最后是看個(gè)人偏好。上面提到的每個(gè)工具都有自己獨(dú)特的優(yōu)勢（以及劣勢）：

• Principle 易上手，卻能做到非常好的效果。可能是綜合得分最高的一款。
• Origami 是可視化編程的思路，功能強(qiáng)大，由 Facebook 團(tuán)隊(duì)維護(hù)。學(xué)習(xí)成本較高。
• Framer 則是基于 JavaScript，理論上現(xiàn)代瀏覽器中所能實(shí)現(xiàn)的效果它都沒問題。需要手寫代碼，學(xué)習(xí)成本較高。
• Adobe XD 有品牌保證，而且支持 Windows 平臺(tái)。
• InVision 來自一個(gè)非常有想法的團(tuán)隊(duì)，順便推薦他們的博客。
• Flinto 操作簡單，基于頁面，同時(shí)也可以做一些微交互。

你最關(guān)心的問題可能是這個(gè)工具是不是足夠強(qiáng)大，以及會(huì)不會(huì)很難學(xué)。事實(shí)上，學(xué)習(xí)成本與工具能力始終反相關(guān)，所以當(dāng)你決定去學(xué)習(xí)一款功能強(qiáng)大的原型工具時(shí)，迎接你的可能是充滿挑戰(zhàn)（和樂趣）的旅程；而如果你只想投入有限的時(shí)間和精力，那不妨選擇一款容易上手、功能夠用的。

我個(gè)人最喜歡的是 Framer，盡管它的學(xué)習(xí)曲線非常陡峭。

其他建議：

• 你可能還聽說過 Pixate 和 Form，但自從 Google 把它們收購之后就再也沒有消息了，所以不建議你去學(xué)
• 警惕新出的工具，除非你真的有時(shí)間去嘗鮮或試錯(cuò)
• 在實(shí)際項(xiàng)目中找機(jī)會(huì)去使用交互原型，這能讓你學(xué)得更快

我從來不認(rèn)同“工具沒有優(yōu)劣之分，主要看使用工具的人”的說法。好的工具是利器，壞的工具是鈍器。每個(gè)人都可以找得到最適合他的利器，我希望你也一樣。

作者：張土福，交互設(shè)計(jì)師@魅族科技

來源：https://zhuanlan.zhihu.com/p/26658087

本文由 @張土福 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自StockSnap.io，基于 CC0 協(xié)議