基于項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)踐教學(xué)

◇四川文理學(xué)院美術(shù)學(xué)院 葉 琪

傳統(tǒng)的網(wǎng)頁設(shè)計(jì)課程偏重于學(xué)生的操作技能的培養(yǎng)，而對以用戶為中心的設(shè)計(jì)思維教學(xué)流于表面。本文通過實(shí)施基于項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)踐教學(xué)，來探討網(wǎng)頁設(shè)計(jì)課程教學(xué)改革的思路。通過項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)現(xiàn)學(xué)生實(shí)踐知識和應(yīng)用能力的自我構(gòu)建。

作為一門置于諸多基礎(chǔ)課程之后的核心專業(yè)課，網(wǎng)頁設(shè)計(jì)是基于版式設(shè)計(jì)能力、交互設(shè)計(jì)、軟件操作能力的綜合運(yùn)用課程，更是培養(yǎng)學(xué)生以用戶為中心的設(shè)計(jì)思維的課程。傳統(tǒng)的網(wǎng)頁設(shè)計(jì)課程偏重學(xué)生的操作技能的培養(yǎng)，而對適應(yīng)當(dāng)下網(wǎng)頁設(shè)計(jì)需求所強(qiáng)調(diào)的實(shí)用性與藝術(shù)性未做教法上的平衡。如何設(shè)計(jì)教學(xué)內(nèi)容及方法，讓學(xué)生能綜合運(yùn)用到所學(xué)的知識來設(shè)計(jì)符合市場需求的網(wǎng)頁，是目前網(wǎng)頁設(shè)計(jì)課程需要解決的問題。

一、項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作教學(xué)的意義

項(xiàng)目驅(qū)動教學(xué)方法是一種建立在具體項(xiàng)目的教學(xué)方法，它以項(xiàng)目完成作為教學(xué)目標(biāo)，以師生共同參與為教學(xué)模式。項(xiàng)目驅(qū)動教學(xué)方法的整個教學(xué)過程以學(xué)生為中心。教師作為項(xiàng)目的組織者和指導(dǎo)者，在必要的時候?yàn)閷W(xué)生提供意見并引導(dǎo)方向；學(xué)生作為項(xiàng)目的實(shí)踐者，在理論知識為依據(jù)的情況下進(jìn)行方案呈現(xiàn)。

網(wǎng)頁設(shè)計(jì)的本質(zhì)是對網(wǎng)站的圖形界面進(jìn)行設(shè)計(jì)，也被稱為WUI。高校中的網(wǎng)頁設(shè)計(jì)課程多依托于Dreamweaver的操作教學(xué)，以教師理論講授、上機(jī)演示操作步驟，學(xué)生通過觀看被動接受為主。傳統(tǒng)的網(wǎng)頁設(shè)計(jì)教學(xué)中存在著一些短板，未能系統(tǒng)地將規(guī)劃網(wǎng)站功能與設(shè)計(jì)用戶交互流程相結(jié)合；學(xué)生對于設(shè)計(jì)的網(wǎng)站圖形界面過于主觀化，與真實(shí)的市場需求有一定的差距。網(wǎng)頁設(shè)計(jì)課程中中引入項(xiàng)目作為教學(xué)驅(qū)動能縮小這一差距，對教學(xué)有著積極的意義。第一，學(xué)生通過項(xiàng)目化教學(xué)能夠初識相對完整的商業(yè)流程，可以讓培養(yǎng)的新型人才更好的適應(yīng)未來就業(yè)相關(guān)崗位。第二，相對于傳統(tǒng)教學(xué)，能設(shè)計(jì)出更功能更完善，交互流程更流暢，視覺效果更個性與統(tǒng)一的網(wǎng)頁項(xiàng)目。第三，教學(xué)過程轉(zhuǎn)變?yōu)樘剿魇浇虒W(xué)，培養(yǎng)以用戶為主的設(shè)計(jì)思維，或可助力于創(chuàng)新型人才的培養(yǎng)，提升教學(xué)質(zhì)量。第四，以具體的教學(xué)項(xiàng)目對應(yīng)教學(xué)任務(wù)來驅(qū)動教學(xué)，可以提升學(xué)生的學(xué)習(xí)積極性，學(xué)生可以根據(jù)自身的知識基礎(chǔ)和理解問題的方式來制定完成項(xiàng)目任務(wù)的方式。

