淺談原型設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)教學(xué)中的重要性

呂城

摘 要：本文旨在探尋針對設(shè)計(jì)藝術(shù)學(xué)院學(xué)生的網(wǎng)頁設(shè)計(jì)教學(xué)重點(diǎn)，在傳統(tǒng)網(wǎng)頁視覺設(shè)計(jì)教學(xué)知識點(diǎn)基礎(chǔ)上添磚加瓦，著力探討原型設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)視覺化的重要基礎(chǔ)。

關(guān)鍵詞：原型設(shè)計(jì)；網(wǎng)頁設(shè)計(jì)；視覺設(shè)計(jì)教學(xué)

對于交互設(shè)計(jì)教學(xué)，這是一個(gè)最好的時(shí)代，也是一個(gè)最壞的時(shí)代。隨著科技的發(fā)展，交互設(shè)計(jì)這個(gè)名詞越來越被人們熟知。而網(wǎng)頁設(shè)計(jì)——隸屬于交互設(shè)計(jì)領(lǐng)域的一個(gè)分支——已順應(yīng)時(shí)代的發(fā)展成為各類設(shè)計(jì)藝術(shù)學(xué)院視覺傳達(dá)設(shè)計(jì)教學(xué)中不可或缺的一門課程。在傳統(tǒng)的視覺傳達(dá)設(shè)計(jì)教學(xué)與課程設(shè)置范疇內(nèi)，網(wǎng)頁設(shè)計(jì)的教學(xué)重點(diǎn)往往更側(cè)重于界面設(shè)計(jì)、網(wǎng)頁的視覺設(shè)計(jì)等方向。然而隨著藝術(shù)與科技的融合，市場需求目的與學(xué)院培養(yǎng)目標(biāo)的碰撞，更多元、更新型、更綜合能力的復(fù)合型設(shè)計(jì)人才越來越受到青睞。這也意味著在院校網(wǎng)頁設(shè)計(jì)中的教學(xué)方向需要順應(yīng)市場需求，定位在培養(yǎng)具有團(tuán)隊(duì)合作溝通能力、具備跨界知識結(jié)構(gòu)的全局系統(tǒng)的復(fù)合型人才。這也正是本文旨在探討如何順應(yīng)發(fā)展探尋設(shè)計(jì)藝術(shù)學(xué)院的網(wǎng)頁設(shè)計(jì)教學(xué)重點(diǎn)，在傳統(tǒng)網(wǎng)頁視覺設(shè)計(jì)教學(xué)知識點(diǎn)基礎(chǔ)上添磚加瓦，從而構(gòu)筑更為豐富的知識架構(gòu)。

1 原型設(shè)計(jì)的概念與定義

交互設(shè)計(jì)理論中，原型（Prototype）是對產(chǎn)品概念的形象化和具體化。因此在網(wǎng)頁設(shè)計(jì)范疇內(nèi)，網(wǎng)頁的原型指的是將所需設(shè)網(wǎng)站的系統(tǒng)結(jié)構(gòu)與相應(yīng)功能建構(gòu)成一個(gè)“模型”，并將這個(gè)“模型”用可視化的形式描繪出大概的框架，結(jié)合批注、說明以及流程圖等要素。而網(wǎng)頁原型設(shè)計(jì)建立的核心目標(biāo)并非為了立即交付投入使用，而是通過這個(gè)原型去溝通、測試、修改，從而解決各種還未確定的問題。經(jīng)過反復(fù)溝通、修改以及確認(rèn)后，才進(jìn)入網(wǎng)頁的表現(xiàn)層也就是視覺化設(shè)計(jì)的階段。這個(gè)過程當(dāng)中所關(guān)注的影響網(wǎng)頁瀏覽者的各種行為習(xí)慣因素，以及如何在網(wǎng)頁交互環(huán)節(jié)里獲得良好的體驗(yàn)，從初期創(chuàng)意IDEA草擬建立，到反復(fù)驗(yàn)證想法，進(jìn)行價(jià)值評估，為繼續(xù)深入設(shè)計(jì)提供數(shù)據(jù)的過程，稱為“原型設(shè)計(jì)”。原型設(shè)計(jì)作為網(wǎng)頁交互設(shè)計(jì)過程中不可或缺的部分，幫助設(shè)計(jì)團(tuán)隊(duì)成員或相關(guān)人員之間交流與評估的工具，是對產(chǎn)品概念的形象化和具體化。

2 原型設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的作用

