连肝这款游戏一个月后，我发现了它的这些设计特点，浅谈《GranSaga》的界面设计细节

《GranSaga》是一款由NPIXEL开发的Anime、Gacha、MMO游戏，混杂了二次元、韩式MMO以及抽卡扭蛋机制。其开发者NPIXEL是由曾经打造《七骑士》的班底组成。该游戏于

202

1年1月26日在韩国上线，

20

21年11月18日在日本上线，并同时包括安卓、苹果和PC版本。韩版与日版都有专门的语言和独有的配音。

据说本作是曾经试图挑战某神江湖地位的游戏，因此设计了类似的游戏系统，并在每个游戏系统设计上都试图更进一步。但最终仍无法突破韩式MMO的窠臼，在短期的市场成功后，并未成为现象级的游戏。

但是它的美术设计以及整个体验系统依然有亮眼的设计。尤其是独树一格的人物渲染风格。

同时，其整体游戏画面渲染风格保持了韩式游戏的特征，如夸张的特效和过爆的画面亮度，有些场景中的色彩甚至焦掉。另外，看似开放世界的场景与玩法设计，实际上是类似线性的设计，并没有足够的自由度。

围绕核心玩法所建立的外围系统设计极为复杂，玩家每日需要完成极为繁重的各类型任务（

如下图

）。游戏设计者为核心玩法设计了自动模式，也许在试图避免玩家繁重的战斗操作，进而更集中精力于重复的系统任务中。

除此之外，围绕每个人物的各项装备与技能，都设置了极深的培养空间，需要反复升级、升星和突破。这些设计都让游戏的游玩体验到后期逐渐干涩无趣。

从一些细节上观察，本作的界面设计有很强的的某神影子。比如一些边角花纹设计、字体的选择和同为古典西欧世界观的延伸等。但凭借强力的设计水准还是形成了自己独有的一套风格。

第一眼印象，本作界面并不像如今所流行的极简和扁平化风格，但仔细观察后会发现，它却又不是传统上立体构型的写实化风格，而是更接近于浮雕造型。

总体上，它可以被划归为西式奇幻类型的设计，界面上多用繁复的花纹和西式雕塑纹样元素做修饰，淡雅的黄金材质是这些修饰元素的主要材质。面板则使用的是偏蓝的淡色。这从色彩上讲是一种非常好的配色方案。

游戏的界面系统非常庞大，仅仅从界面的种类和数量上来讲，这都是一款体量庞大的游戏。与同类型对比，本作在整体的美术量级上甚至更胜一筹。即便如此，界面的品质与风格也保持了高度一致，这体现出开发者高超的管理水平和工业化水准。

另外，本作采用UE4开发，这秉持了韩国厂商在引擎选择方面的“革命传统”。游戏内的很多效果都体现出开发者高度熟练的引擎掌握程度。毕竟从虚幻早期版本时代就将其充分利用在游戏工业中的先发者，其技术优势还是相当明显的。

毫不夸张的讲，仅仅从本作的动效特点上就可以一眼识别出这是一款韩国游戏，它的特效比重比一般游戏高的多，也有典型的“光污染”特性。

在界面系统上比较通用的一类控件，就比一般的处理手段要多一层光效处理，如通用的提示和弹窗类控件：

当只有比较小的视觉重度差异时，仅先从界面设计样式上做出差异，如下图所示的特别获取弹窗：

而在下图的章节特别任务完成的提示流程中出现的小tip中，仅仅只是蜡封的样式，也会加上流光和粒子效果：

一些更特别的情境，如下图所示的坐骑购买完成提示里，就是由视觉的异化和与之匹配的专有特效光组成，这种设计本身就代表这个行为是对消费行为的奖励：

在通用的页签切换样式上，可以看到光效已经几乎完全替代了界面动效本身的动作，用来表现切换状态，某种程度上过于夸张：

常见的需要特别强化的提示，如下图所示的玩家等级提升提示，在本身视觉设计比较强的基础上，增加了光效与结构设计：

下图的BP等级提升提示也类似，与上图属于同种规格下的不同样式：

涉及到局内或者其他付费项目时，界面上的特效设计逐渐开始更加夸张。

