怎样做好一个基于微信传播的 HTML5 互动页面或游戏

新手学堂016

怎样做好一个基于微信传播的 HTML5 互动页面或游戏,第1张

游戏流程设计来说:

1 玩法:

游戏玩法要简单,易上手,初期参与成本低,方便用户学习和参与。这里说的简单,不等于单一,用户如果没有付出任何成本就得到了xx称号(比如大转盘)则缺少成就感和挑战的必要,也很难产生分享意愿;

游戏时间要短,两三分钟足矣。用户用闲暇碎片时间浏览朋友圈,不带预期地点击url进入游戏,并没有留给游戏太多时间,基于H5页面的游戏也不能承载太多内容,用户很快会觉得腻烦。如果用户感到厌倦而游戏仍未结束,直接关闭了页面,又怎么会分享呢?

游戏的可重复性要强,失败随时可以重来,满足自我挑战或好友间相互挑战的需求。这里说的好友间相互挑战可以很简单,不一定要登录系统,不一定要排行榜,我在朋友圈看到我的朋友得了x分,一定要比他高或者得到比他nb的文案就够了。

当前热门玩法举例:神经猫,flappy bird,2048,别踩白块,打靶,擦屏幕脱衣服,心理测试……

2 游戏内部的引导分享:

分享到朋友圈,这可能是指望用户在微信自传播的唯一途径了。微信把这个功能藏得很深,游戏开发者则有义务引导用户分享出去。这不仅是视觉上加个悬浮箭头让用户点点点的事,还需要能跟游戏整体流程、玩法强相关,此外,引导分享流程应该反复多次出现,因为游戏是可多次重复的,用户获得了满意成绩之后会更想分享出去。

现在H5游戏的常见做法,是在每盘游戏结束后略带干扰的分享强提示,不评价好坏。

3 分享到朋友圈的文案:

这是用户分享的理由,也是新用户点进来参与的理由。首先文案要吸引眼球,有传播性,不一定要很俗很low很浮夸,最好能跟品牌相关,有自己的调性特点,当然还要注意字数限制和缩略图的选择;其次,文案应该是一组而非一个,每个人可以通过参与游戏获得不同的分享文案,这是用户在朋友圈看到此标题却还愿意去分享的理由。

4 品牌关联性:

除非你只是想弄个H5页面植入广告,赚点广告费;如果是为了品牌传播,求求各位别拿产品图做「别踩白块」了,还是认真地想一些从玩法到设计,每一个环节都跟品牌强相关的小游戏吧,不然做它干啥?

目前有一个正在进行的微信html5的Web应用,从已有的实践与测试来看,安卓端的微信使用的是一个自带的专用浏览器,应该是一个精简版的qq浏览器。然后就造成了我们一系列蛋疼的问题,各种不兼容。而ios端的微信无疑问用的是内置safari浏览器,不管是canvas运算还是类似todataurl这样对运算能力要求比较高的API,在上面的实现都挺流畅的。在这里就想给腾讯一个差评,qq浏览器真心渣,给我们前端工作者造成了这么多麻烦=

微信内置浏览器调用的是手机系统默认浏览器,ios和Android系统默认浏览器都是webkit内核,只是对HTML5和CSS3的支持程度可能不同。因为浏览器只是系统的一部分,因此系统默认浏览器不会单独升级,对HTM5、CSS3的支持程度与系统版本有很大关系。

微信的公众平台还不是HTML5游戏可适应的生态环境

现在手机网页游戏(duopaogame)公众号日均PV在4000左右,日活跃用户1500人,这个数据并不理想,感觉目前的微信平台尚未为HTML5游戏做好准备,通过分析可得知用户流失的主要原因如下:

1) 游戏太简单,比原生游戏比还有差距;

不少用户反馈手机网页游戏的公众账号里的游戏过于简单,觉得恐怕无法与原生游戏相比。其实我们挑选这批游戏确实以简单,上手较快,量级轻便于打开为目的,方便玩家快速体验。其实随着手机和浏览器的发展,HTML5能够表现出来的东西已经足够丰富。而在下阶段我们会陆续推出画面精美,体验感更强的联网大型社交类游戏。

2) 打开时间过长,网络不好时候需要等待;

