大浪淘沙，就像2.0時(shí)代最火的人人、開(kāi)心網(wǎng)沒(méi)有把握移動(dòng)互聯(lián)網(wǎng)的機(jī)遇紛紛衰敗，轉(zhuǎn)型腳步落后的互動(dòng)公司也逆流而逝，很多互動(dòng)設(shè)計(jì)師都被迫找尋新的方向。本文作者將給大家介紹什么是互動(dòng)設(shè)計(jì)，為什么要那樣做網(wǎng)站以及互動(dòng)行業(yè)的興衰史。

這篇文章，目標(biāo)是從以下角度解讀互動(dòng)業(yè)：

1. 互動(dòng)設(shè)計(jì)是什么？
2. 為什么要這樣做網(wǎng)站？
3. 行業(yè)教育現(xiàn)狀
4. 以及國(guó)內(nèi)互動(dòng)業(yè)的發(fā)展興衰歷程（什么？還沒(méi)介紹已經(jīng)衰了嗎……其實(shí)并沒(méi)有，只不過(guò)好多老互動(dòng)前輩已經(jīng)在被拍沙灘上，后文詳述）

01 什么是互動(dòng)設(shè)計(jì)（Interactive Design）

聽(tīng)上去很類似現(xiàn)在互聯(lián)網(wǎng)行業(yè)時(shí)髦的交互設(shè)計(jì)（IxD）、用戶體驗(yàn)設(shè)計(jì)（UE/UX），但互動(dòng)設(shè)計(jì)是側(cè)重點(diǎn)完全不同的另一個(gè)領(lǐng)域。

在此，我并不想搬很多概念來(lái)解釋，容易混淆，只從國(guó)內(nèi)招聘的職能要求來(lái)說(shuō)明一下。

主流互聯(lián)網(wǎng)公司對(duì)交互設(shè)計(jì)師要求如下：精通UI界面設(shè)計(jì)，但更重要的是深入關(guān)注和理解用戶體驗(yàn)以及易用性，可熟練運(yùn)用產(chǎn)品原型圖、流程圖表達(dá)產(chǎn)品方案，舉個(gè)例子：

主流廣告公司對(duì)互動(dòng)設(shè)計(jì)師的要求為：可以理解各種天馬行空的創(chuàng)意概念，設(shè)計(jì)出獨(dú)特新奇、精彩有趣的互動(dòng)體驗(yàn)，關(guān)注互動(dòng)網(wǎng)站的體驗(yàn)趣味、實(shí)時(shí)交互及用戶連接等。

靜態(tài)的例子不太能表達(dá)，我就援引一下優(yōu)秀互動(dòng)設(shè)計(jì)師的DEMO：

體驗(yàn)鏈接 – OXIK | Monalisa

作者 – Masayuki Kido，互動(dòng)業(yè)早期的技術(shù)標(biāo)桿，受邀于Adobe開(kāi)發(fā)者大會(huì)做演講嘉賓。

優(yōu)秀的互動(dòng)設(shè)計(jì)師更像設(shè)計(jì)師和程序員的結(jié)合體，十分稀有。對(duì)他們來(lái)說(shuō)，互動(dòng)業(yè)是一個(gè)極具想象空間的事業(yè)，關(guān)聯(lián)的領(lǐng)域非常廣泛。從早期的矢量動(dòng)畫(huà)、3D動(dòng)畫(huà)、腳本編程開(kāi)始，發(fā)展到現(xiàn)在的圖形學(xué)、三維、全景、面部識(shí)別、聲音識(shí)別等等。只要?jiǎng)?chuàng)意十足，能帶給用戶體驗(yàn)的沖擊，都可以制作成互動(dòng)網(wǎng)站作品，引領(lǐng)潮流并讓客戶埋單。

例舉一家世界上最杰出的互動(dòng)制作公司之一：MediaMonks，目前FWA名人墻的首位（Google Creative Lab也在其中，排名第八），官方介紹如下：

他們這樣定義自己 – 廣告代理公司和知名品牌的“創(chuàng)意制作合伙人”，將概念、策略、IP轉(zhuǎn)化為獲獎(jiǎng)級(jí)別的互動(dòng)網(wǎng)站、影視、內(nèi)容以及產(chǎn)品平臺(tái)。

這是他們的作品集視頻 – Mediamonks Mixtape VoI.I

