如何设计出微信爆款Html5小游戏!

分享到:更多 ()

双屏互动游戏设计

“ola快跑”双屏互动游戏是前端开发工程师极具创意的一款产品,是腾讯世界杯报道期间主打的一款基于移动端及PC端联动的双屏互动跑酷射门类游戏,是世界杯报道期间在PC端和移动端同时嵌入的游戏。这款游戏轻松、有趣味,在世界杯这一特殊时期,大家对足球的热情也点燃了用户对这款小游戏的喜爱。ola快跑主要页面展示如图8所示。

1433125302924580

图8 ola快跑主要页面展示

双屏互动通俗来讲就是通过手机与其他媒介产生交互关系并获得新鲜娱乐的体验,它可以是PC、Pad、电视、户外屏幕、电影屏幕等多种终端。实际上,双屏互动并不是什么新鲜事物,前两年微博火热的时候,一些发布会上出现的微博墙就是某种意义上的双屏互动。再发展到最近的弹幕电影,以及时下一些智能电视的出现,通过手机可以操作电视行为,实际上双屏互动正在慢慢侵蚀到真实的生活中。在这一大环境下,项目团队希望能够利用手机端和PC端联动的方式开发一款适合世界杯的小游戏。PC端与移动端联动的示例如图9所示。

1433125303518963

图9 PC端与移动端联动

由于PC与手机有高度重合的使用场景,网络环境稳定,并且是人们最常使用的两种设备,无疑是双屏互动的最佳环境。“ola快跑”的游戏交互形式分为两种:第一种方式是在手机端直接操控游戏人物行为,玩家通过手机拖动手势控制游戏角色,带球奔跑,途中需要躲避道具或者收集道具以获得相应奖励,最后完成射门,获得相应奖励或者荣誉称号,从而促进用户转发分享行为。第二种方式是在PC端用手机操控PC界面游戏行为,简单来说,这个时候用户手中的手机就如同游戏手柄,而PC则充当了展示了游戏主界面环境的电视,用户用手中的手机操控PC端的游戏,带来双屏联动的操作乐趣。视觉情景化剧情体验设计还原了球赛游戏场景,如图10所示。

1433125303715790

图10 视觉情景化剧情体验设计还原球赛游戏场景

随着触摸技术的发展,我们面对的不仅仅是冰冷的屏幕,而是活生生的情景化世界。可以想象一下,你能体验到真实的超市购物感觉,你能像看线装书一样体会到读书的乐趣。同样,游戏界面必定要给玩家展示真实的游戏环境场景设计。

快跑”通过“人球合一”的设计理念,将游戏主角设定为球状呆萌角色,另外游戏设计为避免操控游戏需要方向按钮的设计,采用手指直接拖动人物奔跑进行游戏,因此矮胖的人物形象由于占位面积较大,方便用户玩游戏的同时可以避免游戏的误操作。整体游戏场景通过不同道具的下移速度及球体不断旋转形成主角与足球同时快速奔跑的错觉,这一形象设定在腾讯世界杯项目上成为一大视觉亮点与代表。项目整体视觉风格延续当下流行的扁平化设计,作为一款带有资讯属性的小游戏,我们尽量减视觉干扰元素,并希望视觉整体可以传达出腾讯世界杯“快跑”的理念。

手机扫描二维码即可体验“oal!快跑”:

qr001

资讯与游戏的结合设计

2014年APEC会议期间,腾讯新闻推出了APEC服装秀互动小游戏,用户可以操作和定义人物的服装,并生成自己拼装的服装秀图片在朋友圈等社交平台分享,首次成功将严肃的资讯话题与互动游戏相结合,以互动游戏性的新闻形态,以生动的交互方式处理新闻,满足用户阅读新闻的同时场景化深度参与的需求,这个设计尝试引爆社交分享,在朋友圈形成巨大的传播效力,APEC服装秀主界面如图11所示。

1433125303126435

图11 APEC服装秀主界面

在整个项目设计工作中,界面背景的设计方案很快被想到,场景化设计概念再一次得到使用,利用模拟的舞台背景设计,结合由远及近的动画效果,简单模拟T台秀的环境场景。同时需要配合真实的人物形象,扁平化的设计概念在背景的设计中就显得不再适用,渐变式色彩的运用使得画面背景表现更为丰富,使人物主体更加突出和鲜明,同时也符合T台的设计概念,如图12所示。

1433125304767859

图12 模拟舞台背景设计带来的T台灵感

