呂城

摘 要：本文旨在探尋針對設計藝術學院學生的網頁設計教學重點，在傳統(tǒng)網頁視覺設計教學知識點基礎上添磚加瓦，著力探討原型設計是網頁設計視覺化的重要基礎。

關鍵詞：原型設計；網頁設計；視覺設計教學

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

1 原型設計的概念與定義

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

2 原型設計在網頁設計中的作用

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

3 原型設計之于網頁設計教學

3.1 自我思路的溝通

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

3.2 師生之間的溝通

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

3.3 市場產學的溝通

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

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

參考文獻：

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

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

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

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