高校平面設(shè)計(jì)教學(xué)的UI設(shè)計(jì)教學(xué)思路

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了高校平面設(shè)計(jì)教學(xué)的UI設(shè)計(jì)教學(xué)思路范文，希望能給你帶來靈感和參考，敬請(qǐng)閱讀。

摘要：互聯(lián)網(wǎng)時(shí)代，IT類產(chǎn)品的蓬勃發(fā)展成為必然趨勢(shì)，人們對(duì)于UI設(shè)計(jì)的需求不斷增長(zhǎng)。在當(dāng)代高校的平面設(shè)計(jì)課程教學(xué)中，UI設(shè)計(jì)的優(yōu)勢(shì)逐漸顯現(xiàn)。該課程越來越受學(xué)生的歡迎，并且取得了較為良好的教學(xué)成果。該文研究當(dāng)代高校平面設(shè)計(jì)教學(xué)中的UI設(shè)計(jì)教學(xué)，分析UI設(shè)計(jì)的特點(diǎn)，以期為高校視覺藝術(shù)專業(yè)的進(jìn)一步發(fā)展探索新的教學(xué)思路。

關(guān)鍵詞：平面設(shè)計(jì)UI設(shè)計(jì)教學(xué)思路

UI設(shè)計(jì)的發(fā)展始于20世紀(jì)末，是一種利用IT技術(shù)深化藝術(shù)設(shè)計(jì)創(chuàng)作的新方法。近年來，隨著互聯(lián)網(wǎng)時(shí)代的來臨，社會(huì)對(duì)于UI設(shè)計(jì)的需求不斷增長(zhǎng)。在這樣的時(shí)代背景下，UI設(shè)計(jì)教學(xué)獲得了快速發(fā)展。在互聯(lián)網(wǎng)時(shí)代，很多企業(yè)已經(jīng)發(fā)現(xiàn)通過打造線上平臺(tái)，吸引更多的流量，對(duì)于企業(yè)的營(yíng)銷可產(chǎn)生重要的影響。企業(yè)能否有效轉(zhuǎn)化潛在客戶與企業(yè)在線上平臺(tái)上投入的程度密切相關(guān)，這要求企業(yè)更加注重在UI設(shè)計(jì)上的投入。隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的來臨、智能手機(jī)的普及，移動(dòng)終端對(duì)UI設(shè)計(jì)需求更是不可估量。

一、UI設(shè)計(jì)領(lǐng)域的現(xiàn)狀及發(fā)展趨勢(shì)

UI即英文“UserInterface”的簡(jiǎn)寫，意指界面與用戶的關(guān)系。因此，UI設(shè)計(jì)指用戶界面設(shè)計(jì)。其不僅是單一的分割體，而且泛指人機(jī)交互、操作邏輯、界面視覺等創(chuàng)新思路[1]。主流領(lǐng)域的UI設(shè)計(jì)不僅指圖形界面視覺設(shè)計(jì)，而且包含交互體驗(yàn)設(shè)計(jì)（ID）、圖形界面設(shè)計(jì)（GUI）和用戶研究設(shè)計(jì)（UE）三個(gè)方面。現(xiàn)階段的UI設(shè)計(jì)主要依靠計(jì)算機(jī)技術(shù)，將藝術(shù)設(shè)計(jì)與IT技術(shù)融合，充分適應(yīng)了互聯(lián)網(wǎng)經(jīng)濟(jì)發(fā)展的廣泛需求。UI設(shè)計(jì)涉及的方向較為廣泛，包括視覺設(shè)計(jì)、游戲、動(dòng)漫、App設(shè)計(jì)等領(lǐng)域。我國(guó)社會(huì)對(duì)UI設(shè)計(jì)的研究開始較晚，但目前已經(jīng)取得了突破性的成果。當(dāng)前，UI設(shè)計(jì)已經(jīng)被廣泛而深入地應(yīng)用于不同的生活和工作場(chǎng)合，為傳統(tǒng)平面設(shè)計(jì)領(lǐng)域帶來了新的活力，并逐漸發(fā)展成為一門既復(fù)合又獨(dú)立的領(lǐng)域，成為一種新的設(shè)計(jì)方法和思路。目前，UI設(shè)計(jì)已經(jīng)被廣泛地運(yùn)用于當(dāng)代高校的視覺與平面設(shè)計(jì)的教學(xué)。

