基于工業(yè)設(shè)計專業(yè)的UI課程教學(xué)模式研究

【摘 要】手機等移動智能終端的廣泛應(yīng)用和互聯(lián)網(wǎng)的迅猛發(fā)展，已經(jīng)深深地影響了人們的生活方式以及人與人之間的交流方式；同時，快速發(fā)展的數(shù)碼界面領(lǐng)域也受到了諸多設(shè)計公司的重視，但是能夠適應(yīng)市場需求的UI設(shè)計師卻很少。國內(nèi)高等院校很少有獨立設(shè)置該專業(yè)的，也并未提出系統(tǒng)的專業(yè)課程培養(yǎng)體系。本文則基于工業(yè)設(shè)計專業(yè)應(yīng)用型人才的培養(yǎng)目標(biāo)，以用戶研究、交互設(shè)計以及視覺設(shè)計三部分為主，構(gòu)建了適用于該專業(yè)的UI設(shè)計課程教學(xué)體系，并以實際教學(xué)案例進(jìn)行成果驗證。

【關(guān)鍵詞】工業(yè)設(shè)計 UI課程群 應(yīng)用型

【中圖分類號】G642 【文獻(xiàn)標(biāo)識碼】A 【文章編號】1674-4810（2015）24-0064-03

界，界分、界限、范圍、界說、境域、境界。界面，兩物體之間的接觸面——《高級漢語大辭典》。從人機交互方面出發(fā)，UI（User Interface）即用戶界面，是人與機器（計算機）之間傳遞和交換信息的媒介，是用戶和系統(tǒng)進(jìn)行雙向信息交互的支持軟件、硬件以及方法的集合①。好的UI設(shè)計可以給人以美的享受，可以使人機交互更加便捷、舒適，軟件操作方便易行。

一 UI設(shè)計及其教學(xué)現(xiàn)狀

UI設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI設(shè)計主要分為三大部分，用戶研究、人機交互和視覺設(shè)計。用戶研究著眼于用戶的心理狀態(tài)、操作習(xí)慣以及審美愛好，主要研究方法包括調(diào)查問卷、深度訪談和數(shù)據(jù)分析等，是UI設(shè)計中至關(guān)重要的部分；人機交互是研究用戶與界面之間的操作關(guān)系，主要任務(wù)是結(jié)合操作規(guī)范確定信息架構(gòu)，設(shè)計信息交互模型，進(jìn)行紙上原型繪制；視覺設(shè)計主要是在設(shè)計美學(xué)的基礎(chǔ)上針對軟件產(chǎn)品的外形元素進(jìn)行設(shè)計。從事該行業(yè)的設(shè)計師大部分是設(shè)計專業(yè)的學(xué)生，如工業(yè)設(shè)計、藝術(shù)設(shè)計以及數(shù)碼設(shè)計等。

據(jù)國家信息產(chǎn)業(yè)部最近頒布的調(diào)查材料顯示，當(dāng)前國內(nèi)達(dá)到UI設(shè)計師專業(yè)水平者只有8000人，而市場需求目前最少有15萬人的缺口?？梢哉f有產(chǎn)品的地方就需要專業(yè)UI設(shè)計師②?？梢?，UI設(shè)計師是現(xiàn)今數(shù)碼時代的高薪領(lǐng)導(dǎo)者，同時也是畢業(yè)生夢寐以求的就業(yè)通道；然而，國內(nèi)很少有本科院校獨立設(shè)置該專業(yè)，市面上可自學(xué)的UI書籍內(nèi)容較淺（PS制作內(nèi)容居多），導(dǎo)致很多設(shè)計師只能在沒有系統(tǒng)知識結(jié)構(gòu)的基礎(chǔ)上自己摸索，很大程度上限制了UI的發(fā)展。

二 UI課程體系研究

基于UI設(shè)計的三大部分——用戶研究、交互設(shè)計和視覺設(shè)計，UI課程群體系將相對應(yīng)設(shè)置以下教學(xué)內(nèi)容：

圖1 UI課程群體系

1.用戶研究

用戶研究階段主要包括三個方向的教學(xué)內(nèi)容，分別為人機工程學(xué)、認(rèn)知心理學(xué)和用戶調(diào)研。人機工程學(xué)是把人—機—環(huán)境系統(tǒng)作為研究的基本對象，運用生理學(xué)、心理學(xué)和其他有關(guān)學(xué)科知識，根據(jù)人和機器的條件和特點，合理分配人和機器承擔(dān)的操作職能，并使之相互適應(yīng)，從而為人創(chuàng)造出舒適和安全的工作環(huán)境，使工效達(dá)到最優(yōu)的一門綜合性學(xué)科③。認(rèn)知心理學(xué)主要是研究用戶本體對認(rèn)知信息的再加工，包括信息接收、編碼、儲存、操作、提取和使用的過程，對界面設(shè)計中的信息架構(gòu)有著指導(dǎo)性的作用。用戶調(diào)研主要有以下幾種形式，參觀、用戶訪談、問卷調(diào)查、專題討論、現(xiàn)場觀察和訪談、跟蹤調(diào)查、查詢資料等④；是用戶研究最常用的數(shù)據(jù)提取方法，包括如何設(shè)計問卷、如何進(jìn)行訪談以及數(shù)據(jù)統(tǒng)計分析。

