UI界面設(shè)計(jì)課程教學(xué)中的中國(guó)元素應(yīng)用分析

摘要：UI界面設(shè)計(jì)課程教學(xué)日益受到關(guān)注和重視，它對(duì)于培養(yǎng)具有獨(dú)立策劃、產(chǎn)品設(shè)計(jì)和視覺規(guī)劃能力的人才尤其重要，也成為企業(yè)青睞和追逐的人才。將源遠(yuǎn)流長(zhǎng)、內(nèi)蘊(yùn)豐厚的中國(guó)傳統(tǒng)元素融入U(xiǎn)I界面設(shè)計(jì)課程教學(xué)中，是一種全新的、具有開創(chuàng)性體驗(yàn)的教學(xué)思路。為此，要在把握UI界面設(shè)計(jì)方法和原則的前提下，深入挖掘和提取新穎獨(dú)特的中國(guó)傳統(tǒng)文化元素，提高課程吸引力，創(chuàng)設(shè)出具有良好用戶交互體驗(yàn)和清晰明了的UI界面，使開發(fā)出的產(chǎn)品更具有競(jìng)爭(zhēng)力。

關(guān)鍵詞：UI界面設(shè)計(jì);課程;中國(guó)元素

中圖分類號(hào)：G424? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）14-0166-02

隨著UI設(shè)計(jì)人才培養(yǎng)與需求之間的矛盾日益凸顯，要重視和加強(qiáng)UI界面設(shè)計(jì)課程教學(xué)，提高課程的吸引力，考慮用戶的良好交互性體驗(yàn)進(jìn)行優(yōu)化設(shè)計(jì)，并充分挖掘和融入豐富多元的中國(guó)元素，吸納中國(guó)元素的傳統(tǒng)豐富文化內(nèi)涵和底蘊(yùn)，設(shè)計(jì)出中國(guó)本土化的UI界面設(shè)計(jì)產(chǎn)品，讓使用者獲得良好的愉悅感和體驗(yàn)感。

1 UI界面設(shè)計(jì)概述

UI界面設(shè)計(jì)是一種視覺語(yǔ)言設(shè)計(jì)，涵蓋交互設(shè)計(jì)知識(shí)和視覺設(shè)計(jì)知識(shí)，引導(dǎo)用戶清晰準(zhǔn)確地獲悉頁(yè)面信息和交互細(xì)節(jié)，并依賴于圖片、文字、符號(hào)等載體，傳達(dá)UI設(shè)計(jì)產(chǎn)品的想法和視覺表現(xiàn)。設(shè)計(jì)時(shí)主要體現(xiàn)以下幾點(diǎn)原則：（1）界面結(jié)構(gòu)的合理性。UI界面設(shè)計(jì)要構(gòu)建相應(yīng)的信息層級(jí)，對(duì)界面空間進(jìn)行合理分割，將最重要的主題內(nèi)容、商品信息置于最容易關(guān)注的位置，避免信息內(nèi)容過(guò)于煩瑣和凌亂，讓用戶的眼球跟隨界面結(jié)構(gòu)進(jìn)行移動(dòng)，快速準(zhǔn)確地獲取所需的信息，符合用戶的個(gè)性化使用需求[1]。（2）視覺元素的統(tǒng)一性。UI界面設(shè)計(jì)的視覺元素應(yīng)當(dāng)體現(xiàn)出統(tǒng)一規(guī)整性的特點(diǎn)，能夠圍繞整個(gè)頁(yè)面設(shè)計(jì)風(fēng)格，搭建完整的構(gòu)架體系，使設(shè)計(jì)元素、內(nèi)容和其他數(shù)據(jù)保持統(tǒng)一的呈現(xiàn)方式，提高用戶的體驗(yàn)感。（3）設(shè)計(jì)風(fēng)格的簡(jiǎn)約性。UI界面設(shè)計(jì)要盡量減少過(guò)于煩瑣的設(shè)計(jì)，要以簡(jiǎn)明的文字、通俗易懂的視覺呈現(xiàn)，讓自己的設(shè)計(jì)風(fēng)格變得趨向簡(jiǎn)約，方便用戶輕松快速地了解產(chǎn)品設(shè)計(jì)的理念，尤其是在“碎片化”的新時(shí)代下，UI界面設(shè)計(jì)要注重界面內(nèi)容的節(jié)奏，采用扁平化的設(shè)計(jì)架構(gòu)，對(duì)復(fù)雜的效果進(jìn)行簡(jiǎn)單處理，體現(xiàn)出與用戶的互動(dòng)性[2]。（4）響應(yīng)式設(shè)計(jì)。適配性對(duì)于交互界面的意義越來(lái)越顯現(xiàn)出其重要性，要在UI界面設(shè)計(jì)中引入響應(yīng)式設(shè)計(jì)的理念，體現(xiàn)UI界面設(shè)計(jì)的靈活性和可塑性。

