張延玲　喻蕓

摘要：UI設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)緊密相關(guān)，網(wǎng)頁(yè)UI界面設(shè)計(jì)師成為社會(huì)上需求的熱門人才，所以在網(wǎng)頁(yè)設(shè)計(jì)課程中融入U(xiǎn)I設(shè)計(jì)理念，先明確UI設(shè)計(jì)師的工作內(nèi)容，讓學(xué)生進(jìn)行自我定位，再?gòu)?qiáng)調(diào)用戶體驗(yàn)的重要性，了解以人為本的網(wǎng)頁(yè)UI設(shè)計(jì)原則，接著介紹了云時(shí)代UI設(shè)計(jì)的新方向，最后詳細(xì)闡述了在網(wǎng)頁(yè)設(shè)計(jì)課程的項(xiàng)目教學(xué)中需要加入哪些UI設(shè)計(jì)知識(shí)以及如何訓(xùn)練學(xué)生提高網(wǎng)頁(yè)UI設(shè)計(jì)水平。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；UI設(shè)計(jì)；網(wǎng)頁(yè)UI；用戶體驗(yàn)；UI設(shè)計(jì)方向

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）34-0178-02

Abstract： UI design and web design is closely related to the web UI interface designers to become a popular talent， so in the web design course into the UI design concept， first clear UI designer's work content， let students to self positioning， and emphasize the importance of user experience， to understand the people-oriented UI design principle， and then introduced the UI design of the new direction， and finally， in the web design courses teaching in which UI design knowledge and how to train students to improve web UI design level.

Key words： Web design； UI design； Web UI； user experience； UI design direction

在今天這個(gè)“互聯(lián)網(wǎng)+”的時(shí)代，有問題找“度娘”已經(jīng)成為人們的口頭禪，網(wǎng)頁(yè)成為人們?yōu)g覽信息、獲取信息、交流信息的主要方式之一，網(wǎng)頁(yè)成為個(gè)人、公司或企業(yè)展示自我宣傳推廣的有效媒介。因此，網(wǎng)頁(yè)編程設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師、網(wǎng)頁(yè)UI界面設(shè)計(jì)師應(yīng)運(yùn)而生，也成為社會(huì)上大量需求的熱門人才。網(wǎng)頁(yè)設(shè)計(jì)課程是計(jì)算機(jī)專業(yè)的必修課，就業(yè)市場(chǎng)決定專業(yè)設(shè)置，正是這樣的人才和專業(yè)的需求關(guān)系，國(guó)內(nèi)大部分院校對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程的重視程度越來(lái)越大。

UI設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)緊密相關(guān)。UI（user interface） 的本意是用戶與產(chǎn)品界面的關(guān)系，UI 設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的 UI 設(shè)計(jì)不僅是讓網(wǎng)頁(yè)變得具有美感、個(gè)性和品位，還能讓操作變得舒適、簡(jiǎn)單、自由[1]。網(wǎng)頁(yè)UI 設(shè)計(jì)不僅重視好看，更要體現(xiàn)好用。網(wǎng)頁(yè)UI 設(shè)計(jì)本身已不再是單純的視覺設(shè)計(jì)，而是將視覺設(shè)計(jì)與人的行為習(xí)慣、生活方式、心理體驗(yàn)等結(jié)合在一起的設(shè)計(jì)。

優(yōu)秀的網(wǎng)頁(yè)UI設(shè)計(jì)師要精通網(wǎng)頁(yè)UI編碼設(shè)計(jì)與網(wǎng)頁(yè)UI界面設(shè)計(jì)兩個(gè)部分，目前大部分院校開設(shè)的網(wǎng)頁(yè)設(shè)計(jì)課程偏向于網(wǎng)頁(yè)編碼設(shè)計(jì)，主要學(xué)習(xí)用Dreamwear軟件制作網(wǎng)頁(yè)，涉及HTML、CSS、DIV、JavaScript等知識(shí)，有些自詡水平高的教師會(huì)讓學(xué)生完全用代碼編寫網(wǎng)頁(yè)，側(cè)重于功能的實(shí)現(xiàn)，對(duì)于網(wǎng)頁(yè)界面則一帶而過，學(xué)生制作出的頁(yè)面粗糙凌亂毫無(wú)美感，進(jìn)入社會(huì)后大部分會(huì)選用網(wǎng)頁(yè)模板，但會(huì)千篇一律缺乏設(shè)計(jì)創(chuàng)意和藝術(shù)造型。為了提高學(xué)生的網(wǎng)頁(yè)設(shè)計(jì)水平，我嘗試在網(wǎng)頁(yè)設(shè)計(jì)課程中融入U(xiǎn)I設(shè)計(jì)理念的教學(xué)探索。