如下图所示的公会战匹配画面，静态图形设计本身非常复杂。除了对决双方玩家的组队信息外，还有额外的繁杂图形修饰。动态层面上就简单很多，只是两侧控件组的缓慢靠近。焦点则集中在画面中央的“VS”样式上，而焦点中的焦点则集中在VS上的光效。整个匹配的张力实际上全靠这几层光效来进行烘托：

接着上述流程，如下图，匹配完成进入局内之前的另一个画面中，3D人物的加入以及更多，占比面积更大的特效，将战前的氛围推进到更高的程度。这时界面本体的动态元素也进一步增加：

此后就是一段即时渲染的过场动画，玩家可以通过几个戏剧化的镜头，展示自己的队伍迈向竞技场的画面。这是一段纯3D动画的过场：

最后的结算也是一场战斗的最终高潮。如下图所示，结算流程中设计了较长的人物演出效果，这个人物是当场战斗的“MVP”，也是展示玩家自己对该角色经营结果的最佳场所之一。玩家会为角色投入大量资源，比如比较明显的服装和武器等。这些视觉效果不仅是玩家直接经营的结果，更是一种个性化的“炫耀”，能显著增强本局战斗的成就感。显而易见的是，结算中的界面部分被这些3D资产“压了一头”而显得不是那么耀眼，这与以界面元素为主角来烘托结算类界面成就感的设计有比较大的差异：

在别的战斗形式的结尾，也会有类似的结算效果，根据其在游戏系统内的重度而有细节上的不同，比如一般的任务流程中的战斗，就是由简单的镜头动画和角色的pose组合的：

在一些刷材料类型的战斗结束后，则增加了强调材料获取的特效：

自然而然的，当战斗的结果是失败时，所有的效果都会相应减弱很多：

仅从“公会战”的整个流程来看，其视觉效果是层层递进的，从“光效+微弱动效”到“微弱3D动画+更强光效+更多动效”，再到“纯粹3D动画”层层递进，一步步的把玩家引入到战斗情绪当中。这是一个节奏逐渐增强的过程，也可以看作是本作界面设计体系的一个缩影。

之所以这么说，是因为我们可以在本作界面系统内看到明确的证据。

在界面中普遍存在的切换和状态转换中，都大量利用了特效辅助。如下图所示的角色任务界面中，任务关卡的图标入场效果：

以及下图所示的，视觉层级上很低的“骑士团技能”界面入场，都会为已经解锁的技能加上过光效果，更不要提背景上的粒子效果：

对比上文提到的通用页签切换效果，本作增强视觉强度的方法，往往是通过视觉与动效结构化设计的方式实行的。如下图所示的“骑士训练场”中，不同等级的切换效果：

而一些升级、突破和升星等效果，更是将特效的张力效果做到了很夸张的程度：

消费类的提示效果，就会用几乎全3D动画的效果：

这些现象显然就是一种系统化的，有规律的将视觉强度按阶梯式设计的方法。

游戏的体验系统设计显然是从更高的维度出发去考虑的，而不仅仅局限在界面本身。这可以从刚才就一直在讨论的特点，即比重极高的特效使用，以及界面中与大量3D动画组合使用的效果看出。这些组合式的设计方式虽不新鲜，但特点在于大量使用，这种方式让体验系统不局限在二维层面上，而是使用更多的三维物料，从而使一些演出效果更佳。

三维物料的使用，尤其与体验系统的结合使用，最重要的是“融合”后的一体化感知。这一点在本作中也是呈阶梯式分布的，最简单的就是3D人物演出配合相应的界面功能。

如一些功能性界面中，就是以3D人物为核心构造的：

上几图所示的“交换所”内几个界面，人物处于画面的视觉焦点，而玩家在界面内的每个操作，其视觉反馈最终都会落到人物上，不管是人物的演出还是一些简单的点击反馈。这其实都显然是为了将原本简单的点击操作“情感化”，显得你不是在操作界面的框体，而是与虚拟人物进行交易或者交流。

本作类似的情感化设计还有很多，比如下图所示的每日签到奖励，是每天进入游戏看到的第一个画面，这个画面可以看作是由该NPC的演出所主导的：

任务系统中的艾丽莎，每次都会为你敬礼：

艾丽莎显然是游戏世界中负责任务分发的角色，在“王国任务”也可以看到她，并且可以通过点击人物来与她进行简单的互动：

在服装系统里，画面一侧也有一个专门与打扮相关的NPC“值班”：

