0.序

这里是设计师阿c。

从16年到20年，转眼已经参与过好几个完整项目。从社交App《会玩》的UX工作开始，到爆款游戏《贪吃蛇大作战》的角色动效方案、社交动效框架，到之后创业项目《掌门别挂机》的全部游戏美术方案...

项目中的经历很多，由于项目期间相当一部分工作无法以视觉化形式呈现给读者，所以摘取其中 UI 与动效等部分，汇总为作品集。

1.掌门别挂机

《掌门别挂机》是一款江湖背景的放置类休闲挂机游戏。有独创的传承系统与独特的秘籍系统。

游戏创造了一个自由的江湖世界，玩家在其中扮演一个门派掌舵者，参与江湖各地事件，收集武学秘籍，代代传承，不断提升门派实力。

游戏角色动作由骨骼动画实现。

在代码工程师对 Dragon Bone 与 Cocos 换装底层代码进行 hack 后，结合项目实际情况，与工程师共同开发出了一套高自由度换装系统。

将角色形象分割为脸型、发型、眼眶、瞳孔、眉毛、耳朵、脸部特征、身子、手臂、下半身等10个部件，基于不同角色部件的性别标签、特质标签与色系标签，在生成人物形象时进行全部随机搭配或者部分随机搭配。

在交互上大胆地放弃了同类游戏中主界面常见的底部tab切换的形式，用一个有趣的交互动画来串起界面之间的切换，从视觉效果上来看，能显得界面更为干净清爽，明显区别于同类产品。

为了在视觉上保证，秘籍 dialog 与抽秘籍动画的连贯，调整了两个界面中建筑物位置的屏幕适配，让抽取秘籍动画的出现衔接显得更为顺滑。

2.贪吃蛇大作战

《贪吃蛇大作战》是2016年末的爆款休闲游戏，迄今已累计5亿用户，日活用户最高到达千万，已经成为一款国民休闲小游戏。

在项目期间：

从后台动态配置到客户端效果实现，与工程师搭建起了一套完整的角色动效解决方案；

面对庞大的玩家数量，探索玩家社交的可能，提出了多套社交交互方案；

引入 Lottie 动画库，实现高质量易适配的全屏矢量礼物动画。

不同于基于游戏引擎开发的各类游戏，作为一款基于原生开发的休闲游戏，角色的动效实现方案需要自行探索。

最后拟定基于节点帧动画的动效方案，同时保证角色动画的视觉呈现效果、视觉流畅度与加载速度。头部与身体节点均可定制不同的动画；动效制作时尽量保证动画帧的复用性，减少动画文件体积与加载速度。

动态皮肤一经推出深受玩家喜爱，所制作的一些动态皮肤至今仍在商店热卖。
部分角色动效(*角色原画由原画设计师提供 )

配套运营动效(*静态设计由运营设计师提供 )

贪吃蛇要在拥有庞大玩家的基础之上，想探索游戏社交的可能性。而其中重要一环，就是社交礼物系统。

虚拟礼物在在直播领域并不少见，是每个直播App的标配。而直播中的礼物与聊天中的礼物是有所区别的。

直播聊天信息流密集，所以礼物消息与聊天消息分层，且强调送礼人的信息，尽可能给予送礼人虚荣感。

在社交聊天中送出礼物，有聊天记录，随信息流走。同时收送礼人身份会随时互换。

清楚传达收送礼双方的信息，并体现出礼物的商品价值，是这次社交交互探索的目的。

与工程师一起在项目中引入 Lottie 动画库，作为UI界面、社交界面等非游戏界面的动效解决方案。

制作AE路径动画并导出为JS文件后，不需要程序对接，直接就能渲染。Lottie 动画方便适配、渲染效果好，结合游戏偏扁平简洁的美术风格，在线上的表现相当不错。

(*静态 icon设计由运营设计师提供 )

3.会玩

《会玩》是一款线上轻游戏社交平台，前身是桌游社交《谁是卧底online》。

商业化升级之后，应用多次在 AppStore 社交榜上登顶，在2020年春节期间排名一度超过微信。

在项目中前期的工作内容主要为产品与交互，后期更注重于动效的制作。

应用社交尝试初期，用户的社交好友多为在游戏中互相关注的朋友，社交圈子的交互会更偏向于小圈子里的动态分享，同时增加好友推荐。设计风格上以轻盈简约为主，色彩饱和度偏低。

针对用户昵称中大量包含emoji 的现象，对用户名称的字体显示做了专门优化，扩大了各个用户名称之间的显示间距，同时针对安卓和 iOS 双端不同的系统字体与字重，调教了两版不同的用户昵称色值，以便达到相同的显示效果。

不同于贪吃蛇的社交交互尝试，《会玩》在虚拟社交礼物上的尝试要更早。

在早期以“谁是卧底”等文字游戏为主的聊天窗口中，如何让礼物消息更为显眼，不会在群聊中一闪而过，同时能有一定属于礼物的“惊喜感”，是当时改版交互探索的重点。

屏幕像素高度：H0

礼物入场前最高屏占比：H1 = 0.50

H1 随机抖动范围：△H =  0.10

屏幕重力加速度：G0 = 1600 (px^2/s)
礼物入场速度：V0 = Math.sqrt(2*G0*H0*H1)

除了普通礼物的通用显示交互，虚拟价格高的礼物自然会配以更高规格的展示方式，全屏礼物由此诞生。

由运营设计师的一张插画，脑补出数十秒的画面，现在想来还是颇为有趣的。

以下示例为价格最贵，脑补难度最大的礼物“秘密花园”演示：

秘密花园 AI 原稿(*运营设计师提供)

动态效果演示(*背景音乐购买自 AudioJungle , 二次剪辑后使用)

4.其他

Powered by Froala Editor