整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

案例复盘:QQ红包的趣味新玩法是怎么设计的?

Q红包作为一个已上线4年的基础功能,在过去的一段时间经历了定位转变,用户数据下滑等问题。随着几个新玩法的推出,QQ红包又重新受到了年轻用户群体们的关注和欢迎,成为“沙雕”网友们日常的快乐源泉,那么这些玩法是怎么设计出来的呢,本文为你揭开背后的故事。

前言

2019年8月中旬,QQ红包上线了成语接龙玩法,因为“一个顶俩”这个无解的接龙成语,引发了网友们的热议,相关的话题冲到了知乎当日问题热榜第一位,微博上也有很多的讨论和转发,甚至还有网友自发创作了相关的鬼畜视频和表情包。

8月底,跟随QQ 8.1.3版本的发布,QQ红包又上线了画图红包的玩法,瞬间又引起了网友们的关注,在没有任何推广的情况下,获得了超高的热度。灵魂画手们纷纷登场,写实派和抽象派同台竞技,为大家奉献了一幅幅“精彩”的画作。

这些红包玩法受到用户的欢迎,获得了许多赞誉。但是,它们的推出并不是一蹴而就的,而是项目团队许多次探索和打磨的结果。那么,这些QQ红包新玩法是怎么设计的呢,现在让我们揭开背后的故事。

QQ红包是什么?

在开始之前,让我们先了解一下QQ红包这个业务,QQ红包是什么?

QQ红包上线于2015年,初期承担着抢占移动支付市场份额的重任,随着移动支付渗透率的日趋饱和,QQ红包原来的战略使命已逐渐淡化。如今,QQ红包的角色已经转变成为一个QQ社交生态中的重要社交工具。

不同于微信红包和支付宝红包,QQ红包的用户群体更加年轻,90后,95后,00后占比达到了80%。

QQ红包新方向:贴合年轻用户喜好,拓展新的玩法

QQ红包的用户群体如此年轻,对于新鲜有趣的事物有着强烈的好奇心,然而QQ红包原有的拼手气,专属红包,文字口令,语音口令等玩法,上线时间都已经超过2年,用户对于这些红包玩法的新鲜感正在逐渐下降。

为了重新给年轻用户带来新鲜感,我们明确了QQ红包的新方向:更加贴合年轻用户的喜好,不断拓展红包新玩法,让红包更加年轻化、社交化、娱乐化。

如何找到QQ红包玩法切入点?

明确了QQ红包的新方向,那么要如何找到QQ红包玩法的切入点呢?我们做了许多前期的探索和尝试。

(1)高效用研,听取年轻用户的声音

我们从身边的亲朋好友寻找QQ红包的年轻用户,直接与他们沟通,来获得他们对QQ红包的真实反馈。通过自费给予报酬,或者降低自己的年龄,来拉近与年轻用户的距离,以此与他们维护良好的关系,在后续的设计中,这些年轻用户给了我们很多的启发和建议。

(2)整理问题点,推导设计方向

我们通过对年轻用户进行访谈,了解到了QQ红包现存的3个主要问题:金额少、场景少、趣味少。

根据用户反馈的问题,我们对应的推导出了QQ红包的设计方向。

  • 情感化:除了金钱之外,可以让用户一同发出能表达情感的内容;
  • 互动性:挖掘社交、娱乐场景,让用户能用与好友红包玩起来;
  • 趣味性:设定一定领取门槛,让用户进行额外的操作,提升用户的参与度和趣味性。

快速CE,验证设计方向

明确了红包的设计方向,我们开始了初步玩法尝试,以情感化作为切入点,设计了语音明信片红包方案,让用户在发送红包时,编辑一张电子贺卡,并录制语音消息,连同红包一起发送出去,以此向好友传达金钱之外的祝福、感谢、思念之情。

在完成语音明信片红包的方案设计后,我们找到用户进行快速CE,以验证方案的可行性。验证结果发现用户对这个玩法不是很感兴趣,用户觉得在发红包时编辑明信片很麻烦,还有一些用户认为明信片已经是上个时代的事物,不太喜欢以这种形式发红包。