在每日签到里送奖励的红发NPC也负责“灵魂能力”系统，而她其实是主线流程中一直陪伴主角的小精灵（形式上类似应急食品派蒙，但两者的比重显然不同）：

在邮件系统里有个比较可爱的金发NPC，每次界面入场都会有欢迎表演：

领取奖励后，她还会表现的很开心：

本作中还有个与主要角色进行感情培养的系统，在该系统中可以了解他们的故事以及送礼物，相应的，它们都会有一些表演，如下图的送礼表现：

另外一种大量存在的3D人物则缺乏表演，比如个人战界面中的玩家队伍：

深渊回廊中的怪：

讨伐战里的怪：

相比NPC，它们的情感价值比较低，想必这才是它们缺乏表演的最根本原因。

而下几图所示的无表演3D人物则发生在主要角色身上，可能因为这是角色相关的任务界面，本身也不太需要它们在此处“发力”：

在此基础上，比较复杂一些的设计，则是加入一定的镜头语言。

如下图所示的“召唤”界面入场，就是一个以人物为焦点的镜头推进动作：

在公会中与NPC对话时进入子系统前，也有类似的镜头设计：

还有类似前文所述的，各种战斗模式流程里的人物演出，也配合了各式各样的镜头设计：

在一些与核心系统相关的界面转场过程中，镜头语言也非常多见，比如进入到购买坐骑的系统内时的镜头弧形推进：

以及游戏的核心系统，角色相关的子系统跳转，每次进入和退出时，不仅有镜头推拉动作，还配合了每个角色的专有动作设计：

在一个叫“GW技能”的系统内，玩家可以预览所有角色的所有技能效果。这个系统有“引诱”玩家为角色经营更多完善功能的作用，所以也被设计得非常华丽，基本上用到前述所有的设计手段：

如果回到本初，观察本作在狭义概念层面的界面动效上，即严格意义的界面二维层上，会发现它的动态设计是极为收敛的。这是一种我们曾提及过的特别的设计手法：其动画动作不靠切实的移动，而只是通过巧妙的，短距移动或轻微变化设计来给人以“运动”的印象，此处暂且称之为“虚晃派”。

这并不代表本作的动效本身很粗糙。事实上，较为写实的界面风格本身就不太合适做非常细腻的动效，尤其是结构化的动效。本作在浮雕式写实刻画的界面风格上，将二维动效本身也进行了阶梯式的划分。

级别一，属于最简单的，为直接闪切。这类界面属于“层级低+结构拆解不适”两种的混合。如下图所示的BP弹窗入场闪切效果，就属于“结构拆解不适”类型：

而下图所示的“背包”页签切换时效果，就属于“层级低”类型：

级别二，增加透明度与位移效果。目的是暗示界面本身的强度级别更高。如下图所示的活动图弹窗：

以及下图所示的高频操作控件，任务控件：

和类似商城类的页签切换，归功于更多属性动画的处理，对比上文的背包中同类切换，它要显得级别高一些：

下几图同理：

级别三，属于
较复杂的
，可视为级别二的复杂版
。本质上也是位移透明度等属性变化，重点是讲究结构化。也是通过更多属性的变化来暗示更高的层级，如下图所示的主菜单入场效果：

以及以下多图所示的各类弹窗入场效果：

商城中的banner也通过结构化的设计，模仿了升格效果，塑造出戏剧化的展示效果：

界面本身有定向拟物设计时，动效层面基本上必须要交代对应物体的变化，下图的卷轴就有此意：

下图的纵向卷轴也用了类似的设计：

在图鉴系统的主界面中，表示分类入口的图标被设计成书籍样式，但它们的入场只是轻微的放大，这本质上是列表动态样式设计中的渐次入场，同时符合了书架上书籍如此排列时的物理结构限制，它们最多是纵深移动：

又如下图的特别任务接取后的效果，本质逻辑与上述几图类似，只是这种向下伸出的设计较为抽象：

下图所示的面板中，各个任务控件很像在公告栏上的挂件，其入场效果所设计的晃动也是对这种拟物的表现：

下图的角色亲密度任务的列表设计，通过抽拉形式来规整信息，其操作过程的动态变化也是种典型的结构化设计：

下两图也是典型的列表入场设计，它们通过随机顺序来丰富列表的动态形式：

