譚恒松

（浙江工商職業(yè)技術(shù)學(xué)院，浙江 寧波 315012）

網(wǎng)站UI 設(shè)計(jì)在《軟件UI 設(shè)計(jì)》課程中非常重要，就是這門課的課程設(shè)計(jì)。學(xué)生需要根據(jù)教師的要求來(lái)認(rèn)真完成。如何設(shè)計(jì)好網(wǎng)站UI 設(shè)計(jì)的教學(xué)顯得非常重要，本文結(jié)合《軟件UI 設(shè)計(jì)》課程的特點(diǎn)，對(duì)網(wǎng)站UI 設(shè)計(jì)的教學(xué)進(jìn)行初步探討。

一、網(wǎng)站UI 設(shè)計(jì)的教學(xué)設(shè)計(jì)

網(wǎng)站UI 設(shè)計(jì)就是要改版《軟件UI 設(shè)計(jì)》這門課的課程網(wǎng)站，需要學(xué)生做出一個(gè)美觀的網(wǎng)站，對(duì)教師和學(xué)生都有很高的要求。課程網(wǎng)站包括主頁(yè)、課程介紹、學(xué)習(xí)指南、教學(xué)大綱、授課計(jì)劃、考核方案、教學(xué)課件、章節(jié)資料、學(xué)生作品、設(shè)計(jì)教程、微課學(xué)習(xí)以及訓(xùn)練營(yíng)。其中，設(shè)計(jì)教程主要是找出很多優(yōu)秀的UI 設(shè)計(jì)教程，然后做超鏈接，這一部分改版時(shí)，學(xué)生可以自己去找自己喜歡的教程，做好圖片后鏈接過去。教學(xué)大綱等基本課程資料，學(xué)生只需要將內(nèi)容復(fù)制到自己的網(wǎng)站就行。訓(xùn)練營(yíng)里面的內(nèi)容需要學(xué)生更加訓(xùn)練營(yíng)的主題，自己去找圖片，經(jīng)過處理后放在相應(yīng)的位置。

（一）整體設(shè)計(jì)

網(wǎng)站UI 設(shè)計(jì)教學(xué)總體分為兩大塊：研究需要改版的網(wǎng)站和應(yīng)用模板進(jìn)行改版。對(duì)需要改版的網(wǎng)站進(jìn)行剖析，看看哪些素材能夠直接使用，還需要補(bǔ)充一下什么樣的素材。研究好后就可以去下載適合的CSS 模板，對(duì)模板進(jìn)行改版了。

（二）教學(xué)資源準(zhǔn)備

俗話說(shuō)：“磨刀不誤砍柴工”，教學(xué)資源的準(zhǔn)備非常重要。要完成網(wǎng)站UI 設(shè)計(jì)，需要自己學(xué)生找好模板，力爭(zhēng)班級(jí)每個(gè)同學(xué)所用的CSS 模板都不一樣?？赡芤粋€(gè)學(xué)生還需要找多個(gè)模板，因?yàn)橐粋€(gè)模板可能不能勝任網(wǎng)站UI設(shè)計(jì)的教學(xué)工作，有些功能需要從不同模板提取出來(lái)?，F(xiàn)在比較好的模板網(wǎng)站主要包括模板之家、模板王、站長(zhǎng)素材等網(wǎng)站，他們給出的CSS 模板可以直接用，整體模板都設(shè)計(jì)得比較好，學(xué)生可以根據(jù)自己的喜歡選擇不同的模板。在選擇模板時(shí)，還需要提醒學(xué)生，有些模板只有一個(gè)頁(yè)面的盡量不要用，自己用dreamweaver 打開時(shí)，如果模板的布局非常亂也需要果斷放棄，這樣的模板修改起來(lái)非常困難。選擇的模板打開后至少要有4個(gè)左右不同的頁(yè)面，這樣才能滿足我們改版網(wǎng)站的需要。我們的原網(wǎng)站有的頁(yè)面如訓(xùn)練營(yíng)部分，至少出現(xiàn)不同格式的頁(yè)面有三個(gè)，這樣就需要改版時(shí)準(zhǔn)備三個(gè)不同頁(yè)面來(lái)相對(duì)應(yīng)。

