《斗罗大陆：魂师对决》是根据《斗罗大陆》这部国漫为IP，进行打造的一款3D回合制卡牌对战类手游。



这款游戏整体来说算是“现代魔幻风”的设计典型，它的界面和动效设计是一种比较通用的“写实类”风格基调，适用于多种风格的游戏界面设计。它的界面以平面透明的底色为主体，在结合现代图形化花纹构成了整套游戏界面风格。


斗罗大陆-界面

更多精彩图片 请登录

斗罗大陆-界面这种风格，是韩式游戏中比较流行的设计手法，它可以柔和一些国风或者欧式的花纹设计元素，设计出多种不同风格，就像我很早之前参与过的一个项目（遗憾的是之前离职，没有参与整个游戏的动效设计），这两个项目界面设计上采用了相似的设计手法，虽然有共同之处，但是它们通过花纹的变化，延伸设计出两种完全不同的界面风格
我之前项目的游戏界面
我之前项目的游戏界面这种风格取巧的地方是使用简单半透明的底板设计，核心则是花纹的使用，再通过点线面的合理把控，加上与世界观匹配的花纹结合形成的一套风格，这种花纹最注重的是层次强弱的变化，同样，我们在动效设计上也是如此
我之前项目的游戏界面而这款游戏的界面动效，主要出彩的是“特效”部分，因为过于注重特效的表现，从而缺失了界面交互本该需要的连接和节奏处理下面重点简述一下《斗罗大陆:魂师对决》动效中的“特效”表现

更多精彩图片 请登录

更多精彩图片 请登录

反馈-副本通关这种反馈类的设计，重点是情感的烘托，通过闪闪闪的强视觉冲击，来提醒用户，“兄弟，你通关了，兴奋起来撒！”

更多精彩图片 请登录

反馈-获得物品“获得物品”是每个游戏必不可少的界面设计之一，这种提示控件的动效中，基本都会有这样的光效特征

更多精彩图片 请登录

反馈-好感提升“好感提升”的动效设计前半部分采用了整款游戏通用的菱形框体线条设计，所以动效设计基本保持着一致的风格元素，在研发项目中，这种设计很多时候都是复制延用，在通过不同强度的交互，来增加或者减少细节的设计，这样“可以用来节省很多工作量”，而后半部分的小心心设计是很少见到的设计元素，多半会用到求婚，结婚的功能设计中，但是总的来说设计手法都是采用点、线、面的设计原则，再通过不同元素和色彩表达不同的事物观和情绪观
反馈-解锁新篇章这个设计看上去其实是有一些别扭的，中菱形框做了一个压扁的动态表现，这种表现破坏了原本的图形结构，而我们的运动趋势或者说现实运动规律中（即重力，惯性等自然定律）并不会出现这样的方式，不过好在，整体的反馈强度得到了该有的情绪回馈

反馈-胜利这种爆发式反馈设计，最重要的就是元素（贴图）、色彩、强度、节奏的把控，在这款游戏里能看到设计一致的统一。而且使用的魔法能量的元素，也非常吻合这款游戏的世界观

反馈-失败失败是一种失落情绪的表达，从平面设计上要给予冷色，灰色的色调，来强调悲观的情绪，同时这种情绪反馈的内容，则要削弱光效的表达，以及注意动画节奏的强度调控

反馈-新功能开启"新功能开启"和整体正向反馈效果中出现的反差最大的一个动效，采用了冷色系，我们看到以上，除了失败，全都是以黄色光效制作的动效表现，而“新功能开启”这个界面同样表达着正向的情绪反馈，却用了另外一种对比色调，从单个效果来看没有任何问题，从整体游戏出发，就显得有些另类。

更多精彩图片 请登录

抽卡-单抽抽卡类的动效，已经是游戏里的标配，也是我们动效表现力最强的设计点，这个过程玩家要消费，需要给予用户预期、过程、获得高级物品的兴奋点，最后再将此次消费所得进行全部展示，整个过程的“起承转合”是我们制作这种动效设计的重点思路

抽卡-十连抽“起承转合”转换到我们动效设计的思路就是“蓄力，过程，爆发，结果”。这种设计思路的描述内容会比较多，后面我会单独分享一篇有关的文章

更多精彩图片 请登录

更多精彩图片 请登录

斗罗之路-入场"转场过渡"在很多大场景切换中都会用到，通过转场的元素设计来衔接两个画面的硬切，但是很多时候这种转场最难解决的就是“卡顿”的问题，而上面这个转场设计，在游戏体验中非常流畅，通过烟雾遮罩和等待的方式，来过渡整个加载过程，等完全加载完成之后，才开始展现下一个界面的画面和动效，基本规避了跳转之后卡顿导致的动效卡帧问题，这种遮罩画面的方式也是项目中一个非常有效的解决方案。
不过这种方案从视觉上要解决的难点就是设计的创新，因为在整个过程中，平面设计基本不会提供转场的素材，这就需要我们设计师发挥自己的想象力去完成。大家有兴趣可以去我们乐魔UI官网查看高清版游戏视频参考，可以给你提供很多设计灵感

更多精彩图片 请登录

官网部分游戏参考视频

更多精彩图片 请登录

斗罗之路-任务章节这种拟物的设计方式也非常有趣，在一些特殊的界面中可以尝试表现，不过我看到这个画面的时候在想，这个狼头和这本书到底存在什么关系？如果地图中的狼头头像，换成这本书的图标，点击之后在做一个与书本相关的衔接动效设计，可以让用户更容易理解他们之间的关系

更多精彩图片 请登录

斗罗之路-挑战

更多精彩图片 请登录

魂环获得伴随着游戏中的怪物死去，怪物身体的灵魂能量幻化一个能量魂环的动效设计，使整个过程非常有代入感，也很符合本小说中应有的画面，而过程中的设计细节，像能量拖尾等等，有一种从怪物身上吸取能量的感觉，这种影视化设计形式存在与我们的感官印象（很多电影中都是类似的表现，不过电影中细节会更丰富一些），所以这样的设计在用户体验上往往都有极强的代入感

更多精彩图片 请登录

魂环养成这个动效中蓝色、紫色和黄色，如此对比强烈的色彩，却融合出了丰富的变化，主要取决于色彩饱和度和明度变化，很多新人在制作类似表现的时候，都会把色彩饱和度提的很高，导致发焦，具体如何运用，可以了解下我们的系统课程，课程中会讲述的比较详细

更多精彩图片 请登录

魂师管理-升星
今日动效分享就到这里，如果大家想了解更多游戏的动效设计，请关注我们的公众号更多高清游戏动效视频剪辑，请关注我们的官网乐魔UI

更多精彩图片 请登录

https://www.lemooui.com这里有更多游戏参考等着你
也欢迎您加入到我们的动效交流群

更多精彩图片 请登录