古代装饰器物在中国风手游UI设计中的拟物与抽象

蒲诗雨 李栋宁 （江南大学 214122）

古代装饰器物在中国风手游UI设计中的拟物与抽象

蒲诗雨 李栋宁 （江南大学 214122）

中国风手游UI常会从古代装饰器物中取材创作，通过拟物化和抽象化的手法将工艺元素融入UI创作中。本文对比分析了古代装饰器物在拟物化与抽象化设计过程中，造型、色彩、质感和空间四个方面设计手法上的异同，总结归纳了两种手法的优势和弊端。

古代装饰器物；手游UI

中国风手游UI常常会从传统古代装饰器物中取材创作，一些形态优美、设计精巧、极富美感的古代装饰器物，通过拟物化或者抽象化的设计手法重新融入了手游UI这一现代设计创作中，这种新兴的表现方式所呈现出来的传统艺术，则在原来古代装饰器物自身传统美感的基础上，又增添了一层全新的时代美感。一款手游中总是或多或少的同时存在着拟物化和抽象化两种设计表现手法，随着两者占有比例的不同而使整体风格存在拟物化或者抽象化的倾向。拟物化风格倾向明显的手游UI中，为了使整体风格统一，抽象化的部分一定会与拟物化的部分联系紧密，抽象部分的造型以及色彩来源常提取自拟物部分的造型以及色彩特征。而抽象化风格的手游UI中的拟物化元素，也一定会在造型和色彩上有着抽象化的形态特点。本文将分别从造型、色彩、质感、空间四个方面具体分析中国风手游UI中古代装饰器物的拟物化以及抽象化设计应用。

一、造型

手游UI中的古代装饰器物拟物化在造型设计上有两种类型的设计应用，一种是将某种古代装饰器物物品整体运用于UI设计之中，另一种是提炼古代装饰器物物品中的局部细节并运用于UI设计之中。常常作为整体被应用于设计的古代装饰器物物品有卷轴、奏折、木盒等等，这些物品由于自身的特点十分适合作为展示板来承载文字内容，所以通常被设计构思成游戏的弹窗底板，用来展示游戏图文信息。奏折源自清代，是皇帝批阅大臣谏言所呈递的折本，由折叠而成的纸张和真丝包裹的封面及封底组成的。在手游《小倩来了》中被设计构思成展现游戏角色的底板，辅佐以云雾，使游戏角色像中国神话中的画中仙子一样从奏折中款款而出。被应用于UI设计的古代装饰器物物品中的局部细节范围很广，唐刀上的防滑装饰、青铜器上的饕餮纹样、漆盒上的龙纹雕刻等都能在中国风UI设计中寻得踪迹，这种类型的设计应用具有很大的自由性，同一处局部细节可根据不同情况应用于UI设计的各个部分中。《小倩来了》中用到的金属装饰，就是源自唐代宝剑剑柄上的防滑装饰，设计师将其重新设计，并应用于装饰游戏中的按钮以及弹窗的标题栏，虽然不需要再具备防滑功能，却将它的审美价值发挥了出来。

抽象化应用中造型设计的主要表现方式是，对古代装饰器物元素的外轮廓和内部结构进行概括抽象。不同于拟物化设计中对轮廓与结构细节的极致追求，抽象化设计重视的是对美术元素的主观提炼，略去细节，保留意象。在造型设计时，工艺元素的外轮廓会被简化整合，用平滑的直线或者曲线来代替曲折起伏的轮廓线，内部高低错落的结构也会被扁平化，用尽可能少的几何块面表达出大致构造。功能结构复杂和内容信息量巨大的手游在界面设计时会倾向于使用抽象化手法，因为这类手游需要将大面积的文字数据表现在界面上，过多的拟物化设计会侵占数据内容的空间，而抽象化的界面能提供更多承载它们的空间。《梦幻西游》手游就是一个需要呈现大量文字数据的例子，它复杂的功能层级需要它在一张界面上呈现尽可能多的信息，这款游戏的UI设计中抽象化扁平的面板占据大部分面积，这些面板既没有复杂的轮廓外形，也没有错落的内部构造，它们简约如白纸一般的效果为数据信息起到了良好的衬托作用，而游戏中少有的拟物化元素仅被用在了面板标题栏、部分按钮和图标上，起到点缀装饰画面的效果。

二、色彩