02 解讀：為什么網(wǎng)站要這樣做？

我將以此例做詳細(xì)解讀。

網(wǎng)站鏈接 – http://resn.co.nz/

這是RESN互動(dòng)公司的官網(wǎng)，他們也是FWA的?？?，以技術(shù)先進(jìn)和創(chuàng)意豐富為著稱?？梢宰⒁庖幌滤麄兙W(wǎng)站的標(biāo)題：

Infecting your screen for your enjoyment

為你的愉悅而感染你的屏幕

概括非常精髓，他們創(chuàng)造的東西像細(xì)菌感染一樣具備令人無(wú)法抗拒的能力，帶給用戶體驗(yàn)上的樂(lè)趣。

這就是第一個(gè)層面：通過(guò)精彩的互動(dòng)體驗(yàn)，影響到用戶，使其沉浸其中。說(shuō)直白一點(diǎn)就是酷炫！

大部分人看到這個(gè)互動(dòng)作品都會(huì)情不自禁：哇！先不論作者想表達(dá)什么，我都是服氣的。

再深入一層：網(wǎng)站一打開(kāi)，是一顆鉆石模樣，這究竟是什么呢？按照提示觸摸并按?。═ouch & Hold），鉆石顫動(dòng)直到爆裂，出現(xiàn)了萬(wàn)花筒模樣的畫(huà)面。

我姑且以自己的共鳴來(lái)解釋一下：我們不僅外表像華麗，而且內(nèi)在更加豐富，震撼用戶的方式，絕不只有一種。

傳遞深意卻無(wú)需一字一句，全憑用戶共鳴，這正是高超的表達(dá)技巧 – 互動(dòng)作品可以用來(lái)當(dāng)作表達(dá)自己的工具，并收獲共鳴。這也正是商用廣告之所需，抓住用戶眼球目的是要表達(dá)廣告主的訴求，傳遞品牌價(jià)值。

第三層：體現(xiàn)制作者具備業(yè)界最先進(jìn)的技術(shù)水平以及設(shè)計(jì)能力。比如這顆鉆石一樣的東西，對(duì)于普通網(wǎng)頁(yè)開(kāi)發(fā)者來(lái)說(shuō)，是做不到的。

想實(shí)現(xiàn)這種效果：

1. 需要使用H5支持的三維標(biāo)準(zhǔn) – WebGL
2. 需要掌握三維建模 – 鉆石模型（或許實(shí)現(xiàn)原理是程序生成的模型，但我覺(jué)得至少會(huì)有軟件建模作為參考，或者提供模型數(shù)據(jù)）
3. 需要掌握實(shí)時(shí)鏡面材質(zhì) – GLSL（使用電腦或手機(jī)GPU硬件計(jì)算特效渲染輸出）

接下來(lái)，一個(gè)球和一個(gè)圓柱要表達(dá)什么呢？

這是三維物體的碰撞檢測(cè)，也就是做物理模擬的基礎(chǔ)，用于判斷在三維空間里一個(gè)物體的邊緣或Bounding Box，是否與另一個(gè)物體有接觸。這個(gè)需要比三維模型展示更深入一層的研究，更能說(shuō)明作者的研發(fā)能力（不然他們也不會(huì)將其選為代表作）。

其他的DEMO不贅述了，如果我是這家公司的老板，拿著這樣的作品，足以展現(xiàn)高超設(shè)計(jì)&技術(shù)水平，輕而易舉征服客戶。

總結(jié)一下，一個(gè)好的互動(dòng)網(wǎng)站是藝術(shù)和技術(shù)的完美結(jié)合的作品，可以傳染用戶獲得共鳴。于我，從事互動(dòng)這么久，其實(shí)并沒(méi)有太多其他的原因，就是因?yàn)橄胱龀龈噙@樣的作品。

03 發(fā)源

最早一批網(wǎng)頁(yè)制作的開(kāi)發(fā)者都經(jīng)歷過(guò)網(wǎng)頁(yè)三劍客時(shí)代（Flash/Dreamweaver/Fireworks），當(dāng)時(shí)這些工具都在Macromedia旗下，還沒(méi)被Adobe收購(gòu)。

