資深交互設(shè)計(jì)師推薦的6大必備神器

當(dāng)下，交互設(shè)計(jì)被喊成了一個(gè)設(shè)計(jì)口號(hào)，“注重交互”“交互體驗(yàn)要好”，一個(gè)交互設(shè)計(jì)師關(guān)注用戶的體驗(yàn),但是他們更多地著眼于如何將這種影響體現(xiàn)在用戶界面的信息架構(gòu),用戶操作的流程上。這其中就少不了交互設(shè)計(jì)軟件的配合了。

不想在錯(cuò)誤的軟件上花功夫?花五分鐘看完這篇!今天推薦的這6款交互設(shè)計(jì)工具全是經(jīng)過@敖廠長(zhǎng)UX 上手研究過的，優(yōu)缺點(diǎn)都總結(jié)出來了，看完相信同學(xué)們就有答案了。

1. After Effects

你想在短時(shí)間內(nèi)制作復(fù)雜演示效果。 請(qǐng)使用AE，曲線/錨點(diǎn)等使用MOTION V2腳本進(jìn)行快速調(diào)整(在曲線界面中 鼠標(biāo)拖動(dòng)選擇關(guān)鍵幀–>拖動(dòng)腳本上的滑塊–>對(duì)比緩動(dòng)曲線 獲得你想要的曲線效果，比其他腳本好用的在于曲線你可以進(jìn)行自定義，表達(dá)式也好修改–>不會(huì)改的話學(xué)點(diǎn)JS咯)，你熟練AE的話能很快得到比較好的效果。AE缺點(diǎn)就是不可交互+精準(zhǔn)度很難控制，當(dāng)然有一個(gè)點(diǎn)就是，你想要什么效果 AE都能實(shí)現(xiàn)。但是程序上能不能實(shí)現(xiàn)就難說啦。

2. PIXATE，圖層類交互原型軟件

最近被GOOGLE購(gòu)買了，然后免費(fèi)了(說實(shí)話GOOGLE 可以說是產(chǎn)品殺手，進(jìn)去的產(chǎn)品。。。我不敢茍同樓上們的那些說法)。

優(yōu)點(diǎn)：可交互，共享性強(qiáng)，有團(tuán)隊(duì)討論以及回復(fù)模塊(此處有點(diǎn)像justinmind)【有windows版本】，對(duì)GOOGLE MATERIAL DESIGN的支持比較好，MD相關(guān)預(yù)設(shè)會(huì)越來越多哦。

缺點(diǎn)：圖層類軟件你們都懂得，用AE做可交互已經(jīng)很煩了，更何況再加上一個(gè)交互模塊，而且沒有時(shí)間線啊。

用Pixate煩人的一點(diǎn)是，我是用750*1334做的，然后導(dǎo)進(jìn)去發(fā)現(xiàn)，這貨是按照375*667啊，而且不能直接從sketch粘貼，能別這么麻煩么。

Form和origami都是支持粘貼的。還有 動(dòng)畫預(yù)設(shè)較少。不過GOOGLE是動(dòng)畫狂，他們肯定會(huì)加預(yù)設(shè)的啊哈哈。聽說以后版本會(huì)支持code export，觀望中。

3. FRAMER STUDIO.

其實(shí)我并不想推薦，不過作為寫得起前端扛得起大旗的交互大神必用咯。

優(yōu)點(diǎn)：你想干什么 就能干什么。而且分享起來特別簡(jiǎn)單，所以有很多案例，我們可以直接把代碼拷過來用。關(guān)于這個(gè)你們可以去FRMAER的facebook群組看看就知道啦。基于coffeescript開發(fā)的你還能導(dǎo)入Sketch、PS文件。很方便。能夠精確控制每一個(gè)圖層的屬性。畢竟人家是強(qiáng)大的JS，你還想怎樣。

缺點(diǎn)：你是視覺，你是交互，你大學(xué)/培訓(xùn)班 研究過JS么。如果不會(huì)，請(qǐng)略過。

如果你會(huì)JS而且你寫代碼的速度很快，那恭喜，這絕對(duì)好用。其實(shí)說白了 就是套代碼模板。

4. FORM

節(jié)點(diǎn)類軟件。如果用過nuke的人 ，那就很熟悉咯，被GOOGLE買了。

優(yōu)點(diǎn)：節(jié)點(diǎn)類軟件，原型的可維護(hù)性強(qiáng)。GOOGLE的孩子，MD設(shè)計(jì)規(guī)范里的那些動(dòng)畫預(yù)設(shè)它最新版本里包括了。而且還有好多MD相關(guān)的PATCH了。還出了IOS SDK，用來創(chuàng)建自定義PATCH什么的，這塊學(xué)的其實(shí)是QC…準(zhǔn)備跟開發(fā)快速融合..以后可能能夠?qū)С鯩D 的android代碼呢，期待期待。

缺點(diǎn)：不能在電腦上預(yù)覽。腎六壞了還得跟同事借!還有就是支持從Sketch里粘貼了，結(jié)果不支持Retina，我用750 1334做的，結(jié)果發(fā)現(xiàn)Form是375 *667啊。我都得縮放成0.5才能繼續(xù)。嚇?biāo)离蘖?。還有就是不能共享啊。IOS工程師都是我們的大爺，你這樣還要給他裝FORM，會(huì)把他氣shi的!