深挖场景,从年轻用户的喜好中找切入点

情感化的方向不受年轻用户的欢迎,我们继续从互动性和趣味性方向寻找切入点。通过与用户沟通,研究95后,00后相关调研报告,搜集年轻用户喜好的兴趣点,并从中筛选出可行红包玩法的切入点。

通过对比和筛选,我们最终确认了“K歌”这个切入点。主要有两个考虑点,一个是互动性,商场迷你KTV的兴起,使得K歌成为年轻用户社交互动的热门选择。另一个是趣味性,我们可以与全民K歌合作,采用全民K歌的评分技术,设定领取红包的门槛。

新红包玩法:K歌红包

K歌红包的主要玩法:唱歌达标领红包,发红包者选择歌曲片段与红包一同发出,领红包的人需要唱出歌曲,并且K歌评分达标之后才可领取红包。

在结合K歌玩法和QQ红包的过程中遇到了许多问题,我们对体验细节进行了打磨。

(1)保证红包基本玩法:抢

对于红包而言,快速抢到红包仍然是最基本的玩法。常规的K歌,唱完一首歌大概要3-4分钟,难度大且投入成本高,用户会因为担心红包被抢光而失去耐心。这里我们只截取每首歌的副歌高潮片段,时长为8-20s,并外显这一时长信息,让用户没有心里负担,可以快速唱完并成功抢到红包。

(2)做减法

全民K歌的K歌主界面有十分丰富的功能,如果全部照搬到QQ红包上,会给领红包的流程造成干扰。我们把不必要的功能全部剔除,只保留核心的K歌体验,让用户减少决策,更专注于抢红包本身。

(3)结合实际场景思考

在进行红包玩法设计时,我们会更多的思考用户领红包的实际场景,而不是依赖思维惯性而设计。举个例子,K歌红包领取红包的主要交互操作,初期有两个选择,一个是按住button唱歌,另一个是点击button唱歌。

因为QQ语音口令红包,以及QQ发送语音消息,都是按住说话,如果按照思维惯性会选择按住button的方案,但是结合实际场景思考,如果按住button唱歌,屏幕离眼睛太近,用户很难看清红包封皮上的歌词,所以我们最终选择了点击button开始唱歌的方案。

(4)增强用户间的多向互动

原本发红包的互动,是发红包者和收红包者之间的双向互动,收红包的人抢到红包后,会回复文字“谢谢老板”或是一个感谢表情包,互动的形式较为单一。

新的K歌红包玩法,用户K歌的片段以语音的形式发送到聊天窗,并且展示K歌的评分,这样让发红包的人更有满足感,能引起收红包者之间的互动讨论,甚至能激发用户的竞争排位心理。

这样一来,不仅仅是发红包和收红包者之间的双向互动,还有收红包人之间的多向互动。K歌红包玩法上线后,受到了用户的欢迎,许多用户喜欢用《学猫叫》这首歌来“戏弄”好友。

提炼创意公式,持续拓展红包玩法

根据K歌红包的经验,项目团队开始有意识的寻找红包玩法方案的共性,逐步抽象提炼出一个红包玩法的创意公式:互动性+趣味性+基础红包=新红包玩法。

其中,互动性是指从年轻用户喜好的事物筛选,寻找可以激发用户产生互动的切入点;趣味性是指技术手段可实现的,设定一定的红包领取门槛,让用户更有参与感。

具体的玩法流程,则是发红包的用户在输入红包金额后,选择一个互动内容/题目,通过技术手段设定领取门槛;收红包的用户需要进行操作,并匹配上预设的门槛,才可成功领取红包;而操作的过程会生成内容,并发送到聊天窗口,让用户间产生多向互动。

以红包玩法创意公式作为设计思路,项目团队又一起共同脑暴细化方案,推出了表情红包,以及本文开头提到的接龙红包,画图红包玩法。

表情红包

