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

双屏互动游戏设计

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

图8 ola快跑主要页面展示

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

图9 PC端与移动端联动

由于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服装秀”：