2 中國(guó)元素在UI界面設(shè)計(jì)課程教學(xué)中的應(yīng)用分析

2.1 傳統(tǒng)書法繪畫藝術(shù)在UI界面設(shè)計(jì)中的應(yīng)用

在UI界面設(shè)計(jì)中的版面設(shè)計(jì)之中，文字符號(hào)是極其重要的組成部分，要考慮版式設(shè)計(jì)原理和用戶的視覺習(xí)慣，進(jìn)行文字排版，充分引入傳統(tǒng)書法藝術(shù)，利用不同的書法字體展示出不同的情緒，提高UI界面的美觀程度。

中國(guó)傳統(tǒng)書法是具有極強(qiáng)視覺特點(diǎn)的漢字書寫藝術(shù)，如：甲骨文、篆體、草書、楷書、行書等，不同的字體具有各自獨(dú)特的線性結(jié)構(gòu)和幾何圖形，帶給用戶極其新穎獨(dú)特的視覺沖擊和刺激體驗(yàn)，使UI界面散發(fā)出古老的傳統(tǒng)書法藝術(shù)的芳香[3]。比如：在UI視覺藝術(shù)設(shè)計(jì)中，采用傳統(tǒng)書法元素，取形于故宮博物院的“宮”字，其寶字頭選用“海水江崖”和“玉璧”兩種傳統(tǒng)圖形元素，應(yīng)用宋代流行的“九疊篆”鐫刻方式，通過(guò)折疊堆曲、均勻?qū)ΨQ的筆畫結(jié)構(gòu)，展示極具傳統(tǒng)對(duì)稱美感和特色的文字藝術(shù)。

2.2 傳統(tǒng)文化在UI界面設(shè)計(jì)中的應(yīng)用

隨著更多的人關(guān)注中國(guó)傳統(tǒng)文化，《山海經(jīng)》主題文化融入U(xiǎn)I界面視覺設(shè)計(jì)領(lǐng)域，在UI界面設(shè)計(jì)中全新設(shè)計(jì)《山海經(jīng)》的人物形象，通過(guò)用戶交互設(shè)計(jì)和延展設(shè)計(jì)，實(shí)現(xiàn)一種全新的視覺信息傳達(dá)和呈現(xiàn)，使用戶的情感能夠?qū)崿F(xiàn)完整、深層次的互動(dòng)。

