《軟件UI 設(shè)計》課程中網(wǎng)站UI 設(shè)計的教學(xué)探討

譚恒松

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

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

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

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

（一）整體設(shè)計

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

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

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

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

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

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

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

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

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

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

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

針對存在的問題，我們也提出一部分改進對策，主要有：

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

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

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

三、結(jié)束語

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