传统文化元素在APP设计中的应用

陈欢　周璧承

摘  要：数字化的生存方式已经成为当代社会人类生活的基本特点，传统文化也必将跻身于数字化的发展进程。在移动互联网背景下，在理解大众对传统文化的理解程度和对界面不同认知的基础上，不能直接将传统元素照搬到App设计中，而要重视内在的传统文化特色与精神内涵，将传统文化各个层次的艺术价值表达出来，以提升用户体验和大众对传统文化的包容度及理解度。

关键词：传统文化;元素;APP设计;用户体验

基金项目：本文系江苏省高校哲学社会科学研究一般项目“中华传统文化影响下的游戏创新设计与内蕴提升研究”（2021SJA2312）研究成果。

在“互联网+”的大趋势下，传统文化与移动端结合的趋势已势不可挡。但目前背景下的传统文化产业还处于较初级的探索阶段。许多传统文化类APP依旧是简单的图文科普，忽略了产品本身可能带来的不够友好的用户体验，反而削弱用户对传统文化的兴趣。身处互联网高速发展的时代，人们很容易接受新鲜事物，但对于传统文化缺少了解。并非是传统文化失去魅力，而是因为没有“搭上”互联网这趟“高速列车”，没有运用合适的方式去展现其独有的光彩。因此，为帮助传统文化重获新生，使其与互联网相结合成为必然。

随着近几年互联网的高速发展和智能终端的普及，信息的获取方式也在发生改变，传统文化也必然处于这股数字化潮流之中。原研哉提道：“随着现代信息技术的高速发展，信息的种类也变得多种多样，在这种情况下，书籍也许早已不是传播媒介的主角。不管是流通速度、密度，还是量的大小，书籍和电子媒介都不能相提并论，但是电子媒介无法完全取代书籍。在这种时刻，我们有必要再次确认‘书籍是什么，如果什么都不做、都不想，只是坚持用以往的方法来设计书，那么不管怎样都会错过对时代的准确认识。”

传统文化具有很高的知识价值和社会价值。在信息高度发达的社会，传统文化本应迎来难得的历史机遇。然而，传统文化类App目前未被大众所重视，其晦涩难懂的刻板印象已深入人心，除少数特殊人群外，大众对传统文化并未有非常浓厚的兴趣。加之近年来各种外国文艺作品的冲击，吸引了人们的关注，传统文化类App的发展更是难上加难。

一款2017年上线的App《榫卯》被苹果公司CEO库克评价为“为中国的应用市场提供了一些独特性”。它的成功让我们看到了传统文化与新媒介结合的强大优势，更让我们相信，只要设计得当，并结合现代科技手段，传统文化将会在这个信息时代重获生机，这无论对于提高我国文化软实力还是丰富大众的精神需求，都具有非凡意义。因此，针对这一现状，笔者以纸鸢主题的中国传统文化类App《鸢源》为例，探讨传统文化APP的设计思路、文化意义及社会价值。

一、视觉设计框架的搭建

《鸢源》就像一个装在口袋里的风筝科普数字互动展览馆。通过数字交互手段的注入，唤醒年轻人对传统风筝文化的兴趣，让更多人特别是年轻人了解并喜爱我们的民族传统文化是《鸢源》App的设计初衷。视觉设计框架是指设计提炼并选择视觉风格，意义在于有理有据地推导视觉设计风格，使设计更具有现实意义和说服力。

视觉框架的设计务必力求精准，具体确定为：前期分析、产品架构、设计准则和创新亮点四大部分。通过前期分析所得到的设计目的来进行用户路径的梳理和设计准则的制定，最后运用到相应的视觉设计与交互设计中。经过调研，大部分的传统文化类APP普遍存在功能单一、视觉界面简陋、交互动效简单等问题，而面临着人们普遍对传统文化不感兴趣的文化危机。《鸢源》希望能在传统文化逐渐被淡忘的背景下，重唤大家对传统风筝文化的兴趣以及对传统民族艺术探索的欲望。

