恭喜你成为UI中国推荐设计师 (详情)

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

推广

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
平台应用与社交游戏在设计和交付上有什么区别?0-1的案例带你
53.4°
原创文章 / 经验/观点 / / 举报
9766 67 165 10

2021-06-02

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



目录

  1. 1.设计流程的差异

  2. 2.交付流程的差异

  3. 3.从0-1的设计案例

  4. 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代码的


可以给大家看下在交付过程中节省的成本


以上就是平台应用与社交游戏在设计和交付上的差别,下面我来带大家一步一步讲解我是如何从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

收藏

67人已收藏

评分:

完整度:5星

启发性:5星

勤奋性:5星

排版布局:5星

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

夜曲Jray

wx:jray727521(添加请注明来意~)

  • 20

    作品

  • 517

    粉丝

  • 28

    关注

  • 对玩_捣蛋猫项目复盘
  • 对玩_太空狼人杀项目复盘
  • 夜曲2020作品合集
  • 对玩_探案大师项目复盘

猜你喜欢

    夜曲Jray

    夜曲Jray

    wx:jray727521(添加请注明来意~)

    首页达人叫兽当仁不让lv.1原创达人勤学标兵lv.1
    • 517

      粉丝

    • 702.6

      人气

    • 1.2w

      颜值

    作品

      GDC Award 2021启航

      推广

      最新推荐

      经验 | 矩形字体设计案例讲解

      19 0 0

      相关佳作
      换一换

        夜曲Jray

        点赞:165

        收藏:67

        评论:10

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

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

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

        0/200

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

        点击上传附件

        对谁可见:

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

        您确认要推荐?

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

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

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

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

        登录

        账号或密码错误

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

        登录