項目體驗式教學設(shè)計方法的探究與實踐
——以《網(wǎng)頁界面設(shè)計》課程為例

李如桃 寧波職業(yè)技術(shù)學院

一、概述

《網(wǎng)頁界面設(shè)計》是計算機專業(yè)培養(yǎng)學生從事網(wǎng)頁設(shè)計師崗位工作必備技能的一門專業(yè)核心課程。本課課程的教學目的，在于培養(yǎng)學生正確的理性藝術(shù)思維方法，豐富學生的藝術(shù)表現(xiàn)手段，并通過網(wǎng)頁界面設(shè)計的訓練，掌握網(wǎng)頁視覺表現(xiàn)的構(gòu)成原則、方式、方法。課程主要講述網(wǎng)頁界面設(shè)計的方法和工具應(yīng)用，培養(yǎng)使用Photoshop等軟件繪制網(wǎng)頁元素、布局網(wǎng)頁界面的能力，同時養(yǎng)成團隊協(xié)作、溝通協(xié)調(diào)、尊重與服從的工作習慣。

項目體驗教學法是一種以學生為教學主體，項目作為教學內(nèi)容的載體，將體驗融入教學過程的一種教學模式。將貼近職場需求的項目分解為可實施的課堂任務(wù)，通過學生親自動手實施，教師引導學生體驗項目進展的全過程，師生共同完成對理論知識和操作技能的提煉歸納，達到教學目標。

二、《網(wǎng)頁界面設(shè)計》課程項目體驗式教學設(shè)計思路

首先，根據(jù)課程的教學目標，確定項目。教師在對課程進行深入分析及準確定位的基礎(chǔ)上，選擇恰當?shù)馁N近職場的實際項目。本課程根據(jù)現(xiàn)行主流網(wǎng)站類型，選定“門戶網(wǎng)站-產(chǎn)品網(wǎng)站-電商網(wǎng)站-移動端網(wǎng)站”四個設(shè)計項目，從易到難，螺旋進階式講解網(wǎng)頁界面設(shè)計方法、規(guī)范及實現(xiàn)技術(shù)。項目源于企業(yè)真實應(yīng)用，通過四個項目的訓練，學生基本能勝任網(wǎng)頁前端設(shè)計師工作崗位。

其二，構(gòu)建體驗式的學習情境。教學實施過程以體驗式教學展開，模擬職場的團隊協(xié)作，將學生分小組展開體驗式學習。學習過程中，教師引導學生觀察分析項目效果，學習所需知識點，解決項目中等待解決的問題。將所有的軟件應(yīng)用措施貫穿于整個項目的體驗中。這一過程為了讓學生們更好掌握基礎(chǔ)知識，鍛煉基本技能可以分兩部分完成。首先是臨摹。如根據(jù)效果圖繪制網(wǎng)頁圖標，以此掌握矢量圖繪制工具的使用方法。其次是創(chuàng)新，結(jié)合網(wǎng)上流行趨勢，自主設(shè)計符合主題的網(wǎng)頁圖標，以實現(xiàn)多種技術(shù)的綜合應(yīng)用，使體驗更接近職場、更真實。

其三，將素質(zhì)教育融入專業(yè)課堂。學生在網(wǎng)頁設(shè)計項目體驗學習中，每一堂課完成的作品，最終都可應(yīng)用于整體網(wǎng)頁中。“所見即所得”，學生會產(chǎn)生成就感，從而對專業(yè)產(chǎn)生更大的認同。按照職場中網(wǎng)頁設(shè)計師的工作流程，學生參與項目分析、項目實施、成果交流、項目評價整個過程，每一個環(huán)節(jié)都與崗位技能相吻合，鍛煉學生的專業(yè)技能，培養(yǎng)學生的職場素養(yǎng)。

三、《網(wǎng)頁界面設(shè)計》課程教學整體設(shè)計

本課程共64 學時，以能緊跟行業(yè)發(fā)展、遵循行業(yè)規(guī)范，進行網(wǎng)頁界面設(shè)計和能使用Axure，Photoshop 等軟件繪制網(wǎng)頁元素、布局網(wǎng)頁版塊，完成主流網(wǎng)頁的界面設(shè)計為主要教學目標，設(shè)置以下課程項目

序號 內(nèi)容模塊 學時1 門戶網(wǎng)站界面設(shè)計（簡易版百度文庫） 12 2 產(chǎn)品網(wǎng)站界面設(shè)計（檸青旅游網(wǎng)） 16 3 電子商務(wù)網(wǎng)站界面設(shè)計（扶貧電商網(wǎng)站） 24 4 移動端網(wǎng)頁界面設(shè)計（好幫手APP 界面設(shè)計） 12合計 64

