淺談高職教育中典型網(wǎng)站設(shè)計(jì)的實(shí)訓(xùn)教學(xué)

張曉穎

摘 要：隨著互聯(lián)網(wǎng)產(chǎn)業(yè)朝著視覺(jué)化、信息化方向高速發(fā)展，網(wǎng)站設(shè)計(jì)的要求也與日俱增，如今的網(wǎng)站設(shè)計(jì)不再停留在單一的美觀上，更加注重界面之外的情感及思想表達(dá)。這種變化，在給網(wǎng)站設(shè)計(jì)的發(fā)展帶來(lái)新機(jī)會(huì)的同時(shí)，也給高職教育的網(wǎng)站設(shè)計(jì)課程提出了更高要求。本文通過(guò)對(duì)高職教育中網(wǎng)站課程設(shè)計(jì)的研究，提出典型網(wǎng)站設(shè)計(jì)實(shí)訓(xùn)教學(xué)在高職教育中的分階設(shè)計(jì)及導(dǎo)入方法。

關(guān)鍵詞：典型網(wǎng)站 網(wǎng)頁(yè)設(shè)計(jì) 實(shí)訓(xùn)教學(xué) 分階設(shè)計(jì)

現(xiàn)今社會(huì)，互聯(lián)網(wǎng)信息產(chǎn)業(yè)完全融入了我們的生活，網(wǎng)站作為信息化的載體，要求也越來(lái)越高，各個(gè)行業(yè)和企業(yè)對(duì)網(wǎng)站的要求不再僅僅停留在美觀好看，而是更多的希望通過(guò)自己的網(wǎng)站表達(dá)自身有別于其他的思想和文化內(nèi)涵。隨著技術(shù)的發(fā)展，很多以前不容易實(shí)現(xiàn)的審美形式正逐漸被突破，給高職教育中網(wǎng)站設(shè)計(jì)課程教學(xué)如何更好的適應(yīng)社會(huì)需求，提出了新的要求。

1.典型網(wǎng)站設(shè)計(jì)的含義

典型網(wǎng)站設(shè)計(jì)是指根據(jù)不同行業(yè)（如金融、教育、科技企業(yè)、游戲產(chǎn)業(yè)、消費(fèi)品、電子商務(wù)、綜合類等等）所體現(xiàn)出來(lái)的文化內(nèi)涵，以及行業(yè)受眾群體需求共性而進(jìn)行的代表性網(wǎng)站界面設(shè)計(jì)。典型網(wǎng)站設(shè)計(jì)課程的目的在于通過(guò)對(duì)行業(yè)網(wǎng)站的分類練習(xí)，讓學(xué)生體會(huì)每個(gè)行業(yè)網(wǎng)站的特點(diǎn)，最終達(dá)到準(zhǔn)確、迅速、獨(dú)立的進(jìn)行網(wǎng)站設(shè)計(jì)所必備的技能。

2.實(shí)訓(xùn)教學(xué)設(shè)計(jì)的思路

高職教育的最終目的是讓學(xué)生學(xué)以致用，典型網(wǎng)站設(shè)計(jì)課程在教學(xué)的設(shè)計(jì)上圍繞高職教育的培養(yǎng)目標(biāo)，以能力為本位，從職業(yè)崗位需要出發(fā)，注重崗位能力培養(yǎng)，突出實(shí)踐環(huán)節(jié)進(jìn)行課程設(shè)計(jì)，努力培養(yǎng)第一線的實(shí)用型人才。在教學(xué)方法上，采用案例教學(xué)法和項(xiàng)目教學(xué)法相結(jié)合，重視與學(xué)生的互動(dòng)，堅(jiān)持學(xué)生為本，堅(jiān)持以實(shí)踐為本，注重學(xué)生專業(yè)技能與職業(yè)素質(zhì)的培養(yǎng)，努力使學(xué)生通過(guò)實(shí)訓(xùn)獲得就業(yè)的技能和創(chuàng)業(yè)的本領(lǐng)。

3.典型網(wǎng)站設(shè)計(jì)實(shí)訓(xùn)課程的分階設(shè)計(jì)

實(shí)訓(xùn)教學(xué)的對(duì)象主要針對(duì)完成網(wǎng)站設(shè)計(jì)基礎(chǔ)課程，即掌握了photoshop基礎(chǔ)，對(duì)網(wǎng)頁(yè)布局基礎(chǔ)、div+css布局較熟練的學(xué)生，其重點(diǎn)是創(chuàng)作思路和設(shè)計(jì)表達(dá)上的培養(yǎng)，課程分為四個(gè)階段進(jìn)行（教學(xué)周18周，周課時(shí)10節(jié)）：

