今天跟大家分享的内容是【小游戏】与【平台UI】在设计和交付的差异，从0-1的案例带大家了解；游戏项目告一段落，本文针对设计/交付流程进行了一个总结

目录

1. 设计流程的差异

2. 交付流程的差异

3. 从0-1的设计案例

4. 总结

1.设计流程的差异

平台应用设计流程：

社交游戏设计流程：

1.相关游戏深度体验：

1）熟悉游戏玩法

2）调研游戏风格

3）梳理交互逻辑

2.情绪版确立：

设计前要把游戏风格情绪版收集好跟需求方讨论并确定风格（不要着急上手设计细节，不然游戏风格方向错了就前功尽弃了）

3.游戏框架确立：

游戏框架可以根据确立好的设计风格进行调整（不一定非得按照产品策划给的做），只要合情合理都可以对框架进行结构的改进。

4.适配规范建立：

游戏的适配非常重要！适配没调整好，整个游戏的视觉还原度不会高于60%，平台应用都是列表形式的，可以往下滑查看更多内容，因为它可以有【负1屏】，但游戏只有【1屏】，不管手机屏幕有多大，都需要把所有的内容全部塞进这一个屏幕内，所以前期就要把适配规范建立好，并与研发同学同步。

5.交互说明撰写：

与产品策划共同维护PRD文档，交互说明的作用一方面是为了给研发看交互细节，防止落下某些重要的交互，还可以把游戏逻辑全部梳理一遍，也起到了自查作用。

2.交付流程的差异

平台应用交付流程：

视觉：图标等部分内容切图 — 上传蓝湖（或其他协作网站）

动效：svga / Lottie / 动效标注 / png序列帧 / webp ......

社交游戏交付流程：

研发使用的开发引擎是cocos，交付时的限制比较多

视觉：九宫格切图 / 切图切图切图（可以理解为除了系统文案以外，全部需要通过切图形式交付给研发，工作量略大）

动效：png序列帧 / 动效标注 / spine输出文件

1）png帧序列什么时候用？

研发写不出来 + 占用内存较小。举个例子如下：

这是我做的第二款小游戏【探案大师】其中的一个场景，【翻页效果】用的就是帧序列来进行交付的。

2）动效标注交付的注意事项

对于研发来讲，手动写动画比较难掌控的就是动效的节奏感，控制节奏的主要参数就是缓动曲线。

前期我只在标注里我标注了缓动曲线类型，但没有参数，这样研发是不知道我们想要的效果的，后来我发现他们在cocos中调节缓动曲线的方式跟我们AE插件flow是一样的。

所以后面的交付我都会给到AE曲线样式截图（方便研发同学还原动画）

3）spine交付（适用于假动画场景）

如果png序列帧、动效标注都不能实现，可以用Spine来进行输出交付，对于研发来讲还是比较省时省力的，不过这个软件用的情况也不多，所以我会利用【跨组协同】来解决，把想要的效果做出demo，再给到我们商业设计组，按照demo效果输出后最终交付到研发即可。

UI层面的动效交付形式太过于复杂，自学了cocos开发引擎的动画制作，所有UI相关的动画我都会以cocos文件形式交付到研发，省去了很多成本。