而下两图则是通过列表单元内部的动态设计来表现控件处于更高的视觉层级，其入场动态设计相应变得简单。不过却增加了界面中其他元素的动态设计，如顶栏的细节：

下图是静置时，这种列表单元内的动态展示：

利用二维元素表现空间结构时，会更依赖动态层面的设计。而且这种情况下的动效设计也是一种结构化设计思维。如下图所示的公会战系统中，选择某一战场的流程，就通过上下两个层级的纵深推进效果来表现：

同一系统内，表现对抗情绪的动态效果也是同理：

下图“灵魂能力”的切换效果，也是使用二维元素设计的动态效果，其目的也是模拟纵深空间效果：

级别四，更复杂一些，有实体化交代内容，会增加很多特效辅助。

比如下图所示的主线剧情回顾，就将剧情的每节设计成书的样式，而回顾每节内容时，表现在界面上就是打开书籍，这本身就需要较为复杂的拟物化动态表现：

类似的拟物也出现在支线任务界面中：

在另一个玩法系统“证明之书”也有对书籍的相关表现：

在地图界面中，查看某地点详情时，也会出现同样的书籍效果：

本作还有个“无限书库”的玩法，“书籍”在本作是一个重要的包装元素。

级别五，最复杂的一级，除了增加很多特效辅助，还因为以三维元素为主体的原因而简化的二维元素设计，以及更多情绪化的内容表现。

下图所示的界面中，其综合信息展示就主要依赖一个3D动画：

相比之下，其周边功能的界面控件都较为次要，它们的动态设计也都较为简略：

类似系统内的其他界面，其处理方式也较为类似：

在其他的以三维元素为表现主体的界面内，也都可以看到类似的特征：

另外，在额外强调情绪的界面中，动效设计都会讲究强大的冲击力，比如下图所示的“歼灭战”倒计时：

以及“公会战”或“竞技场”中出现的开始提示：

和类似于升级提示处理手法的特别活动提示：

它们都或多或少用到了结构化设计、特效辅助以及富有冲击力的动作设计等设计手法。

这些所列举的内容，其实也都是游戏界面动效中常见的设计手法。比较特别的一点是，本作中的界面元素本身的动作设计都会比较收敛，二维动画将大部分的重度表现让给了三维动画或者特效。

本作有非常多3D动画，不仅包括刚才提到的，与界面体验系统相结合的3D动画，还有更多更纯粹的演出效果，有一些效果更进一步使用内嵌视频去表现。这在国产游戏中并不是见不到，而是在对应类型的设计上，很少见如此大量的投入。通常比较少用类似手段的主要原因，一个是性能限制，一个是考虑到包体。从最终效果来看，本作至少解决了大部分性能问题，这从侧面说明制作组有不错的技术积累。

其中最引人注目的就是三维人物的特别渲染效果。如果仔细研究，会明白设计者对游戏角色的投入其实不仅限在美术层面，他们也为角色设计了专门的任务线，非常多的台词以及背后的故事。这其实是二次元游戏中对角色立体化包装的设计方法。毕竟只有立体的角色营造，才会吸引玩家针对角色的移情，进一步的才会进行相关的消费。在此基础上，每个角色的服装、武器和配饰等等，都会成为游戏的核心消费点。而我们看到的诸多3D表现，也都是围绕着这些核心系统设计进行的。

比如说最引人注目的人物外观设计，就在消费的交互节点上投入了非常大的资源量：

角色的换装是以三维空间为主体的：

购买弹窗本身也几乎就是一个3D动画，华丽的箱子打开，角色模型在镜子前无限旋转展示，这种极为华丽的效果使人很难控制双手：

另外，在改变妆容的界面中，玩家可以清楚的看到高模模型的人物细节，本作特有的人物渲染效果在此处毫发毕现：

这个系统如果有足够的丰富度，甚至可以变成“Saga暖暖”。可惜的是目前本作并没有特别丰富的人物服装设计。

围绕角色的是一些拟人化的装备元素，如武魂和武器，除此外还有配饰。这些元素都需要通过抽卡获得，并且每个角色都有元素属性，它们与怪之间有元素相克的规则，这似乎在很多类似游戏中都比较流行。

游戏内区分角色和装备的一个方法是看它们的表现形式，作为角色展现的都是3D动画形式，而武器和武魂都是2D动态立绘，如下图所示：

