《剑鬼》游戏GUI界面设计思路分享

冰淇淋是位勤奋的同学，（站酷ID：冰淇淋你要不要），总是半夜偷偷呼唤我，以至让我常常打开消息，右上点击，关闭，装没看到~~哈哈^-^在这次的设计，冰淇淋和小伙伴，老湿进行了“深入探讨”，反复调整，终于完成这题材的设计，希望大家喜欢！

作品一共5个界面，分别想传递的意思是：

登录页（成为剑鬼）——大厅界面（第一次觉醒）——角色信息界面（第二次觉醒）——武器强化界面（剑鬼的职业武器）——关卡选择（希洛克副本）

关键点

由于剑鬼的角色设定原因，一身的日本武士装扮，所以我也选择了走偏日式的风格，字体用的是 方正北魏楷书，因为写日文比较合适哈哈，在开始之前收集了非常多的素材，主要是围绕着以下几点方向：

“剑鬼的角色设计、地下城魔法阵、落日夕阳红、海”

颜色

界面整体的色调是天蓝色，与剑鬼的鬼手、剑气特征呼应，交互颜色为红色，与剑鬼身后的幻鬼色调、落日红呼应

界面构图与素描关系

绿色区域为操作区域，为了视觉美术的表现放弃了一些交互逻辑，交互同学轻喷

登录页

大厅界面

角色信息

武器强化

章节选择

光影氛围打造

为了避免界面氛围单调，这边我考虑了用不同光影方向来解决这个问题

设计说明与动效制作思路（GIF动图）

登录页（GIF动图）

登录页我想传递的信息是：鬼剑士在成为剑鬼之前受到卡赞的瘟疫差点挂断，然后遇到了幻鬼与它结合才救了鬼剑士一命。动效设计点这里参考了剑鬼CG剧情动画（受卡赞影响导致精神崩溃出现的鬼影、角色的收剑动作）

大厅界面（GIF动图）

大厅界面主要展示剑鬼完成第一次觉醒的姿态，右侧小视频是他的故事剧情，这里角色头像、等级信息等一模块做了与魔法阵元素结合的设计，战斗按钮样式稍微破了一下型（与太刀结合）。

动效设计点比较常规，在UI布局上做了些基础的入场缓动。角色动效上则是为了还原角色特征的形态，幻鬼身上是流体效果。

角色信息界面（GIF动图）

左侧tab页上的圆形设计原因1是为了画面的统一性，2是考虑落日圆，3是元素魔法阵呼应。

技能介绍的样式考虑了日式的吊牌（动效上有尝试过做翻牌效果但效果出来后比较奇怪放弃了）。

特殊按钮的样式这里换成了水墨飞溅的效果（参考了剑鬼的技能效果）

武器强化界面（GIF动图）

武器强化界面跟角色信息界面是在同一组页签内，所以用的场景会比较接近，利用水面倒影的效果也能给视觉上有很好的提升，其中加入了彼岸花来代表死亡和做画面景深的透视点，夕日和竖文本可以让画面饱满，完成度也有所提升。动效设计点上其实很多地方都加入了剑鬼的技能效果，例如返回按钮和特殊按钮、剑鬼立绘身上的雾气、类似雷电的雾气等等

关卡选择界面（GIF动图）

关卡界面这里我就不再用参考剑鬼的故事了，换成了希洛克副本的剧情

全程展示GIF动图

因为长视频是作为整体效果展示用，所以界面之间转场稍微会做的浮夸一些，出场和结尾用了水墨效果会跟这套界面的风格比较搭，整体动效的制作思路是先把单独界面的交互和动效效果完成后，再进行一个视频拼接，转场时候用一些手法去自然过度，武器界面那里做了一个刀出剑鞘的效果来抓一下眼球，其中也包括音效卡点的设计。

可惜无法插入视频，只能以GIF动图给大家展示

感谢冰淇淋同学的设计思路沉淀分享，祝福所有喜爱设计的同学都能越来越好！