做表情领红包,用户在发红包时选择一个表情模版与红包金额一同发出,领红包的人需要打开手机摄像头,并根据表情模版做出对应的表情动作,通过面部/动作识别技术,判定所做的表情匹配模版后才可领取红包,领红包用户所做的表情也会生成一张表情gif图发送到聊天窗中。

(1)做减法:减少用户DIY,预设内容模版

市面上制作表情gif的app,支持用户DIY内容,但是在领红包的场景,用户更关注红包本身,因而需要做减法,减少用户的操作。为此,我们根据不同的表情模版配置好对应的滤镜,贴纸和特效等内容,用户只需一步操作,就可以录制生成一个效果完整的gif表情,并成功领取到红包。

(2)结合实际场景思考:让用户先预览表gif效果

因为用户拍摄生成的表情gif,最终会发送到聊天窗口中,考虑到用户对自己个人形象的重视,所以在用户的表情被成功识别后,我们先让用户预览表情gif的呈现效果,此时用户可以选择重新拍摄一个更满意的效果,也可以点击button直接领取红包。

接龙红包

接龙成语领红包,用户在发红包时选择一个成语与红包金额一同发出,领红包的人需要根据初始成语的末字拼音进行接力,通过拼音抓取识别技术,判定接龙成语拼音一致即可领取红包,下一个领红包的用户,需要接龙上一个人的成语继续领取红包,以此类推,直至该红包被领完。

结合实际场景思考:拼音提示信息实时更新

在群聊中抢接龙红包,有很大几率会出现一种情况,就是用户根据上一成语的拼音开始输入接龙成语时,该拼音的接龙成语已经被其他群友抢先输入,并已领取到红包了,此时如果用户还是按最开始的拼音输入,无法抢到红包,体验会十分糟糕。

这里我们在输入框上方做了一个小浮层设计,用户点击领取红包,小浮层出现并展示下一个接龙成语的拼音,给予用户一个快速提示。除此之外,这个浮层的拼音内容是根据最近的接力成语而变化的,这样用户只需关注浮层上的拼音内容,就可以输入当前正确的接力成语,从而成功领取到红包。

画图红包

画图领红包,用户在发红包时选择一个画图题目与红包金额一同发出,领红包的人需要根据题目进行作画,通过AI图像识别技术,判定所画的内容匹配画图题目即可领取红包,领红包用户所画的作品生成一张图片发送到聊天窗中。

(1)做减法:减少用户设置,随机画笔颜色

在设计初期,项目组为了让用户的画作表现力更加丰富,曾考虑可以让用户自主调整画笔笔触的大小,画笔颜色,以及画板的背颜色景等。经过讨论,确定仍遵循了“做减法”的设计原则,减少用户对画笔和画板的设置,选用随机画笔色彩这一方案,来保证用户画作的差异性和丰富性。

(2)结合实际场景思考:识别成功后,继续完善画作再抢红包

画图红包采用了AI图像识别技术,只需要识别到画面中对应题目的特征,就可以判定用户绘画成功并可领取红包。但是也会引发一个问题,就是用户有时只需画一笔,比如鲨鱼的背鳍,AI技术就可以判定用户绘画成功。这对于那些想要表现自己高超画技的用户而言是十分扫兴的,为了照顾这部分用户的感受,我们在AI识别成功画作后,支持让用户继续作画,丰富更多的细节,并发到QQ群中去获得赞美。

当然,对于那些只想快速抢到红包,并且不在意自己被称为“灵魂画手”的用户,在AI识别成功后,也可以直接点击领取红包。

(3)增强用户间互动:给画作评分

与K歌红包一样,画图红包后续期望能引入绘画评分技术,届时画的越好的用户,获得的评分越高,这样能让大触们可以一展身手,也能激发用户画出更好的作品,引发更多的互动和讨论。

这些QQ红包新玩法上线之后,数据上都有爆发的增长,它们拓展了用户的社交方式,刺激了群成员之间的互动,表情红包成了用户收割好友表情包的利器,接龙红包让大家重拾对成语的热情,还有小学教师用接龙红包进行成语教学,受到了小学生们的欢迎,而画图红包则让一众灵魂画手们得以挥洒天赋,成了“沙雕”网友们的快乐源泉。

