摘 要：網(wǎng)頁設(shè)計當(dāng)今設(shè)計行業(yè)需求最大的職位之一。當(dāng)前的國內(nèi)藝術(shù)專業(yè)網(wǎng)頁設(shè)計課程的教學(xué)現(xiàn)狀卻是：大多仍沿用傳統(tǒng)的灌輸式、接受性教學(xué)模式，教法老舊，專業(yè)能力單一、缺少應(yīng)變。信息時代的一個最顯著的特點是知識量大，知識的更新速度快。在網(wǎng)頁設(shè)計教學(xué)中，這個問題尤為突出。本文旨在通過對教學(xué)模式和教學(xué)內(nèi)容的雙重創(chuàng)新探索，讓學(xué)生能夠真正了解目前最新的互聯(lián)網(wǎng)技術(shù)與網(wǎng)頁設(shè)計發(fā)展趨勢，更快地與互聯(lián)網(wǎng)公司進行接軌。

關(guān)鍵詞：網(wǎng)頁設(shè)計；教學(xué)創(chuàng)新；任務(wù)驅(qū)動

1 當(dāng)代網(wǎng)頁設(shè)計教學(xué)的背景

1.1 計算機互聯(lián)網(wǎng)的發(fā)展

從1822年查爾斯·巴比奇發(fā)明了第一臺計算機（差分機），宣告了新一輪信息革命的開始，到1981年IBM的PC推出，再到今天的互聯(lián)網(wǎng)行業(yè)白熱化的發(fā)展，計算機幾乎改變了人們的生活，而藝術(shù)，作為人類的高級情感需求，存在于世界的每個角落，從古至今皆是如此，計算機也不例外。從計算機圖形操作界面發(fā)明那天起，網(wǎng)絡(luò)視覺藝術(shù)便隨之誕生，而在這之后的幾十年間，網(wǎng)絡(luò)視覺藝術(shù)的發(fā)展的在不斷的變化，而每一次的變革都起源于計算機技術(shù)的革新。

另一個具有同樣劃時代意義的發(fā)明是Internet，這個萌生于1969年美國軍方（Arpanet）、90年代初普及到全世界的網(wǎng)絡(luò)，讓我們今天做的一切成為可能。也正是基于圖形界面和Internet，網(wǎng)絡(luò)視覺藝術(shù)才真正產(chǎn)生。然而網(wǎng)絡(luò)視覺藝術(shù)對于當(dāng)時的設(shè)計師來說仍然難以觸碰，雖然平臺已經(jīng)成型，但是缺少設(shè)計的工具和技術(shù)支持，所以很多當(dāng)時的界面在如今看來顯得比較粗糙。1991年8月，蒂姆·伯納斯·李發(fā)布了史上第一個網(wǎng)站，這個網(wǎng)站是由純文本構(gòu)成的，目的是試圖告訴人們什么是互聯(lián)網(wǎng)。

1.2 網(wǎng)絡(luò)視覺藝術(shù)的發(fā)展

在這段時期，各種網(wǎng)絡(luò)視覺技術(shù)紛紛出現(xiàn)，首先崛起的當(dāng)是Flash技術(shù)，F(xiàn)lash起源于1996年，后來被Adobe公司收購，改名 Adobe Flash。Flash讓動態(tài)交互網(wǎng)頁成為可能，一時間各種網(wǎng)頁動畫效果五花八門，層出不窮，設(shè)計師們終于可以通過這一技術(shù)平臺來實現(xiàn)設(shè)計創(chuàng)意，且這一潮流經(jīng)久不衰。

到21世紀(jì)初，flash的一大競爭對手出現(xiàn)，它就是CSS（Cascading Style Sheet），其實CSS 1早在1996年就誕生了，只是一直被忽視，直到21世紀(jì)初才真正被人們了解和接受。CSS2具備很多flash所不具備的優(yōu)勢，比如內(nèi)容與表現(xiàn)分離、網(wǎng)頁文件體積小等，因此很快被程序員與設(shè)計師所青睞。而2004年web2.0的誕生讓CSS更加炙手可熱，自此以后，以HTML+CSS為核心表現(xiàn)手段的 web2.0風(fēng)格占據(jù)主導(dǎo)地位，同時期Javascript腳本語言等彌補了CSS在動態(tài)交互方面的不足，伴隨著3G技術(shù)和3G設(shè)備的成熟，一種被稱為UI風(fēng)格的設(shè)計形式日趨主流，這種風(fēng)格最初是用于移動界面或者電腦軟件，后來被遷移到了Web端。

1.3 網(wǎng)頁設(shè)計教學(xué)的更新

