我花了兩個(gè)多月的時(shí)間，每周末更新一個(gè)模塊，終于講完了交互設(shè)計(jì)師職業(yè)技能的前兩個(gè)部分：思維和眼界。這兩個(gè)部分的重要程度和工作量是成正比的，總共有九個(gè)模塊，每個(gè)都有七八千字左右，這么算下來，這個(gè)系列我前后已經(jīng)寫了有七萬字了……今天繼續(xù)開新坑，講講交互設(shè)計(jì)師應(yīng)該掌握的“手段”，也就是偏技術(shù)和工具型的技能。

這是交互設(shè)計(jì)師的雙手和武器庫。這應(yīng)該是所有設(shè)計(jì)師最容易注意到的技能，也是最容易掌握的技能了，畢竟如果你不會(huì)一兩個(gè)原型工具和設(shè)計(jì)軟件，你都不好意思說自己是交互設(shè)計(jì)師吧？

但是這個(gè)武器庫中又存在著很多容易被人忽略的東西，比如高保真原型工具，比如用研方法，又比如編程語言，這些武器用好了不僅能為你加分，更有可能幫你度過一些原本過不去的難關(guān)。

同時(shí)，就算是再熟悉不過的Axure和Sketch，里面也有很多提高效率的小技巧，你比別人每天快的這一點(diǎn)點(diǎn)，就決定了你是真的精通還是假的熟練，也決定了你做項(xiàng)目的效率。

慣例更新技能樹Map，版本已經(jīng)是2.0了，剛好代表新的開始：

既然是交互設(shè)計(jì)師，手段部分首先要講的當(dāng)然就是交互原型工具了，根據(jù)它們各自擅長(zhǎng)畫的原型類型，我把原型工具分為三類：

1. 概念原型：用簡(jiǎn)單的草圖將口頭原型可視化，甚至還能做頁面跳轉(zhuǎn)和簡(jiǎn)單的可用性測(cè)試；
2. 框架原型：包含所有頁面和邏輯細(xì)節(jié)的原型呈現(xiàn)方式，這也是交互原型最主要的輸出形式；
3. 仿真原型：適合用來表現(xiàn)復(fù)雜的動(dòng)畫邏輯，用來給客戶、老板做演示，或者是做正式開發(fā)前的可用性測(cè)試。

一、概念原型

如果你是一位新入行的交互設(shè)計(jì)師，或者你要做一個(gè)全新的產(chǎn)品設(shè)計(jì)，我強(qiáng)烈建議你要重視這個(gè)階段的原型設(shè)計(jì)。

產(chǎn)品經(jīng)理給你提了一個(gè)需求，你們做了充分的討論之后，到底你們說的這個(gè)方案做出來的效果是怎樣的？可能你們口頭上達(dá)成一致了，但是兩個(gè)人想象中的東西卻完全不一樣，可能你覺得最好吃的是蘋果，他卻認(rèn)為是香蕉。

這個(gè)時(shí)候，最好是用圖來說話，而且是可以快速畫快速改的草圖。

1. 紙面原型

除了口頭原型，最好理解也是最快速的方案就是——紙質(zhì)原型。

紙質(zhì)原型可以是在紙上快速手繪的，也可以是在電腦上畫好之后打印出來。

如果是為了討論后快速呈現(xiàn)創(chuàng)意，那你可以選擇前者；如果是已經(jīng)基本敲定了部分界面，需要在此基礎(chǔ)上繼續(xù)腦暴，那你可以選擇后者，把原型全部打印出來，貼在會(huì)議室的白板上邊講解邊討論，有問題直接在旁邊涂改。

你可能不知道的是，紙質(zhì)原型也能用來做用戶測(cè)試：在紙質(zhì)原型外面套一層機(jī)器外殼，見下圖（圖左和圖右下），當(dāng)用戶做一個(gè)模擬操作之后，測(cè)試人員再給用戶更換下一級(jí)界面，從而達(dá)到快速測(cè)試的目的。

2. POP

當(dāng)有了一系列的手繪原型后，你可能會(huì)想把它們保存下來，你可能會(huì)覺得這種套紙殼的方式成本比較高，那有沒有軟件能夠幫我們把紙質(zhì)原型進(jìn)行再加工？

當(dāng)然有的。

如果你是做移動(dòng)端產(chǎn)品的，還有一個(gè)福利推薦給你，這款叫做“POP – Prototyping on Paper”的軟件可以用來將你畫好的紙質(zhì)原型拍照存檔，然后再用簡(jiǎn)單的創(chuàng)建點(diǎn)擊區(qū)域和跳轉(zhuǎn)鏈接的方式，把你的所有原型頁面串聯(lián)起來，做成一個(gè)可以在手機(jī)上快速體驗(yàn)的原型。

