淺議網頁設計課程中UI設計教學的重要性

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

一、設計學專業(yè)的網頁設計課程教學的現狀

1.網頁課程由實質的制作課程向設計課程轉變

早期的網頁制作工具比較少，軟件講學構成網頁課程的主流，即使涉及設計的部分，大部分也以視覺效果的設計問題講解居多，各種“設計風格應用說”現象一時盛行，本質是視覺傳達設計理論體系在網頁設計課程中的生硬移栽，不可否認，視覺效果本身涉及的基礎設計理論與視覺傳達設計專業(yè)的設計基礎理論并無二致，網頁課程開始從網頁制作課程向網頁設計課程轉變，開始有意識的對網頁的視覺效果進行設計。

2.網頁設計課程由網頁視覺美工向網站界面綜合因素設計發(fā)展

目前網站功能的同質化現象嚴重，各種開源網站管理系統(tǒng)因為互聯網而被廣泛共享，產品功能相同或者相似的情況下，視覺效果在較長時間范圍內成為網站設計項目競爭力新的增長點。UI行業(yè)興起以后，開始推動網頁UI的設計理論的發(fā)展和應用，也直接影響到網頁設計行業(yè)和課堂上的網頁設計課程。UI理論的導入，使網頁的設計涵蓋范疇由以視覺為重點開始向對網站訪問與操作產生影響的諸如視覺、交互與體驗、信息架構等領域的設計的擴展。

3.UI設計理論逐漸滲入網頁設計課程

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

二、UI設計與網頁設計的聯系

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

1.UI設計方法推動了網頁設計由為視覺而設計發(fā)展到為使用而設計

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

2.UI設計理論拓展了設計者對網頁的設計認知視野

UI設計的內容包括了用戶能通過視覺看的到的部分和視覺之外的關于行為的設計、體驗設計的部分等，被視作一個整體。UI設計的宗旨是基于用戶模型，核心在于運用一切方法強化網站的可用性與易用性，和之前的網頁設計目標相比，UI設計理論對于網頁設計實踐而言更具指導價值和可操作性，即使是網頁設計目標中原有的視覺設計，追求的目標也是用核心的視覺效果去表現核心的交互設計，視覺設計更注重對用戶的引導和對網頁上的功能的視覺表達。

三、網頁設計課程中網頁UI設計教學的重要性

1.明確了網頁UI設計的設計方法和設計效果的驗證方式

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

2.解決了視覺傳達設計理論在網頁設計實踐中的不適性

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

3.使網頁設計課程更專注于網頁的設計的教學

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

注釋：

1.張軍.關于UI界面設計課程設置的構思與創(chuàng)想[J].藝術與設計（理論），2011（7）：100.

2.黃巖.UI設計的工作流程[J].上海藝術家，2013（2）：89.

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