張延玲　喻蕓

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

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

中圖分類號：G642 文獻標識碼：A 文章編號：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

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

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

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

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

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

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

根據(jù)學生的個人特點，明確自我定位，學習補充所需要的知識。

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

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

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

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

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

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

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

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

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

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

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

4 在網(wǎng)頁設(shè)計課程的教學中融入UI設(shè)計內(nèi)容

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

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

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

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

5 結(jié)束語

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

參考文獻：

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

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

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

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