項目一，以“百度文庫網(wǎng)站首頁”為模板，完成門戶網(wǎng)站的界面設(shè)計。門戶網(wǎng)站的界面規(guī)整、樸素，多用色塊、線條、文字布局，適合初學者。同時通過本案例讓學生們了解百度文庫，在以后學習生活中能從中獲取資源，自我提升。

項目二，以小組協(xié)作形式完成“檸青旅行網(wǎng)站界面設(shè)計”。旅行類產(chǎn)品網(wǎng)站既需要規(guī)范的設(shè)計，又融入大量的視覺圖像元素，對PS的圖像處理能力要求較高，通過本案例能極大提升學生這方面的能力。旅行網(wǎng)站的內(nèi)容圍繞“長征游”“紅色之旅”，學生在完成網(wǎng)頁的同時，了解老區(qū)景點的人文、革命歷史背景，達到思政教育的目的。

項目三，以小組協(xié)作形式完成“扶貧電商網(wǎng)站的界面設(shè)計”，同時個人完成多個“寶貝詳情頁設(shè)計”。現(xiàn)有扶貧電商網(wǎng)站界面比較單一，相較與“某寶某貓”有很多值得改進的地方。本實例是引導學生借鑒網(wǎng)上較IN 的電商網(wǎng)站，對扶貧電商網(wǎng)進行改版設(shè)計。同時電商網(wǎng)站有一大塊的業(yè)務(wù)內(nèi)容是寶貝詳情頁面內(nèi)容設(shè)計。從寶貝拍攝到軟文編輯到圖文排版的能力，都在這一項目中都得以鍛煉。

項目四，獨立完成“好幫手APP 的界面設(shè)計”。本例重點介紹移動端界面設(shè)計的規(guī)范，學生自主完成主頁、內(nèi)容頁、個人頁、開屏頁等多個界面設(shè)計。

項目體驗式教學中，考核環(huán)節(jié)設(shè)計是整體設(shè)計中的重要內(nèi)容。以上四個項目完成時，在課程安排內(nèi)均設(shè)有評價環(huán)節(jié)。要求學生進行上臺演示、講解。老師和同學對作品一起進行打分，主要考察學生對設(shè)計規(guī)范及軟件操作的掌握情況。可設(shè)計如下簡潔的評價表。

編號 項目內(nèi)容 分值1 文檔管理規(guī)范、作品符合設(shè)計標準 10 2 主題鮮明，內(nèi)容正確、布局合理 20 3 所用到的技術(shù)正確、全面 30 4 團隊分工協(xié)作，融入個人創(chuàng)意 20 5 有條理地展示作品、分享創(chuàng)作技巧 20

四、《網(wǎng)頁界面設(shè)計》課程教學單元設(shè)計

本部分的闡述以項目二 “檸青旅行網(wǎng)站界面設(shè)計”中的第6 次課“矢量圖工具應(yīng)用，繪制Icon”以例。從一個圖標的繪制入手，再次講解矢量圖形繪制工具，并將工具應(yīng)用與填色、圖層等相結(jié)合，從而使繪制的圖標更接近網(wǎng)上成品效果。這一部分課程重點是讓學生會畫。同時告知學生可以適當借助網(wǎng)絡(luò)資源，以求事半功倍，課程中講解iconfont 在PS 中應(yīng)用的方法。本次課的教學目標如下表所示：

1.了解矢量圖、位圖圖像格式。知識目標2.掌握矢量圖形繪制、填色工具及各參數(shù)的設(shè)置。3.認識iconfont、fontawesome 及阿里矢量。1.會繪制復(fù)雜的矢量圖形。技能目標2.會利用填充、圖層效果等方法給矢量圖形上色。3.會自行下載、安裝、應(yīng)用iconfont。1.培養(yǎng)學生精益求精的工作態(tài)度。態(tài)度目標2.培養(yǎng)學生小組協(xié)作、溝通表達能力。3.培養(yǎng)學生擅用網(wǎng)絡(luò)資源，提升學習能力。

在本次課程之前，學生己基本掌握PS 工具使用，能進行圖像編輯、圖形繪制與圖文混排。本次課講解的矢量圖標是對繪圖要求的再次提升，要求學生能結(jié)合網(wǎng)頁整體風格，完成圖標設(shè)計。

項目體驗式課程教學的流程圖如下所示：

五、結(jié)語

高職院校以培養(yǎng)學生的職業(yè)能力為主要教學目標。綜合來看，《網(wǎng)頁界面設(shè)計》課程中實施項目體驗式教學方法，學生全面了解了網(wǎng)頁設(shè)計師的崗位工作流程，體驗了設(shè)計創(chuàng)作的全過程，培養(yǎng)團隊意識，積累專業(yè)技能，取得較好的教學效果。