设计师对色彩的选用也有深入的考虑,项目整体配色各有来源(见图13):紫色代表时尚与娱乐,由于水立方是整个APEC会议的重要场所,夜晚的水立方呈现为紫色;蓝色代表会议的严肃性,抽取APEC会议Logo中的蓝色代表色;黄色代表智慧与思考,峰会特点是精英聚首;白色代表庄重,抽取人物西装白衬衣的特点。这样,从紫色、蓝色、黄色再渐进到白色,丰富的色彩构成柔和的画面。

1433125304129241

图13项目色彩来源

在人物形象的界定上,如何在资讯的严肃性中表现出一定的游戏娱乐性成为一个难点。考虑到新闻的严肃性,同时考虑到可辨别性,我们放弃了手绘卡通形象的方式,决定采用人物真实头像的方式来合成图片;考虑到游戏的趣味性,我们结合了一些近期在在国内互联网上经常被调侃的服装造型,比如秋衣秋裤、军大衣、清代皇帝龙袍等进行了大量的图片合成工作,使用人物真实头像与虚拟服装造型相互结合的合成方式,真实模拟人物的另类造型,为整个游戏平添一份真实而幽默的画面感,如图14所示。

1433125305100522

图14 项目服装创意点

手机扫描二维码即可体验“APEC服装秀”:

qr002

刮刮乐在移动端互动游戏中的微创新

“我擦世界杯”(见图15)是腾讯体育推出的一款针对2014年世界杯的小产品,产品定位为世界杯外围球迷,即非资深球迷和小白球迷。 所以产品定位上以愉快轻松为主格调,内容上以游戏的方式展示腾讯体育大量精美的足球宝贝照片为方向,如何摆脱传统图片集展示图片的形式是项目的一个难点。

1433125325233490

图15“我擦世界杯”主界面

我们想到一个颇有趣味的构思,创意来源于彩票刮刮乐(见图16),我们希望可以将足球宝贝的展示赋予更多的娱乐性。在交互上,我们观察到,H5页面出现了抽奖刮刮乐的功能,于是我们在这一功能上进行微创新,延展出手指在屏幕上涂抹刮掉球星出现足球宝贝的展示方式,并以涂抹的速度做出成绩优劣的判断,并进行好友排名。

1433125326101348

图16 项目交互创意来源

涂抹屏幕交互方式示意图如图17所示。

1433125332908745

图17 涂抹屏幕交互方式

在视觉设计上,封面的交互动画与视觉表现同样延展于刮刮乐的形式(见图18)。初始画面结合内容本身设计,以手的形象为构图要素,点击开始按钮,继而双手上下拉开帷幕,出现完整图片的动画,渐进式模糊动画处理效果十分贴合小游戏“刮开球星看美女”的内容特点(见图19)。

1433125332618797

图18封面动态交互创意来源

1433125332270325

图19封面动态效果展示

手机扫描二维码即可体验“我擦世界杯”

 

qr003

互动调查小游戏的设计创新

贺岁档电影是年度电影的第一大档期。每到这时各大网站都会推出贺岁档片单。内容无外乎新片推荐、上映日期、阵容介绍和片花等。面对如此繁多雷同的榜单,如何让用户选择我们的榜单并分享出去是摆在面前的难题。贺岁档电影封面页如图20所示。

1433125333565523

图20 贺岁档电影封面页

设计之初,设想过以下两种方案。

  • 以内容为前提,传统的贺岁档片单加上特邀写手的精彩评论。但显然这种以精编内容为主的形式在移动端很难轻易地吸引用户。
  • 以分享为前提吸引用户,这就拓宽了思路,不仅仅局限在内容呈现上,还可以扩展到游戏上。众所周知,小游戏一向是分享利器,脱离内容文字的束缚,单纯以提高分享为前提,打造一款贺岁档游戏成为了我们的方向。

选择适合的形式:这款游戏要符合贺岁档的特点,还要引出片单,最好还能打通其他渠道,增加腾讯娱乐的影响力。

“打造您的私人片单”这一核心目标产生了。最终我们选定设计一款调查式小游戏。

区别于娱乐周报、新闻调查等传统问卷,这是一款更像心里测试类的游戏。一共有6道问题指向10个有意思的结果。通过问题1先得出A、B两套指向,再根据问题2、3、4、5、6每个结果的得分计算最终结果。

