【PC游戏】杀戮尖塔的UI设计细节


3楼猫 发布时间:2022-12-04 14:13:49 作者:加鸡腿游戏 Language

【PC游戏】杀戮尖塔的UI设计细节-第0张

杀戮尖塔作为DBG的巅峰之作,在核心机制乐趣的设计上出类拔萃。过牌、抽牌、出牌、连招、洗牌、检索的乐趣,无论是在本体还是在mod中都被发挥得淋漓尽致。

【PC游戏】杀戮尖塔的UI设计细节-第1张

作为一个伪资深打牌玩家和一个业余DBG游戏开发者,今天不想过多讨论分析该游戏的机制设计(大神们都已经分析了无数次了),而是想分享一下我在游玩杀戮尖塔的过程中,在交互一些小细节上所获得的额外乐趣,也作为后续DBG游戏的玩家赏析和开发者优化产品的一个参考。

第一部分——卡牌

作为一个DBG游戏,自然缺少不了卡牌,卡牌作为战斗技能在战斗过程中的具象存在除了将输出手段变成独立的几段之外,还让玩家有了打实体牌和收集实体牌的游戏体验,下面就先总结一下卡牌的UI所包含的信息吧。

边框与底色

边框与底色代表着卡牌所属的职业,并且与英雄的原画的主色用色一致。

橙、绿、蓝、紫分别代表了战士、猎手、机器人、观者。

【PC游戏】杀戮尖塔的UI设计细节-第2张

卡牌图标边框颜色

卡牌图标边框颜色代表着卡牌的稀有度,其中灰色代表普通,蓝色代表稀有,金色代表传说,三种颜色也符合目标用户对于卡牌价值的认知。

【PC游戏】杀戮尖塔的UI设计细节-第3张

卡牌图标边框形状

卡牌图标边框形状代表着卡牌的类型,其中倒五边形为攻击卡、圆角矩形为技能卡、椭圆形为能力卡。

【PC游戏】杀戮尖塔的UI设计细节-第4张

卡牌名称与名称字体颜色

强化前的卡为纯文字的卡,强化后的卡会在文字后面增加1个“+”号,可以无限强化的卡则会在“+”号之后用阿拉伯数字标记累计强化的次数,强化后卡牌名称的字体由白色变为绿色。

【PC游戏】杀戮尖塔的UI设计细节-第5张

第二部分——战斗

卡牌的UI设计是大部分有游戏阅历的玩家都能感受到的,相较于卡牌的UI,战斗中如何在玩家做决策前给到最清晰充分的反馈也是十分重要的。

手牌展示

卡牌呈弧线状排列,并且将卡牌图标和卡牌名称全部展示出来,给玩家一种抓牌在手的感觉。

【PC游戏】杀戮尖塔的UI设计细节-第6张

卡牌大小与关键词

卡牌被选中时会放大显示,若卡牌带有特殊效果的关键词,则会在右侧显示关键词描述。

【PC游戏】杀戮尖塔的UI设计细节-第7张

卡牌边框发光

通过是否发光与发光的颜色去传达卡牌当前状态,边框无发光为不可用状态、边框发蓝光为可用未激活状态,边框发金光为可用激活状态。

【PC游戏】杀戮尖塔的UI设计细节-第8张

能量图标

不同的英雄,拥有不同外形和不同颜色的能量图标。

【PC游戏】杀戮尖塔的UI设计细节-第9张

【PC游戏】杀戮尖塔的UI设计细节-第10张

敌人意图

通过敌人头顶的图标和数字,来向玩家传达敌人意图以及对玩家威胁度:

0-5点伤害使用小剑图标、5-10点伤害使用大剑图标、10-15点伤害使用弯刀图标、15-20点伤害使用屠刀图标、20-25点伤害使用斧头图标、25点以上的伤害使用镰刀图标、绿色漩涡表示负面效果、紫色漩涡表示强大的负面效果等等。

【PC游戏】杀戮尖塔的UI设计细节-第11张

英雄状态

英雄下方的带有层数的状态图标会显示计数,绿色数值为强化状态,红色数值为弱化状态。

【PC游戏】杀戮尖塔的UI设计细节-第12张

指向箭头

拖动卡牌选择目标时会出现一个指向箭头,同时被选中的目标周围出现边框,如果选择的对象无法成为攻击目标则箭头会变成灰色,且想要选中的目标周围不会出现边框

【PC游戏】杀戮尖塔的UI设计细节-第13张

【PC游戏】杀戮尖塔的UI设计细节-第14张

遗物计数

带有计数效果的遗物会在右下角显示计数。

【PC游戏】杀戮尖塔的UI设计细节-第15张

中毒状态

中毒的所造成的伤害会提前通过绿色条显示在敌人血量上。

【PC游戏】杀戮尖塔的UI设计细节-第16张

效果添加

效果添加、移除的卡牌会在战斗页面中央放大停留并配合1秒以上的动画表现。

【PC游戏】杀戮尖塔的UI设计细节-第17张

第三部分——冒险

战斗相关的UI是相对理性的部分,而感性的、故事性的部分,将通过冒险中的UI细节来传达。

地图图例

通过简单的图例告知玩家地图上的路线信息。

【PC游戏】杀戮尖塔的UI设计细节-第18张

战利品清单

战斗胜利后,战利品会像清单一样进行排列,并且每个都需要去点击,才算采集获得,除了让玩家自由选择是否获取外,也可以让战斗的收获感变强。

更重要的是,战利品的分割罗列让跟战利品掉落和获取相关的遗物在生效时更加清晰。

【PC游戏】杀戮尖塔的UI设计细节-第19张

战利品选择时的有趣小提示

游戏战利品选择时,页面底部会显示有趣的NPC小提示,不仅介绍了游戏的规则,还营造出NPC都在尽全力支持的你冒险的感觉。

【PC游戏】杀戮尖塔的UI设计细节-第20张

战利品图标

战利品图标中卡包图标会通过不同颜色将卡包内卡牌的品质提前显示出来。

【PC游戏】杀戮尖塔的UI设计细节-第21张

【PC游戏】杀戮尖塔的UI设计细节-第22张

神秘事件描述字体颜色

神秘事件中与不同英雄相关的背景故事,会用该英雄的主色调作为字体颜色。

【PC游戏】杀戮尖塔的UI设计细节-第23张

神秘事件选项字体颜色

游戏中所有的惩罚/弱化信息均显示为红色,奖励/强化信息均显示为绿色,包括神秘事件选项,卡牌强化,状态数字等。

【PC游戏】杀戮尖塔的UI设计细节-第24张

神秘事件动画

神秘事件会触发特殊动画效果,如抖动、散落金币等动画表现。

【PC游戏】杀戮尖塔的UI设计细节-第25张

商人的手指

商店会显示商人的话和手,这只手也会指向鼠标悬停的商品。

【PC游戏】杀戮尖塔的UI设计细节-第26张

休息点背景

在休息点互动后,休息点背景画面中的火把会熄灭。

【PC游戏】杀戮尖塔的UI设计细节-第27张

【PC游戏】杀戮尖塔的UI设计细节-第28张

小结

从杀戮尖塔UI的细节设计上我们可以看出开发者对于该产品开发的专业程度与投入的心血。

很多不为玩家所关注的地方,都进行了大量的努力和设计。

除了上述的这些内容外,还有哪些没有被发现的细节和彩蛋,欢迎大家留言讨论。


© 2022 3楼猫 下载APP 站点地图 广告合作:asmrly666@gmail.com