中国传统元素在界面设计中的应用

吴莹莹

中国传统元素在界面设计中的应用

吴莹莹

（安徽商贸职业技术学院 艺术设计学院，安徽 芜湖 241002）

中国传统文化源远流长，近年来随着国家富强、民族自信，中国传统元素频频出现在各类数字媒体艺术作品中。目前，界面设计中的中国传统元素使用存在乱用、滥用、不遵守界面设计原则、无法突出主题等问题，造成用户对界面认知错误以及操作不流畅，增加了用户使用过程的学习成本。如何将中国传统元素与当代设计趋势相结合，设计出既能体现中国特色，又能符合当代审美潮流的用户界面作品，对于弘扬中国传统文化和展示国人文化自信具有重要意义。

界面设计；中国传统元素；文化传播；民族自信

一、引言

20世纪70年代，美国施乐公司提出了图形用户界面的概念，它指的是用户与计算机之间用于交互的多媒体界面。随着新技术新产品的不断更新，已涉及多个领域，例如软件界面设计、移动端界面设计、网页界面设计等。界面设计所包含的内容大致可以分为三类，即逻辑架构设计、视觉传达设计和交互设计。在视觉传达设计层面，设计者应基于用户体验出发，针对产品功能，遵循设计原则与设计规范，让界面美观且有创意的同时能确保用户能够快速获取信息。优秀的界面设计能挖掘用户的情感需求与文化需求，激发用户对产品的使用欲望，从而增强用户黏性。将中国传统元素应用于用户界面设计之中可使用户界面的展示方式更加生动多样，增强国人民族自信，利于中国传统文化的传播与推广，是创新更是趋势。

二、中国近代界面设计的审美

（一）讨好西方审美阶段

纵观历史，民族文化常常因国家强盛得以传承，因国家衰落而分崩离析。中国传统文化历经几千年，艺术底蕴深厚，譬如汉字、剪纸、纹样等，具有民族性、地域性、时代性等特征[1-2]，却因为中国近代综合国力的衰退而难以得到传播，导致近代大众审美偏西方化，一味模仿追随，在界面设计领域亦是如此。很长一段时间，苹果公司提出的“极简”界面设计风格备受推崇，无论是网页界面设计抑或是移动端界面设计，均以其为标杆，甚至不管不顾、强行模仿。

例如图1中的卫龙辣条网页广告设计，可以看到浓郁的“苹果模仿风”，甚至从英文命名到售价，都极力向数码产品专有命名与特有数值靠拢。虽然苹果公司的网页界面设计风格确实非常优秀，但是典型中国小吃强行挂靠、照搬照套国外数码产品的广告设计风格依然不妥。辣条是具有中国特色的民间小吃，此种刻意模仿的行为确实透露着强烈的民族文化不自信。明明是具有中国特色的产品，界面作品也是出自中国设计师之手，却很难看到属于中国的特色韵味。

图1 卫龙网页广告设计

（二）“中国风”崛起阶段

近年来，随着中国社会经济的发展和国际地位的提升，中国传统文化开始不断在世界舞台展露新颜，越来越多的艺术作品基于中国元素而创作。例如大家耳熟能详的电影作品《功夫熊猫》《花木兰》《齐天大圣》等，再如以中国风为主题的各类国际时装秀等。虽然国外设计师的“中国风”作品在国内没有受到大众的认可，被认为无法表达出中国传统文化的真谛，但可以看出“中国风”正在崛起，“中国风”设计激发了中国人对自身民族文化的热爱，让中国人重拾民族自信，也让国际友人见到中国传统文化的博大精深。[3]国内的界面设计师也积极开展此类研究和探索实践，近些年一些优秀的“中国风”式界面设计正在改变着大家对界面设计的审美认知，彰显民族传统，激发民族自豪感。例如图2的“每日故宫”APP的界面设计中，整体设计古色古香，与中国传统水墨画有着异曲同工之妙，表现力极佳。其LOGO设计是运用汉字“宫”的变体和中国传统的祥云纹样组合，色彩搭配采用金色系和黄色系的渐变，表现古代皇家的尊贵感。在启动页面上能看到中国古代传统形象的动态表达，并能听到浑厚的钟声音效，体验感庄重而美妙。

