最近兔哥又和逃跑的星星合作，历时一个多月，搞了一个游戏界面动效预演的小练习。
完整版视频在下方，相比上次（点这里回顾）这次的界面数量较少，虽然不够基本操作系统循环（
MainLoop
）所用，但还是有一个完整操作路径，配合下图食用视频更佳：
下方为完整视频：
这个稿子的名字叫“Zplaton”，很显然，风格上模仿了NS游戏《斯普拉遁3》，但其实在很多细节上设计师有自己的思考，整体上与《斯》差别甚多。
和上次“Atelier”的预演产出过程不同。这次的作品的设计过程比较迅速，给到各个阶段的时间都相对较短，界面设计比较快，动效设计也比较匆忙，所以目前还有一些小的细节处理不太理想。欢迎大家提出意见和建议，反正咱也不会改。
下边简单说一下动效的设计思路。
从视觉设计稿上看，这是个卡通风格为主轴，并且混入了不少街头涂鸦元素的设计风格。另外还有一些复古潮流元素，如LED元素等。
这些元素在动效层面上都很容易得到表现，且也很容易出彩，比如表现弹动风格的主界面模式区域入场动画：
表现LED的效果：
还有因为界面上的色彩使用，而让整体风格有一些“赛博”味后，在动效层面去表现的一些故障风效果：
不过这些故障风还融入了一些LED、炫彩等表现手段，总体上是比较糅合的状态。
在主界面背景上的效果，因为时间的原因（主要是懒），并没有做更复杂的，比如以某种轮廓形态扫开之类的效果，而只做了目前的效果：
这里边最能体现赛博都市风格，也让“赛博”味更重的点位在商城的入场过程里：
这个过程中的城市场景原本只是一张图，在动态层面上去表现时比较掣肘，因此我用Blender重建了一座类似风格的城市，基于此设计了一个穿梭镜头的效果：
然后让人物和相关的物件配合这一镜头动作完成第一入场动作：
接着是点击“魔法球”正式进入到商城的操作：
相对于一般的转场设计来说，这个过程比较漫长。有人可能会比较纳闷，这么长的转场，就交互体验来说，难道不会不合理吗？
其实现实项目中也是可能会发生这种状况的。比如说商城中新上的某套装备，或者是某种活动主推的某个道具之类的，就会想办法在商城环节进行足量展示。有一种方法就是通过将这些活动元素融入到界面的入场过程中去。
这个入场的时间、节奏等设计，就是融入了一些这方面的考虑，才有目前的效果。
其他还有不少细节，比如为了结合地铁的概念而设计的特别的底栏菜单设计：
这种设计有两种，除了上边这种，还有在商城中弧形的变种：
这里除了跟报站相似的菜单项外，还有底部的一些循环动画，这些元素与公共车辆车载的LED非常相似，在动效上就设计了比较贴合这类设备表现特点的动态设计，类似设计在别的地方也可看到：
和以往一样，这个预演里所出现的所有的人物、背景等原画素材，也需要配合界面和画面整体的动态进行设计。这些动画没什么非常特别的设计，都属于呼吸态：
该图原作者为：
原作链接：https://www.artstation.com/artwork/5B2olz
该图原作者
为：
Savannah Shire
原作链接：https://www.artstation.com/artwork/GaNWX3
还是使用老方法制作，上Spine：
这基本上就是这段练习的产出思路和一点制作方法。感谢你的阅读，有问题评论区见。
该练习所涉界面设计内容已得到星星本人授权，本文所展示的界面设计与界面动效设计内容都仅用于学习交流之用，请勿盗用于商业用途。转载请注明出处。
视频也会放在小破站上，欢迎扫码观看：
这里是COTA五号，分享专业的游戏界面和动效知识，欢迎关注获取更多资讯。
本文完。
欢迎点击下方名片关注本号
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