这些元素也都被当作角色去塑造，有专属的声优以及较为复杂的周边设计，在每期活动或者BP中，也会为主推它们而设置专门的开场动画：

每期BP的主推元素也都会被制作成影片，用于游戏登录界面的背景：

同一套元素还会出现在“任务系统”界面中，其背景是一段随BP期数变化的视频：

这是一种全方位的声画体验营造。

在局内的角色武魂变身就是一种非常具有冲击力的3D过场动画：

遇到高品质的道具，其获取过程也不只是简单的弹窗，而会配上专属的内嵌视频和对应的2D动画：

类似的内嵌视频也会出现在特定的系统入口，如“无限书库”的每个关卡入场处：

3D动画在召唤系统内几乎登峰造极，视觉效果冲击力极强。与其他游戏的抽卡类似，根据前序画面表现可以提前预知所得的物品的品质，但本作的预知元素比较有趣，分为NPC不小心摔倒、抱猫和正常几种样式：

抽取“月照石”时，动画相对简约一些，但也很有趣：

正如上文所列举的诸多示例，本作通过综合声画效果的营造，塑造出一种非常夸张的视觉效果氛围。除了那些特效和丰富的3D动画外，主要还是设计师对张力的掌握，非常善于设计强力的打击感。

如下图所示的局内“Break”效果：

首先是从普通画面转换的过程，这不仅是一个“Break”字样的出现，还伴随镜头的转换和场景的聚焦设计：

接着是持续的强力输出，这种强力效果主要靠画面中动画和特效的烘托，同时，不停的跳字和血条上的闪烁效果也是这部分冲击力不可或缺的组成部分：

结尾的退场伴随着长时间伤害输出后的最后一击来完成：

开头的镜头转换和场景黑化是漫画式的叙事画面，中间的持续伤害输出是对此前蓄能的释放，而最终的一击让这个长久输出变成了另一种蓄力，它本身是这段蓄力的释放。这是一个由动画、特效和动效共同构成的，具备完整节奏的张力释放过程，因此才有我们所看到的夸张但富有打击感的效果。但是，如果玩家角色的级别不够高，这段输出所造成的实际伤害比较低时，这种打击感会很容易变得“刮痧”，从而起到反作用。

另外一些富有张力的效果主要集中在升级、突破等处，其设计特点也非常经典。

如下图所示的角色升级，就是综合了场景特效与界面控件的瞬间爆开效果设计而成的：

下图的装备升星，则首先用一段极其夸张的特效（可能还综合利用了内嵌视频）来表现卡片合成的过程：

然后切换到结果界面，一些突破后的属性再以逐个爆开的样式展示（需要结合声音效果）：

这个过程有两个主要特点，一个是直观的表现相关的概念，如直接展示卡片的合并过程、所突破的星级和属性从封闭状态爆开；另一个是利用特效承接动画本体的剧烈动作，让原本的动作冲击更加剧烈。这两个特点是构成整体效果夸张和富有冲击力的根本原因。

正如前文所述，这些设计特点是本作界面系统中一以贯之的，我们可以从很多相似的细节上品味到这种设计手法。

从美术表现力来说，这是一款非常优秀的游戏。制作组显然投入了大量人力物力在相关资产的设计和制作上，这种投入的效果是显而易见的。

动态设计的丰富度与动作张力，视觉上夸张的冲击力，其背后所体现出的设计手法，都有非常多值得同业者学习的地方。

但同时应该清醒的意识到，也曾是我曾经提出过的观点，我们参与设计一款游戏时，应该因地制宜的，实事求是的考虑自己所应解决的问题。不能简单的因为某个项目成功而去盲目抄袭它的某种美术风格或元素。特定项目的成败一定是某种天时地利人和的综合性结果，而并非某个特定的设计特点、设计亮点甚至只是某个效果导致的。也并非通过增强其组成的各个部分，再进行重新组合，就可以简单的收获玩家的欢迎的。其中的关键变量是很难清晰的展露的。游戏产品的成功是综合实力的某种配比的成功，靠精美的美术制作也许可以火爆一时，但持久的经营还是要靠良好的玩法系统设计。

学其所长而并非盲目的照搬，才真正是这种有价值的项目所带给我们的意义。

以上就是本篇全部内容。