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

一、概述

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

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

二、《網(wǎng)頁界面設(shè)計(jì)》課程項(xiàng)目體驗(yàn)式教學(xué)設(shè)計(jì)思路

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

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

其三，將素質(zhì)教育融入專業(yè)課堂。學(xué)生在網(wǎng)頁設(shè)計(jì)項(xiàng)目體驗(yàn)學(xué)習(xí)中，每一堂課完成的作品，最終都可應(yīng)用于整體網(wǎng)頁中?！八娂此谩保瑢W(xué)生會(huì)產(chǎn)生成就感，從而對(duì)專業(yè)產(chǎn)生更大的認(rèn)同。按照職場(chǎng)中網(wǎng)頁設(shè)計(jì)師的工作流程，學(xué)生參與項(xiàng)目分析、項(xiàng)目實(shí)施、成果交流、項(xiàng)目評(píng)價(jià)整個(gè)過程，每一個(gè)環(huán)節(jié)都與崗位技能相吻合，鍛煉學(xué)生的專業(yè)技能，培養(yǎng)學(xué)生的職場(chǎng)素養(yǎng)。

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

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

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

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

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

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

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

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

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

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

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

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

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

項(xiàng)目體驗(yàn)式課程教學(xué)的流程圖如下所示：

五、結(jié)語

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