有了這個(gè)，一會(huì)功夫你就能做出一個(gè)可操作的“APP”了。

3. Balsamiq

可能有人會(huì)說，我不擅長(zhǎng)手繪啊，有沒有可以不用手繪，又能快速畫草圖的軟件？

當(dāng)然也是有的。

這款叫做Balsamiq的軟件歷史也很悠久了，我最開始入行的時(shí)候還挺喜歡用這個(gè)的，畢竟上手簡(jiǎn)單，畫原型速度又挺快，一般用來表達(dá)創(chuàng)意足夠了。而且它支持Windows和Mac兩個(gè)平臺(tái)，甚至還有Web版，在適配性方面是沒問題的。

上面這就是它的主界面，風(fēng)格是不是很手繪？

不止如此，Balsamiq最強(qiáng)大的地方在于，它有大量的控件，你拖一拖改一改，一個(gè)APP或者網(wǎng)站就出來了。同時(shí)，這些控件還支持你快速修改內(nèi)容，比如下面的多標(biāo)簽控件和列表控件：

你基本上不需要畫任何東西，只需要按照它給你的模版改改格式就好了，比如上面iOS風(fēng)格的開關(guān)，你只需要在這個(gè)控件里寫上：

On button, ON

就會(huì)出現(xiàn)一個(gè)“ON”狀態(tài)，標(biāo)題是“On button”的開關(guān)控件了。

當(dāng)你全部設(shè)計(jì)好后，還可以導(dǎo)出PDF格式的文檔，頁面還支持點(diǎn)擊和跳轉(zhuǎn)，其他人收到文檔就能直接看，可以說是很方便了。

二、框架原型

概念原型主要還是用來討論和快速修改用的，產(chǎn)品經(jīng)理也可以用它來給設(shè)計(jì)師們提需求。

交互設(shè)計(jì)師們最主要的輸出物，還是用Axure和Sketch等軟件畫的交互框架。

1.Axure RP

只要提到原型工具，就不得不提到它——Axure RP，它對(duì)于交互設(shè)計(jì)師來說已經(jīng)是必會(huì)的軟件，相當(dāng)于Photoshop之于視覺設(shè)計(jì)師，PowerPoint之于幻燈片設(shè)計(jì)者。

下圖是我之前在金蝶做的一個(gè)交互稿，出于保密原則，只放一個(gè)翻頁系統(tǒng)給做示意：

Axure的優(yōu)點(diǎn)：

1. 上手門檻低，任何人都可以很容易就能學(xué)會(huì)用它畫原型；
2. 頁面結(jié)構(gòu)清晰，適合設(shè)計(jì)網(wǎng)站和界面很多的APP；
3. 可以創(chuàng)建項(xiàng)目?jī)?nèi)復(fù)用的母版，也可以導(dǎo)入他人創(chuàng)建的控件庫，提高制作原型的效率；
4. 只需要通過點(diǎn)擊和菜單操作就能很方便地創(chuàng)建交互動(dòng)作和頁面跳轉(zhuǎn)邏輯；
5. 將視覺設(shè)計(jì)師的設(shè)計(jì)稿切圖后導(dǎo)入，可以制作保真度很高的原型。

Axure的缺點(diǎn)：

1. 畫出的原型稿效果比較粗糙，快捷鍵不夠方便；
2. 所有交互動(dòng)畫都需要手動(dòng)設(shè)置，如果動(dòng)畫比較復(fù)雜，設(shè)置的復(fù)雜程度和難度都很高。

當(dāng)年我真是花了大力氣研究各種動(dòng)畫效果，可以說幾乎你要什么效果我都能做出來。

但是Axure的交互動(dòng)畫真的是個(gè)坑，以前我為了實(shí)現(xiàn)一個(gè)比如下拉刷新這類的動(dòng)畫，經(jīng)常要琢磨半天，然后搞一大堆設(shè)置，才能實(shí)現(xiàn)一個(gè)比較糙的效果，而且在其他地方還不能復(fù)用。

關(guān)于Axure的入門教程和使用技巧，網(wǎng)上非常多，我這里就不多做介紹了，大家可以自行搜索。

想要看書的話，你可以去看看Axure官方推薦的中國(guó)區(qū)培訓(xùn)講師小樓一夜聽春雨寫的《Axure RP8入門手冊(cè)：網(wǎng)站和App原型設(shè)計(jì)從入門到精通》，我之前看的那本太老了，就不推薦了。

2. Sketch