5. ORIGAMI+QC

目前比較好用的節(jié)點(diǎn)類軟件，F(xiàn)ACEBOOK的天才們出的。

優(yōu)點(diǎn)：可導(dǎo)出有一定使用價(jià)值的代碼。 可維護(hù)性強(qiáng)?？稍谠O(shè)備+電腦上都能預(yù)覽?，F(xiàn)在靠譜點(diǎn)的就這個(gè)啦。用的人也相對(duì)多些。你可以直接從SKETCH粘帖過來。不過只有在使用POP ANIMATION 的PATCH時(shí)才可導(dǎo)出代碼哦。不過開發(fā)那邊真的能用這些代碼。關(guān)于和開發(fā)溝通這個(gè)下面再寫吧 。

缺點(diǎn)：有一些BUG不忍直視。

不能分享：有時(shí)給你的IOS工程師裝了QC也沒卵用。為什么?因?yàn)镼C絕對(duì)燒死CPU+吃內(nèi)存啊。就算你把FPS調(diào)到最低，如果圖層夠多夠復(fù)雜，會(huì)把工程師電腦卡死的。XCODE都死了工程師怎么活嘛。還有就是目前功能上缺陷比較多(比如Swipe不能選擇具體方向等，可以用自定義的PATCH進(jìn)行定義，但是初級(jí)人員就用不了啊)，有時(shí)你需要各種綜合各種條件各種patch才能獲得一個(gè)簡(jiǎn)單的效果。

關(guān)于ORIGAMI和開發(fā)的結(jié)合問題 ：

5-1、ORIGAMI只能夠?qū)С鯬OP animation PATCH相關(guān)的代碼(CLASSIC ANIMATION和BOUNCY ANIMATION都是不能的哦–聽說下個(gè)版本會(huì)有)，代碼里面的位移(POSITION TRANSITION)信息都是絕對(duì)位置，所以適配上你和開發(fā)需要進(jìn)一步討論解決方案。我的建議是 QC中的定位系統(tǒng)嚴(yán)格統(tǒng)一為TOP LEFT或CENTER等。這個(gè)對(duì)適配問題很重要，如果你的外部GROUP的定位用的CENTER，而里面圖層用的各種各樣的其他參考坐標(biāo)系，那么你導(dǎo)出的位移信息基本沒卵用了。

5-2、如果有DELAY的話，請(qǐng)把DELAY放在POP ANIMATION PATCH的前面，如果不放在前面，代碼導(dǎo)出的主要屬性變化部分是空的(這應(yīng)該是個(gè)BUG啊)。聽說下個(gè)版本會(huì)導(dǎo)出delay的數(shù)值。

現(xiàn)在是我把DELAY用文檔形式給開發(fā)，開發(fā)自己輸入。還有一些循環(huán)動(dòng)畫也是不可導(dǎo)出的，這些也是以文檔形式給的(其實(shí)就是讓IOS哥哥坐在我旁邊，用我的另一個(gè)顯示給他看效果，一個(gè)顯示器看我的QC工程直接溝通了，并沒有用什么卵文檔。如果你是大公司，流程化嘛肯定需要咯)。

5-3、你的ANCHOR POINT就算是TOP LEFT，圖層旋轉(zhuǎn)是不會(huì)繞他的左上角旋轉(zhuǎn)的。不過縮放是會(huì)縮放的。這個(gè)很坑啊。還有代碼導(dǎo)出并沒有導(dǎo)出ANCHOR POINT信息。

不過解決方案有的。但是都很麻煩。就是AE中的空白層類似的概念，留空切圖。

5-4、很給力的東東叫PAINTCODE. 可以直接把SKETCH粘貼的圖層轉(zhuǎn)為代碼。并且PAINTCODE的官方提供了能夠和ORIGAMI結(jié)合的PATCH，稍微研究一下(研究一兩個(gè)小時(shí)，看看PAINTCODE的那個(gè)APPLE WATCH教程)，就能夠從PAINTCODE里解決ORIGAMI的一些雞肋的問題。

6. HYPE 3 PRO.

人家是做HTML5的啦。不過，如果你不會(huì)用Framer，那可以用這個(gè)，這個(gè)還有時(shí)間線，不過我喜歡從SKECTH里直接粘貼過來，然而Hype不支持粘貼過來，直接PASS了。不過做HTML界面確實(shí)很給力啊。簡(jiǎn)直就是神器。不過用來做原型的人還是少數(shù)咯。

有夸FORM的，有夸AE的。作為MOTION DESINGER 還是最愛AE。

但從交互設(shè)計(jì)師的角度，關(guān)于哪個(gè)更好用，哪個(gè)淘汰，關(guān)我鳥事，哪個(gè)好用時(shí)用哪個(gè)。從目前看，ORIGAMI還是不錯(cuò)的。不過這些軟件更新夠慢的。全都有問題的時(shí)候，只能選自己愛用的好了。NOODLE我沒提是因?yàn)樗腂UG太多，還不足以有資格跟上面這些競(jìng)爭(zhēng)。