基于問題式學習的網站UI設計課程優(yōu)化與實踐

藍麗萍

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

關鍵詞 網絡與新媒體專業(yè)；問題式學習；網站UI設計；教學模式

中圖分類號：G658.3 文獻標識碼：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 課程背景

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

2 課程教學現狀

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

3 課程教學目標

課程的主要任務是學習網站UI的設計，設計并開發(fā)一個中小型高保真網站原型，體驗網站的完整設計流程。

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

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

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

為了更好地實現課程的教學目標，筆者主要從三方面對網站UI設計課程進行優(yōu)化。

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

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

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

5 課程教學實踐

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

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

教學實踐分為兩大部分。

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

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

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

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

6 實踐效果分析

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

參考文獻

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

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

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

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