藍(lán)麗萍

摘 要 問題式學(xué)習(xí)是一種以問題為導(dǎo)向，倡導(dǎo)學(xué)生通過研究、討論、協(xié)作解決問題，注重培養(yǎng)學(xué)生的能動性、協(xié)作性和探索實際運用的創(chuàng)作能力。在簡要闡述“網(wǎng)站UI設(shè)計”的課程背景、教學(xué)現(xiàn)狀、教學(xué)目標(biāo)之后，從課程內(nèi)容的重構(gòu)、教學(xué)模式的創(chuàng)新、考核標(biāo)準(zhǔn)的改變這三方面進(jìn)行優(yōu)化。并以大二網(wǎng)絡(luò)與新媒體專業(yè)學(xué)生為實踐對象，依據(jù)“提出問題—分析問題—解決問題”的思路來設(shè)計各教學(xué)環(huán)節(jié)，并要求學(xué)生分階段產(chǎn)出學(xué)習(xí)效果。實踐表明，把學(xué)習(xí)置于真實的或者貼近實際的大問題中，能激發(fā)學(xué)生的學(xué)習(xí)興趣，提高學(xué)生的網(wǎng)站綜合設(shè)計能力，體驗并形成完整的產(chǎn)品設(shè)計理念。

關(guān)鍵詞 網(wǎng)絡(luò)與新媒體專業(yè)；問題式學(xué)習(xí)；網(wǎng)站UI設(shè)計；教學(xué)模式

中圖分類號：G658.3 文獻(xiàn)標(biāo)識碼：B

文章編號：1671-489X（2018）08-0069-03

Curriculum Optimization and Practice of Website UI Design based on Problem-based Learning//LAN Liping

Abstract Problem based learning is a problem oriented approach， which advocates students to solve problems through research， discu-ssion and collaboration. It focuses on cultivating students' initiative， collaboration and practical abilities. In this paper， after briefly ex-pounds the website on the UI Design curriculum background， tea-ching situation， teaching objectives， from curriculum reconstruction， the innovation of teaching model， assessment criteria change these three aspects of the optimization. Then practiced in the second net-

work and new media professional students， on the basis of the pro-blem-analysis problem-to solve the problem of the train of thought to

design the teaching process， students are required to study the effect of real estate in stages. Last， practice shows that the learning in real

or practical problems， learning interest and ability to stimulate stu-dents， improve the comprehensive ability of students' experience of website design， product design concept and form complete.

Key words network and new media； problem-based learning； web-site UI design； model of instruction

1 課程背景

網(wǎng)站UI設(shè)計這門課程是廣東技術(shù)師范學(xué)院網(wǎng)絡(luò)與新媒體專業(yè)大二學(xué)生的一門專業(yè)必修課。UI，即用戶界面（User Interface）。UI設(shè)計的范疇很大，其中應(yīng)用最廣泛的是網(wǎng)站UI設(shè)計，隨著移動終端用戶數(shù)量的迅猛增長，目前大多數(shù)網(wǎng)頁在開發(fā)Web端網(wǎng)頁的同時，也需要開發(fā)相應(yīng)的移動端網(wǎng)頁。網(wǎng)站UI設(shè)計作為網(wǎng)站建設(shè)的第一個環(huán)節(jié)，是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。優(yōu)化網(wǎng)站UI設(shè)計課程，對培養(yǎng)符合社會急需的全能型新媒體人才，建設(shè)理論與實踐相結(jié)合更緊密的課程體系，全面提高教育質(zhì)量，均具有十分重要的現(xiàn)實意義。

2 課程教學(xué)現(xiàn)狀

問題式學(xué)習(xí)以問題為導(dǎo)向，倡導(dǎo)學(xué)生通過研究、討論、協(xié)作解決問題，注重培養(yǎng)學(xué)生的能動性、協(xié)作性和探索實際運用的創(chuàng)作能力。目前個別設(shè)計類課程仍然多采用以學(xué)科知識結(jié)構(gòu)為邏輯的課程設(shè)計理念和思路，且UI知識范圍較廣而零散，多以個人為單位完成課程作業(yè)，知識略顯教條式，案例小而獨立，在教學(xué)中呈現(xiàn)模塊化，但零散的知識結(jié)構(gòu)并不利于學(xué)生形成網(wǎng)站UI的總體產(chǎn)品設(shè)計理念。為培養(yǎng)學(xué)生解決問題的整體能力，讓他們可以協(xié)作完成更大的項目任務(wù)，必須改變以知識模塊結(jié)構(gòu)為導(dǎo)向的舊式課程教學(xué)模式，以小組為單位，用問題式學(xué)習(xí)的有效課程教學(xué)模式來取而代之。