服务新玩法,红包体验优化

随着红包玩法的不断拓展,一些体验问题开始暴露,我们又进行全局性的梳理,对红包进行了体验优化。

(1)拓展性

红包玩法的不断丰富,使得原有发红包页面框架无法继续满足新增的红包玩法。为了保证发红包页面的拓展性,我们在页面上划分了内容区域,其中固定内容是红包金额、个数这两个必要信息,而变动内容是红包玩法信息,例如表情模版,歌曲片段等。

划分内容区域后,固定内容区域信息不变,而变动内容区域可以根据不同的红包玩法而切换,以此发红包页面框架的拓展性,可以不断兼容新的红包玩法。

(2)一致性

因为历经不同设计师,各个红包玩法的领取弹窗样式,交互体验不一致,我们又划定了红包领取弹窗的玩法内容区域,统一主操作button的样式,精简提示文案,让各个红包玩法的领取弹窗保持一致,给用户传一致的QQ红包品牌感。

(3)趣味性和仪式感

在后续的红包设计中,我们也会在红包中做一些趣味性和仪式感尝试。比如在发红包时,红包页面的背景或输入框的颜色随着金额的大小而变化,金额越大变化越强烈,让这个隐藏的小彩蛋给那些发大金额红包的用户一种尊贵感和满足感。

除此之外,我们希望在收发红包流程能给予用户仪式感,比如封装,拆开红包的动效,适度加长拆开红包的等待过程,营造一种拆红包的仪式,以及收到红包金额后的音效和光效等。通过多个仪式感元素的运用,让用户能在发红包和收红包中有更愉悦的体验。

一些思考

(1)创新不只是全新创造,也可以是结合和转化

K歌,自制表情包,成语接龙,以及AI识图其实并不是新鲜事物,但是结合了红包玩法,融入了抢红包拼手气的属性,就有了更强的竞争性和互动性。所以,创新可以不是全新创造,也可以是把现有的技术和玩法的做结合,或者进行转化,只要是这件事原来没人做过,就可以称之为创新。

(2)维护用户群,随时做用研

设计师可以通过身边的亲朋好友寻找用户,并维护一个随时可以进行用研的用户群体。这样一来,我们可以快速的验证设计方案,为方案决策提供依据,或者用于推动和说服项目成员,从而提升设计的决策效率。

(3)结合实际场景思考,而不是依赖设计经验

长时间的支持某个项目的设计,设计师会很容易形成思维惯性,完全凭借自己的经验来进行设计,但是遇到一些特殊情况,如果仍然依赖思维惯性设计,就会脱离用户基础的需求。因而,设计师在做设计时要结合实际的场景,思考用户的操作体验流程,以及会遇到的问题,并为之进行针对性的优化设计。

(4)抽象思维,提取设计共性,形成创意公式

在设计一系列的功能或玩法的时候,设计师可以抽象思维,去寻找方案中的共性,并逐渐提炼成一个创意模版,就像一个数学的公式,同一个公式可以套在不同题目上进行解答,甚至可以不断的发散,延伸新的解题方式。设计同样如此,如果提炼出了创意公式,就可以在功能和玩法中套用思路,不断的拓展系列性的玩法。

(5)关注用户所喜爱的,通过内容引起传播

网络造梗时代,网友们的创作能力是十分强大的,一个具有话题性的内容往往能引起广泛的传播,如果说是“一个顶俩”是无心之作,那么在后续的画图红包以及其他红包玩法中,我们会更加关注年轻用户喜好的题目类型,去上线一些有一定难度的,并且有一定话题性的内容,满足用户的需求,引起更多的互动和传播。

写在最后

QQ红包作为一个上线多年的功能,从最初的发展期,又逐渐进入成熟期衰落期。而新的玩法推出,让QQ红包又一次获得了更多年轻用户的喜爱,焕发了新的生命。

当然,我们的脚步会不止于此,接下来,我们富有奇思妙想的项目团队会继续不断探索尝试新的QQ红包玩法,给有趣可爱的用户们带来更多的欢乐。

