淺議網(wǎng)頁(yè)設(shè)計(jì)課程中UI設(shè)計(jì)教學(xué)的重要性

熊科軍 黃 琴 李平平 （湖南文理學(xué)院 41500）

一、設(shè)計(jì)學(xué)專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)的現(xiàn)狀

1.網(wǎng)頁(yè)課程由實(shí)質(zhì)的制作課程向設(shè)計(jì)課程轉(zhuǎn)變

早期的網(wǎng)頁(yè)制作工具比較少，軟件講學(xué)構(gòu)成網(wǎng)頁(yè)課程的主流，即使涉及設(shè)計(jì)的部分，大部分也以視覺(jué)效果的設(shè)計(jì)問(wèn)題講解居多，各種“設(shè)計(jì)風(fēng)格應(yīng)用說(shuō)”現(xiàn)象一時(shí)盛行，本質(zhì)是視覺(jué)傳達(dá)設(shè)計(jì)理論體系在網(wǎng)頁(yè)設(shè)計(jì)課程中的生硬移栽，不可否認(rèn)，視覺(jué)效果本身涉及的基礎(chǔ)設(shè)計(jì)理論與視覺(jué)傳達(dá)設(shè)計(jì)專(zhuān)業(yè)的設(shè)計(jì)基礎(chǔ)理論并無(wú)二致，網(wǎng)頁(yè)課程開(kāi)始從網(wǎng)頁(yè)制作課程向網(wǎng)頁(yè)設(shè)計(jì)課程轉(zhuǎn)變，開(kāi)始有意識(shí)的對(duì)網(wǎng)頁(yè)的視覺(jué)效果進(jìn)行設(shè)計(jì)。

2.網(wǎng)頁(yè)設(shè)計(jì)課程由網(wǎng)頁(yè)視覺(jué)美工向網(wǎng)站界面綜合因素設(shè)計(jì)發(fā)展

目前網(wǎng)站功能的同質(zhì)化現(xiàn)象嚴(yán)重，各種開(kāi)源網(wǎng)站管理系統(tǒng)因?yàn)榛ヂ?lián)網(wǎng)而被廣泛共享，產(chǎn)品功能相同或者相似的情況下，視覺(jué)效果在較長(zhǎng)時(shí)間范圍內(nèi)成為網(wǎng)站設(shè)計(jì)項(xiàng)目競(jìng)爭(zhēng)力新的增長(zhǎng)點(diǎn)。UI行業(yè)興起以后，開(kāi)始推動(dòng)網(wǎng)頁(yè)UI的設(shè)計(jì)理論的發(fā)展和應(yīng)用，也直接影響到網(wǎng)頁(yè)設(shè)計(jì)行業(yè)和課堂上的網(wǎng)頁(yè)設(shè)計(jì)課程。UI理論的導(dǎo)入，使網(wǎng)頁(yè)的設(shè)計(jì)涵蓋范疇由以視覺(jué)為重點(diǎn)開(kāi)始向?qū)W(wǎng)站訪(fǎng)問(wèn)與操作產(chǎn)生影響的諸如視覺(jué)、交互與體驗(yàn)、信息架構(gòu)等領(lǐng)域的設(shè)計(jì)的擴(kuò)展。

3.UI設(shè)計(jì)理論逐漸滲入網(wǎng)頁(yè)設(shè)計(jì)課程

網(wǎng)頁(yè)設(shè)計(jì)的展示平臺(tái)是基于網(wǎng)絡(luò)環(huán)境的各種終端使用設(shè)備，前期主要以網(wǎng)絡(luò)終端的微型計(jì)算機(jī)為主要平臺(tái)和載體，隨著移動(dòng)技術(shù)的進(jìn)步和移動(dòng)設(shè)備的普及，網(wǎng)站出現(xiàn)了一些新的形態(tài)，比如部分原來(lái)以網(wǎng)站形式出現(xiàn)的信息集合體也在新的移動(dòng)網(wǎng)絡(luò)平臺(tái)上同樣可以以軟件的形態(tài)出現(xiàn)，緣由網(wǎng)站與軟件的社會(huì)功能同質(zhì)化，使網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域有了UI設(shè)計(jì)理論應(yīng)用的天然條件。

二、UI設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)的聯(lián)系

UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀(guān)的整體設(shè)計(jì)1。由于UI設(shè)計(jì)行業(yè)發(fā)展階段的無(wú)序性，行業(yè)內(nèi)對(duì)UI設(shè)計(jì)的理解各有不同，有的設(shè)計(jì)機(jī)構(gòu)將用戶(hù)圖形界面設(shè)計(jì)和UI等同起來(lái)，甚至將UI與網(wǎng)頁(yè)美工的工作內(nèi)容直接混淆，盡管如此，這無(wú)疑證明網(wǎng)頁(yè)設(shè)計(jì)行業(yè)中，UI設(shè)計(jì)理論的介入已經(jīng)產(chǎn)生了較大影響力。