3 課程教學(xué)目標(biāo)

課程的主要任務(wù)是學(xué)習(xí)網(wǎng)站UI的設(shè)計，設(shè)計并開發(fā)一個中小型高保真網(wǎng)站原型，體驗網(wǎng)站的完整設(shè)計流程。

1）本課程的期末實踐，采用四人為一組的工作室方式，分工合作，要求學(xué)生在工作室中能各自找好定位，意識到頭腦風(fēng)暴與團(tuán)隊合作的重要性，擯棄獨立完成小作品的模式，去體驗公司做一個產(chǎn)品的完整工作流程，達(dá)到訓(xùn)練學(xué)生的團(tuán)隊合作能力、與人交流的能力。

2）在綜合技能的訓(xùn)練上，要求學(xué)生了解網(wǎng)站設(shè)計流程：確定網(wǎng)站主題—需求分析—信息架構(gòu)—線框圖—UI效果圖—高保真原型開發(fā)。具備設(shè)計中小型網(wǎng)站的策劃、分析、設(shè)計的能力。

4 課程優(yōu)化策略

為了更好地實現(xiàn)課程的教學(xué)目標(biāo)，筆者主要從三方面對網(wǎng)站UI設(shè)計課程進(jìn)行優(yōu)化。

課程內(nèi)容的重構(gòu) 單門課程的教學(xué)時段通常設(shè)置為16周，過往常見的網(wǎng)站設(shè)計課程的教學(xué)流程：前期按照網(wǎng)站設(shè)計教材的內(nèi)容模塊進(jìn)行知識的講解和小案例的實操，約占14周；后期讓學(xué)生進(jìn)行網(wǎng)站的整體設(shè)計，占1～2周。雖然課程的最后也是基于問題的解決，但這個問題并沒有始終貫穿于課程內(nèi)容中，致使課程內(nèi)容與問題解決是分開的。因此，本課程的內(nèi)容應(yīng)始終圍繞一個問題，按照網(wǎng)站UI的整體設(shè)計流程，即“確定網(wǎng)站主題—需求分析—信息架構(gòu)—線框圖—UI效果圖—高保真原型開發(fā)”，將UI知識內(nèi)容逐步分解到每周的教學(xué)環(huán)節(jié)中，突破常規(guī)的體系框架，真正實現(xiàn)理論和實踐相結(jié)合。

教學(xué)模式的創(chuàng)新 采用基于問題式學(xué)習(xí)，以工作組為單位的創(chuàng)新教學(xué)模式，問題的解決不再基于個人，而是基于工作組的團(tuán)隊合作方式，以團(tuán)隊的力量致力于研究更大的問題，倡導(dǎo)的是頭腦風(fēng)暴式、啟發(fā)探究式的教學(xué)，通過“提出問題—分析問題—解決問題”的思路來開展教學(xué)，提高綜合設(shè)計能力。把學(xué)生融入有意義的問題解決過程中，強(qiáng)調(diào)以學(xué)生為中心，發(fā)揮他們在完成項目過程中的能動性。

考核標(biāo)準(zhǔn)的改變 傳統(tǒng)的課程考核方式有兩種：一是以個人為單位，考核個人的學(xué)習(xí)結(jié)果；二是以小組為單位，考核小組協(xié)作的學(xué)習(xí)結(jié)果。但是這兩種均有利弊，即前者重視個人能力而忽略了團(tuán)隊協(xié)作的能力培養(yǎng)，后者則容易出現(xiàn)個別成員水平參差不齊，無法得出真正的考核效果。本課程將對考核方式進(jìn)行改革，建立“個人作業(yè)+小組作品”的雙重考核標(biāo)準(zhǔn)，既能體現(xiàn)對個人能力差異的考核，又能對工作組協(xié)作的結(jié)果進(jìn)行考核。

5 課程教學(xué)實踐

本次課程實踐以大二的網(wǎng)絡(luò)與新媒體專業(yè)學(xué)生為實踐對象，14級網(wǎng)絡(luò)與新媒體班共40人，分為10組。課程全部在機(jī)房上課，一人一機(jī)。課程總課時為64學(xué)時，每周4節(jié)，共16周。