二、UI設(shè)計(jì)在當(dāng)代大學(xué)平面設(shè)計(jì)教學(xué)中的重要性

1.突破傳統(tǒng)藝術(shù)設(shè)計(jì)的局限性UI設(shè)計(jì)的實(shí)質(zhì)是結(jié)合計(jì)算機(jī)界面，實(shí)現(xiàn)藝術(shù)設(shè)計(jì)在載體領(lǐng)域的發(fā)展與創(chuàng)新。UI設(shè)計(jì)通過建立起良好的交互設(shè)計(jì)界面，以此給用戶帶來良好的體驗(yàn)，為設(shè)計(jì)出具有更高價(jià)值的產(chǎn)品打下基礎(chǔ)。UI設(shè)計(jì)與傳統(tǒng)美術(shù)具有某些共同的屬性，不僅有助于繪畫創(chuàng)作，提高繪畫作品的商業(yè)價(jià)值，而且能通過相關(guān)軟件開展藝術(shù)創(chuàng)作，使作品與現(xiàn)代藝術(shù)進(jìn)一步有機(jī)結(jié)合，不斷引領(lǐng)藝術(shù)創(chuàng)新發(fā)展的潮流。在當(dāng)代平面設(shè)計(jì)課程教學(xué)中，教師引入U(xiǎn)I設(shè)計(jì)，可使現(xiàn)代藝術(shù)教學(xué)理念與目前的商業(yè)模式相結(jié)合，以專業(yè)性、技術(shù)性推動(dòng)平面設(shè)計(jì)領(lǐng)域的和諧發(fā)展。因此，UI設(shè)計(jì)與平面設(shè)計(jì)課程教學(xué)的有機(jī)結(jié)合，不僅促進(jìn)了藝術(shù)設(shè)計(jì)行業(yè)的發(fā)展，而且為商業(yè)創(chuàng)新提供了新的亮點(diǎn)[2]。

2.提升傳統(tǒng)設(shè)計(jì)作品的競(jìng)爭(zhēng)力當(dāng)下平面設(shè)計(jì)學(xué)科的發(fā)展，在客觀上面臨越來越激烈的競(jìng)爭(zhēng)。當(dāng)代視覺設(shè)計(jì)專業(yè)的發(fā)展，主要驅(qū)動(dòng)力源于日益增長(zhǎng)的商業(yè)實(shí)際需求。當(dāng)代藝術(shù)設(shè)計(jì)教學(xué)已經(jīng)把ui設(shè)計(jì)教學(xué)納入日常的教學(xué)內(nèi)容，并以此進(jìn)一步提高作品本身的附加值。UI設(shè)計(jì)的作品在經(jīng)過IT專業(yè)技術(shù)的后期處理后，其價(jià)值和競(jìng)爭(zhēng)力將被進(jìn)一步提升。此外，UI設(shè)計(jì)的作品價(jià)值還表現(xiàn)在充分性、廣泛性等維度上，將其應(yīng)用于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)、移動(dòng)終端的界面，能夠?qū)θ藗冃纬奢^強(qiáng)的視覺沖擊。

3.促進(jìn)當(dāng)代平面設(shè)計(jì)的多樣化發(fā)展目前，平面設(shè)計(jì)學(xué)科表現(xiàn)出多樣的發(fā)展方向。手機(jī)等終端產(chǎn)品的界面交互設(shè)計(jì)發(fā)展，不僅體現(xiàn)在外觀設(shè)計(jì)層面，而且體現(xiàn)在互聯(lián)網(wǎng)展現(xiàn)方式層面，其發(fā)展特征也是平面設(shè)計(jì)學(xué)科不斷突破、創(chuàng)新的成果?；诖耍咝０裊I設(shè)計(jì)教學(xué)引入傳統(tǒng)平面設(shè)計(jì)課程教學(xué)，可以更好地幫助學(xué)生理解設(shè)計(jì)理念和設(shè)計(jì)方法。