從人物形象的視覺設(shè)計(jì)來(lái)看，主要包括以下幾方面的形象設(shè)計(jì)內(nèi)容：（1）赤鱬形象設(shè)計(jì)?！渡胶＝?jīng)》中的赤鱬有著魚的身形和人的面孔，要在UI設(shè)計(jì)中體現(xiàn)其在水中的輕盈感和面龐的純凈感，可以采用藍(lán)、綠兩色營(yíng)造清澈和諧的水中畫面，人物則選用明度較低的半透明狀，并以純細(xì)線加以點(diǎn)綴。（2）猼訑形象設(shè)計(jì)。《山海經(jīng)》中的猼訑是身形像羊、有著九條大尾巴和四只耳朵、眼睛長(zhǎng)在背脊上的形象，在UI視覺設(shè)計(jì)中出于現(xiàn)代簡(jiǎn)約的設(shè)計(jì)理念和風(fēng)格，對(duì)其身上的尾巴進(jìn)行簡(jiǎn)化，以線條進(jìn)行處理;并選用藍(lán)色和橘色作為主色調(diào)，局部點(diǎn)綴明度較高的色塊，給人以穩(wěn)重而不失趣味的視覺感受。（3）旋龜形象設(shè)計(jì)?！渡胶＝?jīng)》中的旋龜是全身黑色、頭像鳥且有著細(xì)長(zhǎng)蛇尾的形象，在UI設(shè)計(jì)中采用明亮色彩的點(diǎn)和線，縮減旋龜?shù)暮谏娣e，在四肢的處理上選取最為強(qiáng)烈的白色，背景則是高明度的黃色，從而賦予界面以沉穩(wěn)、輕快的視覺感受。（4）猾褢形象設(shè)計(jì)。《山海經(jīng)》中的猾褢身形像人，全身布滿豬鬃毛，它的出現(xiàn)意味著有大災(zāi)大難的發(fā)生。因而，在UI視覺設(shè)計(jì)中采用暖色調(diào)，以紅色寓意一種警示的意味，身形則設(shè)計(jì)為胖墩墩軟乎乎的形象，與其身上硬硬的豬鬃形成鮮明的對(duì)比。（5）颙的形象設(shè)計(jì)?！渡胶＝?jīng)》中的颙是一種兇惡的鳥，在UI界面設(shè)計(jì)時(shí)要注重對(duì)其面部的刻畫，給人帶來(lái)一種神秘莫測(cè)的感覺，并以主體的暖色調(diào)與背景的冷色調(diào)相對(duì)比，營(yíng)造出一種令人驚悚的恐懼感。（6）蔥聾形象設(shè)計(jì)?！渡胶＝?jīng)》中的蔥聾生活于符禺山中，體態(tài)與羊類似，身上火紅色的艷麗鬃毛。在UI界面設(shè)計(jì)中采用大小各異的紅點(diǎn)進(jìn)行點(diǎn)綴，使山林的畫面更富于層次感和空間感。（7）英招形象設(shè)計(jì)。這是一種神話傳說(shuō)中人面馬身的神，有老虎的紋、鳥的羽翼，極具靈性和神性。在設(shè)計(jì)中采用藍(lán)紫色彩突顯其隱匿于市的神秘感，并將其羽翼設(shè)計(jì)為玫紅色的色塊，給人一種溫暖的感覺。

從文化視覺應(yīng)用設(shè)計(jì)來(lái)看，可以將《山海經(jīng)》主題文化融入U(xiǎn)I界面設(shè)計(jì)的諸多方面，包括《山海經(jīng)》主題文化視覺展板設(shè)計(jì)、界面設(shè)計(jì)、主題文化視覺茶包設(shè)計(jì)、主題文化視覺手機(jī)殼設(shè)計(jì)等，挖掘傳統(tǒng)文化的元素形象，與當(dāng)代大眾的審美價(jià)值理念相契合。

2.3 傳統(tǒng)繪畫元素在UI界面設(shè)計(jì)的應(yīng)用

（1）水墨畫元素在UI界面設(shè)計(jì)中的應(yīng)用

中國(guó)傳統(tǒng)水墨畫有其自身獨(dú)特的意境、章法和構(gòu)圖，可以將中國(guó)傳統(tǒng)水墨畫的應(yīng)物象形、經(jīng)營(yíng)位置、骨法用筆等融入其中，不僅增強(qiáng)UI界面設(shè)計(jì)的律動(dòng)感和層次性，而且能夠突顯中國(guó)水墨畫的意境之美和東方神韻，給用戶帶來(lái)一種簡(jiǎn)潔、清晰的視覺體驗(yàn)。

應(yīng)物象形主要表達(dá)的是對(duì)于真實(shí)物象的主觀描繪，注重形神兼?zhèn)?、氣韻生?dòng)。在UI界面設(shè)計(jì)的過(guò)程中，主要通過(guò)對(duì)具象物體的刻畫和勾勒傳達(dá)出水墨筆法的渲染，賦予UI界面作品以活力和韻味[4]。

經(jīng)營(yíng)位置也即畫幅中的位置和構(gòu)圖，可以將其融入U(xiǎn)I界面設(shè)計(jì)之中，考慮用戶的個(gè)人習(xí)慣和特點(diǎn)，通過(guò)點(diǎn)線面的創(chuàng)新布置和鋪排，形成整體協(xié)調(diào)的UI界面，體現(xiàn)出水墨意蘊(yùn)的精神表達(dá)，繪畫出一張具有東方神韻和意境的界面。

