平台应用与社交游戏在设计和交付上有什么区别？0-1的案例带你去了解
本次跟大家分享的内容是【小游戏】与【平台UI】在设计和交付的差异，从0-1的案例带大家了解
目录
设计流程的差异
交付流程的差异
从0-1的设计案例
总结
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.总结
以上就是社交游戏的设计和交付流程，每个人的团队不同，设计习惯也有所差别，如果你是刚好在做小游戏设计需求，那这篇文章可以作为参考，帮助你避坑。
对于设计师来讲，在接触未知领域的时候难免有些害怕，担心做不好，只要保持不断学习、多思考和总结，其实回过头来想想也没什么，走出舒适区，迎接挑战，你才会更快的成长。