互動(dòng)網(wǎng)站的發(fā)源，正是基于Flash多媒體插件提供的動(dòng)畫(huà)能力和用戶交互能力。Flash技術(shù)出現(xiàn)后發(fā)展很快，插件在各大瀏覽器廣泛普及，網(wǎng)站便有了各種形式的互動(dòng)可能。而將整個(gè)網(wǎng)站以全Flash的互動(dòng)形式表現(xiàn)，是由美國(guó)和日本創(chuàng)造的流行，并傳向世界。

國(guó)內(nèi)Flash大熱始于2005年前后，當(dāng)時(shí)有一種種時(shí)髦的職業(yè)叫“閃客”，比較有名的是“小小”的火柴人動(dòng)畫(huà)和互動(dòng)小游戲，是當(dāng)年國(guó)內(nèi)最先進(jìn)的閃客作品，下圖是《第八部》終極代表作品，我可以斷言：現(xiàn)在很多Flash動(dòng)畫(huà)師依然無(wú)法用矢量做出三維的鏡頭感。

視頻鏈接 – http://v.youku.com/v_show/id_XNjA1OTU1MTI==.html

閃客時(shí)代國(guó)內(nèi)對(duì)Flash的理解大多為動(dòng)畫(huà)工具，最多也只是為現(xiàn)有的網(wǎng)站加點(diǎn)動(dòng)畫(huà)，但相對(duì)水平不高。我對(duì)互動(dòng)網(wǎng)站認(rèn)知的三觀被刷，是因?yàn)榭吹搅水?dāng)年最頂尖的高手：

2advanced Studio

被收錄32個(gè)作品的2A幾乎是當(dāng)時(shí)互動(dòng)業(yè)的代言人，也是Adobe公司的設(shè)計(jì)合作伙伴。

其中的2advanced V4 Prophecy （2006）這個(gè)作品（如下圖）在當(dāng)時(shí)風(fēng)靡一時(shí)，引領(lǐng)了全球互動(dòng)網(wǎng)站潮流，同時(shí)對(duì)Flash開(kāi)發(fā)工具的推廣也起到了巨大的推動(dòng)。雖然整體風(fēng)格可能有些過(guò)時(shí)了，但我覺(jué)得就其設(shè)計(jì)和動(dòng)畫(huà)水平來(lái)講，哪怕是現(xiàn)如今十年后的設(shè)計(jì)師，仍然不容易模仿。十分可惜在線的版本已經(jīng)找不到了，2A官方也刪除了存檔。

我在校時(shí)也正是因?yàn)閷?duì)這個(gè)公司的崇拜，才立下職業(yè)夢(mèng)想，在電信or互動(dòng)中選擇了后者。

04 教育

前面提到過(guò)，互動(dòng)是藝術(shù)和技術(shù)的結(jié)合體，但由于國(guó)內(nèi)教育體系將理工和藝術(shù)的界限劃分的很清晰，對(duì)于懵懂的學(xué)子來(lái)說(shuō)，就算有意識(shí)走向互動(dòng)設(shè)計(jì)的道路，也基本上沒(méi)有土壤。

正所謂立志容易成志難，我自己就是這么一個(gè)例子，起朝著這條路走過(guò)來(lái)相當(dāng)不易。眼睛盯著2A立志，但不知從何入手，當(dāng)年能找到的書(shū)本知識(shí)基本上是空白，其實(shí)現(xiàn)在也比空白好不到哪去。10本Flash書(shū)籍里大概只有1本能看，絕大部分都是為了追趕潮流的吸金科普讀物。比如教你做一個(gè)小雞吃米的漸變過(guò)渡動(dòng)畫(huà)，一本書(shū)就過(guò)去一半了，這種怎么可能做出2A級(jí)別作品??！

我還記得，在校時(shí)學(xué)過(guò)多媒體設(shè)計(jì)課上，一位的女教師在制作類似“小雞吃米”的Flash動(dòng)畫(huà)時(shí)，動(dòng)作不受控制，導(dǎo)致小雞的腦袋不慎掉在地上，引來(lái)哄堂大笑。當(dāng)時(shí)還是我上去手把手調(diào)好為她解決的尷尬。

