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—）， 男，广东佛山人，讲师，本科，研究方向：计算机教学与研究。