相信你們對(duì)這個(gè)名字一定已經(jīng)很熟悉了，如果說Photoshop是最老牌的設(shè)計(jì)軟件，那Sketch無疑就是新銳中最簡(jiǎn)潔、最具生產(chǎn)力的代表。特別是移動(dòng)端App的設(shè)計(jì)，無論是交互設(shè)計(jì)師、視覺設(shè)計(jì)師甚至是開發(fā)，都已經(jīng)在大量使用Sketch來做設(shè)計(jì)。

Sketch的優(yōu)點(diǎn)：

1. 相比PS，它作為設(shè)計(jì)軟件的上手門檻算得上是極低了；
2. 所見即所得的設(shè)計(jì)模式，新手可以不用考慮圖層的問題；
3. 全矢量的繪制方式，加上提供的各種尺寸的畫布，元素可以無損縮放和自適應(yīng)位置，各種設(shè)備屏幕適配起來很方便；
4. 可以通過創(chuàng)建元件模版的方式，提高設(shè)計(jì)復(fù)用的效率，如果做好了一套完善的元件規(guī)范模版，甚至還能做到一兩步的操作就能給所有設(shè)計(jì)稿換膚；
5. 豐富的插件庫，自動(dòng)切圖標(biāo)注、創(chuàng)建原型動(dòng)畫、Icon Fonts圖標(biāo)庫等等，用好這些可以進(jìn)一步提升你的工作效率；
6. 大量日常操作都可以用快捷鍵完成，對(duì)于交互設(shè)計(jì)來說足夠用了，用來畫原型框架的效率比Axure和Fireworks高上一個(gè)檔次；
7. iOS、Android都提供了各自系統(tǒng)的控件庫，如果你是做原生App風(fēng)格的設(shè)計(jì)，直接用那些拼一拼就能很快做個(gè)出來。同時(shí)他們做的這些控件庫也可以作為你設(shè)計(jì)元件模版的參考；
8. 和Mac上那些高保真原型工具如Principle、Framer等都能搭配使用，直接把設(shè)計(jì)稿導(dǎo)入到它們里面，繼續(xù)做動(dòng)畫；
9. 最近的版本（49.0）也開始支持創(chuàng)建基本的原型流程動(dòng)畫了，離一站式原型設(shè)計(jì)工具不遠(yuǎn)了。

Sketch的缺點(diǎn)：

1. 最大的缺點(diǎn)就是只有Mac版，而且是訂閱制的收費(fèi)模式，不能買斷終身；
2. 對(duì)于位圖的處理能力遠(yuǎn)遠(yuǎn)比不上PS，更適合做UI，如果是修大圖和照片，還是老老實(shí)實(shí)用PS；
3. 對(duì)于原型動(dòng)畫的支持還是有限，現(xiàn)在主要是用來畫平面的交互框架稿，高保真還是留給專業(yè)工具來做。

Sketch也是我現(xiàn)在的主力畫原型的工具，為了用它我甚至自費(fèi)買了臺(tái)27寸的iMac放公司，就為了使用Mac上的這些設(shè)計(jì)軟件。如果你覺得Axure畫的原型太丑，用PS和AI畫原型太麻煩，那真的十分推薦你試試Sketch，它之所以能成為現(xiàn)在國(guó)內(nèi)外互聯(lián)網(wǎng)設(shè)計(jì)團(tuán)隊(duì)的主力設(shè)計(jì)工具之一，當(dāng)然是有理由的。

而且它的上手難度確實(shí)不高，如果只是畫畫交互，你甚至連教程都不用看。

3. Fireworks

Fireworks是以前CDC團(tuán)隊(duì)一直用來設(shè)計(jì)交互的工具，它最大的好處也是所見即所得，還能同時(shí)處理矢量和位圖，而且和Photoshop同為Adobe系列軟件，操作方式很像，上手也很容易。

它雖然也有圖層和頁面管理功能，但是源文件竟然是 *.fw.png 的格式，可以被一般的看圖軟件當(dāng)做PNG圖片來查看，和團(tuán)隊(duì)其他成員之間的交流非常方便，做完之后直接發(fā)給產(chǎn)品經(jīng)理看就好了。

它支持Windows和Mac平臺(tái)，如果你沒有Mac用不了Sketch，那用Fireworks也是一個(gè)不錯(cuò)的選擇。但它最大的問題是，Adobe已經(jīng)放棄這條產(chǎn)品線了，最新的版本永遠(yuǎn)停留在了CS6，當(dāng)然目前來說還是夠用了。

三、仿真原型

我在之前的開發(fā)思維和設(shè)計(jì)流程中都強(qiáng)調(diào)過高保真原型的重要性，作為新時(shí)代的交互設(shè)計(jì)師，如果還不會(huì)幾種高保真原型工具你都不好意思跟人打招呼……

