行业资讯

腾讯网移动端H5页面设计实战分享(4)

字号+ 作者:H5之家 来源:H5之家 2015-09-16 18:20 我要评论( )

由于PC与手机有高度重合的使用场景,网络环境稳定,并且是人们最常使用的两种设备,无疑是双屏互动的最佳环境。“ola快跑”的游戏交互形式分为两种:第一种方式是在手机端直接操控游戏人物行为,玩家通过手机拖动手

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


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

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

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

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


资讯与游戏的结合设计

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


图11 APEC服装秀主界面

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


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

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


图13项目色彩来源

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


图14 项目服装创意点

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


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

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


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

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


图16 项目交互创意来源

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


图17 涂抹屏幕交互方式

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WebAPP与原生APP的交互设计区别

    WebAPP与原生APP的交互设计区别

    2015-09-16 11:00

  • 未来的热门!WEB APP与原生APP有哪些交互设计区别?

    未来的热门!WEB APP与原生APP有哪些交互设计区别?

    2015-09-16 10:30

  • 搜狐快站:重整H5页面设计生态格局

    搜狐快站:重整H5页面设计生态格局

    2015-09-14 19:25

  • H5移动端页面设计心得详解!附超多案例

    H5移动端页面设计心得详解!附超多案例

    2015-09-14 19:23

网友点评
i