作者:腾讯isux

来源:https://isux.tencent.com/articles/qq-red-envelope.html

题图来自 腾讯isux 官网

IM作为腾讯旗下的通信办公软件,相比QQ更加简洁,省去了大量的娱乐功能,更加专注移动在线办公。但同时TIM也精简了一些我们需要的功能,这让我始终觉得缺了什么。

经过一段时间的使用,我发现好多被精简掉的功能就是H5页面,可以从原版QQ中复制链接,加入TIM收藏,在TIM打开,彻底摆脱QQ。

具体怎么实现呢?我以运动为例讲解具体的方法,现在随我一起做吧!

1.打开动态页面中的运动。

2.长按页面中空白的区域,点击在浏览器打开。

3.关闭一些无用的对话框,点击上方网址栏,复制链接。

4.打开TIM,粘贴链接并打开。

但我们可以发现并没有正确打开我们所需的网址。

原因很简单,这个网页对浏览器做了跳转处理,我们复制的链接是跳转后的网址。并且从图中可以看出复制链接时的网页与原来的并不同。

5.返回QQ,重新打开运动页面,我们需要找找其他的方法。

6.通过探索我们可以发现通过下拉运动红包页面可以显示链接:yundong.qq.com。

7.打开TIM,粘贴链接并打开,发现成功了。

以上就是寻找运动功能链接的过程了。毕竟在TIM中领个运动红包也是不错的。

寻找链接的方法有很多,关键在于细心。这里为之家网友总结了其他一些隐藏的功能链接:

QQ运动:yundong.qq.com

游戏:http://m.gamecenter.qq.com(点击进入手Q游戏中心,需要再次点击下方的“我”)

兴趣部落:https://buluo.qq.com/mobile/buluoindex.html

打卡页面:https://ti.qq.com/signin/public/index.html

TIM换聊天背景:zb.vip.qq.com/sonic/index

如果常用这些功能可以加入TIM收藏,以备下次使用。

语 | 任何技术优化都依托于业务的发展,随着QQ会员增值业务的重心转移到手Q移动端,对H5页面不仅要求加载更快,还需承载丰富多彩的运营活动,同时由于每个页面都意味着KPI收入,任何可能导致页面功能不可用的发布行为都是不可接受的。

本文主要介绍QQ会员的前端开发团队在手Q的hybrid模式下对H5页面的性能优化、组件化和持续集成方面的实践。

随着移动化浪潮的来临,QQ增值业务的重心从PC端PCQQ转移到移动端手机QQ;作为前端开发,我们的工作内容也转移到基于手机QQ的hybrid模式下H5开发工作。

什么是QQ会员?QQ会员是宇宙第一大包月业务,大部分的会员用户都很年轻。大家可以猜一下哪个年龄段的QQ会员用户最多?小学、初中、高中、大学还是白领?所以如果你还不是QQ会员,说明你已经老了 :)

个性张扬是年轻的代名词,QQ会员用户在好友列表中的名字是红色,而且排名靠前,这些都达成了用户的炫耀心理,就连发红包时都拥有右图中的专属的皮肤。

同时QQ会员还有左图中的QQ等级加速更快等特权,买电影票、定外卖还能打折。

其实手机QQ在承担即时通讯等社交功能的同时,还承载着QQ会员数十亿的营收重任,其中大部分的营收都来自于内嵌在手Q中的H5页面,因此保证H5页面的高质量,是我们的工作重点。

保证H5页面的高质量,我们有以下三个挑战:

  • 第一、如何让H5打开更快?雅虎的一项研究表明,页面打开每慢400毫秒,将带来5%-9%的用户流失;让页面更快呈现给用户是前端工程师们的不懈追求,在hybrid模式下借助于终端的能力我们有了更大的想象空间!


  • 第二、如何让H5开发更快?好的产品是运营出来的,沃尔玛每周都有打折,电商有6.18和双11双12,同样QQ会员也需要有持续的H5运营活动以保持用户的活跃和留存,而H5组件化是我们提高开发效率的手段。


  • 第三、如何保证H5页面持续高质量。手机QQ一两个月发布一个版本,但是H5页面每天都有发布,随着H5逻辑越来越复杂,比如不同身份用户(非会员、会员)在不同时间点(到期前和到期后)进入页面时看到的内容都不一样;如何不依赖成本很高的人工测试来保证H5页面的功能持续可用?