改版我們的課程網(wǎng)站，學(xué)生還需要準(zhǔn)備很多和UI 設(shè)計(jì)相關(guān)的圖片，學(xué)生可以從別的UI 設(shè)計(jì)網(wǎng)站去下載圖片，如http://www.uimaker.com/網(wǎng)站，里面有許多和UI 設(shè)計(jì)相關(guān)的優(yōu)秀圖片以及案例，學(xué)生可以直接將資源拿下了，作為新的課程網(wǎng)站的素材。

（三）課堂教學(xué)設(shè)計(jì)

網(wǎng)站UI 設(shè)計(jì)的教學(xué)至少需要16 個(gè)課時(shí)，也可以根據(jù)學(xué)生的完成情況增加4 個(gè)課時(shí)。具體安排如下表所示：

該部分的課堂教學(xué)時(shí)間一般是不夠的，學(xué)生需要自己在課外再花時(shí)間來(lái)完成整個(gè)網(wǎng)站的改版，特別是在處理細(xì)節(jié)方面，學(xué)生需要花費(fèi)更多時(shí)間。學(xué)生在課外還需要組成一個(gè)小組來(lái)互相督促與檢查，小組成員之間互相檢查進(jìn)度與質(zhì)量，當(dāng)發(fā)現(xiàn)某個(gè)成員做的網(wǎng)站有問題時(shí)，需要及時(shí)指出，這樣才能做出好的作品。

（四）教學(xué)內(nèi)容的考核

網(wǎng)站UI 設(shè)計(jì)的考核主要采用學(xué)生打分和教師打分相結(jié)合。每個(gè)學(xué)生都必須到教師機(jī)來(lái)演示自己的作品，給學(xué)生講解自己作品，展示自己的作品內(nèi)容，分析自己作品的優(yōu)缺點(diǎn)。其他學(xué)生和教師根據(jù)作品的情況進(jìn)行分檔打分。學(xué)生網(wǎng)站UI 設(shè)計(jì)的成績(jī)分為A、B、C 三檔。打分時(shí)，將根據(jù)班級(jí)人數(shù)，對(duì)A的數(shù)目和C 的數(shù)目進(jìn)行限制。最后統(tǒng)計(jì)學(xué)生的打分情況，教師給出一個(gè)綜合的成績(jī)。

二、網(wǎng)站UI 設(shè)計(jì)教學(xué)中存在的問題及對(duì)策

《軟件UI 設(shè)計(jì)》課程教學(xué)已經(jīng)好多年了，學(xué)生改版的網(wǎng)站應(yīng)用的模板很多，但很少看到比較優(yōu)秀的網(wǎng)站。學(xué)生似乎被原課程網(wǎng)站限制住了，改版的網(wǎng)站很難超越原網(wǎng)站，學(xué)生的創(chuàng)新點(diǎn)比較少。

針對(duì)存在的問題，我們也提出一部分改進(jìn)對(duì)策，主要有：

（1）增加對(duì)原網(wǎng)站的剖析課時(shí)，讓學(xué)生對(duì)原網(wǎng)站有充分認(rèn)識(shí)。特別是微課學(xué)習(xí)部分，要給學(xué)生講解如何引入優(yōu)酷視頻，讓學(xué)生學(xué)會(huì)查看網(wǎng)站的源代碼，從網(wǎng)頁(yè)源代碼中找出對(duì)我們有用的代碼。

（2）增加一些優(yōu)秀網(wǎng)站的案例，提高學(xué)生的審美能力。特別是國(guó)外一些優(yōu)秀的網(wǎng)站，讓學(xué)生多去查看，慢慢積累一些案例，試著去模仿制作一些自己的網(wǎng)站。

（3）重視學(xué)生的實(shí)際水平，加大課外的設(shè)計(jì)時(shí)間。課堂教學(xué)始終是不夠的，學(xué)生需要課外再去學(xué)習(xí)一些新的知識(shí)。

三、結(jié)束語(yǔ)

關(guān)于網(wǎng)站UI 設(shè)計(jì)的教學(xué)，要更加注重學(xué)生的創(chuàng)新能力的培養(yǎng)，讓學(xué)生多觀察、多思考，學(xué)會(huì)將多個(gè)模板融合在一起，做到融會(huì)貫通。教學(xué)需要不停探索與改革，找到適合學(xué)生的教學(xué)設(shè)計(jì)，不斷提高教學(xué)效果。