一個(gè)網(wǎng)站的研創(chuàng)開發(fā)設(shè)計(jì)運(yùn)營往往來自產(chǎn)品經(jīng)理開發(fā)團(tuán)隊(duì)、后臺程序代碼人員以及前端視覺設(shè)計(jì)人員這三方面的團(tuán)隊(duì)默契地合作配合。原型設(shè)計(jì)所關(guān)注的是交互設(shè)計(jì)的核心，即“以用戶為中心的設(shè)計(jì)”。因此，來自三方面的團(tuán)隊(duì)也必須秉持同樣的一個(gè)核心目標(biāo)，以用戶為中心去進(jìn)行建構(gòu)設(shè)計(jì)網(wǎng)站。原型設(shè)計(jì)恰恰是溝通這三方面團(tuán)隊(duì)的橋梁，為來自不同專業(yè)背景的人員提供一個(gè)標(biāo)準(zhǔn)化的溝通平臺。從創(chuàng)意概念，到市場調(diào)研以及網(wǎng)站整體流程圖和各網(wǎng)頁的線框圖的繪制制定，再到低保真與高保真原型的制作，整個(gè)過程都是原型設(shè)計(jì)不可缺少的環(huán)節(jié)。作為設(shè)計(jì)藝術(shù)學(xué)院的學(xué)生，在畢業(yè)就業(yè)之后大多擔(dān)任視覺設(shè)計(jì)這個(gè)環(huán)節(jié)的工作，所以也必須熟悉掌握整個(gè)團(tuán)隊(duì)工作的分工運(yùn)作，以及自己所處環(huán)節(jié)與其他環(huán)節(jié)的關(guān)系。

3 原型設(shè)計(jì)之于網(wǎng)頁設(shè)計(jì)教學(xué)

3.1 自我思路的溝通

在教學(xué)過程中，教師需要在教學(xué)大綱安排知識點(diǎn)時(shí)將原型設(shè)計(jì)先于視覺設(shè)計(jì)，首先讓學(xué)生明確網(wǎng)站的設(shè)計(jì)從無到有，從概念到結(jié)構(gòu)；然后才是從低保真原型過渡到高保真原型，通過網(wǎng)頁的圖形、圖標(biāo)、字體元素以及配色使網(wǎng)頁的界面視覺設(shè)計(jì)完整，并且讓視覺設(shè)計(jì)做到有理可依，而非為視覺而視覺。通過培養(yǎng)學(xué)生在設(shè)計(jì)網(wǎng)頁開始時(shí)就引入原型設(shè)計(jì)的概念，把握交互設(shè)計(jì)中用戶體驗(yàn)要素的五個(gè)核心層次的順序，即依次實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)的戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。引導(dǎo)學(xué)生明確自己的設(shè)計(jì)思路，在設(shè)計(jì)的過程中做到有跡可循，通過自己的原型設(shè)計(jì)可以回顧、追溯自己的設(shè)計(jì)想法，審視、修改自己的設(shè)計(jì)問題，從而為進(jìn)入網(wǎng)頁的最后表現(xiàn)層設(shè)計(jì)也就是視覺化設(shè)計(jì)的階段夯實(shí)基礎(chǔ)，提高效率事半功倍。

3.2 師生之間的溝通

網(wǎng)頁設(shè)計(jì)不同于其他傳統(tǒng)視覺傳達(dá)設(shè)計(jì)學(xué)科，它要求學(xué)生具有一定縝密的邏輯思維。例如，不同于海報(bào)招貼設(shè)計(jì)，設(shè)計(jì)藝術(shù)學(xué)院的學(xué)生可以在軟件中天馬行空地修改調(diào)整畫面，使所見即所得。然而網(wǎng)頁設(shè)計(jì)需要前期周密地構(gòu)架各個(gè)網(wǎng)頁之間的瀏覽流程，布置網(wǎng)頁的基本框架，在低保真原型測試成功后，才進(jìn)行更視覺化程度強(qiáng)的高保真原型，甚至是最終表現(xiàn)層的外觀視覺界面設(shè)計(jì)。在教學(xué)的過程中發(fā)現(xiàn)學(xué)生往往會習(xí)慣于以往傳統(tǒng)視覺傳達(dá)設(shè)計(jì)方法的固有思維，也就是較為感性地去處理網(wǎng)頁，將隨時(shí)迸發(fā)出的靈感創(chuàng)意執(zhí)行設(shè)計(jì)，這么做往往也導(dǎo)致網(wǎng)頁結(jié)構(gòu)，甚至是各個(gè)網(wǎng)頁之間的邏輯瀏覽關(guān)系的破壞。而原型設(shè)計(jì)可以從某一個(gè)角度輔助教師去規(guī)范設(shè)計(jì)藝術(shù)學(xué)院的學(xué)生在設(shè)計(jì)時(shí)避免出現(xiàn)上述類似的“激情設(shè)計(jì)”，在每一個(gè)環(huán)節(jié)上使設(shè)計(jì)執(zhí)行標(biāo)準(zhǔn)化、規(guī)范化，在作業(yè)或項(xiàng)目的執(zhí)行上更好地互相溝通。

