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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

深渊回廊中的怪：

讨伐战里的怪：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 欢迎点击下方名片关注本号 

---

往期推荐：