图2 “每日故宫”APP页面截图

三、中国目前的产品界面设计现状

（一）对中国传统文化了解不足，元素滥用

通过观察国内外近些年的艺术作品可知，现代人对于中国传统文化元素了解并不深刻，大都停留在视觉表层认知，蕴含在传统元素中的艺术内涵与价值往往被忽视，因此在设计中常常表达肤浅。[4]例如迪士尼电影《花木兰》中，故事所处背景应为魏晋南北朝时期，平民百姓所着服饰是中国唐朝时期的服饰，官员所着服饰更贴近中国明朝时期的服饰。这些中国传统元素的简单堆砌是非常不和谐不正确的，将中国传统文化体现得非常混乱且不成体系，甚至会对中国传统文化的传播带来负面影响。

中国的艺术家与设计者本应该有着得天独厚的条件，但长期的文化不自信使得很多“中国风”作品的设计往往只具其形，未具其意。某知名零食品牌产品宣传海报中模特的“眯眯眼”妆容就是典型失败案例。作为中国本土企业，完全不了解“眯眯眼”妆容背后的歧视含义，对“东方美”的解读出现了严重错误，这相当于默认了西方国家对中国人形象进行丑化的行为，难怪会引起国人的强烈不满。

将中国元素完美融合于作品中的优秀创新设计并不多见，打着“中国风”幌子的作品倒是不少。这类作品只是简单套用了中国的人物或物件，依然采用西方设计风格甚至是刻意迎合西方审美。有一些设计师单一利用了中国传统元素的美观性，却没有考虑到元素使用过程中的合理性。

（二）元素运用方式与界面设计原则相悖

中国风的设计越来越受到追捧，引领着未来设计的流行趋势，设计师应明确了解中国风融入界面设计的内涵，正确掌握表现形式与表达技巧，将中国风融入界面设计绝不是以牺牲用户体验为代价。与传统的绘画作品不同，界面设计作品需要符合大众审美并服务大众，多种元素之间讲求平衡，一切应从用户体验出发。[5]因此，在设计图形界面过程中，设计的规则化十分重要。这些规则主要包括了界面元素平衡、视觉引导和元素识别等方面。

界面元素平衡是指用户在不同角度（上下观察或者左右观察）、不同模式（移动设备横屏或者竖屏）、不同媒介（印刷品或者数媒显示屏）中进行元素查看时，元素均可保持视觉舒适且在被镜像后依然能够保持衡性。有效的视觉引导应能在恰当的时机引导用户进行界面交互操作，突出产品的易用性。元素的识别度高则可增强界面的易读性。好的界面设计应当降低用户的认知与学习成本，遵循的最重要设计原则为“基于用户体验”。将中国传统元素应用于界面设计不可一味强调元素体现而忽略设计原则。部分设计师没有深入探讨这些传统元素应用于界面设计中的合理性，只是简单将元素带入、整理、排版、去繁化，只追求设计表面的“中国风”而忽视了界面设计中的设计规则，最终可能导致作品的风格统一性较差、图标含义表达有歧义、用色不准确等问题。

（三）元素选择过于宽泛，不利于主题表达

中国传统元素在中华民族发展过程中由中国人创造与传承，能够反映出中国的人文精神，是具有中国特质的文化成果。[6]中国传统元素的形态非常之多，从汉字到图饰，从妆容到服饰，不同时期不同品类均有着不同特点。界面设计在使用中国传统元素时将不同朝代不同品类的元素进行混搭设计的情况时有发生，此类设计方式应当多加考量。试想一下，若秦汉时期的货币元素和明清时期的头饰元素同时出现在某个APP的界面设计中时，即使对元素涵义有明确认知，对元素隐喻也并无不妥，但混搭式的设计会给不甚了解中国传统文化的用户特别是国外用户造成误解，认为这些元素既然出现在同一个APP的界面设计中，应当是具有同类性的。此举可能会造成用户的错误认知，对于传播中国传统文化并无好处。

四、中国传统元素在现代界面设计中的应用手段

（一）增强民族自信，深耕中国文化