1 了解UI設(shè)計(jì)理論，明確自我定位

UI是英文User和Interface的縮寫，包括用戶與界面兩個(gè)部分，實(shí)際上指網(wǎng)頁(yè)、軟件、游戲、手機(jī)APP等電子視覺產(chǎn)品在用戶使用過程中針對(duì)用戶心理感受、操作互動(dòng)邏輯、界面美觀舒適的一系列設(shè)計(jì)。它是產(chǎn)品的重要賣點(diǎn)，地位等同于與工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)，一個(gè)外觀漂亮、界面友好、互動(dòng)合理的電子視覺產(chǎn)品會(huì)使人感覺親切舒適，更易于接受。國(guó)內(nèi)外眾多大型互聯(lián)網(wǎng)IT企業(yè)都已經(jīng)有比較完善的 UI設(shè)計(jì)部門，如騰訊CDC、百度UED、淘寶UED等等，都致力于互聯(lián)網(wǎng)產(chǎn)品的產(chǎn)品調(diào)研、用戶研究、交互設(shè)計(jì)、視覺設(shè)計(jì)等[2]。

UI設(shè)計(jì)師從工作內(nèi)容的側(cè)重點(diǎn)上來(lái)說分為3個(gè)方向，分別是圖形設(shè)計(jì)師、交互設(shè)計(jì)師、用戶測(cè)試工程師。圖形設(shè)計(jì)師研究界面，是軟件產(chǎn)品的外形設(shè)計(jì)師；交互設(shè)計(jì)師研究人與界面的關(guān)系，設(shè)計(jì)軟件的操作流程、操作規(guī)范、軟件的結(jié)構(gòu)等；用戶測(cè)試工程師研究人，測(cè)試用戶的感受，對(duì)于網(wǎng)頁(yè)交互設(shè)計(jì)的合理性及界面圖形色彩設(shè)計(jì)的美觀性進(jìn)行測(cè)試。圖形設(shè)計(jì)師需要有美術(shù)設(shè)計(jì)功底，交互設(shè)計(jì)師需要有軟件程序設(shè)計(jì)知識(shí)，用戶測(cè)試工程師需要心理學(xué)人文學(xué)知識(shí)。

根據(jù)學(xué)生的個(gè)人特點(diǎn)，明確自我定位，學(xué)習(xí)補(bǔ)充所需要的知識(shí)。

2 強(qiáng)調(diào)網(wǎng)頁(yè)UI設(shè)計(jì)中用戶體驗(yàn)的重要性

檢驗(yàn)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)好壞的標(biāo)準(zhǔn)不是項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見，而是用戶體驗(yàn)。蘋果公司 CEO 斯蒂芬·喬布斯曾經(jīng)說過 ：“任何個(gè)性化的前提都是滿足人們的需求，這個(gè)需求就是要做好用戶體驗(yàn)——讓用戶因?yàn)槭褂锰O果的產(chǎn)品而爽起來(lái)?！盵3] 在UI 設(shè)計(jì)師在網(wǎng)頁(yè)設(shè)計(jì)中承擔(dān)著用戶體驗(yàn)的重要使命。好的網(wǎng)站界面設(shè)計(jì)不僅僅是圖形和色彩的搭配、板塊欄目的規(guī)劃等，還應(yīng)該研究用戶的生活方式、社會(huì)文化、上網(wǎng)習(xí)慣以及審美心理等方方面面。要以用戶為中心、以人為本。

網(wǎng)頁(yè)UI設(shè)計(jì)的主要原則包括以下幾個(gè)方面：