(当然不是鼓励所有做小游戏的人都去学这个，看项目的节奏以及与研发们的磨合情况来定，不过学起来也不难，因为也是0代码的）

正常交付与cocos交付的对比

以上就是平台应用与社交游戏在设计和交付上的差别；下面我来拆解如何从0-1做一款小游戏，拿我做的第一款小游戏【谁是卧底】为例。

3-1.游戏玩法

拿6人局举例，6人局由5个平民+1个卧底组成；游戏开局后系统发放两组词语，所有平民获得相同的词语，而卧底获得与平民相似但不同的词语；玩家轮流发言，用一句话描述自己拿到的词，但不能说出自己词语中的字；发言结束开始投票，把卧底投出去，平民就获胜，如果最后剩余的平民=卧底，那么卧底获胜。

3-2.设计前准备

这个游戏在市面上已经非常成熟了，所以前期我可以找到大量的竞品去体验和调研，我在体验的过程中抱着三个目的：

1）熟悉游戏玩法，了解玩家操作习惯，寻找差异化方向；

2）总结视觉风格；

3）分析游戏框架、挖掘交互细节。

下面是我截取的部分竞品，从视觉、框架上大体总结出了三点：

1）游戏整体颜色较鲜艳，都带有色彩倾向

2）视觉风格偏扁平化，有些背景图和按钮会带有些质感

3）框架层面上，区域分割较明显（上半部分为游戏区，下半部分社交区）

3-3.游戏框架分析

对于游戏框架，并非一定要按原型图/竞品来做，找出竞品的问题再进行框架拆解和优化，从而实现差异化。

左侧框架的问题是功能信息分散、重点信息无法突出、公聊区与游戏区分割较严重。

整体框架达到的效果：

1.解决了信息分散问题，突出重点信息；

2.优化了游戏分割感严重问题；

3.实现了框架复用，同类型的游戏【狼人杀】可直接复用此框架，大大减少了设计/研发成本，对于玩家来说也会更熟悉房间布局。

3-4.设计尝试阶段

框架定义好之后就可以开始大量的视觉尝试了，我先列举一些我之前尝试的版本。

过程尝试了很多，只拿出来四张展示

(其实想说明的是在0-1的尝试过程中是需要花费大量的精力来打磨，视觉效果怎么样只有做出来才知道）

最终成品效果如下（logo提供：商业设计组小姐姐）

3-5.制定适配规范

在交付前一定要制定好游戏的适配规范，否则研发是不知道如何合理的进行适配，会大大提高设计还原度。

除去状态栏和安全区，我把游戏房间定义为【A、B、C、D】四个区域，A区、B区和D区为固定高度，C区可以进行压缩变化，研发在适配的时候可以根据手机屏幕的大小，对C区进行自适应压缩而达到最终适配。

3-6.游戏IP的运用

为了加深玩家对【谁是卧底】这款游戏的印象，我将游戏IP运用到游戏的各个阶段，如下：

3-7.动效赋能

通过微动效来使整个过渡（准备阶段-游戏阶段）更加自然。

增加结算时氛围感，情感化设计，贴合玩家心理预期

3-8.交互差异化定义

游戏整体为了避免中途出现弹窗的干扰，在设计过程中执行“去弹窗化”的处理方式，使玩家更沉浸其中（竞品：词语分发/投票阶段/投票结果等均以弹窗形式出现）

3-9.商业转化

对于这种即时类休闲小游戏，虽说付费的场景少，但我们也要挖掘所有的可能性；在玩家发言描述词语的过程中（其余玩家不可插言），可以通过快捷送礼的形式来表达对当前说话玩家的情绪，我们以玫瑰花/鸡蛋两个小礼物来进行诠释，运用微小的动效来传达用户情绪。

3-10.创新的延展

关于玩家死亡后身份的头像区展示，结合业务需求和场景发现，竞品的展示形式并不能发挥出此功能的作用，所以我做了区分；

头像区状态很多，用普通的处理方式来表现是达不到预期效果的，【死亡身份】的作用是为了给玩家做“排除法”来用的，尤其是8人局中（2个卧底身份），效果尤为明显。

从上面极限状态下可以看出，左图的死亡身份并不能一眼看到，而右侧其实是很明显的；

这个方案的设计灵感是根据【身份特征】“帽子”来的，为了增加识别性，又加入文字信息（民、卧）；

tips：因为定义了平民和卧底身份标签颜色为蓝色和红色，所以帽子颜色也统一成了这两个颜色。

3-11.Case的查缺补漏

整体做到这里，一个小游戏基本就已经做完了，然后需要你做的就是查缺补漏，比较好的办法就是通过交互说明来进行排查，交互说明的内容有：游戏框架、适配规范以及所有的交互细节；

交互说明的作用：

一方面是为了给研发看交互细节，防止开发过程中落下某些重要的交互；另外对于自己来说还可以把游戏逻辑全部梳理一遍，也起到了自查作用。

整体展示效果如下：

4.总结

以上就是社交游戏的设计和交付流程，每个人的团队不同，设计习惯也有所差别，如果你是刚好在做小游戏设计需求，那这篇文章可以作为参考，帮助你避坑。

对于设计师来讲，在接触未知领域的时候难免有些害怕，担心做不好，只要保持不断学习、多思考和总结，其实回过头来想想也没什么，走出舒适区，迎接挑战，你才会更快的成长。

Powered by Froala Editor