隨著網(wǎng)絡(luò)的普及和人們對網(wǎng)絡(luò)的依賴，人們對網(wǎng)頁的質(zhì)量也有了很高的要求，如人性化的頁面設(shè)計、版面設(shè)計的美感、色彩的搭配等。網(wǎng)頁，是視覺范疇的信息傳播媒體，網(wǎng)頁設(shè)計平臺也趨于多元化，近些年各大高校為了進一步滿足人們的視覺、審美、情趣等方面的要求，紛紛在藝術(shù)設(shè)計專業(yè)領(lǐng)域開設(shè)了網(wǎng)頁設(shè)計課程。藝術(shù)設(shè)計專業(yè)的學(xué)生設(shè)計制作網(wǎng)頁有藝術(shù)審美優(yōu)勢，如何針對藝術(shù)類專業(yè)學(xué)生上好這門課程，給學(xué)生提供一個設(shè)計平臺，使其將創(chuàng)意、構(gòu)思、構(gòu)成元素、版式設(shè)計、色彩取向、設(shè)計風(fēng)格等系統(tǒng)地融合在一起，是教授此課程的重要目的和內(nèi)容。藝術(shù)類專業(yè)學(xué)生如何更好地發(fā)揮其專業(yè)優(yōu)勢和特長，這與教師授課模式的啟發(fā)性、科學(xué)性、獨到性有重大關(guān)系。在傳統(tǒng)的網(wǎng)頁設(shè)計教學(xué)中，流行著網(wǎng)頁設(shè)計三劍客的教授內(nèi)容，即Dreamweaver、Flash、Fireworks這三個軟件的教學(xué)，因為這些軟件的出現(xiàn)，曾經(jīng)極大地將網(wǎng)頁設(shè)計推向了一個新的高度，然而，在如今的互聯(lián)網(wǎng)世界中，學(xué)生只學(xué)習(xí)三劍客的內(nèi)容就會發(fā)現(xiàn)已經(jīng)與互聯(lián)網(wǎng)行業(yè)脫軌。

以HTML+CSS為核心表現(xiàn)手段的 web2.0風(fēng)格已經(jīng)開始與flash平分秋色，而蘋果公司的靈魂人物：史蒂夫.喬布斯曾在2010年發(fā)表過一封公開信，公開表示蘋果所有硬件不支持flash，原因是“Flash是一個封閉的系統(tǒng)，蘋果拒絕使用Flash，而是用HTML5、CSS和JavaScript等全部都是開放的標(biāo)準(zhǔn)。得益于這些開放標(biāo)準(zhǔn)，蘋果的移動設(shè)備都表現(xiàn)出低功耗與高性能的優(yōu)勢。HTML5是最新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，已經(jīng)為蘋果、谷歌等許多公司所采用，它允許開發(fā)者開發(fā)出更為高級的圖形、印刷和動畫，并且不需要第三方瀏覽器插件（如Flash）就能轉(zhuǎn)換。HTML5是完全開放的?！倍缃瘢?dāng)設(shè)計師進入到互聯(lián)網(wǎng)公司后會發(fā)現(xiàn)，網(wǎng)頁設(shè)計的主要工作內(nèi)容不需要Flash，Dreamweaver和Fireworks。一名合格的網(wǎng)頁設(shè)計師需要去掌握的技能是：交互設(shè)計和視覺界面設(shè)計。

2 網(wǎng)頁設(shè)計課程的內(nèi)容組織

要明確網(wǎng)頁設(shè)計課程上的知識點和技能，首先要了解當(dāng)今互聯(lián)網(wǎng)公司中一個網(wǎng)頁產(chǎn)品設(shè)計的流程和設(shè)計師的職責(zé)才能設(shè)計出好的課堂內(nèi)容。而一名網(wǎng)頁設(shè)計師的工作，并不僅僅是輸出設(shè)計方案，需要參與前期的需求討論、后期開發(fā)、測試驗收等等產(chǎn)品設(shè)計與實現(xiàn)的多個環(huán)節(jié)。

第一，需求分析階段：這個階段需要了解產(chǎn)品的定位是什么？用戶群體是誰？他們有哪些特征？如果有競品，優(yōu)劣勢差異又在哪里？通過哪些功能來實現(xiàn)用戶的需求？這個階段的需求分析主要由產(chǎn)品經(jīng)理提供。但是設(shè)計師需要參與這個需求開發(fā)的過程。