二、基于項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作的教學(xué)實(shí)施

教師在實(shí)施教學(xué)前應(yīng)該著手評估甄選具體的項(xiàng)目用作教學(xué)，要根據(jù)學(xué)生的能力選擇的項(xiàng)目難度要適中，且甄選的項(xiàng)目本身最好具備一定的落地可能。傳統(tǒng)的網(wǎng)頁設(shè)計(jì)課程教學(xué)內(nèi)容涵蓋了兩個部分，一部分是網(wǎng)頁的理論知識教學(xué)，一部分是Dreamweaver軟件的操作教學(xué)。此兩部分內(nèi)容在項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)踐教學(xué)中不宜與具體的項(xiàng)目作割裂，應(yīng)盡量融入在項(xiàng)目中作闡釋。

實(shí)施項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作教學(xué)在傳統(tǒng)的網(wǎng)頁設(shè)計(jì)課程的基礎(chǔ)上，增加了與市場接軌的內(nèi)容，即網(wǎng)站設(shè)計(jì)與制作之前的內(nèi)容，用戶研究等工作。整個教學(xué)內(nèi)容具體被拆分為項(xiàng)目規(guī)劃、內(nèi)容組織、頁面設(shè)計(jì)、測試發(fā)布、站點(diǎn)推廣、反饋評估六個步驟。教師將學(xué)生分成小組來進(jìn)行項(xiàng)目展開。

第一，項(xiàng)目規(guī)劃是前期與市場接軌的重要步驟。首先需要對網(wǎng)頁設(shè)計(jì)的項(xiàng)目需求進(jìn)行分析，明確項(xiàng)目的網(wǎng)頁性質(zhì)，針對用戶人群的使用習(xí)慣研究，以及這一部分人群所期待網(wǎng)頁能夠提供的服務(wù)和產(chǎn)品，形成產(chǎn)品需求文檔、市場文檔、競品調(diào)研文檔。此部分需要配合做大量的問卷調(diào)查和市場調(diào)查。最后再根據(jù)調(diào)研結(jié)果以用戶畫像的方式確定目標(biāo)用戶群體，再確定項(xiàng)目的產(chǎn)品和服務(wù)。

第二，內(nèi)容組織是將收集和篩選的網(wǎng)頁內(nèi)容進(jìn)行組織整理。以樹形圖或者是遞進(jìn)結(jié)構(gòu)來表現(xiàn)各個頁面之間的交叉鏈接、從屬關(guān)系。根據(jù)反復(fù)組織推敲合理的界面關(guān)系，可用Axure RP進(jìn)行原型圖階段的設(shè)計(jì)呈現(xiàn)。通過Axure RP設(shè)計(jì)出原型圖有助于學(xué)生對網(wǎng)頁鏈接的合理性以及交互體驗(yàn)的流暢感進(jìn)行自查。

第三，頁面設(shè)計(jì)即需要根據(jù)原型圖確定內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)。在具體的項(xiàng)目中，除了收集素材之外，可以讓學(xué)生根據(jù)項(xiàng)目主體設(shè)計(jì)一個情緒板（Mood Board）。情緒板是由諸多與主題相關(guān)的資料和素材拼貼在一起的視覺概念，有助于指引學(xué)生掌握項(xiàng)目的整個需求的設(shè)計(jì)主題和設(shè)計(jì)感受。在確立項(xiàng)目的具體風(fēng)格后，引入Photoshop的圖像處理。在處理網(wǎng)頁界面設(shè)計(jì)的時候，應(yīng)引導(dǎo)學(xué)生建立一定的設(shè)計(jì)規(guī)范，例如字體規(guī)范、主題色規(guī)范、圖標(biāo)規(guī)范、圖片規(guī)范等不同分類。設(shè)計(jì)規(guī)范能夠確保同一個項(xiàng)目的學(xué)生小組能夠輸出統(tǒng)一風(fēng)格的設(shè)計(jì)。