前期分析包括设计的必要性和基本需求的思考。近年来传统文化类APP层出不穷，但大部分都存在着功能单一、界面单薄、交互缺失等问题，《鸢源》的主题就是希望全方位多角度地传播文化之美，并通过视觉和交互动效的设计由内而外地协调统一，使得视觉设计元素和《鸢源》APP的功能目的及情感需求高度匹配，以达到传播传統文化的根本目的。

产品架构主要是内容板块的分类，在《鸢源》APP中主要分为首页、史话、故事三大板块，从不同的切入点来向用户展示内容。设计准则包括对内容、排版布局、色彩以及动效的设计。《鸢源》APP中的设计意图是在更好传达内容、带给用户舒适用户体验的基础上，使传统文化与现代元素相融合、碰撞成更易为用户所接受的视觉设计和交互设计。由于《鸢源》APP面向的使用人群大部分为年轻人，在产品视觉上必然要提高用户的愉悦感以及适当的惊喜感，并且注重细节的表达。在颜色上《鸢源》选择宣纸黄作为主色;在形态上运用了风筝形状和传统汉字的变形结合，诉说着传统与现代的融合，传达新时代的传播方式。

创新亮点主要包括传统元素与现代设计风格的融合以及新的交互方式。之前的大部分的传统文化竞品APP中，传统纹样以及富有民族特色的图标大多比较精致且充满细节，应用在界面中反而识别度不高。因此在《鸢源》APP中，笔者便尝试将元素重新提取与文字进行融合，看似简单，却是最适合当下界面的场景设计。同时考虑到大屏移动设备的普及，在交互方式上将主要功能区域下移，包括常年处于屏幕顶部的“返回”按钮，更加符合发展趋势的同时，也降低了用户的操作成本。用户与内容之间的距离，通过新的交互方式进一步拉近，在满足操作的易用性基础上，增加了小部分惊喜，使得《鸢源》向“好产品”又迈进了一步。

二、《鸢源》APP的图标设计

一款产品成功的基础，是深入理解用户，再围绕用户的需求进行设计。而不同的用户对于传统文化的需求也不同，且处于不断变化中，因此在前期设计中对内容和功能的确定是十分必要的。对于年轻用户来说，传统APP的设计需要更新颖、充满趣味性且体验感十足。所以，从内容到功能都需要匹配用户需求。

图标是具有指代意义的具有标识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。

在icon图标设计上，主要从平台命名、面向的用户群体偏好以及产品的类型定义三个方面来确定图标的颜色、形态等。产品命名“鸢源”的由来：“鸢”即风筝，“源”即渊源，产品向用户讲述风筝的“前世今生”，使用户感受风筝的文化魅力，从而激发用户对传统民族文化的兴趣。而对于色彩的选择，在制作过程中，选择了宣纸色作为用色参考，宣纸也隐喻了中国传统文化“记录者”的属性，文字背后是中国传统图案纹样，山川、河流、祥云与太阳，隐隐约约、若隐若现，既给图标增加了景深，展现立体感，又将传统元素与现代字体巧妙融合。在字体上进行了图形化重设计，将传统字体进行图形化变形。文字内部的变形设计也将传统风筝融合其中，具体的创意构思。

用户体验在整个产品的设计过程中十分重要，设计师在每个环节都要考虑到用户的主观感受和可能使用的交互手段，图标在其中也有着举足轻重的作用。用户体验可以被分解成五个要素：表现层、框架层、结构层、范围层、战略层。

一套用户体验好的图标也是按照用户体验五大要素进行设计的。对于《鸢源》来说，在战略层就已经定义好了，整个App是传承中国传统风筝文化，由此确定设计风格是偏传统的中国风。其次在框架层，此次设计的图标属于导航图标，因此在设计之前就必须先考虑好图标的使用场景，再根据场景和功能定义图标的样式、尺寸等。

《鸢源》的主功能按钮图标处于首页，承载的主要业务功能是进行内容板块的流量分发，是十分重要的功能入口，在整个首页中处于最高的优先级，所以需要清晰直观地传达功能信息，其他因素都要为此“让位”。图标所处界面的复杂程度较低，在图形的表达方式上，我们一开始决定使用稍复杂的图形设计。考虑到产品定位相对稳定，如果能将品牌和体验设计相融合，打造出符合品牌调性和产品特征的图形样式，不仅能在品牌上深入人心，也能获得良好的体验，由此产出第一版设计。