4.引導(dǎo)學(xué)生在藝術(shù)設(shè)計(jì)領(lǐng)域的全面發(fā)展UI設(shè)計(jì)不僅僅是描點(diǎn)畫邊，設(shè)計(jì)師還必須具備完備的知識(shí)體系。優(yōu)秀的現(xiàn)代設(shè)計(jì)師不僅要具備專業(yè)的審美能力、繪畫能力、設(shè)計(jì)能力，而且必須具有一定的行業(yè)領(lǐng)悟能力。由于UI設(shè)計(jì)更注重操作性、專業(yè)性，將其應(yīng)用于教學(xué)可以幫助學(xué)生拓展知識(shí)面，使學(xué)生能夠更好地向滿足社會(huì)實(shí)際需要的方向發(fā)展。當(dāng)前，在設(shè)計(jì)行業(yè)中，實(shí)踐能力十分重要。學(xué)生只有進(jìn)一步鍛煉實(shí)際操作能力，將理論知識(shí)應(yīng)用于實(shí)踐，才能提升綜合素質(zhì)。當(dāng)前，藝術(shù)設(shè)計(jì)專業(yè)教學(xué)必須注重對(duì)UI設(shè)計(jì)的實(shí)際應(yīng)用，進(jìn)一步提升實(shí)際教學(xué)效果，積極改革授課方式，帶動(dòng)教師、學(xué)生行業(yè)能力的提升。應(yīng)用UI設(shè)計(jì)為教學(xué)改革的抓手，可以很好促進(jìn)現(xiàn)代藝術(shù)設(shè)計(jì)課程的發(fā)展，幫助學(xué)生更好地滿足社會(huì)的需要。

三、高校平面設(shè)計(jì)教學(xué)中UI設(shè)計(jì)課程的關(guān)注點(diǎn)

相比于游戲原畫設(shè)計(jì)、建筑設(shè)計(jì)、工業(yè)設(shè)計(jì)等傳統(tǒng)平面設(shè)計(jì)，UI設(shè)計(jì)對(duì)設(shè)計(jì)師的手繪美術(shù)基礎(chǔ)的要求相對(duì)較低。在UI設(shè)計(jì)中，手繪美術(shù)通常用于繪制圖標(biāo)時(shí)的打稿。利用手繪稿開展前期設(shè)計(jì)往往會(huì)更加方便，而且由于UI設(shè)計(jì)的載體媒介依賴于手機(jī)或電腦等終端產(chǎn)品，設(shè)計(jì)素材也源于互聯(lián)網(wǎng)，在理論上設(shè)計(jì)師能搜集到的資源是無限的。同時(shí)，UI設(shè)計(jì)的更新迭代更加迅速，采集信息也更加方便。

1.UI設(shè)計(jì)教學(xué)中的設(shè)計(jì)規(guī)范當(dāng)前，UI設(shè)計(jì)的應(yīng)用主要建立在移動(dòng)設(shè)備操作系統(tǒng)的基礎(chǔ)上。因此，學(xué)生首先必須掌握移動(dòng)設(shè)備操作系統(tǒng)的設(shè)計(jì)規(guī)范與設(shè)計(jì)原則。當(dāng)前，移動(dòng)設(shè)備操作系統(tǒng)都有自己的設(shè)計(jì)規(guī)范，從界面尺寸到圖標(biāo)尺寸、從系統(tǒng)字體到UI控件、從切片輸出到標(biāo)注適配、從手勢(shì)交互到界面動(dòng)效等，學(xué)生必須熟練掌握。完善的產(chǎn)品界面解決方案由四大元素組成，分別是內(nèi)容視圖、控件、欄以及臨時(shí)視圖。因此，對(duì)設(shè)計(jì)規(guī)范的掌握對(duì)于學(xué)生學(xué)習(xí)UI設(shè)計(jì)具有重要的意義。