1.UI設(shè)計(jì)方法推動(dòng)了網(wǎng)頁(yè)設(shè)計(jì)由為視覺(jué)而設(shè)計(jì)發(fā)展到為使用而設(shè)計(jì)

在UI設(shè)計(jì)方法介入網(wǎng)頁(yè)設(shè)計(jì)之前，網(wǎng)頁(yè)設(shè)計(jì)課程中關(guān)于設(shè)計(jì)流程的教學(xué)，總結(jié)為網(wǎng)站策劃、設(shè)計(jì)定位分析與視覺(jué)風(fēng)格設(shè)計(jì)、軟件制作與PS切片、后臺(tái)功能實(shí)現(xiàn)與效果處理等大致分工和順序流程，實(shí)際上混合了網(wǎng)站項(xiàng)目流程管理、網(wǎng)站制作流程和網(wǎng)站設(shè)計(jì)流程的內(nèi)容。關(guān)于設(shè)計(jì)方法的教學(xué)也只止步于對(duì)用戶(hù)群體的模擬調(diào)查等。一般網(wǎng)站設(shè)計(jì)項(xiàng)目遵循網(wǎng)站信息架構(gòu)、網(wǎng)站交互設(shè)計(jì)、網(wǎng)站用戶(hù)體驗(yàn)與改進(jìn)以及視覺(jué)設(shè)計(jì)等核心模塊的流程開(kāi)展，更加注重設(shè)計(jì)中關(guān)于用戶(hù)訪(fǎng)問(wèn)網(wǎng)站時(shí)的體驗(yàn)質(zhì)量，使網(wǎng)頁(yè)的設(shè)計(jì)方法更加系統(tǒng)和全面。

2.UI設(shè)計(jì)理論拓展了設(shè)計(jì)者對(duì)網(wǎng)頁(yè)的設(shè)計(jì)認(rèn)知視野

UI設(shè)計(jì)的內(nèi)容包括了用戶(hù)能通過(guò)視覺(jué)看的到的部分和視覺(jué)之外的關(guān)于行為的設(shè)計(jì)、體驗(yàn)設(shè)計(jì)的部分等，被視作一個(gè)整體。UI設(shè)計(jì)的宗旨是基于用戶(hù)模型，核心在于運(yùn)用一切方法強(qiáng)化網(wǎng)站的可用性與易用性，和之前的網(wǎng)頁(yè)設(shè)計(jì)目標(biāo)相比，UI設(shè)計(jì)理論對(duì)于網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐而言更具指導(dǎo)價(jià)值和可操作性，即使是網(wǎng)頁(yè)設(shè)計(jì)目標(biāo)中原有的視覺(jué)設(shè)計(jì)，追求的目標(biāo)也是用核心的視覺(jué)效果去表現(xiàn)核心的交互設(shè)計(jì)，視覺(jué)設(shè)計(jì)更注重對(duì)用戶(hù)的引導(dǎo)和對(duì)網(wǎng)頁(yè)上的功能的視覺(jué)表達(dá)。

三、網(wǎng)頁(yè)設(shè)計(jì)課程中網(wǎng)頁(yè)UI設(shè)計(jì)教學(xué)的重要性

1.明確了網(wǎng)頁(yè)UI設(shè)計(jì)的設(shè)計(jì)方法和設(shè)計(jì)效果的驗(yàn)證方式

設(shè)計(jì)課程的核心在于啟發(fā)學(xué)生思考設(shè)計(jì)，實(shí)踐設(shè)計(jì)，才會(huì)對(duì)設(shè)計(jì)教育有更實(shí)際的實(shí)踐價(jià)值產(chǎn)生。UI設(shè)計(jì)理論體系的核心目標(biāo)是用戶(hù)，即研究用戶(hù)，進(jìn)而研究設(shè)計(jì)如何服務(wù)用戶(hù)，將設(shè)計(jì)教育還原為為人而設(shè)計(jì)的本來(lái)面目。在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中，當(dāng)課堂的參與者把網(wǎng)站項(xiàng)目視作一個(gè)互聯(lián)網(wǎng)產(chǎn)品進(jìn)行設(shè)計(jì)訓(xùn)練時(shí)，從教學(xué)方法到教學(xué)目的都更加明確，在設(shè)計(jì)實(shí)踐過(guò)程中，也更加容易從情感上理解所使用的設(shè)計(jì)方法的合理性。UI設(shè)計(jì)中信息架構(gòu)相關(guān)理論的提出，使網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)站信息的結(jié)構(gòu)設(shè)計(jì)有了可靠的設(shè)計(jì)方法，明晰了網(wǎng)站導(dǎo)航系統(tǒng)、檢索系統(tǒng)、標(biāo)識(shí)系統(tǒng)和組織系統(tǒng)設(shè)計(jì)中，設(shè)計(jì)師所要做的事情以及如何實(shí)施的指南，同時(shí)，UI中的用戶(hù)測(cè)試的引入，就網(wǎng)頁(yè)設(shè)計(jì)方案的使用檢驗(yàn)提出了系統(tǒng)的檢驗(yàn)和修正的研究方法，針對(duì)有代表性的用戶(hù)來(lái)測(cè)試方案到最終的可行性的設(shè)計(jì)，可用性就是最終的目標(biāo)2。