第二，交互設(shè)計階段：首先是任務(wù)分析，分析用戶在使用產(chǎn)品過程中，需要進行的行為和認(rèn)知的過程，可以幫助建立產(chǎn)品的結(jié)構(gòu)和信息流。根據(jù)產(chǎn)品的功能點，設(shè)計師先確定用戶需要完成哪些任務(wù)？每個任務(wù)又可以分解為哪些子任務(wù)？這些子任務(wù)的操作流程、目標(biāo)是什么？分布在哪些頁面，子任務(wù)的層級結(jié)構(gòu)是怎樣的？任務(wù)、子任務(wù)的優(yōu)先級關(guān)系是怎樣的？如何在界面上突出主要任務(wù)？其次是導(dǎo)航設(shè)計，導(dǎo)航的目標(biāo)是突出主要功能點，讓用戶在完成任務(wù)時能一目了然地知道自己要從哪個入口進入。通過前面的功能分析和任務(wù)分析，對于用戶任務(wù)的優(yōu)先級已經(jīng)較為明確，此時可以思考、確定產(chǎn)品的導(dǎo)航設(shè)計；其三是頁面布局設(shè)計或頁面線框圖，整體框架、流程梳理完成后，開始逐個完成各個界面的布局設(shè)計、界面之間的跳轉(zhuǎn)關(guān)系。這個環(huán)節(jié)是整個交互設(shè)計的重中之重，如何設(shè)計友好而易用的界面，如何做到有效的組織將用戶重點關(guān)注的信息凸顯出來，非?？简炓晃唤换ピO(shè)計師的能力。另外，這個環(huán)節(jié)也要著手思考交互操作細(xì)節(jié)。

第三，視覺設(shè)計階段：將交互原型輸出為視覺設(shè)計方案，視覺設(shè)計主要負(fù)責(zé)產(chǎn)品或網(wǎng)站的圖形、圖標(biāo)、色彩、視覺風(fēng)格等，決定營造出什么樣的視覺體驗。從視覺層面把控產(chǎn)品界面設(shè)計，確保UI稿在視覺上清晰的傳達(dá)設(shè)計師的交互設(shè)計稿，也就是高保真視覺稿。

第四，開發(fā)與測試驗收階段：測試用例撰寫時，測試者可能會提出一些尚未考慮到的特殊操作場景。交互設(shè)計師需要思考、補充相應(yīng)的交互設(shè)計說明。同時在測試用例評審階段，需要確認(rèn)所有的用例是否與交互文檔上一致。開發(fā)實現(xiàn)過程中，若開發(fā)遇到一些交互上的疑問，設(shè)計師需要實時跟進、討論、確定最終實現(xiàn)方案。

第五，搜集用戶反饋階段：設(shè)計師通常采用的方式是用戶調(diào)研、可用性測試、各種用戶反饋渠道搜集。并且設(shè)計師需要分析用戶反饋問題的合理性、是否需要優(yōu)化。對于值得重視的反饋，需要思考設(shè)計方案、推進實現(xiàn)。

因此，在一個實際的網(wǎng)頁設(shè)計過程中，設(shè)計師所要做的事情遠(yuǎn)遠(yuǎn)超過了傳統(tǒng)教學(xué)課堂中的flash動畫效果，或者用photoshop做一個按鈕而已。網(wǎng)頁設(shè)計課程的教學(xué)目的應(yīng)該體現(xiàn)在學(xué)生完成該課程后與互聯(lián)網(wǎng)公司的相關(guān)設(shè)計崗位做到無縫連接，并且熟悉互聯(lián)網(wǎng)公司的產(chǎn)品流程，了解一個產(chǎn)品團隊的合作模式。

2.1 教學(xué)基本設(shè)計理念

對于課程教學(xué)模式是教學(xué)理論和教學(xué)實踐的綜合體，課堂教學(xué)模式是指在課堂教學(xué)環(huán)境下，在現(xiàn)代教育思想和豐富的教學(xué)經(jīng)驗基礎(chǔ)上，為完成特定的教學(xué)目標(biāo)和內(nèi)容而圍繞某一主題形成的、穩(wěn)定且簡明的教學(xué)結(jié)構(gòu)理論框架及其具體可操作的實踐活動方式，而 “任務(wù)驅(qū)動”的教學(xué)思想不是最近才有，2000 多年前我國著名教育家孔子就提倡“學(xué)以致用”，在新世紀(jì)的新形勢下，網(wǎng)頁設(shè)計教學(xué)中的任務(wù)驅(qū)動“具有更新的內(nèi)涵和更深刻的意義?！?/p>