UI中古代装饰器物拟物化设计的颜色构成方法是，以客观对象为依据，以反映客观对象真实色彩为目的，按照色彩自然规律来进行色彩设计的写实性表现方法。一种色彩可以通过色相、明度以及纯度三方面来描述，人眼可见的任何一种色彩都是这三种因素的综合作用结果。拟物化设计的色彩在色相上除了要考虑客观对象的自然色相以外，也要考虑在界面上与其他元素色彩搭配使用是否合适，界面中色相种类不宜过多，相互之间比例关系要和谐。拟物元素的明度变化与它所受光源强弱密切相关，受光面、灰面以及背光面所占比例的不同也影响着整体明度感受。比较写实的色彩塑造往往整体纯度都不会太高，因为这类写实的设计元素需要依靠丰富的素描关系变化来营造立体视感，没有被光源直接照射到的部分纯度整体是比较低的。《功夫熊猫3》的章节界面整体来看棕红色是主导色调，中间的黑白漫画部分占据面积较大，但是整体偏灰，对界面色彩倾向影响较小。画面中的拟物化元素有深棕色桌面、暗红色桌旗、米白色书页以及橙色灯笼，桌面、桌旗的整体明度都偏暗，用以突出米白色书页上的内容，画面中明度较高的地方大多都是需要点击的部分，返回按钮、宝箱图标以及翻页按钮都用了较高的明度和纯度来突显这些部分的重要性。

不同于拟物化的写实性色彩构成，古代装饰器物的抽象化设计在色彩上追求的是，对客观物象色彩特征进行主观概括，提炼设计出适用于抽象化造型的色彩。写实色彩具有多层次多变化的强空间体积关系，由于暗面和阴影所占比例较高而使得整体饱和度和明度降低，抽象化色彩层次较少并且结构更加扁平，大部分时候整体饱和度较高，明度变化差异小。抽象化色彩关系的表现方法是省去细节化的色彩变化，将客观物象的色彩分成一些比较明确的色彩块面来概括表达某种色彩关系。这种色彩设计方式主要在配合界面整体抽象风格时使用，所以在设计过程中需要参考界面中主要色彩的色相、明度和饱和度三个方面的关系，将整体与细节相统一。《大话西游》整体界面风格偏向抽象化，色彩则来源于古代装饰器物中的玉制品，以米棕色为主色调，辅佐以翠绿色为点缀，整体色彩明度与饱和度较高，给人清爽干净的印象。整套界面中最主要的信息背板设计成一种用和田玉雕琢而成的玉板的感觉，尽管没有用非常写实的手法塑造玉质，但是玉质的主要色彩视觉特征被主观提炼概括，并且通过抽象化的手法表现出来，最终达到了和谐统一的效果。

三、质感

拟物化设计要求设计元素在质感表现上高度仿真，质感是让绘制物品具有真实感的重要因素，质感模拟越逼真，绘制物体越真实可信。人对图像中界面质感的判断，是通过以往视觉对真实物体表面特征的感觉和印象形成的经验。不同质感具备不同的表面特征，它们通过纹理、光滑度、反光度、透光度四个方面的差异组合产生区别。金属有强反光、玻璃会透光、木头表面有明显纹理等等，这些表面特征差异让我们在视觉上能够对他们进行区分，而通过绘制出他们不同的特征便能够达到模仿出不同质感的目的。古代装饰器物的拟物化设计应用中出现频率较高的材质类型有金属、石头、木头、丝绸之类，这些质感之所以在视觉上形成差异，本质上是因为他们对光源反射能力的不同。光源在物体表面照射形成的高光面的形状以及物体灰面的纹理能表现物体的光滑或者粗糙；光源是否穿透物体能表现物体的透明程度；反光的强烈与否能表现物体表面是否形成镜面。石头材质的表面特征是亮面高光对比较弱，灰面有一定纹理，暗面有弱反光，有时会有裂纹，《乱斗西游》的装备合成界面就用到了大面积石头质感，设计师用了深灰蓝色调作为界面主色调，受光面的亮面用明度较高的浅灰蓝色渐变作受光面，暗面有微弱的蓝色反光，灰面有绘制上细微的颗粒纹理，在界面边沿还有浅浅的裂纹，整体营造出的石板质感非常拟物化。

抽象化质感的表现同样来源于对实物纹理、光滑度、反光度、透光度四个方面特征的观察总结，只是抽象化的表现手法需要设计师对客观实物的质感特征进行主观概括提炼，抓住能够体现质感的最关键的几个特点进行表现，既要让抽象元素的质感看起来是客观实物的质感，又不能像拟物化设计时那样过于写实。拟物化质感表现中，除了镜面材质以外，一个物体受到光源照射后，受光面向灰面过度的部分是渐变的，不具有明确的边界，而背光部分的反光也是用柔和而微妙的渐变来表现，而抽象化设计却可以让受光面具有明确的边界线，设计师只要保证这个设计元素具备正确的光源关系，那么在这个基础之上，就能通过主观概括将不同受光面的形状抽象化表现的同时，依然使它看起来是某种确定的质感，并且这种质感与客观实物的质感又那么不同。《大话西游》战斗界面中的图标统一设计成了与界面整体玉质质感相接近的质感效果，这种质感的特点是，有清晰形状的高光点，光滑度高无明显肌理，透光处饱和度高。真实玉质的高光形状比较不规整，而经过概括处理后，高光可以被描绘成一个规整的圆形，这种处理方式使图形物体看起来更抽象化。主观提高图形透光处的饱和度能强化透光的质感，达到加强质感表达的效果。