第一階段：模塊化設(shè)計(jì)（4周）

此階段采用案例教學(xué)法與討論法相結(jié)合，從網(wǎng)頁(yè)組成細(xì)節(jié)元素著手，使大家掌握網(wǎng)頁(yè)元素如按鈕，導(dǎo)航條，欄目模塊的特點(diǎn)和特效表達(dá)。以按鈕教學(xué)為例，準(zhǔn)備一組優(yōu)劣對(duì)比的按鈕，首先讓學(xué)生談?wù)?個(gè)素材帶來(lái)的情感感受，引導(dǎo)學(xué)生分析作品的優(yōu)劣勢(shì)，提高審美感；其次讓學(xué)生分析元素構(gòu)成，高光陰影的配合等，提高技能。最后教師演示按鈕的實(shí)現(xiàn)步驟，并要求學(xué)生根據(jù)步驟完成練習(xí)。為了便于學(xué)生課后復(fù)習(xí)，輔以課堂錄像方式，將案例實(shí)現(xiàn)的整個(gè)過(guò)程展現(xiàn)給學(xué)生，對(duì)學(xué)生提交作品采用互評(píng)和點(diǎn)評(píng)的方式，集體演示作品存在的共性問(wèn)題，幫助學(xué)生不斷提高。

該階段主要讓學(xué)生了解細(xì)節(jié)對(duì)于整體的重要性，養(yǎng)成精雕細(xì)琢的設(shè)計(jì)習(xí)慣，培養(yǎng)自我耐性，提高審美能力，能正確的分析自己作品優(yōu)劣不斷修改加以提高。

第二階段：banner設(shè)計(jì)（6周）

一個(gè)網(wǎng)站的好壞，很大程度上由banner決定。從人的視覺(jué)流程來(lái)說(shuō)，打開(kāi)一個(gè)網(wǎng)站，用戶第一眼看到的是最為顯眼的網(wǎng)站banner區(qū)域，此區(qū)域是否有沖擊力，直接影響用戶對(duì)網(wǎng)站的好壞的判斷。網(wǎng)頁(yè)設(shè)計(jì)的審美需求是對(duì)平面視覺(jué)傳達(dá)設(shè)計(jì)美學(xué)的一種繼承和延伸。兩者的表現(xiàn)形式和目的都有一定的相似性，把傳統(tǒng)平面設(shè)計(jì)中美的形式同現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的具體問(wèn)題相結(jié)合，運(yùn)用平面設(shè)計(jì)中美的基本形式到網(wǎng)頁(yè)中去，增加網(wǎng)頁(yè)設(shè)計(jì)的美感和大眾的視覺(jué)審美需求，因此分配6周的時(shí)間用于banner設(shè)計(jì)教學(xué)。

本階段教學(xué)目的是為了強(qiáng)化學(xué)生對(duì)banner的理解以及進(jìn)一步培養(yǎng)審美感，提高banner中文字，背景，產(chǎn)品，素材等各元素的表達(dá)能力。前文提到，典型網(wǎng)站設(shè)計(jì)的含義就是遵從各行業(yè)網(wǎng)站所需表達(dá)的內(nèi)容，因此在實(shí)訓(xùn)教學(xué)過(guò)程中，將常見(jiàn)的典型網(wǎng)站分為金融篇、網(wǎng)絡(luò)篇、消費(fèi)品篇、公益篇、服裝篇、淘寶店鋪篇、電子產(chǎn)品篇、化妝品篇、游戲篇等，針對(duì)每個(gè)篇章都以真實(shí)商業(yè)項(xiàng)目為案例，精心設(shè)計(jì)2-3個(gè)banner。Banner設(shè)計(jì)階段主要針對(duì)色調(diào)的掌控、明暗對(duì)比、背景的處理、素材的選擇、文字的選用、變形、排版等方面。此階段也可能遇到這樣的問(wèn)題：通過(guò)老師的引導(dǎo)分析能夠完成一個(gè)案例，但表達(dá)出來(lái)的banner往往很平淡。針對(duì)這個(gè)特點(diǎn)，在分析，演示、練習(xí)、評(píng)價(jià)和作業(yè)互評(píng)的基礎(chǔ)上，更加注重對(duì)處理技巧的講解與輔導(dǎo)，同時(shí)輔以大量練習(xí)，使學(xué)生在牢固技術(shù)基礎(chǔ)的前提下，達(dá)到量變到質(zhì)變，從模仿到創(chuàng)作的蛻變。