這個(gè)分類下的軟件也有很多，我就講三個(gè)最有代表性的吧。

1. Principle

Principle的特點(diǎn)：Pro

• 平臺(tái)：Mac
• 難度：低，上手速度快
• 效果：中，能實(shí)現(xiàn)的主要是動(dòng)畫效果，提供的交互動(dòng)作接口較少，不具備條件判斷的功能，做不了復(fù)雜的交互邏輯；
• 輸出：Mac原生程序（對(duì)方點(diǎn)開即用）、GIF動(dòng)畫、視頻錄像。

它的上手難度真的很低，能實(shí)現(xiàn)的動(dòng)畫效果也很不錯(cuò)，推薦給所有人使用，至少做個(gè)移動(dòng)端的簡(jiǎn)單演示Demo足夠了。

2.?Proto.io

Proto.io的特點(diǎn)：

• 平臺(tái)：Web；
• 難度：中，類似Axure一樣的操作，最大的難度在于它是英文版的；
• 效果：高，在不使用代碼的前提下，它能夠?qū)崿F(xiàn)的交互動(dòng)畫效果是最多、最強(qiáng)大的，光是有時(shí)間線和動(dòng)畫曲線設(shè)置這點(diǎn)就已經(jīng)比Axure強(qiáng)了一個(gè)數(shù)量級(jí)，而且還在不斷更新；
• 輸出：HTML，類似Axure的輸出物，可以打包發(fā)給對(duì)方，也可以提供在線網(wǎng)址給對(duì)方訪問，可以設(shè)置權(quán)限。

我們團(tuán)隊(duì)之前用它設(shè)計(jì)出了很多效果非常棒的高保真原型，比如當(dāng)時(shí)在做騰訊電腦管家V11.0的改版時(shí)，我就用它設(shè)計(jì)了垃圾清理模塊的Demo：

當(dāng)時(shí)我們就是用這些Demo，提前做了可用性測(cè)試來驗(yàn)證用戶的接受度，再加上詳細(xì)的動(dòng)畫說明，最終讓開發(fā)完美還原了設(shè)計(jì)效果。

3. Framer

Framer的特點(diǎn)：

• 平臺(tái)：Mac
• 難度：高，設(shè)計(jì)界面和Sketch一樣方便，但是做動(dòng)畫的難度比較高，它就是傳說中要寫代碼的原型工具；
• 效果：高，由于有了代碼的支持以及豐富的交互動(dòng)作接口，它幾乎能實(shí)現(xiàn)你想要的所有效果，還能邊做邊測(cè)試，可以說是終極高保真原型設(shè)計(jì)工具了；
• 輸出：HTML，也是類似Axure的輸出物，同樣也能上傳到云端進(jìn)行分享，也可以設(shè)置訪問權(quán)限。

這張動(dòng)圖給你感受下用代碼做動(dòng)畫：

其實(shí)說是要寫代碼，但是它的代碼學(xué)起來真的算是很簡(jiǎn)單的，用的是一種叫做CoffeeScript的語言，比起JavaScript來說簡(jiǎn)單太多了。

四、選擇適合你的就好

無論是框架原型還是仿真原型，可以用的工具都有很多，還有很多我沒介紹的，比如墨刀、Flinto、Origami、ProtoPi和Hype等，我只是介紹了幾個(gè)具有代表性的、我們自己在用的軟件，你完全可以再去看看其他的。

畢竟，用什么軟件是要看你的設(shè)計(jì)流程、你的團(tuán)隊(duì)要求的，輸出決定輸入嘛，你想要怎樣的效果，就用怎樣的軟件來實(shí)現(xiàn)，適合自己的才是最好的。

相關(guān)閱讀

交互設(shè)計(jì)師應(yīng)具備的技能樹（1）：產(chǎn)品思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（2）：設(shè)計(jì)師的用戶思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（3）：設(shè)計(jì)師的邏輯思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（4） ：交互設(shè)計(jì)師的視覺思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（5）：交互設(shè)計(jì)師的開發(fā)思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（6）| 如何積累交互模型？

交互設(shè)計(jì)師應(yīng)具備的技能樹（7）| 設(shè)計(jì)師要懂用戶心理

交互設(shè)計(jì)師應(yīng)具備的技能樹（8） | 平臺(tái)規(guī)范有什么用？

交互設(shè)計(jì)師應(yīng)具備的技能樹（9）| 設(shè)計(jì)流程的三個(gè)階段

#專欄作家#

WingST（微信公眾號(hào)：落羽敬齋），騰訊MIG高級(jí)交互設(shè)計(jì)師，9年從業(yè)經(jīng)驗(yàn)的資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖的圖片授權(quán)基于：CC0協(xié)議