《軟件UI 設計》課程中網站UI 設計的教學探討

譚恒松

（浙江工商職業技術學院，浙江 寧波 315012）

網站UI 設計在《軟件UI 設計》課程中非常重要，就是這門課的課程設計。學生需要根據教師的要求來認真完成。如何設計好網站UI 設計的教學顯得非常重要，本文結合《軟件UI 設計》課程的特點，對網站UI 設計的教學進行初步探討。

一、網站UI 設計的教學設計

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

（一）整體設計

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

（二）教學資源準備

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

改版我們的課程網站，學生還需要準備很多和UI 設計相關的圖片，學生可以從別的UI 設計網站去下載圖片，如http://www.uimaker.com/網站，里面有許多和UI 設計相關的優秀圖片以及案例，學生可以直接將資源拿下了，作為新的課程網站的素材。

（三）課堂教學設計

網站UI 設計的教學至少需要16 個課時，也可以根據學生的完成情況增加4 個課時。具體安排如下表所示：

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

（四）教學內容的考核

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

二、網站UI 設計教學中存在的問題及對策

《軟件UI 設計》課程教學已經好多年了，學生改版的網站應用的模板很多，但很少看到比較優秀的網站。學生似乎被原課程網站限制住了，改版的網站很難超越原網站，學生的創新點比較少。

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

（1）增加對原網站的剖析課時，讓學生對原網站有充分認識。特別是微課學習部分，要給學生講解如何引入優酷視頻，讓學生學會查看網站的源代碼，從網頁源代碼中找出對我們有用的代碼。

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

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

三、結束語

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