在實踐過程中，始終以基于問題為學(xué)習(xí)點，這個“問題”必須是一個復(fù)雜的具有挑戰(zhàn)性的任務(wù)，而不是一個人能輕易完成的，這個任務(wù)應(yīng)該是真實的或者貼近實際的，因此，各組在第二周時要確定網(wǎng)站選題，思考人們在生活中遇到的“痛點”和“不方便”，從人們需求性和網(wǎng)站可行性方面考慮，最后確定的選題如表1所示。學(xué)生始終圍繞各自選題，以此為問題進(jìn)行整門課的學(xué)習(xí)和協(xié)作。

教學(xué)實踐分為兩大部分。

1）基礎(chǔ)學(xué)習(xí)階段（1～4周）。該階段主要講解網(wǎng)站配色、元素設(shè)計等基礎(chǔ)知識，并布置相應(yīng)作業(yè)，課上點評，互相交流，灌輸“多看優(yōu)秀網(wǎng)頁—臨摹優(yōu)秀網(wǎng)頁—達(dá)到自主設(shè)計”式逐層提升設(shè)計感的思路。該階段主要考核個人的設(shè)計能力，作業(yè)占成績的30%。

2）問題學(xué)習(xí)階段（5～16周）。該階段的教學(xué)實踐多為引導(dǎo)+討論，將教學(xué)內(nèi)容貫穿在作品進(jìn)度中，邊學(xué)邊做，引導(dǎo)學(xué)生將前期所學(xué)知識運用到最后的期末作品中。四人一組，以團(tuán)隊的方式自主選題，共同設(shè)計一個網(wǎng)站。學(xué)生置于工作組中，分工合作，發(fā)揮頭腦風(fēng)暴的積極作用，可自行扮演設(shè)計總監(jiān)、UI設(shè)計師、信息架構(gòu)師、原型設(shè)計師、交互設(shè)計師等。該階段主要考核綜合設(shè)計能力和團(tuán)隊協(xié)作成果，作品占成績的70%。

通過個人作業(yè)+小組作品，實現(xiàn)雙重考核。

教學(xué)實踐階段把各組的問題引入課堂，依據(jù)“提出問題—分析問題—解決問題”的總體思路，圍繞問題來設(shè)計每周的教學(xué)環(huán)節(jié)，并實時跟蹤各組問題的解決進(jìn)度，如表2所示。

6 實踐效果分析

實踐表明，網(wǎng)站UI設(shè)計課程采用基于問題式學(xué)習(xí)的教學(xué)模式來開展教學(xué)，把學(xué)習(xí)置于一個真實的或者貼近實際的大問題環(huán)境中，分階段產(chǎn)出學(xué)習(xí)效果，既能激發(fā)學(xué)生的學(xué)習(xí)興趣，又能增強(qiáng)學(xué)生學(xué)習(xí)的成就感。本課程以課堂講授和上機(jī)實驗為主，結(jié)合作品分析、小組討論、頭腦風(fēng)暴、拓展練習(xí)、點評作業(yè)、演示匯報等多種教學(xué)方式，著重培養(yǎng)學(xué)生欣賞優(yōu)秀作品和共同研究分析問題的能力。小組在自主選題時，都是從生活中尋找需求，力爭設(shè)計一個能解決人們某個“痛點”的網(wǎng)站，做自己想做的功能，活躍學(xué)生思維的同時，也激發(fā)了學(xué)生的興趣和比一比的斗志。

參考文獻(xiàn)

[1]付昕.高職院校UI界面設(shè)計課程設(shè)置的構(gòu)思與創(chuàng)想[J].科技風(fēng)，2016（9）：19-20.

[2]王淼.廣告設(shè)計與制作專業(yè)《UI界面設(shè)計》課程教學(xué)模式改革與探索[J].藝術(shù)品鑒，2015（3）：238.

[3]孟妍.PBL教學(xué)法在高職藝術(shù)設(shè)計專業(yè)教學(xué)中的應(yīng)用[J].陜西青年職業(yè)學(xué)院學(xué)報，2015（1）：19-22.

[4]王曉俊.PBL教學(xué)模式的構(gòu)建與實踐：以藝術(shù)設(shè)計專業(yè)為例[J].梧州學(xué)院學(xué)報，2016（6）：89-93.