所謂任務(wù)驅(qū)動教學(xué)模式，就是學(xué)生在教師的幫助下，緊緊圍繞一個共同的任務(wù)為活動中心，在強烈的問題動機的驅(qū)動下，通過對學(xué)習(xí)資源的積極主動應(yīng)用，進行自主探索和互動協(xié)作的學(xué)習(xí)；并在完成既定任務(wù)的同時，引導(dǎo)學(xué)生產(chǎn)生一種學(xué)習(xí)實踐活動。教師將所要學(xué)習(xí)的新知識隱含在一個或幾個任務(wù)之中，學(xué)生對新任務(wù)進行分析、討論，明確它大體涉及哪些知識，并找出哪些是舊知識，哪些是新知識，在老師的指導(dǎo)、幫助下找出解決問題的方法，最后通過任務(wù)的完成來做到對所學(xué)知識的意義建構(gòu)。在完成任務(wù)的同時，學(xué)生培養(yǎng)了創(chuàng)新意識、創(chuàng)新能力以及自主學(xué)習(xí)的習(xí)慣。落實到網(wǎng)頁設(shè)計課上，就是教師把一個教學(xué)單元要完成的教學(xué)內(nèi)容設(shè)計成一個或多個具體的任務(wù)，讓學(xué)生通過完成一個個具體的任務(wù)，掌握網(wǎng)頁設(shè)計的專業(yè)知識和技能，達(dá)到教學(xué)目標(biāo)的要求。

因此，筆者將本課程為兩個階段：理論講授結(jié)合課堂練習(xí)階段和任務(wù)驅(qū)動階段。

2.2 重點知識架構(gòu)

在任務(wù)驅(qū)動階段，將按照真實的網(wǎng)頁產(chǎn)品設(shè)計流程來要求學(xué)生獨立完成一個網(wǎng)站產(chǎn)品，這一階段的內(nèi)容大致包括：用戶調(diào)研，交互設(shè)計，視覺傳達(dá)效果以及故事板的模擬。因此，為了讓學(xué)生能夠更好地在任務(wù)階段進行實踐，則需要在理論講授過程中，結(jié)合課堂練習(xí)先讓學(xué)生了解初步的網(wǎng)頁設(shè)計內(nèi)容，內(nèi)容包括：網(wǎng)頁發(fā)展和趨勢，css和html，網(wǎng)頁基本布局原則，網(wǎng)頁的排版，導(dǎo)航的設(shè)計，案例教學(xué)等內(nèi)容。這些教學(xué)和實踐內(nèi)容按照教學(xué)進度梳理如下：

第一，了解網(wǎng)頁設(shè)計發(fā)展與趨勢，互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)頁的分類。課堂練習(xí)為：對比同一類型網(wǎng)站不同公司的設(shè)計風(fēng)格和使用體驗分析。

第二，掌握網(wǎng)頁設(shè)計布局原理，課堂練習(xí)為：設(shè)計一個簡單的注冊表單。

第三，掌握導(dǎo)航設(shè)計要點，課堂練習(xí)為：設(shè)計某網(wǎng)站的導(dǎo)航欄，設(shè)計風(fēng)格和布局效果自定義。

第四，掌握網(wǎng)頁的圖文排版，css基礎(chǔ)，課堂練習(xí)為：根據(jù)上一次的作業(yè)，繼續(xù)設(shè)計一個二級頁面，重點練習(xí)圖文排版。

第五，案例分析課，課堂練習(xí)為：將指定網(wǎng)站的設(shè)計改版前后效果進行比對分析。

第六，掌握部分頁面元素設(shè)計，課堂練習(xí)為：設(shè)計某類型網(wǎng)站的按鈕一套。

第七，了解交互設(shè)計，并介紹下一階段任務(wù)的要求和內(nèi)容。

重點知識的架構(gòu)是為了更好地過渡到任務(wù)實踐階段的需求分析，交互設(shè)計和視覺界面效果設(shè)計的知識技能培訓(xùn)中。

3 設(shè)計課程任務(wù)模式

在任務(wù)實踐的模式中，“任務(wù)”直接影響教學(xué)效果，因此，“任務(wù)”的設(shè)計、編排非常關(guān)鍵。

第一，“任務(wù)”設(shè)計要有明確的目標(biāo)，在學(xué)習(xí)總體目標(biāo)的框架上，把總?cè)蝿?wù)劃分成一個個的子任務(wù)，通過這些 “子任務(wù)”來體現(xiàn)總的學(xué)習(xí)目標(biāo)。設(shè)計任務(wù)時應(yīng)考慮知識點之間的前后呼應(yīng)、關(guān)系，循序漸進。

第二，設(shè)計開放性的任務(wù)，學(xué)生所面對的學(xué)習(xí)任務(wù)應(yīng)該將多個知識點包含在一起，最好能設(shè)計一些沒有唯一正確答案的問題解決型任務(wù)。在設(shè)計某些任務(wù)時只有原則要求，大部分內(nèi)容由學(xué)生自由發(fā)揮實現(xiàn)。