首先介绍下我们基于hybrid的sonic方案是如何实现页面在1秒左右打开的。

1、要打开页面,在PC端需要先打开一个浏览器(chrome或者火狐),在android或者IOS应用中必须先有一个webview(图中橙色部分);出于性能考虑手Q并未在后台常驻一个webview进程,所以要打开页面需要先初始化webview。

2、在之前版本的手Q中我们时常可以看到类似左边的白屏,虽然加上了卖萌的文案“别闹,加载是件正经事”让用户感觉萌萌哒,但这掩盖不了曾经webview初始化慢的事实。虽然经过几个版本迭代优化,客户端耗时已经大大降低,但是还需要近900毫秒。好像距离一秒的目标很近了。

3、但是webview初始化完成后,再调用loadUrl接口获取目标URL的HTML内容并进行渲染(图中蓝色部分);由于我们的web层基于PHP语言来实现,一个web请求需要新建一个子进程去查询若干个后台服务,这里的耗时至少需要200毫秒。算一下终端加后台的耗时加起来已经超过一秒了。。虽然没有人能跑的比博尔特更快,但是我们还是有方法来让我们的页面打开更快。

第1个优化是把串行改为并行!我们把终端webview初始化工作并行为两个线程(图中两个橙色块):webview主线程处理主要的初始化工作,而登录态获取、业务插件初始化等工作放在webview子线程,这样终端的耗时就从之前的两部分的耗时之和变成了两部分耗时的最大值。同样在后台我们也新建了一个proxy来代理后台所有服务的查询工作(右侧绿色块),由proxy来并行发起对其他后台服务的查询,proxy的耗时取决于最慢的那个后台服务接口的耗时。

第2个优化是网络耗时的优化。电影英雄中有段对白:剑术的最高境界是心中无剑,手中亦无剑。减少网络耗时最有效的优化方法莫过于不进行网络请求,也就是Cache。

1、虽然浏览器本身有缓存功能,可以通过设置静态文件的缓存时间来减少请求数,但是我们经过数据验证,发现移动端浏览器缓存有时候并不可靠,缓存还未过期也有可能被清掉重新请求。

2、H5标准中也有一个localstorage特性,我们通过扩展seajs的缓存插件实现在localstorage中缓存JS文件,加快了HTML依赖的JS的加载速度。但是HTML本身仍然需要走网络请求。

3、其实手Q也实现了一套离线包机制,用来缓存HTML和图片、CSS、JS等文件,但是只能缓存静态不变的内容,比如刚开始介绍QQ会员时的会员个性化红包页面就利用了离线包的能力。然而我们的页面有很多用户数据(比如会员身份、会员成长值、QQ等级成长速度等)需要实时查询,再加上终端复杂的离线包校验机制耗时很多,我们新建了HTML Cache机制,在终端缓存了整个HTML。

4、有了缓存之后,webview主线程先发起1.1的loadUrl操作展示本地HTML缓存给用户,同时发起1.2的HTTP请求去获取最新的数据内容,如果有变更则通过第3步的jsbridge回调进行页面刷新,同时终端会异步进行第4步的更新本地的HTML Cache。

5、如果页面没有变化,网络耗时仅为加载本地HTML文件的IO时间,这个时间几乎为0;如果页面有变化,由于这里提前并行发起了http请求,网络耗时也比上一页中串行的HTTP直连要少很多。

6、这里还有一个问题,就是如果缓存的HTML内容和最新的内容不一致,我们需要刷新整个页面吗?答案是否定。大家注意下这里第2步返回内容可能是HTML,也有可能是JSON,下一页会介绍为什么。

