UI界面設計課程教學中的中國元素應用分析

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

關鍵詞：UI界面設計;課程;中國元素

中圖分類號：G424? ? ? 文獻標識碼：A

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

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

1 UI界面設計概述

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

2 中國元素在UI界面設計課程教學中的應用分析

2.1 傳統書法繪畫藝術在UI界面設計中的應用

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

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

2.2 傳統文化在UI界面設計中的應用

隨著更多的人關注中國傳統文化，《山海經》主題文化融入UI界面視覺設計領域，在UI界面設計中全新設計《山海經》的人物形象，通過用戶交互設計和延展設計，實現一種全新的視覺信息傳達和呈現，使用戶的情感能夠實現完整、深層次的互動。

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

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

2.3 傳統繪畫元素在UI界面設計的應用

（1）水墨畫元素在UI界面設計中的應用

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

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

經營位置也即畫幅中的位置和構圖，可以將其融入UI界面設計之中，考慮用戶的個人習慣和特點，通過點線面的創新布置和鋪排，形成整體協調的UI界面，體現出水墨意蘊的精神表達，繪畫出一張具有東方神韻和意境的界面。

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

（2）唐代敦煌壁畫元素在UI界面設計中的應用

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

敦煌壁畫的色彩有其深遠的歷史性和東方文化內涵，能夠通過色彩表達出強烈的情感并賦予其象征性意義。可以將其運用于UI界面設計之中，在“傳統山水畫”的App界面設計中搭配敦煌壁畫的色彩，彰顯獨特的敦煌藝術魅力。

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

敦煌壁畫中的線條具有極強的寫意性和韻律感，增強了畫面的節奏和層次。可以將抽象化、寫意化的壁畫線條應用于UI界面設計之中，賦予UI界面豐富的文化內涵。如：在“古北水鎮”旅游UI界面設計中，運用線條勾勒出古鎮上的建筑物，體現出極高的表現力和張力，使各個建筑物間的銜接極其流暢而自然，呈現出別具一格的通透畫面，渲染出古鎮的獨特意境。

2.4 傳統圖案在UI界面設計中的應用

（1）秦漢傳統紋樣的應用

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

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

（2）敦煌藻井圖案的應用

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

3 結語

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

參考文獻：

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

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

[3] 石代嬌，賀優，張亞軍.本土化元素在UI界面設計領域中的應用[J].遼寧科技學院學報，2019，21（6）：52-54，68.

[4] 東瑞.解析如何利用傳統文化理念培養UI交互設計的能力[J].現代企業教育，2014（16）：529.

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

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

收稿日期：2021-12-30

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

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