中国传统元素具有中国鲜明特色，利用色彩、形象、符号等来彰显中国某一个时代的独有文化魅力，能使得设计变得更加富有韵味。很多设计师尤其是国外设计师对中国传统文化一知半解，对久远年代的中国传统文化混淆不清。比如在电影《花木兰》中，电影中借鉴的是我国唐朝晚期的“额黄妆”，但整体上妆容粗糙，观赏度欠佳，与我国历史学家大量研究后复原出来的“额黄妆”妆容有着很大区别，其电影表达的核心内容与中国人所熟知的《木兰辞》所表达内容也有较大出入，究其原因是国外艺术家对中国传统文化没有进行系统深入了解。

设计师们若要更好运用中国元素，需进一步深耕中国传统文化。中国文化历史悠久，可按照不同时期分门别类进行研究。元素的使用应该成体系，不同时代不同类别的元素混用、同一元素的反复使用都只是照猫画虎，“中国风”里的内涵自然无法得以表现。以中国传统纹样举例，设计师们非常爱将中国传统纹样用于网页、游戏等现代的界面设计之中，数量上日渐递增，但用户所见到的作品又往往并非优秀典范。中国传统纹样在不同朝代具有不同特征，殷周时期所采用纹样来源于动物较多，多采用对称形，用于表现森严且神秘的氛围。唐宋时期对外交流较多，民风也相对开放，在纹样的花色品种、装饰风格等方面都发生了较大变革，该时期的纹样特征既保留了民族特色又引用了外国特点。在界面设计中使用纹样元素时应注意纹样的朝代出处以及具体含义，避免乱用。只有深耕中华传统文化，方可避免对中国元素的片面理解，才能在借鉴与设计“中国风”作品时游刃有余。

（二）掌握设计原则，避免生搬硬套

界面设计说到底属于“科学”的范畴，想设计出一个出色的页面绝不是单纯凭感觉。界面设计需要目的性，需要明确产品定位、用户需求、交互习惯、恰当的风格等，以此为基础，基于用户体验进行设计，并且根据用户反馈不断进行迭代。“基于用户体验”作为界面设计的宗旨，自然衍生出一系列的设计规则与规范。比如应使用户能够快速获得信息、将层级关系规则化，能够遵循用户的使用习惯，注意人性化设计等。如设计师本身没有遵循相关设计规则，则并不会因为中国风设计加分。合理的配色，对称的设计元素、有效的视觉引导、统一的风格特征等界面设计手法比不合理强行套用中国传统元素更加重要，不应为了单一的界面呈现效果而牺牲界面的逻辑性以及界面操作的便捷性。

例如在图3的系列图标设计中，确实有中国传统元素的存在，但是基于用户长期使用电子设备以来的积累认知，很难将莲藕与设置选项相联系，手机管家图标也非常容易被误解为音乐选项，华为商城图标与应用市场图标表现形态十分类似，容易混淆，违背了图标设计的易读性原则。

图3 中国元素图标设计

再如图4中的游戏界面设计，游戏界面的设计应当直白易懂、突出主题，提升便捷程度，不要增加玩家的理解成本。该游戏界面中的背景设计和ICON 设计都采用了典型的中国元素，界面中ICON数量较多，用色过于丰富，加上无处不在的字幕，内容实在繁杂，让人眼花缭乱，无法突出页面重点，在设计原则基础上进行中国元素的融入设计才是有效的，否则传统纹样应用再美观，ICON设计再新颖其实都是喧宾夺主。

图4 某游戏界面截图

（三）细化设计范围，明确设计主题

在界面设计中引用中国传统元素，一方面要对中国传统文化充满尊重与敬畏，另一方面又需要突破与创新，要注意在创新过程中去体会中国传统文化精髓。中国传统元素的选择非常丰富，这反而造成在界面设计过程中随意使用传统元素的情况发生。在进行创新创作的过程中，需要对已有的传统文化深入了解，然后提取对于创作在价值的部分。在进行中国风界面设计时不妨适当压缩中国传统元素的选择范围，进行细化，根据界面设计所要表达的主题对元素进行归类、筛选与组合，准确定位界面设计风格，找到元素的共性，减少凌乱感、增强合理性。譬如在使用传统元素时，可以考虑从朝代出发，使用专属于某一个朝代的纹样和形象设计。抑或从品类出发，利用某一品类的发展来贯穿不同页面等。从设计师的角度来看，这一定程度上避免了在使用传统元素时出现错误的概率，且更容易契合界面设计的统一性原则；对于用户而言，在使用和欣赏界面时，能够更加集中学习某一方面的中国传统文化知识品类，易于理解与总结。