骨法用筆主要是指用筆的骨力和氣勢(shì)，通常采用牛毛皴、披麻皴等技巧展示水墨山水的意境。骨法用筆極其講究運(yùn)筆方式，如：平、回、留、重、變等，靈活運(yùn)用抑揚(yáng)頓挫、輕重緩急的運(yùn)筆手法，展示水墨畫的文人情懷和東方韻味。將骨法用筆融入U(xiǎn)I界面設(shè)計(jì)之中，能夠傳達(dá)出水墨所蘊(yùn)含的精神表達(dá)，營(yíng)造出變幻多姿的畫面效果，體現(xiàn)出極具東方趣味的形式美感。

（2）唐代敦煌壁畫元素在UI界面設(shè)計(jì)中的應(yīng)用

唐代敦煌壁畫是整個(gè)敦煌文化長(zhǎng)河中的璀璨明珠，在唐代的二百余個(gè)洞窟之中，每個(gè)壁畫圖案均有其獨(dú)特的意味，形態(tài)各異，用色豐富大膽，線條靈動(dòng)柔美，有極其獨(dú)特的中國(guó)傳統(tǒng)繪畫藝術(shù)意境之美[5]。

敦煌壁畫的色彩有其深遠(yuǎn)的歷史性和東方文化內(nèi)涵，能夠通過(guò)色彩表達(dá)出強(qiáng)烈的情感并賦予其象征性意義。可以將其運(yùn)用于UI界面設(shè)計(jì)之中，在“傳統(tǒng)山水畫”的App界面設(shè)計(jì)中搭配敦煌壁畫的色彩，彰顯獨(dú)特的敦煌藝術(shù)魅力。

唐代敦煌壁畫中的經(jīng)變畫有著極其豐富的構(gòu)圖形式，講究畫面的主次關(guān)系，突出畫面的主體核心，能夠快速攫取用戶的眼球。例如：在“紫禁城600”App的界面設(shè)計(jì)之中，通過(guò)現(xiàn)代插圖的方式展示故宮古建筑，并以背景天空作為映襯，將用戶的視覺中心第一時(shí)間聚焦于中間的故宮古建筑，體現(xiàn)出簡(jiǎn)潔化、輕量化的設(shè)計(jì)理念。

敦煌壁畫中的線條具有極強(qiáng)的寫意性和韻律感，增強(qiáng)了畫面的節(jié)奏和層次?？梢詫⒊橄蠡懸饣谋诋嬀€條應(yīng)用于UI界面設(shè)計(jì)之中，賦予UI界面豐富的文化內(nèi)涵。如：在“古北水鎮(zhèn)”旅游UI界面設(shè)計(jì)中，運(yùn)用線條勾勒出古鎮(zhèn)上的建筑物，體現(xiàn)出極高的表現(xiàn)力和張力，使各個(gè)建筑物間的銜接極其流暢而自然，呈現(xiàn)出別具一格的通透畫面，渲染出古鎮(zhèn)的獨(dú)特意境。

2.4 傳統(tǒng)圖案在UI界面設(shè)計(jì)中的應(yīng)用

（1）秦漢傳統(tǒng)紋樣的應(yīng)用

隨著擬物化圖標(biāo)重回人們的視野，秦漢傳統(tǒng)紋樣逐漸融入U(xiǎn)I界面設(shè)計(jì)之中，極大豐富了UI界面設(shè)計(jì)的內(nèi)容和形式。以應(yīng)用軟件圖標(biāo)設(shè)計(jì)為例，選取秦漢“四神瓦當(dāng)”之一龍紋的圖案，與界面設(shè)計(jì)中IE瀏覽器的形狀相結(jié)合，充分展示出極具中國(guó)風(fēng)的視覺體驗(yàn)。還可以在圖庫(kù)的圖標(biāo)設(shè)計(jì)中提取秦漢瓦當(dāng)中的動(dòng)物紋樣馬的外形，添加山脈和太陽(yáng)的剪影，使畫面更富于均衡感，勾勒出駿馬奔馳在山河大地之間的快意感。在天氣圖標(biāo)的設(shè)計(jì)中借鑒秦漢瓦當(dāng)中的云、日、星等氣象類紋樣，并添加與天氣相關(guān)的數(shù)字符號(hào)，體現(xiàn)出極強(qiáng)的視覺識(shí)別度。