3.3 市場產(chǎn)學(xué)的溝通

結(jié)合以往的網(wǎng)頁設(shè)計(jì)教學(xué)不難發(fā)現(xiàn)，計(jì)算機(jī)專業(yè)方向的學(xué)生具有邏輯較為縝密的理性思維，而設(shè)計(jì)藝術(shù)學(xué)院的學(xué)生則更擅長于視覺化表現(xiàn)設(shè)計(jì)的感性思維。但在產(chǎn)學(xué)研社會實(shí)踐項(xiàng)目中，客戶并不會計(jì)較學(xué)生具體來自哪一個(gè)學(xué)院，而是更關(guān)心他們怎樣才能將他們的方案與要求執(zhí)行好設(shè)計(jì)好。因此，原型設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的教學(xué)能夠使學(xué)生更早地認(rèn)識到網(wǎng)頁設(shè)計(jì)團(tuán)隊(duì)的合作性，培養(yǎng)設(shè)計(jì)自覺與設(shè)計(jì)責(zé)任，勝任更具市場實(shí)踐性的設(shè)計(jì)項(xiàng)目。在今后學(xué)院與市場的產(chǎn)學(xué)研實(shí)踐銜接中，讓學(xué)生有備而去，減少與團(tuán)隊(duì)、與市場的磨合期。

原型設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)教學(xué)中的地位顯得尤為重要，可以說它是網(wǎng)頁設(shè)計(jì)視覺化的基礎(chǔ)。在當(dāng)今市場主導(dǎo)設(shè)計(jì)的背景下，教師只有把握網(wǎng)頁設(shè)計(jì)的行業(yè)規(guī)律，擴(kuò)充課程的知識結(jié)構(gòu)，意識到網(wǎng)頁設(shè)計(jì)的教學(xué)不僅僅只局限在教會學(xué)生探尋更合理的顏色、字體、圖片、版式這類將網(wǎng)頁頁面設(shè)計(jì)優(yōu)化的視覺體驗(yàn)上，而是讓學(xué)生理解設(shè)計(jì)師應(yīng)當(dāng)更多地給予瀏覽用戶完美的交互體驗(yàn)，這一點(diǎn)也恰恰要求教師將原型設(shè)計(jì)的設(shè)計(jì)理念引入網(wǎng)頁設(shè)計(jì)教學(xué)課程中去。要讓學(xué)生了解，網(wǎng)頁視覺界面的表現(xiàn)層設(shè)計(jì)并非無中生有或是全憑設(shè)計(jì)師的一時(shí)喜好，關(guān)鍵來自于嚴(yán)謹(jǐn)縝密的原型設(shè)計(jì)，只有夯實(shí)加固這個(gè)基礎(chǔ)，網(wǎng)頁的視覺設(shè)計(jì)才能夠在其基礎(chǔ)上隨心所欲地去建構(gòu)深發(fā)。

參考文獻(xiàn)：

[1] 艾倫·庫伯（Alan Cooper），羅伯特·瑞寧（Robert Reimann），大偉·克洛林（David Cronin）. About Face 3交互設(shè)計(jì)精髓[M].劉松濤，譯.電子工業(yè)出版社，2012.

[2] 沃菲爾（Todd Zaki Warfel）.原型設(shè)計(jì)：實(shí)踐者指南[M].湯海，李鴻，譯.清華大學(xué)出版社，2013.

[3] 加瑞特（Jesse James Garrett）.用戶體驗(yàn)要素：以用戶為中心的產(chǎn)品設(shè)計(jì)[M].范曉燕，譯.機(jī)械工業(yè)出版社，2011.

[4] 科爾科（Kolko J.）.交互設(shè)計(jì)沉思錄[M].方舟，譯.機(jī)械工業(yè)出版社，2012.