以人為本的用戶導(dǎo)向原則。設(shè)計(jì)網(wǎng)頁(yè)首先要明確誰(shuí)才是使用者，要站在用戶的觀點(diǎn)和立場(chǎng)上來(lái)考慮。網(wǎng)頁(yè)設(shè)計(jì)的界面風(fēng)格符合用戶的審美觀，交互功能要正確、合理，不能過于專業(yè)化。以理服人，以情感人。

KISS簡(jiǎn)潔原則。KISS就是"Keep It Sample And Stupid"的縮寫，網(wǎng)頁(yè)設(shè)計(jì)要簡(jiǎn)潔和易于操作，過于花哨的圖片、復(fù)雜的操作反而會(huì)引起用戶反感。

眼睛和心理的共通性原則[1]。在圖形和色彩、信息呈現(xiàn)、板塊規(guī)劃、交互體現(xiàn)上都應(yīng)該兼顧美學(xué)和心理的感受。

3 云時(shí)代UI設(shè)計(jì)的方向

在現(xiàn)在云計(jì)算、云存儲(chǔ)、云共享的云時(shí)代，UI設(shè)計(jì)的方向也發(fā)生著重大轉(zhuǎn)變。

首先是以視覺為主導(dǎo)，更注重視覺效果的“炫”。將文字轉(zhuǎn)化成圖形，圖形圖像成為傳遞和獲取信息的強(qiáng)勢(shì)媒介，簡(jiǎn)潔而嚴(yán)謹(jǐn)，直接而明快，視覺效果十分強(qiáng)烈。

其次是以內(nèi)容為王?！皟?nèi)容為王”指的是界面設(shè)計(jì)應(yīng)該為內(nèi)容服務(wù) [4]。強(qiáng)調(diào)傳達(dá)功能，去除不必要的裝飾。過去的UI 設(shè)計(jì)過于美化圖標(biāo)、按鈕和修飾界面，隨著時(shí)代發(fā)展，我們慢慢發(fā)現(xiàn)許多“精美”的設(shè)計(jì)反而成為一種干擾，影響用戶的體驗(yàn)，也加重了系統(tǒng)的負(fù)擔(dān)。

第三是構(gòu)建動(dòng)態(tài)友好的交互。動(dòng)態(tài)效果能給更好的視覺享受，能讓用戶身臨其境，融入其中。靈動(dòng)多變的動(dòng)態(tài)交互構(gòu)建起人與設(shè)備、人與信息、人與人之間的有生命力的連接，充分體香出了數(shù)字設(shè)備的特點(diǎn)乃至數(shù)字化生活的時(shí)代特質(zhì)，。

4 在網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)中融入U(xiǎn)I設(shè)計(jì)內(nèi)容

在實(shí)際網(wǎng)頁(yè)設(shè)計(jì)課程的講解中，將以上的UI理論、用戶體驗(yàn)、UI設(shè)計(jì)方向等內(nèi)容融入日常教學(xué)，將網(wǎng)頁(yè)設(shè)計(jì)課程內(nèi)容擴(kuò)大，在網(wǎng)頁(yè)課程中引入U(xiǎn)I設(shè)計(jì)內(nèi)容中，為學(xué)生將來(lái)的從事網(wǎng)頁(yè)界面UI設(shè)計(jì)工作打下正確的專業(yè)基礎(chǔ)。

在網(wǎng)頁(yè)設(shè)計(jì)課程學(xué)習(xí)中，在學(xué)習(xí)了Html、css、div等編程知識(shí)后，還要掌握相關(guān)平面設(shè)計(jì)制作軟件的基本操作，以及簡(jiǎn)單的平面設(shè)計(jì)知識(shí)，如版式的布局、色彩的搭配、產(chǎn)品標(biāo)志的設(shè)計(jì)、文案的設(shè)計(jì)、Banner設(shè)計(jì)、文字的創(chuàng)意等，并將平面設(shè)計(jì)知識(shí)與網(wǎng)頁(yè)設(shè)計(jì)課程融會(huì)貫通，綜合應(yīng)用。

