游戏UI动效简析合集

《神觉者》 是由莉莉丝游戏自主研发的都市神话题材3D卡牌类回合制RPG手游。目前游戏只在海外上线，国内目前还没有开放公测， 不过大家可以去官网预约[micxp_wxonkey]wxv_2463407341698908164[/micxp_wxonkey]《神觉者》给人的第一印象就是色彩风格相当突出。莉莉丝首次尝试3D卡牌未必能够在美术精细度上碾压同行，但不可置否的是紫色调的主题色充斥在美术宣发、游戏UI等各各方面，的确让人留下了深刻印象。再加上电音要素的外衣，《神觉者》的外皮做的已经足够差异化。

‍

更多精彩图片 请登录

更多精彩图片 请登录

更多高清界面参考视频地址：https://www.lemooui.com/lgck

更多精彩图片 请登录

游戏界面风格采用的现代扁平与酸性设计结合，加上音乐元素的融入，让这款游戏有着非常独特的设计风格整体设计中以酸性设计的视觉语言进行设计，以及界面动态设计的变化，让界面动效与界面完美融合的同时，又匹配了都市的世界观

更多精彩图片 请登录

这里浅谈一下酸性设计，酸性设计起源于60年代的迷幻摇滚文化中，酸（Acid）原指一种叫LSD的致幻剂。所以酸性设计往往透漏着一种迷幻感。

更多精彩图片 请登录

酸性设计中一个很重要的特点就是往往包含大量的特殊质感，例如液态金属、镭射、铝箔、玻璃、塑料或折射等等质感。这些特殊质感都给我们一个共同的感官，再加上充满想象力的元素混搭，所以在视觉上给我们一种科技感和未来感。这也是酸性设计之所以能代表潮流和先锋很重要的原因之一

更多精彩图片 请登录

在构图、排版上，酸性风格看起来很难找到固定的规律，元素、图形的布局很随机，几何图形不断重复、裁切、组合。其实我们仔细观察，就会发现，它其实就是点、线、几何图形的重叠组合。这也是动效设计中必要的三元素，后期文章我会给大家讲到

更多精彩图片 请登录

酸性设计作为一种新潮流设计的代表，多存在于以现代潮流风格为主要世界观的游戏，比如早期的LOL的女团皮肤宣传

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

这种风格大多由鲜艳、高饱和度的色彩组合，例如高饱和度的渐变色，有机虹彩和萤光配色方案，充分体现出科幻未来感。还有一款大家比较熟悉的游戏《黑潮之上》也延用了这种酸性设计的设计语言

更多精彩图片 请登录

更多精彩图片 请登录

《神觉者》这款游戏，整体采用了酸性设计中的有机彩虹，和黄绿荧光的色彩元素，带有一种青春的气息，让我再体验游戏的瞬间，感觉又回到了充满活力的年轻时代

更多精彩图片 请登录

邮箱从当前画面中我们可以看到很多酸性的设计结合霓虹灯的设计，比如“开启故事”的热气球图标和邮箱的标题区，让整个界面充斥着青春的潮流气息同时这里多处沿用了关系链接的设计手法，“邮箱”打开的过程中让我们了解到他是从哪里来的，给用户一个明确的交互引导，类似的界面还有下面的“新手资源获取指南”新手资源获取指南

更多精彩图片 请登录

这些界面都是比较有表现欲的界面，这种界面往往都是比较吸引用户眼球的，是多以特效构成的强视觉设计，可以给用带来足够的心理兴奋点

更多精彩图片 请登录

人物等级提升
“人物等级提升”界面没有采用以往的爆发设计方式去表现，而是结合了平面设计的图形表达，和简单的闪烁效果来完成设计，虽然感受上没有让我非常兴奋，这也可能是作者想表达的心理预期（每个设计师在感官上的感受是不同的，所以设计也会有所不同，同样的界面给不同的设计师，设计出来的效果也是不同的），就好比《黑潮之上》的等级提升，这个界面给予我们的兴奋程度就是不同的感受，会更强烈一些

更多精彩图片 请登录

同样还有其他强反馈视觉的界面，“等级提升”“强化”“战斗胜利”“抽卡”等等

更多精彩图片 请登录

等级提升

更多精彩图片 请登录

强化
战斗胜利
这里的设计也非常有特点，界面中延续了箭头平面图形的设计元素，并将此元素融入到战斗胜利四个文字当中，再结合酸性的表现，让整个动效设计恰到好处抽卡
这个界面应该是大家都喜欢看的，就是视频太大了，实在满足不了公众号上传的限制，如果大家想看高清版参考视频，可以去乐魔UI官网观看，地址再文章最后面

更多精彩图片 请登录

boss预警

更多精彩图片 请登录

本游戏界面中多出使用镜头转场的交互形式，这种镜头方式的转场，可以让玩家很直观的理解各个信息层级之间的关系。

更多精彩图片 请登录

典藏馆就像我们现在看到的这样，镜头推移并旋转到“典藏馆”，同时刷新“剧情回顾”，和“视觉者图鉴”的二级入口，整个过程里，能让用户清楚的理解界面的主次和级别关系，以下几个界面也同样采用了这种形式

更多精彩图片 请登录

区域探索画面转场

更多精彩图片 请登录

积分赛转场

更多精彩图片 请登录

开启故事界面转场

更多精彩图片 请登录

空间之塔转场这个界面相比其他界面，多了一种入场衔接形式，一层石头铺设一条通往关卡的小路，给我们一种一种很强烈的故事代入感-即将踏入征途这里简单的讲解一下他的制作方法：这种设计有多种实现方式，可以是模型动画（纯手K），也可以使用顶点动画，就像我们的《TA动效实战课程》中使用顶点偏移的技术，不光是简单的石头动画，还能处理底部反光等多重细节，课程里有多种Unity的TA动效技术案例

更多精彩图片 请登录

石台顶点偏移

更多精彩图片 请登录

联盟悬赏

更多精彩图片 请登录

活动冒险故事

更多精彩图片 请登录

动效其实很多时候，主要是细节上的刻画，简单位移、缩放、淡入淡出的时代已经过去了，已经无法满足用户的视觉预期，所以现在更好的界面动效是倾向于风格化的融入，那这款游戏是如何制作的呢，我们继续看下面的动效设计

更多精彩图片 请登录

活动的入场动效
以往的设计，可能只是简单的列表动画，或者加一些简单的宝箱入场表现，本游戏中大部分的活动类都是类似的动画表现，细节的地方是上面类似羽毛的设计，游戏界面给了一个丝滑的移动，让整个动效空间变的饱满，而缓慢的节奏，也不影响我们视觉集中在宝箱的效果上。

更多精彩图片 请登录

活动-趣味拼图
这个界面使用了图形平面设计的色块遮罩表现手法，再颜色上延用了酸性色彩的强烈色彩变化，两者的融入，让一个简单的界面变的极为新潮

更多精彩图片 请登录

剧情回顾
“剧情回顾”这个界面动效结尾的画面，其实只有一个图片和一个光盘，如果只是单纯的做一个这两者之间的关系动画，位移或者淡入淡出，会让整个界面动效极为单调，而这里，我们看到再简单的基础上，加入了黑色背景展开，以及彩虹条的动态色彩变化，（很多时候我们动效是需要进行视觉元素补充的），让这个界面有了与世界观相匹配的风格，这也是我们动效风格化的核心思维

更多精彩图片 请登录

视频实在太多，这款游戏今天我们就讲到这里如果大家想看更多高清动效视频剪辑，请关注我们的官网

更多精彩图片 请登录

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

更多精彩图片 请登录