2.UI設(shè)計(jì)教學(xué)中的表現(xiàn)方式以往平面設(shè)計(jì)的表現(xiàn)形式多為靜止?fàn)顟B(tài)的模式，而UI設(shè)計(jì)擁有更多的表現(xiàn)形式，因此，其在觀感上更加活躍，視覺沖擊力更強(qiáng)。同時(shí)，UI設(shè)計(jì)以引導(dǎo)用戶操作為主，以動(dòng)帶靜，具有較強(qiáng)的交互性。在UI設(shè)計(jì)中，設(shè)計(jì)師需要盡可能多地把重要元素表現(xiàn)在較為顯眼的位置，設(shè)計(jì)的視覺焦點(diǎn)受到顯示屏的大小影響，在效果完整性上存在一定局限。而且UI設(shè)計(jì)后期要求較高，高度依賴網(wǎng)絡(luò)覆蓋信號(hào)等的支持，后臺(tái)程序和服務(wù)器也必須實(shí)時(shí)在線響應(yīng)。

3.UI設(shè)計(jì)教學(xué)的關(guān)鍵要點(diǎn)以往的平面設(shè)計(jì)教學(xué)往往更加關(guān)注設(shè)計(jì)完成的展示效果，重視設(shè)計(jì)表現(xiàn)，如哪些文字、版式、色彩、圖形能提升用戶的關(guān)注度，能夠吸引目標(biāo)用戶群體，引導(dǎo)用戶消費(fèi)，較為注重用戶對(duì)設(shè)計(jì)的體驗(yàn)感。相比之下，UI設(shè)計(jì)對(duì)用戶體驗(yàn)的關(guān)注逐漸提升到思考人類行為層面的研究。因此，UI設(shè)計(jì)教學(xué)關(guān)注的不僅是設(shè)計(jì)作品本身，而且涉及消費(fèi)者心理學(xué)、人機(jī)交互等領(lǐng)域的知識(shí)，其關(guān)注面更加寬廣[3]。

4.UI設(shè)計(jì)教學(xué)中須掌握的IT軟件技術(shù)UI設(shè)計(jì)在本質(zhì)上是基于IT技術(shù)開展的設(shè)計(jì)，IT技術(shù)需要與設(shè)計(jì)、創(chuàng)意有機(jī)結(jié)合，才能設(shè)計(jì)出更有創(chuàng)新價(jià)值的作品。因此，相關(guān)設(shè)計(jì)軟件的教學(xué)是UI設(shè)計(jì)教學(xué)重要的前置環(huán)節(jié)。當(dāng)前，平面設(shè)計(jì)人員需要熟練使用的軟件有CorelDRAW、Photoshop等設(shè)計(jì)軟件，而對(duì)于UI設(shè)計(jì)而言，設(shè)計(jì)人員往往還要掌握Html5、CSS、JS等編程語(yǔ)言與平臺(tái)工具。因此，相比于平面設(shè)計(jì)教學(xué)，UI設(shè)計(jì)教學(xué)對(duì)于學(xué)生而言難度更高。此外，對(duì)傳統(tǒng)工具的進(jìn)一步挖掘也是UI設(shè)計(jì)的重要手段。以UI設(shè)計(jì)中較為常用的Photoshop軟件為例，教師必須讓學(xué)生熟練掌握其中的常用功能，如鋼筆、形狀、圖層樣式、拾色器、路徑操作和文字等。

四、平面設(shè)計(jì)教學(xué)與UI設(shè)計(jì)教學(xué)的結(jié)合點(diǎn)