在實(shí)訓(xùn)教學(xué)中也給學(xué)生增加UI設(shè)計(jì)實(shí)踐練習(xí)。如在課程中增加靜態(tài)與動(dòng)態(tài)的圖標(biāo)ICON制作練習(xí)、BANNER條制作練習(xí)、整體界面色彩搭配練習(xí)、企業(yè)LOGO動(dòng)態(tài)設(shè)計(jì)與制作練習(xí)、交互按鈕動(dòng)態(tài)設(shè)計(jì)等。不是隨便使用圖形，而是經(jīng)過精心設(shè)計(jì)、與網(wǎng)頁(yè)表達(dá)思路相關(guān)的圖形，設(shè)計(jì)好圖形后，運(yùn)用PhotoShop、Adobe illustrator、FLash等軟件來(lái)繪制圖標(biāo)圖形，增加學(xué)生的動(dòng)手能力。通過這樣的創(chuàng)意制作，體會(huì)靜態(tài)視覺效果與動(dòng)態(tài)視覺效果的差別之處。

在項(xiàng)目化教學(xué)的過程中根據(jù)實(shí)際需求，不斷分析研究、合理調(diào)整、階段總結(jié)，運(yùn)用多種教學(xué)方法啟發(fā)學(xué)生的想象力，激發(fā)學(xué)生對(duì)網(wǎng)頁(yè)UI設(shè)計(jì)的熱情和創(chuàng)作靈感。利用課題專項(xiàng)分別訓(xùn)練和綜合項(xiàng)目實(shí)戰(zhàn)相結(jié)合的方法，帶領(lǐng)學(xué)生參加網(wǎng)站UI設(shè)計(jì)項(xiàng)目的實(shí)際制作，單項(xiàng)訓(xùn)練包括：UI基本元素，如圖標(biāo)、按鈕、LOGO、導(dǎo)航、欄目等的設(shè)計(jì)；綜合訓(xùn)練：將單項(xiàng)訓(xùn)練的成果綜合在一起設(shè)計(jì)出符合用戶瀏覽習(xí)慣并且設(shè)計(jì)感強(qiáng)的網(wǎng)站UI界面設(shè)計(jì)；個(gè)人訓(xùn)練：依據(jù)個(gè)人喜好及審美設(shè)計(jì)并制作出獨(dú)特、個(gè)性的網(wǎng)頁(yè)UI設(shè)計(jì)作品。

5 結(jié)束語(yǔ)

計(jì)算機(jī)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)的教學(xué)中，單純講授代碼知識(shí)，學(xué)生的就業(yè)面會(huì)很窄，現(xiàn)在社會(huì)上需求大量的即能應(yīng)用代碼進(jìn)行網(wǎng)頁(yè)編碼設(shè)計(jì)，又會(huì)UI界面設(shè)計(jì)的人才。所以在網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)過程中，融入了UI設(shè)計(jì)的理念，先明確UI設(shè)計(jì)師的工作內(nèi)容，讓學(xué)生進(jìn)行自我定位，再?gòu)?qiáng)調(diào)用戶體驗(yàn)的重要性，了解以人為本的網(wǎng)頁(yè)UI設(shè)計(jì)原則，接著介紹了云時(shí)代UI設(shè)計(jì)的新方向，最后詳細(xì)說明在網(wǎng)頁(yè)設(shè)計(jì)課程的項(xiàng)目教學(xué)中需要加入哪些UI設(shè)計(jì)知識(shí)以及如何訓(xùn)練學(xué)生提高網(wǎng)頁(yè)UI設(shè)計(jì)水平。

參考文獻(xiàn)：

[1] 王曉丹. 以人為本 創(chuàng)新感受——淺談網(wǎng)頁(yè)設(shè)計(jì)中 UI 設(shè)計(jì)的用戶體驗(yàn)[J]. 中國(guó)藝術(shù)， 2012（2）： 148.

[2] 梁亮. 新型 UI 設(shè)計(jì)在藝術(shù)設(shè)計(jì)專業(yè)中的教學(xué)探索研究[J]. 美與時(shí)代， 2015（9）： 119-120.

[3] 沃爾特·艾薩克森. 史蒂夫·喬布斯傳[D]. 北京： 中信出版社， 2011.

[4] 王正林. UI設(shè)計(jì)的理念和方向：以Windows UI為例[J]. 裝飾， 2015（2）： 138-139.