以解谜游戏《画境长恨歌》为例，该款游戏将白居易《长恨歌》的所处朝代——唐朝作为设计背景，采用的设计元素尊重唐朝历史文化，对《长恨歌》的画面感以及情绪表达都有很好的诠释（见图5）。游戏中所涉及角色的服饰、妆容、道具都具有显著的唐朝色彩，组成元素合理，结合清新水墨画风，界面设计准确而有韵味。例如游戏场景中挂在枝头之上的香囊，其原型就可在央视纪录片《国家宝藏》中觅得踪影，名为“葡萄花鸟纹银香囊”；用于摆放荔枝的托盘的原型为唐代留存下来的唯一水晶容器——水晶八曲长杯。可以看出设计团队针对性地做了大量唐朝文化的研究工作。该款游戏推出之后，其界面设计受到了一致好评。

图5 《画境长恨歌》界面元素出处

五、总结

20世纪八十年开始，西方设计对中国艺术的创造有着非常强烈的冲击，大量模仿设计作品出现，具有本国特色的艺术作品却萎靡不振、裹足不前。中国传统文化连接着中国的过去、现在和未来。随着国家的经济发展，民族自信被唤醒，国人的审美素养得到进一步提升，感受到中国传统文化的巨大能量，优秀的中国传统文化应予以继承和发扬光大。

界面设计的出现使得艺术表现形式具有了多元化特征，伴随着数码产品和数字文化产业的发展，艺术呈现实现了面向普通大众，此时的界面设计已经成为设计领域的中坚力量。在艺术共享的时代，界面设计的设计风格正影响着广大用户的审美观。将中国风元素融入其中可有效推进我国优秀传统文化的传播，与世界接轨。中国风界面设计创作应尊重历史，对中国文化进行深入学习，深挖元素内涵，找到传统元素与现代设计的共通点与连接点，有效借鉴、创新设计。设计者应对大众的审美趋势进行把控与指引，遵循界面设计的原则与特点，以用户体验为基础，借助优美的中国传统元素设计出具有显著民族特征的作品，让世界了解中国的优秀文化。

[1]徐鸿印，姜宇.融媒体背景下对中国传统元素在艺术设计中的应用研究[J].文艺争鸣，2021（11）：206-208.

[2]颜菲.探析中国传统文化符号在UI界面中的运用[J].艺术科技，2016（5）：284-285.

[3]黄西蒙.“国潮”趋势下的文化思考[N]. 中国艺术报，2021-11-29（2）.

[4]李蕴，卞乐怡.中国传统文化元素与现代产品设计的融合研究[J].文化产业，2021（33）：139-141.

[5]王雨典.试析基于用户体验的手机界面设计[J].大众文艺，2021（3）：37-38.

[6]张吕霆，黄文山.中国传统元素在移动端界面设计中的运用与探究[J].美术教育研究，2021（9）：106-107.

Application of Chinese traditional elements in interface design

Wu Yingying

Chinese traditional culture has a long history. In recent years, with the prosperity of the country and the self-confidence of the nation, Chinese traditional elements have frequently appeared in various digital media art works. At present, the use of traditional Chinese elements in interface design has problems such as indiscriminate use, abuse, non-compliance with interface design principles, and inability to highlight themes. These problems result in the users’ misunderstanding of the interface and unsmooth operation, which increases the learning cost of the user's use process. How to combine traditional Chinese elements with contemporary design trends to design user interface works that can not only reflect Chinese characteristics, but also conform to contemporary aesthetic trends is of great significance for promoting traditional Chinese culture and showing the confidence of Chinese culture.

Interface design; Chinese traditional elements; Cultural dissemination; National self-confidence

2021-12-27

吴莹莹（1983－ ），女，安徽铜陵人，安徽商贸职业技术学院艺术设计学院讲师，硕士。

10.13685/j.cnki.abc. 000612

G122；TP311.56

A

1671-9255（2022）01-0061-04