部分用户感觉打开游戏的时候加载时间过长,尤其是在网络不好的情况下,很多玩家因为无耐心等待而流失。这让我们后来会尽力去想办法在这方面有所改善,例如压缩游戏资源和脚本,尽量使用离线能力,今后的网游也会考虑分阶段下载图像资源。

3) 公众号用户操作繁琐,纯文字菜单的交互方式导致不少用户失去耐心;

用户进入公众号后,首先需要输入数字才能得到游戏菜单,在选择类型后打开游戏的图文介绍,还需要点击逗阅读原文地才能进入游戏页、这一系列操作已经让很多玩家失去了耐心。针对这个问题,我们随后想出了不少办法来优化。例如用在文字信息中嵌入短域名链接,设置游戏编号让玩家快速记忆等等。我们非常期待的底栏Tab菜单能够早日启用,让玩家可以直接点击菜单找到自己想要的游戏内容,同时也提个小建议,是否支持回复文字信息内嵌入游戏图标,以便让用户体验更好。

4) 微信内置浏览器无法全屏,也无法控制屏幕旋转;

苹果的Safari浏览器和不少第三方浏览器已经都实现了全屏和控制屏幕旋转的接口,但微信内置的浏览器目前还不行。这样非常影响了手机网页游戏玩家的体验,尤其是一些需要横屏控制的游戏,画面的可视部分就会变得很窄小,甚至遮挡了部分操作导致游戏无法继续。我们呼吁微信内置浏览器可以尽快提供全屏和控制屏幕翻转的API接口。

5) 从游戏切换回聊天界面,却无法再直接返回游戏状态;

手机网页游戏主要是利用玩家在社交平台的逗沉默时间地来进行的,这点与原生app游戏不同。这些时间多数是指玩家暂时没有聊天信息,而又不愿意离开社交平台。这些时间往往是以碎片方式存在的。而用户在进行微信游戏时,如果接到好友消息就会返回到聊天界面,结束聊天后再回到游戏就必须重新加载。我们希望今后的微信的内置浏览器可以在这方面优化。在后台挂起状态,而用户返回后再重新恢复,以方便玩家在聊天界面和游戏之间自由切换。

6) Andriod手机自带浏览器对HTML5支持太差;

很多用户反应部分游戏出现无法启动,白屏或者性能太差等问题,经过回访和调查却发现都是Andriod自带浏览器惹的祸。由于Andriod系统过于开放,各家厂商针对ROM进行了程度不一的改造导致浏览器标准非常不统一,对HTML5的支持很差。建议微信可以考虑在Andriod版本中摒弃系统自带浏览器而采用第三方浏览器,性能更好,对HTML5支持更加彻底,从而缩短与iOS平台的差距,确保用户体验的一致。当然在谷歌内部也会出现Chrome OS部门合并Andriod,这对HTML5继续普及都是利好消息。

7) 开发平台接口较弱,无法满足社交游戏需求;

当前微信公众平台开放的接口还是比较弱,用现在的平台提供的能力无法承担作为手机网页游戏平台的需求,尤其是希望开放账号登录,游戏内发送微信,朋友圈,添加好友等社交接口,甚至还包括支付接口。我们下阶段希望在休闲游戏内实现用户登陆后可以将自己在微信中的社交关系链带入游戏,该社交关系链的价值是可以让玩家可以看到好友在这款游戏的排名,甚至双方也可以互相交换和赠送游戏道具。此外游戏内设置的积分排名也对刺激用户玩游戏起到推动作用。当你看到自己的伙伴能够玩很高的积分时,用户的攀比心理会让他陷入到游戏的竞争乐趣中。用户的积分如果超过了朋友,他还可以将这些信息一键分享到微信中,以此向朋友进行一番炫耀这些能力来提升游戏的可玩性和粘性。

<!DOCTYPE html>

<html>

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, user-scalable=no" />

<meta name="format-detection" content="telephone=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>contenteditable</title> 

<style>

{ padding:0;margin:0;font-size:14px;box-sizing:border-box; }

</style>

</head>

<body>

<div contenteditable="true" style="width: 90%;height: 360px;border:1px solid #000;margin: 24px auto;">百度一下,你就知道</div>

</body>

</html>

没什么问题呀