信息时代，设计的目的是使信息有序、准确地传达和被有效地利用，设计活动集中在对信息的分析与处理上。而这样的图标在隐喻上过于晦涩，在视觉上过于复杂，如果人们不看下方的文字说明，在使用此类图标时就需要花费数秒甚至更长时间去猜测图标含义，甚至根本不知道这套图标的具体意思，体验并不好。在图标无法表达复杂含义的情况下，我们最终决定使用更加简洁的文字型图标样式，并加以简单的设计修饰，这样既能增加图标信息的可用性，又能提高用户工作的效率，同时还能表达出产品的中国风。经过关键词提取与绘制，最后的图标样式虽然不是最好看的，却是最适合首页这个场景的。

三、《鸢源》的具体亮点设计

（一）内容展示的亮点设计

卡片化设计不仅可以聚焦用户的视线，同时往往带有足够的空间留白和层次，充分体现质感和舒适感。

在首页采用了卡片化设计，通过大卡片以及传统配色的将四大类型的传统风筝展示出来，背景的动态元素配上静态的卡片，动静结合的样式也表达了风筝虽历史悠久，但始终充满无穷的活力。在风筝类型的工艺页面的设计上，通过画卷般的展现方式，将风筝的制作方法展示出来，画卷徐徐展开，经过手绘之后风筝的细节更加精美且清晰，加上排版设计的配合相得益彰，整个页面在保证专业度的前提下为用户提供了舒适的阅读体验。以用户为本，想用户所想。在特定的使用场景中，找到用户想要完成的操作目标，然后运用最恰当的交互方式帮助用户便捷实现。

（二）交互动效的亮点设计

移动交互动效指用户在与移动设备交互过程中，用户界面呈现出来的动态效果。移动应用中的交互动效能够传达状态，提供反馈，将用户的操作可视化，增强直接操纵的感觉。交互动效可以在很多层面发挥作用，一方面可以通过视觉设计和动作设计让APP的表现能力更强;另一方面可以增加动能提供丰富的视觉效果，更生动、清晰、高效地傳递信息，使APP充满节奏感和掌控感，带给用户愉悦有趣的感受，增加用户进行操控的积极性。动效是最能被用户所感知和注意到的视觉元素，会吸引用户相当一部分的注意力，那么如何创新交互动效，将这些注意力与我们所要传播的内容相融合呢？

首先在设计的时候我们将内容与操作手势进行了绑定，每次滑动时，APP内的文字及其他视觉元素会始终跟着手势的操作进行镜头切换般得运动，新颖且有趣。由于文字板块也是交互动效的一部分，所以用户在进行操作时必然会注意到这个板块的运动，再配合整理精炼的文本内容，用户阅读的欲望便会增加。而在一开始进入史话的在纹样页面的，内容元素会有节奏地向右运动，告诉用户向右滑即可继续阅读，这样的动效既具引导性，又使产品充满个性。

四、结语

总之，传统民族文化拥有独特的魅力。辅之以现代互联网手段，针对用户体验提出相应解决方案，对产品不断进行迭代优化，是设计此类主题APP的关键。

参考文献：

[1]库伯，等.About Face4：交互设计精髓纪念版[M].倪卫国，刘松涛，等译.北京：电子工出版社，2020.

[2]加瑞特.用户体验的要素：以用户为中心的Web的设计[M].范晓燕，译.北京：机械工业出版社，2008.

[3]谭坤，王凯翔.软件界面中的图标设计[J].饰，2007（4）：35-37.

[4]原研哉.设计中的设计[M].朱锷，译.济南：山东人民出版社，2006：102.

作者简介：

陈欢，博士在读，南京传媒学院副教授。研究方向：数字娱乐与交互设计，互联网思维与项目管理。

周璧承，广东OPPO移动通信有限公司交互设计主管。研究方向：互联网交互设计。