2.解決了視覺(jué)傳達(dá)設(shè)計(jì)理論在網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐中的不適性

傳統(tǒng)的視覺(jué)設(shè)計(jì)理論研究的對(duì)象是紙質(zhì)媒介等靜止媒介的視覺(jué)現(xiàn)象和規(guī)律，以色彩、形式、圖形和文字、版式與視覺(jué)流程等基礎(chǔ)理論為代表，是基于二維空間的視覺(jué)對(duì)象，是以視覺(jué)感官刺激為基礎(chǔ)的信息傳遞設(shè)計(jì)。網(wǎng)頁(yè)設(shè)計(jì)和傳統(tǒng)的視覺(jué)傳達(dá)設(shè)計(jì)相比，在承載的媒介上有了本質(zhì)的差別，網(wǎng)絡(luò)媒介相對(duì)于靜止的媒介，在形式上有了光影效果的強(qiáng)化、交互行為的主導(dǎo)以及運(yùn)動(dòng)現(xiàn)象的參與，基于靜止形態(tài)的版式與視覺(jué)流程原理在網(wǎng)頁(yè)設(shè)計(jì)中出現(xiàn)了嚴(yán)重的不適用現(xiàn)象，網(wǎng)頁(yè)設(shè)計(jì)涉及觸感、聽(tīng)覺(jué)、視覺(jué)等人類(lèi)的其他途徑的信息獲取的感官渠道，用傳統(tǒng)的視覺(jué)設(shè)計(jì)理論難以單獨(dú)指導(dǎo)網(wǎng)頁(yè)設(shè)計(jì)的實(shí)踐活動(dòng)。

3.使網(wǎng)頁(yè)設(shè)計(jì)課程更專(zhuān)注于網(wǎng)頁(yè)的設(shè)計(jì)的教學(xué)

UI設(shè)計(jì)理論的教學(xué)明確了網(wǎng)頁(yè)設(shè)計(jì)課程與網(wǎng)頁(yè)技術(shù)課程的基本邊界，使設(shè)計(jì)師更專(zhuān)注于對(duì)設(shè)計(jì)的思考和實(shí)踐，而不用發(fā)愁于面對(duì)程序的困擾，并且由于網(wǎng)頁(yè)制作工具的日益集成化與人性化，很多復(fù)雜的功能在面向設(shè)計(jì)師對(duì)象時(shí)，過(guò)程變得更加簡(jiǎn)單。表現(xiàn)模型是介于程序員負(fù)責(zé)的實(shí)現(xiàn)模型和用戶(hù)心理模型之間的模型，實(shí)現(xiàn)模型反映技術(shù)的實(shí)現(xiàn)面目，而心理模型反映的是用戶(hù)期望的使用情形，表現(xiàn)模型越接近于用戶(hù)心理模型，用戶(hù)操作就更容易使用和理解3，網(wǎng)頁(yè)設(shè)計(jì)課程的定位應(yīng)該是基于網(wǎng)頁(yè)的表現(xiàn)模型的設(shè)計(jì)教學(xué)，即設(shè)計(jì)模型的教學(xué)。在課程教學(xué)中，也有必要讓學(xué)生了解目前網(wǎng)頁(yè)制作技術(shù)可以實(shí)現(xiàn)的效果范疇，以及一些僅基于基礎(chǔ)操作的代碼，有利于對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)中針對(duì)不同條件和資質(zhì)的學(xué)生分配不同層次的訓(xùn)練任務(wù)，在教學(xué)過(guò)程中做到因材施教，同時(shí)將課程的主要任務(wù)定位于教授設(shè)計(jì)方法，強(qiáng)調(diào)設(shè)計(jì)任務(wù)的驅(qū)使和設(shè)計(jì)實(shí)踐的參與，使學(xué)生明白如何設(shè)計(jì)而不是停留在如何制作的層面。

注釋?zhuān)?/p>

1.張軍.關(guān)于UI界面設(shè)計(jì)課程設(shè)置的構(gòu)思與創(chuàng)想[J].藝術(shù)與設(shè)計(jì)（理論），2011（7）：100.

2.黃巖.UI設(shè)計(jì)的工作流程[J].上海藝術(shù)家，2013（2）：89.

3.[美]AlanCooper，RobertReimann，DavidCronin，劉松濤等譯.交互設(shè)計(jì)精髓[M].北京：電子工業(yè)出版社，208（11）1：19-20.