第三，設(shè)置認(rèn)知沖突、激發(fā)學(xué)生的參與欲望讓學(xué)生自己發(fā)現(xiàn)問題并提出問題，特別在新知識的引入上設(shè)置一些問題。學(xué)生在老師的引導(dǎo)下，經(jīng)過積極的思考把問題提出來。這時教師再將新知識介紹給學(xué)生，學(xué)生自然而然就建立了對新知識的認(rèn)識。例如在“交互設(shè)計流程圖”知識點時，將之前做過的練習(xí)“填表單”這部分內(nèi)容拿出來轉(zhuǎn)變成流程圖的方式，再提問流程圖上出現(xiàn)的問題有哪些？因為是自己做的作業(yè)，學(xué)生有參與的欲望，希望能在這個流程圖上發(fā)現(xiàn)問題，再經(jīng)過教師的指點，學(xué)生可以得出流程圖的展現(xiàn)應(yīng)該更具有邏輯性的結(jié)論。

第四，選擇的任務(wù)要有趣味性，如果教師設(shè)計的任務(wù)有趣味性就能激發(fā)起學(xué)生的好奇心，激起他們強烈的求知欲。

因此，在任務(wù)實踐階段的課程架構(gòu)安排為：首先是用戶需求分析，根據(jù)指定類型網(wǎng)站，任意選擇某網(wǎng)站進行改版設(shè)計，首先對選定網(wǎng)站的整體內(nèi)容有一個全面的了解，將網(wǎng)站內(nèi)容進行歸類分析；其次分析網(wǎng)站用戶群，包括用戶類型，習(xí)慣等；其次是交互設(shè)計階段——草圖，可以用紙和筆設(shè)計出網(wǎng)站的最初結(jié)構(gòu)，包括基本功能點和內(nèi)容；其三是交互設(shè)計階段——線框圖，利用作圖軟件ps，ai或?qū)I(yè)交互設(shè)計軟件Axure設(shè)計整個網(wǎng)站主要頁面的頁面布局，頁面跳轉(zhuǎn)和結(jié)構(gòu)層級，這一階段是重點考察學(xué)生的邏輯思考能力；其四是故事板，虛擬一個用戶使用場景，通過操作流程來檢驗線框圖的合理性；其五是視覺界面效果設(shè)計，確定界面風(fēng)格，圖文排版，色彩搭配和按鈕等UI設(shè)計內(nèi)容。

4 結(jié)語

培養(yǎng)專業(yè)人才，要從高校開始；全面的知識結(jié)構(gòu)，必須從合理的課程設(shè)置開始。 互聯(lián)網(wǎng)在高速發(fā)展，技術(shù)推動了設(shè)計革新，因此作為設(shè)計教育者，應(yīng)與時俱進，不能停留在即將被淘汰的技術(shù)應(yīng)用和設(shè)計風(fēng)格上，這樣，學(xué)生才能與社會接軌。通過對網(wǎng)頁設(shè)計課程的創(chuàng)新改革，無論是從教學(xué)模式上，還是授課內(nèi)容上，都與當(dāng)今互聯(lián)網(wǎng)技術(shù)和設(shè)計趨勢緊緊相扣，將學(xué)生帶入互聯(lián)網(wǎng)設(shè)計的世界，并培養(yǎng)出相應(yīng)的應(yīng)用型人才。

參考文獻：

[1] 趙云.提高網(wǎng)頁設(shè)計能力的“任務(wù)驅(qū)動”教學(xué)設(shè)計[J].軟件導(dǎo)刊，2010（8）：187-189.

[2] 張軍.網(wǎng)頁設(shè)計課程中關(guān)于UI設(shè)計教學(xué)的探索體會[J].湖北美術(shù)學(xué)院學(xué)報，2009（4）：84-86.

[3] 許娟.任務(wù)驅(qū)動教學(xué)模式在藝術(shù)設(shè)計專業(yè)網(wǎng)頁設(shè)計教學(xué)中的應(yīng)用研究[D].南京藝術(shù)學(xué)院，2008.

[4] 何麗萍.試論網(wǎng)頁設(shè)計教學(xué)結(jié)構(gòu)的合理構(gòu)建[J].包裝世界，2013（5）：70-71.

作者簡介：夏宇佳（1986—），女，陜西西安人，設(shè)計學(xué)碩士，西安交通大學(xué)城市學(xué)院藝術(shù)系教師，研究方向：環(huán)境藝術(shù)設(shè)計，網(wǎng)頁設(shè)計。