《花亦山心之月》是一款由朝夕光年亦心工作室研发的国风书院养成手游。
据不完全统计，该游戏上线之前进行过多轮各种形式的测试活动：
2021年1月28日-2月4日，该项目当时还叫《代号：花》，开启了“寄梅之诺”安卓限量不付费删档测试；
2021年4月14日-28日，“归棠之旅”安卓限量不付费删档测试；
2021年6月30日-7月8日，“观荷之期”安卓限量付费删档测试；
2021年7月23日-7月30日，iOS限量删档不计费测试；
2021年8月18日-29日，“踏薇之行”安卓限量终极付费删档测试。
最终于2021年11月26日全平台公测。
游戏官方称呼其画面风格为“颜彩描金画风”，整体呈现出“古雅华贵”的氛围。
类似的“描金”设计风格并非该游戏首创，此前的一些游戏中也曾有过类似风格，如腾讯极光计划发行的《妖神记》（下前两图），和完美世界的《梦间集》（下三图）等。
不过，受限于时间以及风格成熟的客观时代要求，这些早期的游戏界面中，对此一设计元素的应用并没有达到非常成熟的阶段。一直到《花亦山》，我们可以说，这种“描金”不仅在静态设计上，更从动态设计上达到了一种新的高度。
作为一款国风游戏，其界面设计风格自然属于“国风”类的一种。如果从上世纪80-90年代，以“剑侠”、“仙剑”以及“金庸群侠”类为代表的“远古”时期游戏算起，国内国风类风格游戏发展可算拥有极其漫长的历史。界面设计风格也迭代到非常成熟的阶段，当下的国风游戏界面设计显然是进入了一个风格多样化的时期。
本游戏的国风也自然有我们所处时代的特征，如典雅、简约和精致。它的界面设计的最主要特点中，除了游戏本身所宣称的“颜彩描金画风”所一脉相承的“金色描边”特点外，最主要的还是一些图形语言的贯彻使用。
正是这些图形语言的使用，使它在当下众多国风游戏中别具一格。
这些图形语言中，最核心的几个可以概括为“圆形”、“金粉”和“花型”。界面的动效语言正是基于这些图形，才得以充当游戏界面视觉语言表达的主轴。这一主轴撑起一整个界面设计系统，使这款游戏的界面在充满各种细节设计的同时，并不显得凌乱，最终在整体上展现了高水准的设计。
1.圆形 首先来看由圆形构成的动效表达。
该游戏的“圆形”首先就表现在游戏画面中，其中最明显的就是主界面中游戏人物所在场景中的圆形构件，如窗户、摆件、家具等。
一些通用性质的提示、标识类控件就是用圆形加上其他修饰图形构成，如进入城市后的名称控件上：
以及出现新的NPC时展示人物信息的界面中，人物背景就衬以圆形为主体的放射状图形：
在外围系统中，这种圆形配合放射状图形构成的控件也非常常见，如主线剧情中，进入新的章节和完成一个章节后的界面过场：
从这种过场的构图来看，它可能不仅是结合圆形本身这么简单。如果仔细观察，它们还通过一明一暗的两个背景图，以S型中线切割的形式，表达了一种接近“阴阳协调”的概念。
这一表现或许是游戏世界观中蕴含的某种概念。它契合了中国传统文化中“八卦”或“阴阳和谐”的概念。而“圆”在这个游戏里或许并不是表面上看起来这么简单，它或许就是试图表达中国传统文化中所代表的深厚含义。
在游戏中进入“乾门历练”系统时的界面转场，可以认为就是在表达阴阳之间的某种关系：
这种类似概念的表达，也可以在别的界面中看到。
如在“伊王古迹”中进入“摇光阁”挑战系统时的转场效果，就有一些更加深入的表现：
同样也都是圆形为基本构型，但加入了一些类似“日月星象”的图形，这些图形旋转，开启大门，然后穿梭在不同的阁楼之间。而阁楼背景的中心图形也是圆形。不仅在图形上更加契合“穿梭”的观感，更为玩家塑造一种深邃的视觉体验。
下图所示的“荧光一阶”新赛季界面背景，则是以嵌套多层的圆形云纹作为基本构型：
除了对圆形用直接动态缩放式的设计外，还有螺旋式的，与类似八卦中S型线条结合的动态表达手段：
由此可见，该游戏对国风的理解不仅停留在视觉表层。他们还利用图形，更结合具体的动态形式进行了更为深入的表达。
就界面的设计逻辑来说，如果圆形是图形设计的基底，那么界面中重要的交互节点上都应有所表现。
事实上的确如此，这些重要交互节点上的界面控件几乎都由圆形构成，如“新功能开启”提示：
以及“景域寻宝”中有“寻找”含义的指针动画控件：
视觉层面上更强一级的“获得物品”弹窗也是由环形图形构成：
这类弹窗属于手游中的“通用获得”类框体，典型特点是频繁出现，激励性质极强。从上图也可看出，该界面的动效被设计成“三段式”动画，拥有非常强的视觉效果，它的主体就是由前奏中的旋转圆环图形和拖尾中的扩散式环状金边构成。
有些情况下，这个通用获得效果还会对前奏稍加修改，演变出新的含义，如下图所示：
比获得类界面更强一个层级的界面就是“升级界面”了，如下图所示：
组成这个界面的圆形图形更多也更复杂。它的动效也是一种“三段式”动画。
相对“恭喜获得”类界面而言，它增加了更多解构式动画，整体上的形式感更加复杂。不管是前奏中如串珠般出场的标题文字，或是新的级别基于旧级别炸出的力道，还是整体动画完成后优雅上抬动作，都相当令人惊艳。
对圆形的演绎，在“战斗界面”内达到了一个高点。
该游戏的局内界面非常有特点，简单的说就是“环环相扣”。以三维形式的黄色金属大环嵌套两个主要的同质感小环，而小环上又嵌套了两层小环，玩家的卡牌就嵌套在两层小环上。
战斗开始时，先是纵深穿梭，上述金属环迅速从“眼前”穿过。经过一阵旋转腾挪，之后嵌有“战斗开始”字样的最外层环在镜头前一晃而过。整个开场极具冲击力：
此后各环落定，敌我分居左右两侧。嵌套在各个小环上的头像（卡牌）轮流施招开打：
可以明显的看出，这本质上依然是回合制卡牌的玩法，但是这种新颖的战斗内布局设计方式让它看起来大为不同。
最后，在抽卡的过场效果里，圆形的演绎登峰造极：
2.金粉
接着是界面中的金粉元素。
“描金”（传统国风“金描”）是该游戏界面和画面风格的核心元素。这一元素在动效表现中自然也是重点。其主要目的是呈现出一种“华贵”、“璀璨”的效果。这些元素延伸到动效里，我们此处就统称为“金粉”效果，它们主要有以下几个代表型：
金粉状的特效元素
、闪现的光效和金色流光。
金粉状的特效元素
主要用在一些动态效果修饰上，如上文中出现的获得物品弹窗的顶部，以及如下图所示的同规格弹窗的相同位置上：
这些效果制造了一种主材质因为运动而扬起的粉状物，对衬托主体物运动的张力有很好的的效果，因此也常用在一些弹窗的入场效果上，来完善弹窗从左至右展开的动作力度：
闪现光效
具备很灵动的效果，在这样的界面风格里与其他“金粉”元素共同构成“璀璨”的视觉观感，如下图所示的“名士”详情中“升阶”页签入场时，镶嵌元素槽的入场效果，就是其中一种闪现光效：
上图界面中也可看到流光与金粉效果的配合使用。
下图所示的“名士”界面内“突破成功”的效果中也有多层次多样式的闪现光效：
另一种闪现光效则是十字形状特效闪光，这种效果具备非常强的视线聚焦作用，在一些视觉焦点强调上使用效果非常好，如下图所示的“名士”升阶成功提示特效，除了环形、光芒状闪光效果外，最后的十字形闪光几乎盖满全屏：
这种元素具有很强的戏剧化效果，在我们以往文章中提到的游戏《黑帝斯》也常用此类光效，两者有异曲同工之妙。
流光
的效果则常用在纹理的修饰上，在前文列举的一些界面内以及一些视觉强度高的图形控件上都可见到。
下几图可看到这几种效果的混合使用：
3.花型
最后看下动效中花型的使用方式。
以花为名，自然少不了花型图形在界面中的表现。出现在游戏界面中的花型主要有桃花、樱花和莲花（或者是荷花？后文统称莲花）。这几种花也恰好非常适用于国风元素。
这些元素应用形式多种多样，最常见的是手指点击效果中的特效莲花：
还有通用加载循环动画中的樱花、莲花互相切变的图形动画：
在战斗内，莲花图形以多种形式融入在细节中。
人物的空槽是莲花纹理，被击败的人物则变成带有镂空莲花图形的金属圆壳：
人物出招时有莲花绽放式的动画：
背景图形上亦有以莲花为基础图形构造成的，复杂的旋涡效果：
以及战斗结算时作为“胜利”字样动态衬底的莲花图形：
另外一些花型则融入在细节中，如下图所示这样，呈现为粒子的形式：
还有很多花型存在于界面中，它们与其他的几个元素混合使用，甚至和该游戏界面中常见的动物，如鹿、燕子等等结合出漂亮的效果，本文不再赘述。
上文所述的几种元素是这款国风游戏界面的主体图形框架。除此之外，界面和画面中还有很多结合了动特效的，有特点的细节。主轴元素与这些细节一起，才最终构成这款游戏完整的游戏界面系统。
这些细节大致可概括成以下几种：
立体书、三维转场、场景细节、猫、统一形态以及动态立绘。
1.立体书
立体书在该游戏中的多个系统中均有出现，想必是和“书院”概念相结合的元素，同时也体现出相应小玩法的乐趣。这些立体书均用二头身人物（萌物）讲述了完整的情节，这些情节所交代的信息就是所在界面的功能。
如下视频中的几个“千里景城”中的“寻宝”过场里出现的立体书，就表现的是玩家在立体书塑造的小场景里寻找宝箱的过程：
类似的，像玩家获得学位的过程，也是通过一个立体书小场景中的一段小剧情进行演绎：
以及制香的过程：
还有卖茶的过程：
甚至是跨城“穿越”时，也会跳出一个带有小人物动画的立体书tip来：
凡此种种，这些立体书的效果，将原本重复乏味的生产材料、级别提升甚至是加载的过程变得可爱、生动且富有细节。
除了立体书的形式，这种二头身的小人也以别的形式动态演绎一些界面信息，如下图中的“扫荡”界面里，它就在直观展现快速扫荡的情节：
实际上，这种二头身的小人不仅存在于类似的动态演绎中。界面中一些静态的标识，如表示空状态的提示里也有它的身影：
这些地方还都为小人配有台词，诸如“选择一名好友聊天吧”、“选择一封信件吧”之类，以“吧”字结尾的话语，加上慵懒呆滞的表情，透出浓浓的二次元味道。
2.三维转场 该游戏的很多转场都利用视差或者真正的三维手段去实现一种更具冲击力的转场效果，而且这些效果与国风动作元素结合得很好。
如下图所示的“学位”界面中“晋升”与“学位”之间的来回转接，就通过几个面片的错层运动来形成一种上下摇镜的效果：
更常见的则是用两层缩放速度差来制造拉镜头的转场效果，如下图所示的“商店”界面入场：
有一些界面则继承这种缩放，但只保留了单层缩放的效果：
另外一些界面的三维转场是通过真实的三维技术去实现的，如下几图所示的“千里景城”、以及它与其他界面互切时的转场。因为利用了三维球面移动效果，其切换过程显得极有特点：
“千里景城”的画风应该是直接借鉴了现实历史中北宋王希孟的“千里江山图”：
王希孟千里江山图卷-图源自故宫博物院官网
3. 场景细节 《花亦山》的人物立绘和场景数量很大，但并没有因为美术量极大而忽视了细节。
在一些场景中可以发现有趣的细节。
如“社团”主界面的动态场景中，中央部分有一群人在玩跳绳：
左边一点的院子里，有人在练习射箭：
右下角的水边，则有一个练琴的场所：
左下的木拱桥上，有人在跟小鸟玩，一旁则有人在喝茶，有人在谈事：
这些细节试图塑造一个活的世界，仿佛“社团”这个功能是这个世界里真实存在的，而玩家游玩的不仅是一个“公会系统”。
另外，在游戏的主界面场景内，其实就有一些“可有可无”但“活灵活现”的细节，比如可以让人物去打扫“藏珍架”：
打扫“衣架”：
在梳妆台前自顾欣赏：
逗小鸟玩：
摆弄花艺：
甚至是，逗猫：
说到猫，游戏里实在是有很多猫。
4.猫 猫参与了《花亦山》界面中非常多的动态细节演绎，与前述二头身小人起着相似作用，即对当前所在界面的功能进行非刻意完善。它们像原本就应该呆在那里一样，以或慵懒或机灵的样子衬托着这个虚拟世界，自然而恬静。
商城界面中的两个猫，白猫似乎在搭讪，而橘猫不愿搭理。从头饰来看，两者地位显然不同：
“飞花令”准备弹窗左下角的两只猫在打牌，与“飞花令”的打牌玩法相呼应。橘猫甩出一张牌，甚至吓了奶牛猫一跳：
“在线奖励”界面打开时，会有一只肥猫从左侧走入，接着躺在地板中间。玩家是否想起每次进到家门时，跑过来躺在你面前耍赖的那只毛孩子：
“茶点”界面的桌案右上角，则呆着一直持续呼噜的肥橘。还可以通过点击进行一些互动。“茶”与“肥猫”可谓十分搭调：
5. 统一形态 前文所述的三维转场也属于统一形态的一种。对风格化明显且系统庞大的游戏来说，保持视觉统一性是一项基本工作，也是非常艰巨的工作，在动效维度依然如此。
《花亦山》的界面设计体系成熟统一，其中的动效统一形态保持着高水准，本文仅列举其中一种，即弹窗入场形式的统一形态。
下图所示的“公告弹窗”可认为是该游戏弹窗样式的一个基准，其动态样式中，从左至右展开，下层随动的样式也同样可看作是一个动态规范基准：
在此基础上，有较为轻量化的样式，如“商城”中的“购买弹窗”这样，只保持了从左至右展开，保留相应辅助特效样式的动态样式：
亦有稍微复杂化的样式，下图所示的“天景邸抄”弹窗的展开可看作该情况下的一个经典样式：
同样在这个弹窗里的一级tab互切时，各自的切换效果也依然遵守这一动态原则：
如果结构上与基准样式差异较大，但依然属于通用型设计的，则只依照图形设计本身的逻辑进行动态设计，如“邮件”弹窗：
而特异性弹窗则保持与基准样式统一的设计模式，即遵照图形本身的逻辑结构进行横向展开。下图所示的“花诏录-话题”弹窗即是一例：
更加特异化的弹窗，依然遵照这种设计规则，从而不会显得突兀。如下图所示的“社团活动-玉棠宴”弹窗：
6.动态立绘 正如我们刚刚提到的，该游戏的美术体量极大。即便如此，所有的人物立绘都被设计了动态样式。无形之中也很好的搭配了丰富细腻的场景设计。
仅就界面设计而言，《花亦山》是一个体量庞大，细节惊艳的游戏。
除了上文所述的关键元素设计和海量细节渗透，还有很多东西值得讨论和分析。篇幅所限，本文也未能覆盖所有游戏界面相关的内容。
不过在此之外，我们应该从中留意到国风游戏的动态设计特点：
首先，就像本游戏一样，注意提炼自己的图形元素，并在此基础上进行层次丰富的演绎；
其次，现代化元素也可被拿来进行混搭，可由此设计出具备自身特点的风格；
最后，国风通常倡导留白、雅致。这至少意味着动画应延长拖尾，少用短时激越的动作。
以上。
复制下方链接访问《花亦山心之月》游戏界面动效参考：
https://www.magesbox.com/reference/herolist/game_id/1015.html
欢迎点击下方名片关注本号
往期推荐：
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
