交互設計師，在互聯網思維被隨時脫口而出的現代社會中一躍變為熱門職業，隨著5G技術的普及，交互水將成為發展迭代最快的方向，同時也成為眾多藝術設計專業學生選擇的前景專業之一。

那申請交互設計專業的作品集應該怎麼做？康石石身邊幾乎所有學生提到交互設計就會和APP設計劃上了等號，但別忘了網頁設計也是同學們在交互設計作品集創作中必備項目形式之一，而且網頁設計在PC端的應用場景依然十分寬廣，不容忽視。

所以交互設作品集創作之前，首先要明確APP與WEB的區別。

從上圖可以看到，在計算機語言方面，WEB語言和APP語言是完全不同的，雖然在界面表現上可以重疊，但開發方式相差很大，就像英語和德語的使用差異。功能性方面，WEB是以展示型功能為主，APP是以應用型功能為主。在刷新速度表現方面，我們也可以看到網頁的加載很大程度上取決於網速，但是APP則是有緩存，同時也有離線功能的部分。更新方式和測試平臺也有很大的差異。

接下來，康石石會幫助同學們梳理網頁製作具體的流程性步驟，以便能及早對作品集查缺補漏。

01 網頁製作實現流程Workflow

一套完整的網頁製作的流程是從WEB Browser開始，中間依次是WEB build format---WEB UI---WEB UX---WEB IDE---WEB Framework---WEB Automation，到WEB Publish結束。下面把每一個環節拿出來單獨解釋，詳細瞭解，明確每一個環節的操作和用途後，才能有條不紊的進行創作。

1. WEB Brower

在日常瀏覽網頁時，不同瀏覽器會帶來不同的佈局差異。如果同學們想將網頁真正製作出來，並能在網站上使用，就需要考慮到在每個網頁中的瀏覽效果。市場上最常見的瀏覽器軟件包括：Microsoft Internet Explorer，Google的Chrome，Mozilla Firefox，Apple的Safari和Opera。瀏覽器可用性取決於計算機使用的操作系統（例如：Microsoft Windows，Linux，Ubuntu，Mac OS等）。

圖源：PCMag.com

2. WEB Build Format

網頁實現有很多種展現形式，第一種為Custom-Built Website，自定義所有到佈局，效果，用戶讀取數據的方式，這種是真正意義上的從0到1。第二種為Website Builders，以Squarespace，Wix為代表性模版網站，模版網站自帶佈局，效果，我們只需要往裡面嵌套文字即可。第三種為CMS，論壇型模版網站，以WordPress為代表性網站模版。

這三種方式基本覆蓋了在實現過程中我們會考慮的產出方式。

3.WEB UI

即網頁中的視覺可視化。這在設計初期就必須把佈局，配色，圖標，圖文比都設定。UI的製作通常在Photoshop中進行，所以同學們需要掌握如何在PS中切出網頁適用性圖片。同時，還為同學們推薦一個插件Cutterman，他可以替代傳統的切圖模式，提高相關工作的效率。

圖源：cutterman.cn

4.WEB UX

即讓網頁邏輯清晰排布的線框圖原型工具，原型圖工具有Adobe XD，Sketch， Axure RP，Principle 等。

其中Adobe XD為免費軟件，MAC和Windows端通用，使用門檻低，同時也支持多款免費插件，能比較基礎達到作品集使用效果。Sketch為MAC端付費軟件，雖然有破解版但功能略有差異，老牌軟件支持多款插件。Axure為Win端付費軟件，也有不少win設計師們經常使用。Princilple是專門針對原型動態演示視頻，經常與Sketch搭配使用，能夠有很好的動態演示效果。

5.WEB IDE

即網頁軟件開發工具，當我們一個網頁裡有了視覺效果，有了邏輯框架之後，就需要將UI，UX放入IDE中進行開發，把他們真正編寫成可用網頁。

常見的IDE工具有Dreamweaver，他是設計與編程一體化軟件，可以可視化代碼的編寫過程，讓網頁開發時更加可視化，設計人員用的多一些。另外，Brackets，也是一款比較輕量級的前端編輯器，適合新手使用。這兩款比較適合同學們製作作品集使用。

6.WEB Framework

即網頁前端開發框架，比較常用的是Bootstrap，這也是國外老師常推薦使用的框架，幫助前端工具輕鬆搞定自適配等一些繁瑣等預設。

圖源：bootstrap

7.WEB Automation

即網頁優化工具，這一點同學們使用的案例偏少，畢竟這個是涉及到專業的開發領域了，從字數，從跳轉功能，從代碼規整進行優化，來減少一個網頁加載所需要下載的字節。在這一步，同學們有一個宏觀的認知即可。

圖源：Nordi APls

8.WEB Publish

即網頁發佈時，需要添加的架構邏輯。一個網頁一定會有index主頁，也就是首頁，可以用自己的名字命名。除了首頁之外還有其他鏈接的附屬頁面，需要大家有命名規範。

圖源：kope media

發佈網站的時候，如果不是用模版網站搭建的話，我們就需要自己找一個服務器，比如Namecheap，Bluehost，Dreamhost都是很好的服務商。目前來說，大部分同學會選擇用模版網站服務商，畢竟操作更直觀，價格也實惠。

圖源：ChurchMag

02 案例分析

上一節對於網頁設計的具體流程做了簡單講解，接下來以康石石東家-漢藝國際的一個優秀學生案例來看看網頁設計的完整實現：

漢藝18屆學員L同學作品集展示（部分）獲埃因霍芬 交互設計 MA offer

L同學的作品呈現中可以看出她首先有一個清晰直觀的網頁設計邏輯，同時UI也按照網頁製作要求進行了切圖。那麼之後的實現操作就會變得直觀起來。

部分切圖

URL Structure

L同學作品展示，高保真效果

L同學作品展示，網頁Demo效果

最後對比兩張圖可以發現，高保真和網頁Demo效果差不多，這都是源於設計前期UI和UX結構清晰分明。

因此，上面列出的8個環節，雖然看起來複雜繁瑣，但是每個環節都緊密聯繫，缺少一個都會讓最終實現大打折扣

順著整個流程再加上高質量的視覺呈現才會讓網頁設計成為作品集中的拔高項目，向院校考官展現你從設計到實現的實踐動手能力，讓考官看到你的作品集值得“投資”的潛力，以增加你申校的成功率。

更多藝術留學及作品集相關問題，可頭條私信康石石。