第四，通過Dreamweaver等網(wǎng)頁設(shè)計(jì)軟件進(jìn)行項(xiàng)目化驅(qū)動的呈現(xiàn)設(shè)計(jì)。學(xué)生在使用Dreamweaver構(gòu)建網(wǎng)頁的時候?yàn)榱诉_(dá)到項(xiàng)目規(guī)劃的視覺效果必然會自主地去學(xué)習(xí)一些初階的代碼，這就激發(fā)了學(xué)生學(xué)習(xí)的積極性。

第五，測試發(fā)布。這個過程是為了確保網(wǎng)頁的技術(shù)上的完整性，確保頁面內(nèi)容的可用性。

第六，反饋評估。根據(jù)用戶使用網(wǎng)站的反饋評估，反復(fù)改進(jìn)網(wǎng)頁。

在被拆解的這六個教學(xué)步驟中，教師需要積極地響應(yīng)小組成員的問題，提供及時、有效地指導(dǎo)和幫助。在教學(xué)的過程中，要根據(jù)具體的項(xiàng)目進(jìn)度，來安排及時的教學(xué)，實(shí)現(xiàn)“教，學(xué)，做”三位一體的教學(xué)方法。項(xiàng)目初步完成后，教師應(yīng)組織學(xué)生就項(xiàng)目進(jìn)行分享交流，各小組就各自的作品進(jìn)行演示呈現(xiàn)，并由小組長進(jìn)行初期策劃到最終呈現(xiàn)的過程展示。學(xué)生在此交流中達(dá)到了自評的目的。及時的總結(jié)與交流不僅能為之前的學(xué)習(xí)打下基礎(chǔ)，學(xué)生還可以從中探討經(jīng)驗(yàn)與心得，得到一定的成就感。教師參與交流過程，可以結(jié)合作品和小組設(shè)計(jì)闡述形成定性和定量的評價。

三、結(jié)語

基于項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)踐教學(xué)是非常有效的，學(xué)生可以在具體的項(xiàng)目語境下主動帶入目的去進(jìn)行學(xué)習(xí)，能夠充分調(diào)動學(xué)生學(xué)習(xí)的積極性，也能鍛煉學(xué)生分析解決實(shí)際問題的能力。同時，學(xué)生在整個過程中詳細(xì)了解了一個網(wǎng)頁界面設(shè)計(jì)從前期策劃到最后呈現(xiàn)的完整步驟，這種以用戶為主的設(shè)計(jì)思維的培養(yǎng)，有利于其獲得相關(guān)崗位的職業(yè)技能。

若要將項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)踐教學(xué)落到實(shí)處，首先，在項(xiàng)目甄選方面院校必須加強(qiáng)與社會各方的合作力度，這樣才能夠篩選出適宜教學(xué)的項(xiàng)目案例為教學(xué)所用。其次，院校需要對實(shí)訓(xùn)室的硬件設(shè)施進(jìn)行優(yōu)化和完善，讓學(xué)生能夠在接近工作環(huán)境的場所里進(jìn)行設(shè)計(jì)，進(jìn)而能夠保證學(xué)生能夠快速的接受未來的工作環(huán)境。最后，教師作為項(xiàng)目驅(qū)動的網(wǎng)頁設(shè)計(jì)與制作實(shí)踐課程的實(shí)施者，需要不斷學(xué)習(xí)新的技術(shù)知識，同市場的大需求接軌。