四、空间

UI中古代装饰器物拟物化设计的空间感是指，依照透视的原理，描绘出设计元素之间的远近、叠压、穿插等关系，使之在平面上营造出有深度立体感的前后空间层次。宗白华先生曾说：“西洋透视法在平面上幻出逼真的空间构造，如镜中影、水中月，其幻愈真，则其真愈幻。”通过几何透视、光影透视两个方面的塑造，平面上的设计元素可以具有更加逼真的立体视觉效果，整体画面空间像内延伸，增强代入感。几何透视指我们观察立体空间物体时产生的近大远小的错觉，这种错觉使我们观察到的物体的外轮廓所形成的印象带来一种三维空间感，在拟物化UI设计中，我们可以塑造这种带来立体感的形态轮廓，从而使得所绘制元素像真实物体一样具有空间体积感。光影透视指物体受光时显出的明暗变化差异所产生的体积感，远近距离因明暗层次而显露。拟物化设计中光影透视的运用增强了设计元素的立体视觉效果，再配合几何透视的外轮廓，平面上的设计元素则可栩栩如生跃然纸上了。在营造界面整体空间感时，光影透视往往发挥主要作用。在视觉感受上，明度高的物体比明度低的物体要更靠前，这种感受上的错觉可用来区分界面的主次内容，提高主要元素的色彩明度让它感觉更往前，压低次要元素的色彩明度让它往后隐退，利用明暗的差异化，使界面主次分明，层次丰富。《小倩来了》的战斗界面将卡牌对战场景设计在一个木盒中，盒盖半开，四面抽屉全部抽出。木盒摆放与屏幕呈一定角度，轮廓上近大远小，色彩明度上近亮远暗，整体看来盒子像后延伸开去，画面纵深感极强，模拟出了一种在真实木盒上进行对战的场景效果。

古代装饰器物的抽象化设计在空间关系上相较于拟物化来说整体上是更加扁平的。抽象化将元素设计重点放在整体形态上，用更加简练的结构表达图形意义，弱化了的立体空间能够让设计元素处于辅助重点信息的次要位置，突出主体内容。抽象化的空间关系表达大多时候主要依靠光影透视来实现，通过控制投影的虚实、远近和角度，来表现出两个物体之间的远近、前后和穿插关系。不过抽象化设计中的空间范围不止局限在画面上可见的地方，还能用滚动模块的形式来创造隐藏的空间，这样便能让更多的信息同时容纳在一个界面中。《梦幻西游》整体界面被构思成了一幅垂落展开的卷轴形态，设计者主要表现了卷轴特征的轴身形态部分，简化细节构造使整体空间更趋于扁平，抽象化后的卷轴成为信息主体的辅助背景。这套界面在整体扁平的基础上，通过阴影的运用，为各组信息划分出了规整的空间范围，让多样的信息元素在同一界面中也能有序地分出主次关系。它的装备界面中，左侧的武器展示栏被设计成了滚动模块的形式，这组模块的下方用渐变的方式消失于一条边界线。这样的处理方式让武器展示栏与底板产生了镶嵌关系，武器展示栏的隐藏空间消失在了底板的边线上，超过武器栏可见范围的信息通过这种巧妙的方式留在了界面中。

拟物化与抽象化的设计有各自的优势和弊端。拟物化设计的优势体现在三个方面，首先拟物化设计能提高游戏亲和度，增加趣味性，使设计富有感情；其次，拟物化设计能使用户快速领会如何使用，降低学习成本；最后，拟物化设计能贴合游戏主题，提高沉浸感，增强产品响应。而拟物化的弊端在于，它过强的存在感会导致画面视觉重心由信息内容向辅助装饰偏移，同时风格化较明显的设计，市场的可接受程度有限。抽象化设计的优势正好能弥补拟物化的弊端，一方面简约扁平的图形化设计使画面的重心能集中在内容上，另一方面抽象化设计带来的轻快感受更能被大部分人群接受。正确把握和运用好这两种设计方法有助于提升手游UI的设计水平。

[1]皇甫江.中国刀剑[M].明天出版社，2007.

[2]田自秉.中国纹样史[M].高等教育出版社，2003.

[3]宗白华.美学散步[M].上海人民出版社，1981.

蒲诗雨，在读研究生，研究方向：影视，设计。

李栋宁，教授，研究方向：美学，影视。