恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
平台应用与社交游戏在设计和交付上的区别?0-1的案例带你了解
0.0°
2021-07-10 原创文章 经验/观点 举报 14432 116 190 10

今天跟大家分享的内容是【小游戏】与【平台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

更新:2021-07-10

收藏

116人已收藏

评分:

完整度:5星

启发性:5星

勤奋性:5星

排版布局:4.5星

推荐:
真实的项目总结,很实用,希望对大家有帮助!!!!!!
牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛牛啊牛
  • 21

    作品

  • 676

    粉丝

  • 28

    关注

  • 在映客的一年半
  • 对玩_捣蛋猫项目复盘
  • 对玩_太空狼人杀项目复盘
  • 夜曲2020作品合集

    猜你喜欢

      2021-07-10 原创文章 经验/观点 举报 14432 116 190 10

      平台应用与社交游戏在设计和交付上的区别?0-1的案例带你了解

      0.0°

      你确定要举报平台应用与社交游戏在设计和交付上的区别?0-1的案例带你了解

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年06月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      190
      116
      10

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录