2.交互設(shè)計

交互設(shè)計主要分為界面Demo信息架構(gòu)和流程圖原型繪制，主要培養(yǎng)學(xué)生對于龐大數(shù)據(jù)信息的分析、整理能力，如何進(jìn)行信息主次類別關(guān)聯(lián)，并能夠重新界定軟件需求，進(jìn)而快捷地呈現(xiàn)用戶所需信息，如引導(dǎo)頁、導(dǎo)航區(qū)和功能操作區(qū)的設(shè)置等。

3.視覺設(shè)計

視覺設(shè)計是UI設(shè)計中最具表現(xiàn)力的環(huán)節(jié)，也是多數(shù)工業(yè)設(shè)計專業(yè)學(xué)生從事UI行業(yè)的首要任務(wù)；該部分著重培養(yǎng)學(xué)生的設(shè)計美學(xué)素養(yǎng)、圖標(biāo)icon繪制能力以及高保真原型圖的制作能力，具體教學(xué)內(nèi)容分為四大部分，基礎(chǔ)、專題、實踐及應(yīng)用部分（如圖2）。

圖2 UI視覺設(shè)計教學(xué)內(nèi)容

在基礎(chǔ)部分中，主要是針對如何區(qū)別界面設(shè)計的品質(zhì)優(yōu)劣，UI設(shè)計準(zhǔn)則以及原型制作所使用的軟件工具進(jìn)行簡要介紹，使學(xué)生能夠正確了解UI視覺設(shè)計的整個步驟和過程。專題部分主要是針對UI視覺設(shè)計過程中所需的各項知識進(jìn)行逐個講解；其中，著重講解三大系統(tǒng)（尤其是IOS和Android）的界面特點以及各系統(tǒng)的設(shè)計規(guī)范，避免學(xué)生在設(shè)計版面信息時出現(xiàn)系統(tǒng)錯亂，如IOS和Android系統(tǒng)狀態(tài)欄、工具欄信息呈現(xiàn)方式的區(qū)別。在PS繪制icon過程中，主要針對圖層混合模式、路徑工具的加減交等進(jìn)行培訓(xùn)，就擬物化和扁平化風(fēng)格進(jìn)行實踐繪制。UI視覺設(shè)計階段一般使用專業(yè)快速原型設(shè)計軟件Axcure RP，使學(xué)生能夠簡單快速表達(dá)初步的設(shè)計意圖。在應(yīng)用部分中，通過PS和Axcure的軟件結(jié)合使用，制作移動數(shù)據(jù)端APP高保真模型，包括圖標(biāo)設(shè)計、色彩配置、交互原型以及動畫制作等。

三 UI課程體系的教學(xué)實踐——以手機購物APP為例

1.設(shè)計說明

該軟件是基于IOS系統(tǒng)的一種既安全又便捷的同城超市手機購物APP——愛購。作為同城超市的一個信息交易平臺，愛購向用戶提供各種優(yōu)惠活動以及產(chǎn)品分類信息。愛購采用簡約的搜索引擎，能夠快速呈現(xiàn)所需產(chǎn)品在各超市中的詳細(xì)信息，方便用戶進(jìn)行價格和其他方面的比較。愛購的配送方式遵循就近原則，很短時間便會收到所購物品，真正地實現(xiàn)：愛購——I’ll go。

2.方案展示

該購物APP圖標(biāo)設(shè)計（如圖3）采取手寫體“go”的變形，心形暗示隨心購、隨意購；主色使用紅色系#C85A5A，并配以其他輔色，整體給予用戶舒適體驗。

此款購物APP中的數(shù)據(jù)統(tǒng)計采用趣味曲線圖、餅形圖，并實現(xiàn)實時互動，及時記錄相關(guān)數(shù)據(jù)，實現(xiàn)數(shù)據(jù)視覺化、統(tǒng)計實時化；其中部分界面采用多種臨時構(gòu)圖，臨時窗口顯示時，會置于當(dāng)前視圖的最頂層，其他圖像則會以黑色半透明遮罩效果顯示，使主任務(wù)和子任務(wù)能夠很好地交互使用。

該款購物APP整體設(shè)計現(xiàn)代感強，版面信息氣氛輕松愉悅，且操作方便快捷，給予用戶真正自由暢快的購物交互體驗。

圖3 愛購APP圖標(biāo)

四 結(jié)束語

UI設(shè)計課程是工業(yè)設(shè)計專業(yè)教學(xué)發(fā)展中的新領(lǐng)域，是工業(yè)設(shè)計適應(yīng)市場人才需求的新方向。因此，針對現(xiàn)有專業(yè)教學(xué)中的缺失與不足，應(yīng)當(dāng)逐漸建立關(guān)于UI教學(xué)課程的結(jié)構(gòu)體系；只有從根本上建立一種科學(xué)的、系統(tǒng)的、適用性更強的教學(xué)體系，才能真正達(dá)到工業(yè)設(shè)計專業(yè)應(yīng)用型人才培養(yǎng)的教學(xué)目標(biāo)，繼而培養(yǎng)出適應(yīng)現(xiàn)代社會所需求的創(chuàng)新型設(shè)計人才。

注 釋

①王波、呂曦.數(shù)字媒體界面藝術(shù)設(shè)計[M].重慶：西南師范大學(xué)出版社，2011