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

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

中圖分類號：G424? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2022）14-0166-02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

敦煌壁畫的色彩有其深遠的歷史性和東方文化內(nèi)涵，能夠通過色彩表達出強烈的情感并賦予其象征性意義?？梢詫⑵溥\用于UI界面設(shè)計之中，在“傳統(tǒng)山水畫”的App界面設(shè)計中搭配敦煌壁畫的色彩，彰顯獨特的敦煌藝術(shù)魅力。

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

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

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

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

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

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

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

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

3 結(jié)語

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

參考文獻：

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

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

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

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

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

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

收稿日期：2021-12-30

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

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