編者按：現在很多人都沒聽過互動設計了，它和交互設計不同，不過當年它可是紅極一時，大部分包攬網站的“奧斯卡獎”的秘密就在這里。今天由互動設計的前輩@蘇哲?來給大家介紹什么是互動設計，為什么要那樣做網站以及互動行業的興衰史。漲姿勢走起！

FWA相當于互動網站的奧斯卡，由Rob Ford創立Group94設計制作，自2000年起開始收錄全球最優秀的網站作品，是世界范圍內極具權威網站評獎平臺，這幾乎是所有互動人的夢想。大家熟知的灰晝前輩，就曾是獲得過FWA 金獎的大神，來這兒看他的訪談：《優設訪談！灰晝：從非科班生到首席美術總監的15年設計路》

1. 互動設計是什么？
2. 為什么要這樣做網站？
3. 行業教育現狀
4. 以及國內互動業的發展興衰歷程（什么？還沒介紹已經衰了嗎……其實并沒有，只不過好多老互動前輩已經在被拍沙灘上，后文詳述）

01 什么是互動設計（Interactive Design）

聽上去很類似現在互聯網行業時髦的交互設計（IxD）、用戶體驗設計（UE/UX），但互動設計是側重點完全不同的另一個領域。

在此我并不想搬很多概念來解釋，容易混淆，只從國內招聘的職能要求來說明一下。

主流互聯網公司對交互設計師要求如下：精通UI界面設計，但更重要的是深入關注和理解用戶體驗以及易用性，可熟練運用產品原型圖、流程圖表達產品方案，舉個例子：

主流廣告公司對互動設計師的要求為：可以理解各種天馬行空的創意概念，設計出獨特新奇、精彩有趣的互動體驗，關注互動網站的體驗趣味、實時交互及用戶連接等。

靜態的例子不太能表達，我就援引一下優秀互動設計師的DEMO：

體驗鏈接 - OXIK | Monalisa
作者 - Masayuki Kido，互動業早期的技術標桿，受邀于Adobe開發者大會做演講嘉賓

優秀的互動設計師更像設計師和程序員的結合體，十分稀有。對他們來說，互動業是一個極具想象空間的事業，關聯的領域非常廣泛。從早期的矢量動畫、3D動畫、腳本編程開始，發展到現在的圖形學、三維、全景、面部識別、聲音識別等等。只要創意十足，能帶給用戶體驗的沖擊，都可以制作成互動網站作品，引領潮流并讓客戶埋單。

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

他們這樣定義自己 - 廣告代理公司和知名品牌的“創意制作合伙人”，將概念、策略、IP轉化為獲獎級別的互動網站、影視、內容以及產品平臺。

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

02 解讀丨為什么網站要這樣做？

我將以此例做詳細解讀。

網站鏈接 - http://resn.co.nz/

這是RESN互動公司的官網，他們也是FWA的常客，以技術先進和創意豐富為著稱。可以注意一下他們網站的標題：

Infecting your screen for your enjoyment
為你的愉悅而感染你的屏幕

概括非常精髓，他們創造的東西像細菌感染一樣具備令人無法抗拒的能力，帶給用戶體驗上的樂趣。

這就是第一個層面（I）：通過精彩的互動體驗，影響到用戶，使其沉浸其中。說直白一點就是酷炫！

大部分人看到這個互動作品都會情不自禁：哇！先不論作者想表達什么，我都是服氣的。

再深入一層（II）：

網站一打開，是一顆鉆石模樣，這究竟是什么呢？按照提示觸摸并按住（Touch & Hold），鉆石顫動直到爆裂，出現了萬花筒模樣的畫面。

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

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

第三層（III）：體現制作者具備業界最先進的技術水平以及設計能力。比如這顆鉆石一樣的東西，對于普通網頁開發者來說，是做不到的。

想實現這種效果：

1. 需要使用H5支持的三維標準 - WebGL
2. 需要掌握三維建模 - 鉆石模型（或許實現原理是程序生成的模型，但我覺得至少會有軟件建模作為參考，或者提供模型數據）
3. 需要掌握實時鏡面材質 - GLSL（使用電腦或手機GPU硬件計算特效渲染輸出）

接下來，一個球和一個圓柱要表達什么呢？

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

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