我在大學(xué)里都是靠自己的想法來(lái)自學(xué)，動(dòng)畫(huà)、腳本、3D建模、渲染技術(shù)等等。畢業(yè)設(shè)計(jì)是一個(gè)可交互的3D手機(jī)展示，用自己的手機(jī)Dopod C858（很自豪的說(shuō)，那是在校時(shí)為企業(yè)制作互動(dòng)網(wǎng)站賺錢(qián)買(mǎi)的，5500大洋）進(jìn)行建模再加載到Flash，可以進(jìn)行手機(jī)開(kāi)合、菜單交互等操作模擬。

以上為我親身經(jīng)歷的國(guó)內(nèi)教育現(xiàn)狀，現(xiàn)如今可能有所改善。而經(jīng)過(guò)跟國(guó)外的朋友咨詢，美國(guó)大學(xué)很多都有專門(mén)的互動(dòng)藝術(shù)設(shè)計(jì)專業(yè)。

紐約的NYU ITP（Interactive Telecommunication Program），Parsons DT（Design and Tecnology），SVA Computer Arts，鳴謝@黃瓜。

還有加州極富盛名的是CIA New Media，由迪士尼投建為好萊塢培養(yǎng)頂尖動(dòng)畫(huà)及新媒體人才。還有德國(guó)ZSMD，瑞典UMEA Institute of Design等等，鳴謝留學(xué)建筑的小表妹。

互動(dòng)領(lǐng)域教育差距可見(jiàn)一斑，而這也更使我一路走來(lái)堅(jiān)信自學(xué)可以成才。有人幫你時(shí)，就珍惜學(xué)習(xí)的機(jī)會(huì)；沒(méi)人幫你時(shí)，就自己多看多想多研究。

總之，路是你的，不能讓它停下。

05 興衰

隨著Flash的更新?lián)Q代，互動(dòng)業(yè)在Web2.0的PC時(shí)代取得了長(zhǎng)足的發(fā)展。當(dāng)時(shí)，人人網(wǎng)、開(kāi)心網(wǎng)大熱，似乎包括阿姨媽媽等所有人都在電腦上“偷菜”。大家對(duì)網(wǎng)頁(yè)上可以玩游戲達(dá)成了共識(shí)，也變成了習(xí)慣。

那個(gè)時(shí)代，是Flash最好的時(shí)代。

隨著Flash技術(shù)的發(fā)展，每一個(gè)版本增加新的功能特性，互動(dòng)人就為之振奮。我對(duì)互動(dòng)行業(yè)認(rèn)知的升華，就是在這個(gè)階段。

我通過(guò)對(duì)FWA網(wǎng)站的分析，技術(shù)資料收集，案例代碼學(xué)習(xí)，廣泛擴(kuò)展了互動(dòng)領(lǐng)域的眼界，研究了基本上Flash技術(shù)可達(dá)到的所有藝術(shù)表現(xiàn)形式，以及功能特性：三維原理及構(gòu)建（自制三維引擎）、模型互動(dòng)、全景、語(yǔ)音識(shí)別（DTW、HMM、MFCC）、音頻波形頻譜分析與表現(xiàn)、MIDI、物理碰撞模擬、流體模擬、圖像表現(xiàn)、圖像識(shí)別、攝像頭動(dòng)作捕捉、AR識(shí)別、多人實(shí)時(shí)互動(dòng)、GPU渲染等等等等。

其實(shí)目前的HTML5，很多方面的標(biāo)準(zhǔn)和性能依然達(dá)不到Flash的水準(zhǔn)。雖然我對(duì)某些特定領(lǐng)域不精深，只達(dá)到理解原理和基礎(chǔ)應(yīng)用的層面，但這足以建立我對(duì)互動(dòng)事業(yè)堅(jiān)實(shí)的信心。

互動(dòng)作品除了技術(shù)，還有設(shè)計(jì)和動(dòng)畫(huà)，我感覺(jué)自己非常幸運(yùn)，畢業(yè)后第一份簡(jiǎn)歷就入對(duì)了公司，結(jié)識(shí)了上?；?dòng)圈子的第一批互動(dòng)人才，每個(gè)人都可以稱作我的導(dǎo)師。

Manson，當(dāng)年我在華揚(yáng)聯(lián)眾廣告公司的創(chuàng)意主管 – 國(guó)內(nèi)FWA收錄作品第一人（2005）

北邦 – 當(dāng)代新銳藝術(shù)家，當(dāng)年我在知世營(yíng)銷（現(xiàn)已被Aegis收購(gòu)，更名isobar）的互動(dòng)美術(shù)指導(dǎo)，被FWA兩次作品收錄（2005、2007）。