1.兩者的設(shè)計(jì)要素同宗同源平面設(shè)計(jì)與UI設(shè)計(jì)同屬于藝術(shù)設(shè)計(jì)大類，其設(shè)計(jì)基礎(chǔ)都是對(duì)圖形、色彩、文字等要素的應(yīng)用。因此，兩種設(shè)計(jì)模式都要突出產(chǎn)品自身的特性，形成強(qiáng)烈的展示效果和視覺沖擊力。在此基礎(chǔ)上，兩種設(shè)計(jì)模式在追求視覺效果時(shí)往往都會(huì)更加突出色彩的視覺沖擊力，以此深刻、傳神地表達(dá)出產(chǎn)品的特色和質(zhì)感，讓消費(fèi)者更容易接受產(chǎn)品。

2.兩者的版面風(fēng)格類似無論何種設(shè)計(jì)模式都需要建立在版面設(shè)計(jì)理念的基礎(chǔ)上。平面設(shè)計(jì)與UI設(shè)計(jì)的設(shè)計(jì)訴求都是將設(shè)計(jì)基礎(chǔ)要素排列組織到版面上，運(yùn)用照片、文字、插圖、符號(hào)、圖案等要素吸引用戶，達(dá)到讓用戶被主題吸引的目的。因此，版面設(shè)計(jì)是平面設(shè)計(jì)和UI設(shè)計(jì)的基礎(chǔ)。版面設(shè)計(jì)可使設(shè)計(jì)在視覺效果上更具完整性、邏輯性，其在平面設(shè)計(jì)和UI設(shè)計(jì)中都得到了普遍應(yīng)用。3.兩者的創(chuàng)意設(shè)計(jì)思維類似藝術(shù)設(shè)計(jì)的靈魂就是源源不絕的創(chuàng)新創(chuàng)意，其本質(zhì)是一種創(chuàng)意型思維活動(dòng)。創(chuàng)造性思維在平面設(shè)計(jì)和UI設(shè)計(jì)中都具有較高的價(jià)值，在平面設(shè)計(jì)和UI設(shè)計(jì)的初期，設(shè)計(jì)者都需要利用發(fā)散性思維生成創(chuàng)意主題。因此，創(chuàng)意是設(shè)計(jì)創(chuàng)作的根本。在UI設(shè)計(jì)中，設(shè)計(jì)師在設(shè)計(jì)初期需要通過頭腦風(fēng)暴激發(fā)創(chuàng)意，從而設(shè)計(jì)出更有價(jià)值的作品。因此，雙方的創(chuàng)意思維和出發(fā)點(diǎn)都是一致的。

結(jié)語(yǔ)

經(jīng)過以上探討，從平面設(shè)計(jì)教學(xué)與UI設(shè)計(jì)教學(xué)的關(guān)注點(diǎn)和結(jié)合點(diǎn)出發(fā)可以發(fā)現(xiàn)，UI設(shè)計(jì)源于平面設(shè)計(jì)，二者都建立在傳統(tǒng)藝術(shù)設(shè)計(jì)的基礎(chǔ)上。UI設(shè)計(jì)對(duì)IT技術(shù)的要求會(huì)越來越高，設(shè)計(jì)師不僅要精通平面設(shè)計(jì)方面的軟件，而且需要掌握一些編程語(yǔ)言。因此，在今后的UI設(shè)計(jì)教學(xué)中，教師不僅需要關(guān)注學(xué)生設(shè)計(jì)作品的感官效果，而且要引導(dǎo)學(xué)生設(shè)身處地考慮用戶的使用感受，在設(shè)計(jì)中親身體驗(yàn)，將心比心，多為用戶考慮。

參考文獻(xiàn)：

[1]蔡瑩瑩.以“人”為本的用戶界面設(shè)計(jì)流程研究[J].才智，2011（4）：35-36.

[2]孫靜雯.UI設(shè)計(jì)在現(xiàn)代藝術(shù)設(shè)計(jì)課程教學(xué)中的重要性分析[J].大眾文藝，2015（15）：195.

[3]李玉龍.青出于藍(lán)勝于藍(lán)——試論平面設(shè)計(jì)與UI設(shè)計(jì)的異同點(diǎn)[J].蘭州交通大學(xué)學(xué)報(bào)，2017，36（5）：30-32，59.

作者：吳楨 單位：蘇州市職業(yè)大學(xué)藝術(shù)學(xué)院