總結一下，一個好的互動網站是藝術和技術的完美結合的作品，可以傳染用戶獲得共鳴。
于我，從事互動這么久，其實并沒有太多其他的原因，就是因為想做出更多這樣的作品。

03 發源

最早一批網頁制作的開發者都經歷過網頁三劍客時代（Flash/Dreamweaver/Fireworks），當時這些工具都在Macromedia旗下，還沒被Adobe收購。

互動網站的發源，正是基于Flash多媒體插件提供的動畫能力和用戶交互能力。Flash技術出現后發展很快，插件在各大瀏覽器廣泛普及，網站便有了各種形式的互動可能。而將整個網站以全Flash的互動形式表現，是由美國和日本創造的流行，并傳向世界。

國內Flash大熱始于2005年前后，當時有一種種時髦的職業叫“閃客”，比較有名的是“小小”的火柴人動畫和互動小游戲，是當年國內最先進的閃客作品，下圖是《第八部》終極代表作品，我可以斷言：現在很多Flash動畫師依然無法用矢量做出三維的鏡頭感。

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

閃客時代國內對Flash的理解大多為動畫工具，最多也只是為現有的網站加點動畫，但相對水平不高。我對互動網站認知的三觀被刷，是因為看到了當年最頂尖的高手：

2advanced Studio

被收錄32個作品的2A幾乎是當時互動業的代言人，也是Adobe公司的設計合作伙伴。

其中的

2advanced V4 Prophecy （2006）

這個作品在當時風靡一時，引領了全球互動網站潮流，同時對Flash開發工具的推廣也起到了巨大的推動。雖然整體風格可能有些過時了，但我覺得就其設計和動畫水平來講，哪怕是現如今十年后的設計師，仍然不容易模仿。十分可惜在線的版本已經找不到了，2A官方也刪除了存檔。

我在校時也正是因為對這個公司的崇拜，才立下職業夢想，在電信or互動中選擇了后者。

04 教育

前面提到過，互動是藝術和技術的結合體，但由于國內教育體系將理工和藝術的界限劃分的很清晰，對于懵懂的學子來說，就算有意識走向互動設計的道路，也基本上沒有土壤。

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

我還記得，在校時學過多媒體設計課上，一位的女教師在制作類似“小雞吃米”的Flash動畫時，動作不受控制，導致小雞的腦袋不慎掉在地上，引來哄堂大笑。當時還是我上去手把手調好為她解決的尷尬。

我在大學里都是靠自己的想法來自學，動畫、腳本、3D建模、渲染技術等等。畢業設計是一個可交互的3D手機展示，用自己的手機Dopod C858（很自豪的說，那是在校時為企業制作互動網站賺錢買的，5500大洋）進行建模再加載到Flash，可以進行手機開合、菜單交互等操作模擬。

以上為我親身經歷的國內教育現狀，現如今可能有所改善。而經過跟國外的朋友咨詢，美國大學很多都有專門的互動藝術設計專業。

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

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

互動領域教育差距可見一斑，而這也更使我一路走來堅信自學可以成才。有人幫你時，就珍惜學習的機會；沒人幫你時，就自己多看多想多研究。

總之，

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

05 興衰

隨著Flash的更新換代，互動業在Web2.0的PC時代取得了長足的發展。當時，人人網、開心網大熱，似乎包括阿姨媽媽等所有人都在電腦上“偷菜”。大家對網頁上可以玩游戲達成了共識，也變成了習慣。

那個時代，是Flash最好的時代。

隨著Flash技術的發展，每一個版本增加新的功能特性，互動人就為之振奮。我對互動行業認知的升華，就是在這個階段。

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

其實目前的HTML5，很多方面的標準和性能依然達不到Flash的水準。雖然我對某些特定領域不精深，只達到理解原理和基礎應用的層面，但這足以建立我對互動事業堅實的信心。

互動作品除了技術，還有設計和動畫，我感覺自己非常幸運，畢業后第一份簡歷就入對了公司，結識了上海互動圈子的第一批互動人才，每個人都可以稱作我的導師。

Manson，當年我在華揚聯眾廣告公司的創意主管 - 國內FWA收錄作品第一人（2005）

北邦 - 當代新銳藝術家，當年我在知世營銷（現已被Aegis收購，更名isobar）的互動美術指導，被FWA兩次作品收錄（2005、2007）。