通過(guò)這一階段的訓(xùn)練，學(xué)生對(duì)一個(gè)題材的表達(dá)會(huì)得到提高，知道從哪些方面著手分析，加入哪些元素，適合什么主色調(diào)，素材如何選擇，字體如何搭配。通過(guò)多看，多想，多練的磨練，即多看：多欣賞一些好的作品；多想：思考人家的表達(dá)方式，配色模式、文字處理方式；多練：就是進(jìn)行大量的練習(xí)，從而達(dá)到美工到設(shè)計(jì)師的轉(zhuǎn)變。

第三階段：整體頁(yè)面設(shè)計(jì)（6周）

為了增強(qiáng)頁(yè)面的可閱讀性，合理性，恰當(dāng)?shù)剡\(yùn)用與搭配頁(yè)面各要素間的色彩，在完成了前2個(gè)階段的強(qiáng)化訓(xùn)練后，進(jìn)入整體頁(yè)面設(shè)計(jì)培訓(xùn)階段。該階段加強(qiáng)了整體排版的設(shè)計(jì)，在課程設(shè)計(jì)上，首先根據(jù)不同的行業(yè)需求進(jìn)行頁(yè)面規(guī)劃，傳授整體型，流式排版，左中右排版，特殊型排版，綜合型排版等不同排版形式表達(dá)的重點(diǎn)，讓學(xué)生站在用戶的角度考慮，了解作為用戶最喜歡、最關(guān)注的欄目，給用戶有價(jià)值的信息，完成重點(diǎn)、次重點(diǎn)的劃分，并從網(wǎng)站的統(tǒng)一性，一致性著手，完成二、三級(jí)頁(yè)面的設(shè)計(jì)。最后用div+Css排版，并控制頁(yè)面大小30k左右，保證瀏覽速度，從而完成一個(gè)完整的網(wǎng)站。通過(guò)這階段完成6-8個(gè)整站設(shè)計(jì)，構(gòu)思、素材選擇、整體設(shè)計(jì)、子頁(yè)設(shè)計(jì)、綜合排版、整站布局各個(gè)流程全程參與，達(dá)到獨(dú)自設(shè)計(jì)完成的實(shí)訓(xùn)目的。

第四階段：自主命題設(shè)計(jì)（2周）

進(jìn)入項(xiàng)目準(zhǔn)備、答辯階段，在這2周，學(xué)生充分發(fā)揮自己的想法，設(shè)計(jì)一個(gè)主題網(wǎng)站，不少于5個(gè)頁(yè)面，并實(shí)現(xiàn)html。最后進(jìn)行全班演示答辯。通過(guò)這一階段的強(qiáng)化練習(xí)，提高學(xué)生設(shè)計(jì)能力，鍛煉學(xué)生的表達(dá)闡述、隨機(jī)應(yīng)變能力。

網(wǎng)頁(yè)設(shè)計(jì)是一門新興的設(shè)計(jì)和網(wǎng)絡(luò)的交叉學(xué)科也是一個(gè)感性的學(xué)科，更注重動(dòng)手能力，創(chuàng)新能力的培養(yǎng)。一個(gè)成功的網(wǎng)頁(yè)設(shè)計(jì)，不單單是美工設(shè)計(jì)那么簡(jiǎn)單，它包括了心理學(xué)，生理學(xué)，平面構(gòu)成，色彩構(gòu)成等多方向的知識(shí)，觀念上要確立獨(dú)立的思維方式，要有效地將設(shè)計(jì)元素引入網(wǎng)頁(yè)設(shè)計(jì)之中，只有了解并可以很好的運(yùn)用這些知識(shí)，我們?cè)O(shè)計(jì)出的網(wǎng)站才能增加人們?yōu)g覽網(wǎng)頁(yè)的興趣，才能更好的為受眾服務(wù)。所以除了技能，學(xué)生的創(chuàng)新能力和情感表達(dá)能力是非常重要的，只有這樣我們才能幫助學(xué)生成為一個(gè)真正的設(shè)計(jì)師，才能培養(yǎng)出真正的能適應(yīng)崗位的綜合型人才。

參考文獻(xiàn)：

[1]吳英男.網(wǎng)頁(yè)視覺(jué)信息的編排.《科技信息（科學(xué)教研）》 2008年16期.

[2]眾妙之門——網(wǎng)站UI設(shè)計(jì)之道.[德]Smashing Magazine.人民郵電出版社.