回首當(dāng)年跟著他們混的日子，是我職業(yè)生涯最幸運(yùn)的時(shí)光，也是我現(xiàn)在依然選擇互動(dòng)業(yè)并無(wú)悔堅(jiān)持的巨大動(dòng)力，我希望把各位大神們的奇跡傳承下去。

正所謂時(shí)移勢(shì)易，成敗蕭何，很可惜Flash沒(méi)能堅(jiān)持到最后。

移動(dòng)互聯(lián)時(shí)代網(wǎng)悄然而至，用戶習(xí)慣從PC大界面賺到了手機(jī)的方寸間，加之蘋(píng)果拒絕Flash，安卓的Flash也并不像PC時(shí)代那么普及，F(xiàn)lash迅速衰落了，互動(dòng)業(yè)也發(fā)生了巨大的震蕩。最直接的表現(xiàn)就是：互動(dòng)業(yè)公司接不到活了。

大浪淘沙，就像2.0時(shí)代最火的人人、開(kāi)心網(wǎng)沒(méi)有把握移動(dòng)互聯(lián)網(wǎng)的機(jī)遇紛紛衰敗，轉(zhuǎn)型腳步落后的互動(dòng)公司也逆流而逝，很多互動(dòng)設(shè)計(jì)師都被迫找尋新的方向。

• 那一批曾經(jīng)輝煌的“閃客”，消失了。
• 那一批曾經(jīng)名噪的互動(dòng)人，轉(zhuǎn)行了。

據(jù)了解圈內(nèi)朋友有的去做APP，有的去做智能硬件，有的去創(chuàng)辦互聯(lián)網(wǎng)平臺(tái)，其實(shí)我的確也在互動(dòng)業(yè)最困難的時(shí)代，選擇了去騰訊閉關(guān)修煉。學(xué)前端優(yōu)化、學(xué)后臺(tái)架構(gòu)、學(xué)運(yùn)維安全，我也逐漸的發(fā)現(xiàn)，缺少了這些素質(zhì)，也無(wú)法做好最優(yōu)化的互動(dòng)網(wǎng)站，再次深感幸運(yùn)。

有些人在責(zé)怪Adobe，責(zé)怪這個(gè)時(shí)代。但其實(shí)Flash死了并不可怕，F(xiàn)lash帶來(lái)的互動(dòng)精神依然活著，動(dòng)畫(huà)表達(dá)依然活著，三維互動(dòng)依然可以應(yīng)用于WebGL，圖形識(shí)別依然可以應(yīng)用于后臺(tái)開(kāi)發(fā)。非要要責(zé)怪的話，其實(shí)只能責(zé)怪自己不夠努力，才錯(cuò)過(guò)了Flash提供過(guò)的，打開(kāi)眼界的機(jī)會(huì)，提升各方面能力的機(jī)會(huì)。

如果知乎能插音樂(lè)，我一定會(huì)放這首做背景：

被遺忘的是

那些放開(kāi)手的人

被遺忘的是

放開(kāi)手的人

而

因?yàn)椴桓时贿z忘，

因?yàn)橛袎?mèng)還沒(méi)做完，

我選擇重整行囊，

繼續(xù)互動(dòng)之路……

06 結(jié)尾

最后，謝謝所有耐心讀到這里的朋友們，作為一個(gè)互動(dòng)人，我充滿感激。

希望這篇文章不只是記錄一個(gè)互動(dòng)業(yè)的幸存者，而是可以喚起更多國(guó)內(nèi)有志的伙伴可以跨入互動(dòng)，讓夢(mèng)想啟程，讓中國(guó)的互動(dòng)行業(yè)早日回歸世界舞臺(tái)。

另外，不知有沒(méi)有在互動(dòng)設(shè)計(jì)路上，有興趣做很酷的網(wǎng)站，或半路感到困惑的同學(xué)，可以私我進(jìn)個(gè)群，抱團(tuán)取暖，同舟共濟(jì)。

最最后，想以自己的拙句做結(jié)：

夢(mèng)里南柯，且無(wú)痕，浮生若是；

生非苦短，知天命，則無(wú)所怠。

此致

作者：蘇哲

來(lái)源：https://zhuanlan.zhihu.com/p/24148329

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