回首當年跟著他們混的日子，是我職業生涯最幸運的時光，也是我現在依然選擇互動業并無悔堅持的巨大動力，我希望把各位大神們的奇跡傳承下去。

正所謂時移勢易，成敗蕭何，很可惜Flash沒能堅持到最后。

移動互聯時代網悄然而至，用戶習慣從PC大界面賺到了手機的方寸間，加之蘋果拒絕Flash，安卓的Flash也并不像PC時代那么普及，Flash迅速衰落了，互動業也發生了巨大的震蕩。最直接的表現就是：互動業公司接不到活了。

大浪淘沙，就像2.0時代最火的人人、開心網沒有把握移動互聯網的機遇紛紛衰敗，轉型腳步落后的互動公司也逆流而逝，很多互動設計師都被迫找尋新的方向。

那一批曾經輝煌的“閃客”，消失了。
那一批曾經名噪的互動人，轉行了。

據了解圈內朋友有的去做APP，有的去做智能硬件，有的去創辦互聯網平臺，其實我的確也在互動業最困難的時代，選擇了去騰訊閉關修煉。學前端優化、學后臺架構、學運維安全，我也逐漸的發現，缺少了這些素質，也無法做好最優化的互動網站，再次深感幸運。

有些人在責怪Adobe，責怪這個時代。但其實Flash死了并不可怕，Flash帶來的互動精神依然活著，動畫表達依然活著，三維互動依然可以應用于WebGL，圖形識別依然可以應用于后臺開發。非要要責怪的話，其實只能責怪自己不夠努力，才錯過了Flash提供過的，打開眼界的機會，提升各方面能力的機會。

如果知乎能插音樂，我一定會放這首做背景：

被遺忘的是

那些放開手的人

被遺忘的是

放開手的人

而

因為不甘被遺忘，

因為有夢還沒做完，

我選擇重整行囊，

繼續互動之路……

06 結尾

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

希望這篇文章不只是記錄一個互動業的幸存者，而是可以喚起更多國內有志的伙伴可以跨入互動，讓夢想啟程，讓中國的互動行業早日回歸世界舞臺。

另外，不知有沒有在互動設計路上，有興趣做很酷的網站，或半路感到困惑的同學，可以私我進個群，抱團取暖，同舟共濟。

最最后，想以自己的拙句做結：

夢里南柯，且無痕，浮生若是；

生非苦短，知天命，則無所怠。

此致

「優設名師專訪系列」

1、曾任騰訊大粵網設計主管的跨域達人：《優設訪談！騰訊設計師米田的設計之道與成長之路》

2、沒有聽過馮叔的設計師不是好設計師：《優設訪談！著名設計師馮鐵的設計思考與經驗之談》

3、前端重構視覺交互無一不精的設計師：《優設訪談！騰訊高級交互設計師C7210的十年設計路》

4、非議不斷前行不止，用心的設計團隊：《優設訪談！國內知名設計團隊專訪之滴滴DISIGN》

5、前網易現阿里寫的書是交互領域必讀：《優設訪談！阿里交互設計專家劉津的設計管理之路》

6、職業路徑最為清晰的科班交互設計師：《優設訪談！LBE安全大師產品總監曉生的職場進階之路》

7、能靠臉吃飯偏偏不的設計界「鹿晗」：《優設訪談！阿里資深設計師的自學設計之路》

8、300多人的百度設計團隊該如何運轉：《優設訪談！國內知名設計團隊專訪之百度大UE》

9、百度上海團隊負責人的非科班設計師：《優設訪談！百度設計大咖JJ YING的自學成才之路》

10、他帶的學生已經是國內的設計大咖了：《優設訪談！灰晝：從非科班生到首席美術總監的15年設計路》

11、設計的產品有幾億人在用的非科班生：《優設訪談！騰訊電腦管家視覺負責人張曉翔的UI自學之路》

12、英雄聯盟穿越火線天天愛消除都有他：《優設訪談！騰訊游戲Tgideas團隊設計總監李若凡的十年設計路》

13、高考一百多分現任UC藝術指導的大神：《優設訪談！小火：從非科班生到UC藝術指導的勵志設計路》

14、可能是顏值最高的全能設計師網紅咯：《優設訪談！錘子科技設計總監羅子雄的全能自學之路》

原文地址：https://zhuanlan.zhihu.com/p/24148329

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com