1、我们将HTML拆分为两部分:模板和数据块。一个数据块对应一段HTML片段(上图中蓝色字部分),用注释语句包裹起来;而数据块以外的部分为模板,一般情况模板的内容比较固定,dom结构、内联的样式等很少变动。

2、比如图中有三个数据块:key1,key2和key3,分别对应这个页面从上到下三个红框框住的部分。

3、刚才有讲到并行HTTP请求回来的内容可能是HTML,也可能是JSON;我们的策略是如果是首次访问本地没有缓存或者缓存被清理则返回完整的HTML;如果模板未变化只是数据块有变化,比如总成长值加了2点,从76660加到76662,或者生活福利模块更换了2个广告位,只需要返回JSON即可,由jsbridge触发页面回调来替换DOM节点实现页面的局部刷新。

3、以上两个优化点需要终端和页面按照统一规则紧密配合,我们通过扩展HTTP协议来实现。

1、我们扩展了4个HTTP协议头,2个请求头和2个返回头。

2、accept-diff表明终端是否支持增量更新的能力,一般传true,对于老版本的手Q,无法携带该头部,后台将会始终返回完整的HTML;template-tag代表终端本地缓存的HTML的SHA1摘要值;

3、template-change代表服务端模板是否有变更,模板和数据块均无变更返回304,模板无变更仅部分数据块有变更时为false,首次和模板变更时都是true;cache-offline是后台告诉终端如何进行页面刷新和本地HTML缓存更新,如果为true代表刷新页面并更新缓存,如果为store,代表仅更新缓存不刷新页面。

下面我们从整个流程上来看一下。

第一种场景是用户首次或者缓存失效时加载页面,用户点击终端入口后,在初始化webview的同时并行发起http链接,在webview初始化好之后会在内核和http流之间建立桥接。内核在读取完毕之后终端根据模板数据拆分规则对html进行内容分割,并记录模板和数据的tags信息,异步HTML为模板和数据用于下次与服务器通信实时更新。

1、第二种场景是用户二次进入页面,这种情况的占比七成以上。webview优先加载HTML缓存,并且根据http(s)返回码的同步状态,进行不同的处理。

2、如果status为200,且返回的是JSON,说明只有数据变更,终端会对数据进行diff处理,和页面通过js通信进行局部刷新。

3、如果发生模板变更,处理逻辑会有点复杂,终端根据在不同机型和网络环境下做智能切换处理,速度较快时会拉取完HTML流交给内核渲染,速度不快时仍然会建立桥接流,并且也会对HTML进行拆分;

4、如果status为304说明完全命中缓存,则不作任何处理;

1、左边的效果是最初页面局部刷新时的表现,我们可以看到加载本地缓存的HTML后很快看到了整个页面,然后成长值发生了变动,然后又更新了两个广告运营位。但是这里的体验还是有点问题的,加载图片需要时间,导致页面的闪动很明显。

2、我们又改进了下,先将图片下载完,再去局部更新这两个广告运营位,最终实现了右边比较平滑的效果。

另外一个图片的优化是图片自适应。

网页中的流量大头是图片,图片加载消耗了很多时间。我们实现了对于同一张图片,终端看一根据用户不同的手机分辨率返回不同规格的图片,而这一切不需要做任何代码修改,完全透明接入。

比如如果你是iPhone 7S,CDN返回750像素的高清大图,如果你还在用iPhone 4S,CDN返回480像素的一般清晰度的小图,这样在保证体验的同时减少了加载的图片大小,页面更快展现给用户。

这个项目内部代号sonic,意思是希望页面加载速度可以像音速一样快。最终我们也实现了占比70%右侧2个场景,局部刷新和完全cache时总耗时1秒左右,而且首次访问时的总耗时也低于之前最左边的HTTP直连。

我们除了让H5页面加载更快,还需要让H5页面开发更快以满足活动运营的需求。

首先我们看一下什么是运营活动?

1、左边第一个活动新游戏即将发布,在预约页面提前预约的用户在游戏发布后下载完成后可以免费领取福利;

2、左边第三个活动,QQ会员可以免费领取一张美团的优惠券;