在手機(jī)撥號(hào)界面設(shè)計(jì)中，選取瓦當(dāng)紋樣、城墻磚、類似蝙蝠的秦漢紋樣等元素，充分體現(xiàn)界面設(shè)計(jì)的簡(jiǎn)潔性和趣味性。在手機(jī)解鎖界面設(shè)計(jì)中，參考有一萬(wàn)年歷史的馬勺臉譜紋樣，融合兵馬俑的臉部特征和發(fā)髻特征，讓用戶在使用時(shí)感知久遠(yuǎn)的馬勺文化。

（2）敦煌藻井圖案的應(yīng)用

以《敦煌藻井》界面的標(biāo)示設(shè)計(jì)為例，在進(jìn)行UI界面設(shè)計(jì)的過(guò)程中，可以對(duì)敦煌藻井圖案元素進(jìn)行提煉和再設(shè)計(jì)，利用現(xiàn)代表現(xiàn)手法創(chuàng)新傳統(tǒng)圖案，使之擁有新的生命力[6]。比如，提取蝴蝶邊飾紋樣和童子蓮花座紋樣元素，運(yùn)用現(xiàn)代手法對(duì)其進(jìn)行再創(chuàng)作和再設(shè)計(jì)，依從敦煌藻井圖案的構(gòu)圖法則和對(duì)稱均衡構(gòu)圖方法，采用簡(jiǎn)化改造、變形延伸等策略進(jìn)行創(chuàng)新設(shè)計(jì)，揉合寶相花紋中的對(duì)構(gòu)花瓣、云曲花瓣等幾何紋樣，融合設(shè)計(jì)出一朵綻放的蓮花又好似一只展翅起舞的蝴蝶形象，讓人產(chǎn)生一種歷經(jīng)千年后的滄桑和積淀的歷史厚重感覺。

3 結(jié)語(yǔ)

綜上所述，中國(guó)傳統(tǒng)文化藝術(shù)寶庫(kù)歷史悠遠(yuǎn)、底蘊(yùn)厚重，有極強(qiáng)的審美價(jià)值?？梢栽赨I界面設(shè)計(jì)課程教學(xué)中融入豐富多樣的中國(guó)元素，挖掘并提取傳統(tǒng)文化中的文字、顏色、繪畫、圖案等中國(guó)元素，運(yùn)用現(xiàn)代表現(xiàn)手法對(duì)其進(jìn)行再設(shè)計(jì)和再創(chuàng)作，呈現(xiàn)出內(nèi)蘊(yùn)豐厚、極具藝術(shù)美感的UI界面設(shè)計(jì)作品，從而使UI界面設(shè)計(jì)具有更強(qiáng)的生命力和文化特色，為增強(qiáng)界面設(shè)計(jì)課程的吸引力注入活力。

參考文獻(xiàn)：

[1] 彭華，劉琳.中國(guó)傳統(tǒng)元素在手機(jī)UI界面中的設(shè)計(jì)與應(yīng)用[J].美與時(shí)代（上），2016（5）：105-106.

[2] 胡佳妮，徐延章.中國(guó)傳統(tǒng)元素在手機(jī)交互設(shè)計(jì)中的應(yīng)用[J].美與時(shí)代（上），2015（12）：107-109.

[3] 石代嬌，賀優(yōu)，張亞軍.本土化元素在UI界面設(shè)計(jì)領(lǐng)域中的應(yīng)用[J].遼寧科技學(xué)院學(xué)報(bào)，2019，21（6）：52-54，68.

[4] 東瑞.解析如何利用傳統(tǒng)文化理念培養(yǎng)UI交互設(shè)計(jì)的能力[J].現(xiàn)代企業(yè)教育，2014（16）：529.

[5] 孫嘉琪，楊杰.探究移動(dòng)端購(gòu)物平臺(tái)的UI設(shè)計(jì)——以小米有品為例[J].美術(shù)教育研究，2021（6）：43-45.

[6] 雷菁.淺析中國(guó)傳統(tǒng)元素在手機(jī)UI界面設(shè)計(jì)中的應(yīng)用[J].通訊世界，2015（10）：20-21.

收稿日期：2021-12-30

基金項(xiàng)目：佛山市禪城區(qū)2021年度基礎(chǔ)教育研究課題：基于三合教學(xué)模式下增加界面設(shè)計(jì)課程吸引力的實(shí)踐研究》（編號(hào)：YB2021003）

作者簡(jiǎn)介：黃為（1985—）， 男，廣東佛山人，講師，本科，研究方向：計(jì)算機(jī)教學(xué)與研究。