简单来说,设计游戏闭环:目标+引导=结果。

  • 简单明确的目标:通过调查问卷,收集用户资料将用户进行分类,根据结果推荐不同的贺岁档电影。
  • 恰到好处的引导:达成目标的方式要有趣,但不烦琐。
  • 有意义的核心循环:贺岁档片单作为最终奖励结果出现。用户分享朋友圈z后,会享受到优惠购票及查看全部贺岁档片单的权利。

当设定都确定后,才真正的进入到设计环节。

如何通过设计让调查变得更加有趣?

游戏界面设计:游戏的界面设计涵盖了色彩、元素、交互(操作)体验等多方面、全方位的考量。

色彩是游戏界面与用户之间相互沟通的第一触发点。选择契合主题的颜色来烘托场景氛围,红色搭配明黄,营造一种传统的新年氛围,喜庆、热闹、张扬。

界面视觉表达的形式要和游戏主题统一,可以让用户在第一时间理解并感受到游戏的内涵。此外统一的功能按钮颜色也有助于用户降低学习成本。

元素的运用:结合内容设计元素,为游戏界面带来灵魂和丰富感染力,给用户提供更加愉悦的游戏体验。

角色设定:爆米花小人贯穿了整个游戏的始终,这个萌萌的小角色吸引用户想看它下一步会带来怎样的惊喜(见图21)。

结果设定:萌萌的结果设定,成为促使用户转发的又一杀招(见图22)。

1433125333106598

图21 座椅及爆米花角色设定

1433125334516467

图22 结果页角色设定

细节的把控:这里的细节指视觉和交互两个方面。页面视觉保持精致刻画的同时,要确保界面整体的识别性和可用、易用程度,不刻意、不僵硬、不做作,自然而然恰到好处,提高用户的参与感。

在答题的过程中始终让用户保持愉悦,翻页时有趣的水珠弹出设计,如图23所示。翻牌子显示结果如图24所示。

1433125334762178

图23 翻页动态展示                                     图24 选择翻牌的状态页

选定时的趣味动画设计如图25所示。拖动式交互的首次应用如图26所示。

1433125334960383

图25 选择情景的状态页                                    图26 拖动物体的状态页

游戏设计是对整个策划核心的提炼。增加美观和趣味性的同时也要注意游戏的终端性能。抓住游戏的核心,通过视觉与交互的完美结合,让传统的调查变得生动有趣。

手机扫描二维码即可体验“贺岁档电影”:

qr004

设计小贴士

可以看出,与媒体结合的H5互动游戏的玩法通常都很简单,但这并不意味着它们设计起来很容易。跟纯资讯专题相比,游戏需要的用户互动更多,注意力也更集中,因此在设计中需要注意以下几点。

明确游戏的媒体属性:我们设计的H5游戏大多数都是和媒体相结合的,它们不但能给用户带来愉悦感和成就感,还能借助用户对于新闻事件的兴趣来吸引用户,通过玩的过程让用户了解事件背景,或产生情感共鸣,或与自身建立联系等。可以说,这些H5游戏的媒体属性是不可或缺的。例如“ola快跑”和‘我擦世界杯“都是腾讯网世界杯品牌包装的部分,充分发挥了媒体跨平台的优势。

为触控设计:用户使用触摸屏时习惯通过直接触摸来控制游戏中的对象。例如,在“ola快跑”中,我们让用户直接拖动人物奔跑,而不是使用方向按钮或虚拟摇杆。这样既节省了空间,又提高了可操作性。

通过及时的反馈鼓励用户探索:随着智能手机性能的提升和移动应用的普及,用户对于移动设备交互的响应期待也越来越高。有专家建议,应该在用户操作后的50毫秒内给予视觉或听觉上的反馈,否则可能让用户重复点击甚至产生受挫感。鉴于游戏中交互反馈非常平凡,设计师更应该注意这一点。例如在“APEC时装秀”中,衣服素材都是预先加载好的,用户点击马上就能看到效果;在“我擦世界杯”中,用户涂抹的操作能够及时“刮”掉遮盖的涂层。

设计好游戏的闭环:这一点和任何游戏都是一样的。在“贺岁档电影”案例中,我们提到要设计好游戏的闭环:要有简单明确的目标,通过引导让用户熟悉玩法以及让用户能获得成就感的核心循环。H5的核心循环,简单来说,就是让用户在玩过以后能获得满足感,产生再玩或者分享的欲望。

原文链接:腾讯UED

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 如何设计出微信爆款Html5小游戏!

1
分享到:更多 ()