4、最右边的活动,QQ会员玩天天酷跑游戏可以免费抽奖获取游戏道具;

1、运营活动有四个要求:一般1-2天需要完成开发测试和上线、不同活动可能有相同的功能逻辑,一般会投入大量推广资源所以对页面的质量要求比较高,大量资源推广时并发访问用户多对性能要求比较高。

2、我们的思路是必须尽可能减少开发环节和开发人力,最小化功能逻辑实现颗粒化可复用,对前端代码和后端服务要求稳定可靠,必须持续的前端性能优化。

3、我们的解决方案是构建一个组件化的活动开发平台,内部代号ET

1、第一:减少一切可以减少的环节。一般H5页面的开发流程是交互-设计-重构-开发,我们和交互、设计人员制定好运营活动的交互设计规范,比如统一弹窗样式,从而减少了交互环节;利用H5的新特性canvas自动对设计稿进行切图,又省掉了重构环节。

2、第二:组件化开发。开发人员只需要开发组件,组件可以在不同活动中复用。运营人员只需要拖拽组件、配置资源,最后由执行引擎生成包含活动逻辑的HTML页面,自动发布外网即可。

一个组件由HTML片段,CSS样式和JS逻辑构成;开发人员完成组件开发之后,运营人员像拼积木一样,拖动几个组件组合在一起,就可以生成运营活动页面。

同时ET平台实现了一整套发布回滚流程支持,自动对接页面性能测试工具,可以对运营页面的性能进行自动化测试,最后也会给大家分享下如何进行性能自动化测试的。

该平台上线后,月均上线活动达到300个以上,但全职开发人员投入仅1人。

保证H5页面功能正常,并且让H5页面打开更快,不是一锤子买卖,需要可持续。H5页面的质量不能仅仅靠测试人员的手工测试来保证,我们需要一套自动化解决方案。

1、说到质量标准,IOS9001是我们耳熟能详的国际质量标准,但是H5页面的质量标准是什么?

2、PC时代,我们知道performance api就能比较全面的透视整个页面请求过程的耗时,在hybrid模式下,我们对H5页面高质量的定义是页面功能的高可用和页面加载速度更快。

3、功能高可用需要webview不会crash,页面能够正常打开并且业务逻辑符合预期;页面加载速度更细化,终端耗时、网络耗时、页面耗时,同时需要关注总耗时大于5秒以上的慢用户占比。

1、页面功能可用性的自动化测试,我们构建于腾讯内部自研的自动化测试工具QTA。该工具不仅可以识别android和ios终端的控件,也可以识别web的dom控件,通过对点击事件进行模拟,将实际的返回值同期望值比较以确认用例是否通过。

2、测试人员使用python语言编写自动化测试脚本上传到SVN,由分布式任务管理系统分配可供测试的手机模拟器或真实的手机,测试人员可以手工或者设置定时任务自动执行测试计划。

3、同时我们将web发布系统和任务管理系统进行打通,每次发布前自动进行功能自动化测试,只有在预发布环境的通过率达标才能继续发布,这样就保证了频繁变更时H5页面的功能依然正常。

1、页面性能自动化测试我们参考了很多现有的工具,比如yslow,雅虎前端优化军规以及谷歌的pagespeed,但是发现这些对hybrid模式支持的都不是很好,尤其是我们基于手Q环境下有更多的个性化的东西。

2、我们选择了自研H5页面性能自动化测试工具,简称为WPT,web performance test。参考了yahoo军规,结合终端环境特性和H5业务特性,对H5页面加载的全流程进行发布前测试和发布后回归。

简单回顾下,我们通过H5页面和终端的深度融合实现了H5页面的快速加载,同时通过组件化实现了H5页面的快速开发,使用自动化工具实现了H5页面变更时的持续的高可用和高性能,最终实现了高质量的H5的架构实践。

作者:翟伟,QQ个性化业务前端团队leader,曾参与过超级QQ和QQ会员的前端开发工作,目前负责手机QQ个性装扮的开发工作,拥有近10年的项目架构和实践经验,专注于手机QQ的hybrid模式下H5优化和持续集成方向。