整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Q紅包作為一個(gè)已上線4年的基礎(chǔ)功能，在過去的一段時(shí)間經(jīng)歷了定位轉(zhuǎn)變，用戶數(shù)據(jù)下滑等問題。隨著幾個(gè)新玩法的推出，QQ紅包又重新受到了年輕用戶群體們的關(guān)注和歡迎，成為“沙雕”網(wǎng)友們?nèi)粘５目鞓吩慈?，那么這些玩法是怎么設(shè)計(jì)出來的呢，本文為你揭開背后的故事。
2019年8月中旬，QQ紅包上線了成語接龍玩法，因?yàn)椤耙粋€(gè)頂倆”這個(gè)無解的接龍成語，引發(fā)了網(wǎng)友們的熱議，相關(guān)的話題沖到了知乎當(dāng)日問題熱榜第一位，微博上也有很多的討論和轉(zhuǎn)發(fā)，甚至還有網(wǎng)友自發(fā)創(chuàng)作了相關(guān)的鬼畜視頻和表情包。
8月底，跟隨QQ 8.1.3版本的發(fā)布，QQ紅包又上線了畫圖紅包的玩法，瞬間又引起了網(wǎng)友們的關(guān)注，在沒有任何推廣的情況下，獲得了超高的熱度。靈魂畫手們紛紛登場，寫實(shí)派和抽象派同臺競技，為大家奉獻(xiàn)了一幅幅“精彩”的畫作。
這些紅包玩法受到用戶的歡迎，獲得了許多贊譽(yù)。但是，它們的推出并不是一蹴而就的，而是項(xiàng)目團(tuán)隊(duì)許多次探索和打磨的結(jié)果。那么，這些QQ紅包新玩法是怎么設(shè)計(jì)的呢，現(xiàn)在讓我們揭開背后的故事。
在開始之前，讓我們先了解一下QQ紅包這個(gè)業(yè)務(wù)，QQ紅包是什么？
QQ紅包上線于2015年，初期承擔(dān)著搶占移動支付市場份額的重任，隨著移動支付滲透率的日趨飽和，QQ紅包原來的戰(zhàn)略使命已逐漸淡化。如今，QQ紅包的角色已經(jīng)轉(zhuǎn)變成為一個(gè)QQ社交生態(tài)中的重要社交工具。
不同于微信紅包和支付寶紅包，QQ紅包的用戶群體更加年輕，90后，95后，00后占比達(dá)到了80%。
QQ紅包的用戶群體如此年輕，對于新鮮有趣的事物有著強(qiáng)烈的好奇心，然而QQ紅包原有的拼手氣，專屬紅包，文字口令，語音口令等玩法，上線時(shí)間都已經(jīng)超過2年，用戶對于這些紅包玩法的新鮮感正在逐漸下降。
為了重新給年輕用戶帶來新鮮感，我們明確了QQ紅包的新方向：更加貼合年輕用戶的喜好，不斷拓展紅包新玩法，讓紅包更加年輕化、社交化、娛樂化。
明確了QQ紅包的新方向，那么要如何找到QQ紅包玩法的切入點(diǎn)呢？我們做了許多前期的探索和嘗試。
（1）高效用研，聽取年輕用戶的聲音
我們從身邊的親朋好友尋找QQ紅包的年輕用戶，直接與他們溝通，來獲得他們對QQ紅包的真實(shí)反饋。通過自費(fèi)給予報(bào)酬，或者降低自己的年齡，來拉近與年輕用戶的距離，以此與他們維護(hù)良好的關(guān)系，在后續(xù)的設(shè)計(jì)中，這些年輕用戶給了我們很多的啟發(fā)和建議。
（2）整理問題點(diǎn)，推導(dǎo)設(shè)計(jì)方向
我們通過對年輕用戶進(jìn)行訪談，了解到了QQ紅包現(xiàn)存的3個(gè)主要問題：金額少、場景少、趣味少。
根據(jù)用戶反饋的問題，我們對應(yīng)的推導(dǎo)出了QQ紅包的設(shè)計(jì)方向。
明確了紅包的設(shè)計(jì)方向，我們開始了初步玩法嘗試，以情感化作為切入點(diǎn)，設(shè)計(jì)了語音明信片紅包方案，讓用戶在發(fā)送紅包時(shí)，編輯一張電子賀卡，并錄制語音消息，連同紅包一起發(fā)送出去，以此向好友傳達(dá)金錢之外的祝福、感謝、思念之情。
在完成語音明信片紅包的方案設(shè)計(jì)后，我們找到用戶進(jìn)行快速CE，以驗(yàn)證方案的可行性。驗(yàn)證結(jié)果發(fā)現(xiàn)用戶對這個(gè)玩法不是很感興趣，用戶覺得在發(fā)紅包時(shí)編輯明信片很麻煩，還有一些用戶認(rèn)為明信片已經(jīng)是上個(gè)時(shí)代的事物，不太喜歡以這種形式發(fā)紅包。
情感化的方向不受年輕用戶的歡迎，我們繼續(xù)從互動性和趣味性方向?qū)ふ仪腥朦c(diǎn)。通過與用戶溝通，研究95后，00后相關(guān)調(diào)研報(bào)告，搜集年輕用戶喜好的興趣點(diǎn)，并從中篩選出可行紅包玩法的切入點(diǎn)。
通過對比和篩選，我們最終確認(rèn)了“K歌”這個(gè)切入點(diǎn)。主要有兩個(gè)考慮點(diǎn)，一個(gè)是互動性，商場迷你KTV的興起，使得K歌成為年輕用戶社交互動的熱門選擇。另一個(gè)是趣味性，我們可以與全民K歌合作，采用全民K歌的評分技術(shù)，設(shè)定領(lǐng)取紅包的門檻。
K歌紅包的主要玩法：唱歌達(dá)標(biāo)領(lǐng)紅包，發(fā)紅包者選擇歌曲片段與紅包一同發(fā)出，領(lǐng)紅包的人需要唱出歌曲，并且K歌評分達(dá)標(biāo)之后才可領(lǐng)取紅包。
在結(jié)合K歌玩法和QQ紅包的過程中遇到了許多問題，我們對體驗(yàn)細(xì)節(jié)進(jìn)行了打磨。
（1）保證紅包基本玩法：搶
對于紅包而言，快速搶到紅包仍然是最基本的玩法。常規(guī)的K歌，唱完一首歌大概要3-4分鐘，難度大且投入成本高，用戶會因?yàn)閾?dān)心紅包被搶光而失去耐心。這里我們只截取每首歌的副歌高潮片段，時(shí)長為8-20s，并外顯這一時(shí)長信息，讓用戶沒有心里負(fù)擔(dān)，可以快速唱完并成功搶到紅包。
（2）做減法
全民K歌的K歌主界面有十分豐富的功能，如果全部照搬到QQ紅包上，會給領(lǐng)紅包的流程造成干擾。我們把不必要的功能全部剔除，只保留核心的K歌體驗(yàn)，讓用戶減少決策，更專注于搶紅包本身。
（3）結(jié)合實(shí)際場景思考
在進(jìn)行紅包玩法設(shè)計(jì)時(shí)，我們會更多的思考用戶領(lǐng)紅包的實(shí)際場景，而不是依賴思維慣性而設(shè)計(jì)。舉個(gè)例子，K歌紅包領(lǐng)取紅包的主要交互操作，初期有兩個(gè)選擇，一個(gè)是按住button唱歌，另一個(gè)是點(diǎn)擊button唱歌。
因?yàn)镼Q語音口令紅包，以及QQ發(fā)送語音消息，都是按住說話，如果按照思維慣性會選擇按住button的方案，但是結(jié)合實(shí)際場景思考，如果按住button唱歌，屏幕離眼睛太近，用戶很難看清紅包封皮上的歌詞，所以我們最終選擇了點(diǎn)擊button開始唱歌的方案。
（4）增強(qiáng)用戶間的多向互動
原本發(fā)紅包的互動，是發(fā)紅包者和收紅包者之間的雙向互動，收紅包的人搶到紅包后，會回復(fù)文字“謝謝老板”或是一個(gè)感謝表情包，互動的形式較為單一。
新的K歌紅包玩法，用戶K歌的片段以語音的形式發(fā)送到聊天窗，并且展示K歌的評分，這樣讓發(fā)紅包的人更有滿足感，能引起收紅包者之間的互動討論，甚至能激發(fā)用戶的競爭排位心理。
這樣一來，不僅僅是發(fā)紅包和收紅包者之間的雙向互動，還有收紅包人之間的多向互動。K歌紅包玩法上線后，受到了用戶的歡迎，許多用戶喜歡用《學(xué)貓叫》這首歌來“戲弄”好友。
根據(jù)K歌紅包的經(jīng)驗(yàn)，項(xiàng)目團(tuán)隊(duì)開始有意識的尋找紅包玩法方案的共性，逐步抽象提煉出一個(gè)紅包玩法的創(chuàng)意公式：互動性+趣味性+基礎(chǔ)紅包=新紅包玩法。
其中，互動性是指從年輕用戶喜好的事物篩選，尋找可以激發(fā)用戶產(chǎn)生互動的切入點(diǎn)；趣味性是指技術(shù)手段可實(shí)現(xiàn)的，設(shè)定一定的紅包領(lǐng)取門檻，讓用戶更有參與感。
具體的玩法流程，則是發(fā)紅包的用戶在輸入紅包金額后，選擇一個(gè)互動內(nèi)容/題目，通過技術(shù)手段設(shè)定領(lǐng)取門檻；收紅包的用戶需要進(jìn)行操作，并匹配上預(yù)設(shè)的門檻，才可成功領(lǐng)取紅包；而操作的過程會生成內(nèi)容，并發(fā)送到聊天窗口，讓用戶間產(chǎn)生多向互動。
以紅包玩法創(chuàng)意公式作為設(shè)計(jì)思路，項(xiàng)目團(tuán)隊(duì)又一起共同腦暴細(xì)化方案，推出了表情紅包，以及本文開頭提到的接龍紅包，畫圖紅包玩法。
做表情領(lǐng)紅包，用戶在發(fā)紅包時(shí)選擇一個(gè)表情模版與紅包金額一同發(fā)出，領(lǐng)紅包的人需要打開手機(jī)攝像頭，并根據(jù)表情模版做出對應(yīng)的表情動作，通過面部/動作識別技術(shù)，判定所做的表情匹配模版后才可領(lǐng)取紅包，領(lǐng)紅包用戶所做的表情也會生成一張表情gif圖發(fā)送到聊天窗中。
（1）做減法：減少用戶DIY，預(yù)設(shè)內(nèi)容模版
市面上制作表情gif的app，支持用戶DIY內(nèi)容，但是在領(lǐng)紅包的場景，用戶更關(guān)注紅包本身，因而需要做減法，減少用戶的操作。為此，我們根據(jù)不同的表情模版配置好對應(yīng)的濾鏡，貼紙和特效等內(nèi)容，用戶只需一步操作，就可以錄制生成一個(gè)效果完整的gif表情，并成功領(lǐng)取到紅包。
（2）結(jié)合實(shí)際場景思考：讓用戶先預(yù)覽表gif效果
因?yàn)橛脩襞臄z生成的表情gif，最終會發(fā)送到聊天窗口中，考慮到用戶對自己個(gè)人形象的重視，所以在用戶的表情被成功識別后，我們先讓用戶預(yù)覽表情gif的呈現(xiàn)效果，此時(shí)用戶可以選擇重新拍攝一個(gè)更滿意的效果，也可以點(diǎn)擊button直接領(lǐng)取紅包。
接龍成語領(lǐng)紅包，用戶在發(fā)紅包時(shí)選擇一個(gè)成語與紅包金額一同發(fā)出，領(lǐng)紅包的人需要根據(jù)初始成語的末字拼音進(jìn)行接力，通過拼音抓取識別技術(shù)，判定接龍成語拼音一致即可領(lǐng)取紅包，下一個(gè)領(lǐng)紅包的用戶，需要接龍上一個(gè)人的成語繼續(xù)領(lǐng)取紅包，以此類推，直至該紅包被領(lǐng)完。
結(jié)合實(shí)際場景思考：拼音提示信息實(shí)時(shí)更新
在群聊中搶接龍紅包，有很大幾率會出現(xiàn)一種情況，就是用戶根據(jù)上一成語的拼音開始輸入接龍成語時(shí)，該拼音的接龍成語已經(jīng)被其他群友搶先輸入，并已領(lǐng)取到紅包了，此時(shí)如果用戶還是按最開始的拼音輸入，無法搶到紅包，體驗(yàn)會十分糟糕。
這里我們在輸入框上方做了一個(gè)小浮層設(shè)計(jì)，用戶點(diǎn)擊領(lǐng)取紅包，小浮層出現(xiàn)并展示下一個(gè)接龍成語的拼音，給予用戶一個(gè)快速提示。除此之外，這個(gè)浮層的拼音內(nèi)容是根據(jù)最近的接力成語而變化的，這樣用戶只需關(guān)注浮層上的拼音內(nèi)容，就可以輸入當(dāng)前正確的接力成語，從而成功領(lǐng)取到紅包。
畫圖領(lǐng)紅包，用戶在發(fā)紅包時(shí)選擇一個(gè)畫圖題目與紅包金額一同發(fā)出，領(lǐng)紅包的人需要根據(jù)題目進(jìn)行作畫，通過AI圖像識別技術(shù)，判定所畫的內(nèi)容匹配畫圖題目即可領(lǐng)取紅包，領(lǐng)紅包用戶所畫的作品生成一張圖片發(fā)送到聊天窗中。
（1）做減法：減少用戶設(shè)置，隨機(jī)畫筆顏色
在設(shè)計(jì)初期，項(xiàng)目組為了讓用戶的畫作表現(xiàn)力更加豐富，曾考慮可以讓用戶自主調(diào)整畫筆筆觸的大小，畫筆顏色，以及畫板的背顏色景等。經(jīng)過討論，確定仍遵循了“做減法”的設(shè)計(jì)原則，減少用戶對畫筆和畫板的設(shè)置，選用隨機(jī)畫筆色彩這一方案，來保證用戶畫作的差異性和豐富性。
（2）結(jié)合實(shí)際場景思考：識別成功后，繼續(xù)完善畫作再搶紅包
畫圖紅包采用了AI圖像識別技術(shù)，只需要識別到畫面中對應(yīng)題目的特征，就可以判定用戶繪畫成功并可領(lǐng)取紅包。但是也會引發(fā)一個(gè)問題，就是用戶有時(shí)只需畫一筆，比如鯊魚的背鰭，AI技術(shù)就可以判定用戶繪畫成功。這對于那些想要表現(xiàn)自己高超畫技的用戶而言是十分掃興的，為了照顧這部分用戶的感受，我們在AI識別成功畫作后，支持讓用戶繼續(xù)作畫，豐富更多的細(xì)節(jié)，并發(fā)到QQ群中去獲得贊美。
當(dāng)然，對于那些只想快速搶到紅包，并且不在意自己被稱為“靈魂畫手”的用戶，在AI識別成功后，也可以直接點(diǎn)擊領(lǐng)取紅包。
（3）增強(qiáng)用戶間互動：給畫作評分
與K歌紅包一樣，畫圖紅包后續(xù)期望能引入繪畫評分技術(shù)，屆時(shí)畫的越好的用戶，獲得的評分越高，這樣能讓大觸們可以一展身手，也能激發(fā)用戶畫出更好的作品，引發(fā)更多的互動和討論。
這些QQ紅包新玩法上線之后，數(shù)據(jù)上都有爆發(fā)的增長，它們拓展了用戶的社交方式，刺激了群成員之間的互動，表情紅包成了用戶收割好友表情包的利器，接龍紅包讓大家重拾對成語的熱情，還有小學(xué)教師用接龍紅包進(jìn)行成語教學(xué)，受到了小學(xué)生們的歡迎，而畫圖紅包則讓一眾靈魂畫手們得以揮灑天賦，成了“沙雕”網(wǎng)友們的快樂源泉。
隨著紅包玩法的不斷拓展，一些體驗(yàn)問題開始暴露，我們又進(jìn)行全局性的梳理，對紅包進(jìn)行了體驗(yàn)優(yōu)化。
（1）拓展性
紅包玩法的不斷豐富，使得原有發(fā)紅包頁面框架無法繼續(xù)滿足新增的紅包玩法。為了保證發(fā)紅包頁面的拓展性，我們在頁面上劃分了內(nèi)容區(qū)域，其中固定內(nèi)容是紅包金額、個(gè)數(shù)這兩個(gè)必要信息，而變動內(nèi)容是紅包玩法信息，例如表情模版，歌曲片段等。
劃分內(nèi)容區(qū)域后，固定內(nèi)容區(qū)域信息不變，而變動內(nèi)容區(qū)域可以根據(jù)不同的紅包玩法而切換，以此發(fā)紅包頁面框架的拓展性，可以不斷兼容新的紅包玩法。
（2）一致性
因?yàn)闅v經(jīng)不同設(shè)計(jì)師，各個(gè)紅包玩法的領(lǐng)取彈窗樣式，交互體驗(yàn)不一致，我們又劃定了紅包領(lǐng)取彈窗的玩法內(nèi)容區(qū)域，統(tǒng)一主操作button的樣式，精簡提示文案，讓各個(gè)紅包玩法的領(lǐng)取彈窗保持一致，給用戶傳一致的QQ紅包品牌感。
（3）趣味性和儀式感
在后續(xù)的紅包設(shè)計(jì)中，我們也會在紅包中做一些趣味性和儀式感嘗試。比如在發(fā)紅包時(shí)，紅包頁面的背景或輸入框的顏色隨著金額的大小而變化，金額越大變化越強(qiáng)烈，讓這個(gè)隱藏的小彩蛋給那些發(fā)大金額紅包的用戶一種尊貴感和滿足感。
除此之外，我們希望在收發(fā)紅包流程能給予用戶儀式感，比如封裝，拆開紅包的動效，適度加長拆開紅包的等待過程，營造一種拆紅包的儀式，以及收到紅包金額后的音效和光效等。通過多個(gè)儀式感元素的運(yùn)用，讓用戶能在發(fā)紅包和收紅包中有更愉悅的體驗(yàn)。
（1）創(chuàng)新不只是全新創(chuàng)造，也可以是結(jié)合和轉(zhuǎn)化
K歌，自制表情包，成語接龍，以及AI識圖其實(shí)并不是新鮮事物，但是結(jié)合了紅包玩法，融入了搶紅包拼手氣的屬性，就有了更強(qiáng)的競爭性和互動性。所以，創(chuàng)新可以不是全新創(chuàng)造，也可以是把現(xiàn)有的技術(shù)和玩法的做結(jié)合，或者進(jìn)行轉(zhuǎn)化，只要是這件事原來沒人做過，就可以稱之為創(chuàng)新。
（2）維護(hù)用戶群，隨時(shí)做用研
設(shè)計(jì)師可以通過身邊的親朋好友尋找用戶，并維護(hù)一個(gè)隨時(shí)可以進(jìn)行用研的用戶群體。這樣一來，我們可以快速的驗(yàn)證設(shè)計(jì)方案，為方案決策提供依據(jù)，或者用于推動和說服項(xiàng)目成員，從而提升設(shè)計(jì)的決策效率。
（3）結(jié)合實(shí)際場景思考，而不是依賴設(shè)計(jì)經(jīng)驗(yàn)
長時(shí)間的支持某個(gè)項(xiàng)目的設(shè)計(jì)，設(shè)計(jì)師會很容易形成思維慣性，完全憑借自己的經(jīng)驗(yàn)來進(jìn)行設(shè)計(jì)，但是遇到一些特殊情況，如果仍然依賴思維慣性設(shè)計(jì)，就會脫離用戶基礎(chǔ)的需求。因而，設(shè)計(jì)師在做設(shè)計(jì)時(shí)要結(jié)合實(shí)際的場景，思考用戶的操作體驗(yàn)流程，以及會遇到的問題，并為之進(jìn)行針對性的優(yōu)化設(shè)計(jì)。
（4）抽象思維，提取設(shè)計(jì)共性，形成創(chuàng)意公式
在設(shè)計(jì)一系列的功能或玩法的時(shí)候，設(shè)計(jì)師可以抽象思維，去尋找方案中的共性，并逐漸提煉成一個(gè)創(chuàng)意模版，就像一個(gè)數(shù)學(xué)的公式，同一個(gè)公式可以套在不同題目上進(jìn)行解答，甚至可以不斷的發(fā)散，延伸新的解題方式。設(shè)計(jì)同樣如此，如果提煉出了創(chuàng)意公式，就可以在功能和玩法中套用思路，不斷的拓展系列性的玩法。
（5）關(guān)注用戶所喜愛的，通過內(nèi)容引起傳播
網(wǎng)絡(luò)造梗時(shí)代，網(wǎng)友們的創(chuàng)作能力是十分強(qiáng)大的，一個(gè)具有話題性的內(nèi)容往往能引起廣泛的傳播，如果說是“一個(gè)頂倆”是無心之作，那么在后續(xù)的畫圖紅包以及其他紅包玩法中，我們會更加關(guān)注年輕用戶喜好的題目類型，去上線一些有一定難度的，并且有一定話題性的內(nèi)容，滿足用戶的需求，引起更多的互動和傳播。
QQ紅包作為一個(gè)上線多年的功能，從最初的發(fā)展期，又逐漸進(jìn)入成熟期衰落期。而新的玩法推出，讓QQ紅包又一次獲得了更多年輕用戶的喜愛，煥發(fā)了新的生命。
當(dāng)然，我們的腳步會不止于此，接下來，我們富有奇思妙想的項(xiàng)目團(tuán)隊(duì)會繼續(xù)不斷探索嘗試新的QQ紅包玩法，給有趣可愛的用戶們帶來更多的歡樂。
作者：騰訊isux
來源：https://isux.tencent.com/articles/qq-red-envelope.html
題圖來自 騰訊isux 官網(wǎng)
IM作為騰訊旗下的通信辦公軟件，相比QQ更加簡潔，省去了大量的娛樂功能，更加專注移動在線辦公。但同時(shí)TIM也精簡了一些我們需要的功能，這讓我始終覺得缺了什么。
經(jīng)過一段時(shí)間的使用，我發(fā)現(xiàn)好多被精簡掉的功能就是H5頁面，可以從原版QQ中復(fù)制鏈接，加入TIM收藏，在TIM打開，徹底擺脫QQ。
具體怎么實(shí)現(xiàn)呢？我以運(yùn)動為例講解具體的方法，現(xiàn)在隨我一起做吧！
1.打開動態(tài)頁面中的運(yùn)動。
2.長按頁面中空白的區(qū)域，點(diǎn)擊在瀏覽器打開。
3.關(guān)閉一些無用的對話框，點(diǎn)擊上方網(wǎng)址欄，復(fù)制鏈接。
4.打開TIM，粘貼鏈接并打開。
但我們可以發(fā)現(xiàn)并沒有正確打開我們所需的網(wǎng)址。
原因很簡單，這個(gè)網(wǎng)頁對瀏覽器做了跳轉(zhuǎn)處理，我們復(fù)制的鏈接是跳轉(zhuǎn)后的網(wǎng)址。并且從圖中可以看出復(fù)制鏈接時(shí)的網(wǎng)頁與原來的并不同。
5.返回QQ，重新打開運(yùn)動頁面，我們需要找找其他的方法。
6.通過探索我們可以發(fā)現(xiàn)通過下拉運(yùn)動紅包頁面可以顯示鏈接：yundong.qq.com。
7.打開TIM，粘貼鏈接并打開，發(fā)現(xiàn)成功了。
以上就是尋找運(yùn)動功能鏈接的過程了。畢竟在TIM中領(lǐng)個(gè)運(yùn)動紅包也是不錯的。
尋找鏈接的方法有很多，關(guān)鍵在于細(xì)心。這里為之家網(wǎng)友總結(jié)了其他一些隱藏的功能鏈接：
QQ運(yùn)動：yundong.qq.com
游戲：http://m.gamecenter.qq.com（點(diǎn)擊進(jìn)入手Q游戲中心，需要再次點(diǎn)擊下方的“我”）
興趣部落：https://buluo.qq.com/mobile/buluoindex.html
打卡頁面：https://ti.qq.com/signin/public/index.html
TIM換聊天背景：zb.vip.qq.com/sonic/index
如果常用這些功能可以加入TIM收藏，以備下次使用。
語 | 任何技術(shù)優(yōu)化都依托于業(yè)務(wù)的發(fā)展，隨著QQ會員增值業(yè)務(wù)的重心轉(zhuǎn)移到手Q移動端，對H5頁面不僅要求加載更快，還需承載豐富多彩的運(yùn)營活動，同時(shí)由于每個(gè)頁面都意味著KPI收入，任何可能導(dǎo)致頁面功能不可用的發(fā)布行為都是不可接受的。
本文主要介紹QQ會員的前端開發(fā)團(tuán)隊(duì)在手Q的hybrid模式下對H5頁面的性能優(yōu)化、組件化和持續(xù)集成方面的實(shí)踐。
隨著移動化浪潮的來臨，QQ增值業(yè)務(wù)的重心從PC端PCQQ轉(zhuǎn)移到移動端手機(jī)QQ；作為前端開發(fā)，我們的工作內(nèi)容也轉(zhuǎn)移到基于手機(jī)QQ的hybrid模式下H5開發(fā)工作。
什么是QQ會員？QQ會員是宇宙第一大包月業(yè)務(wù)，大部分的會員用戶都很年輕。大家可以猜一下哪個(gè)年齡段的QQ會員用戶最多？小學(xué)、初中、高中、大學(xué)還是白領(lǐng)？所以如果你還不是QQ會員，說明你已經(jīng)老了 :)
個(gè)性張揚(yáng)是年輕的代名詞，QQ會員用戶在好友列表中的名字是紅色，而且排名靠前，這些都達(dá)成了用戶的炫耀心理，就連發(fā)紅包時(shí)都擁有右圖中的專屬的皮膚。
同時(shí)QQ會員還有左圖中的QQ等級加速更快等特權(quán)，買電影票、定外賣還能打折。
其實(shí)手機(jī)QQ在承擔(dān)即時(shí)通訊等社交功能的同時(shí)，還承載著QQ會員數(shù)十億的營收重任，其中大部分的營收都來自于內(nèi)嵌在手Q中的H5頁面，因此保證H5頁面的高質(zhì)量，是我們的工作重點(diǎn)。
保證H5頁面的高質(zhì)量，我們有以下三個(gè)挑戰(zhàn)：
第一、如何讓H5打開更快？雅虎的一項(xiàng)研究表明，頁面打開每慢400毫秒，將帶來5%-9%的用戶流失；讓頁面更快呈現(xiàn)給用戶是前端工程師們的不懈追求，在hybrid模式下借助于終端的能力我們有了更大的想象空間！
第二、如何讓H5開發(fā)更快？好的產(chǎn)品是運(yùn)營出來的，沃爾瑪每周都有打折，電商有6.18和雙11雙12，同樣QQ會員也需要有持續(xù)的H5運(yùn)營活動以保持用戶的活躍和留存，而H5組件化是我們提高開發(fā)效率的手段。
第三、如何保證H5頁面持續(xù)高質(zhì)量。手機(jī)QQ一兩個(gè)月發(fā)布一個(gè)版本，但是H5頁面每天都有發(fā)布，隨著H5邏輯越來越復(fù)雜，比如不同身份用戶（非會員、會員）在不同時(shí)間點(diǎn)（到期前和到期后）進(jìn)入頁面時(shí)看到的內(nèi)容都不一樣；如何不依賴成本很高的人工測試來保證H5頁面的功能持續(xù)可用？
首先介紹下我們基于hybrid的sonic方案是如何實(shí)現(xiàn)頁面在1秒左右打開的。
1、要打開頁面，在PC端需要先打開一個(gè)瀏覽器（chrome或者火狐），在android或者IOS應(yīng)用中必須先有一個(gè)webview（圖中橙色部分）；出于性能考慮手Q并未在后臺常駐一個(gè)webview進(jìn)程，所以要打開頁面需要先初始化webview。
2、在之前版本的手Q中我們時(shí)?？梢钥吹筋愃谱筮叺陌灼?，雖然加上了賣萌的文案“別鬧，加載是件正經(jīng)事”讓用戶感覺萌萌噠，但這掩蓋不了曾經(jīng)webview初始化慢的事實(shí)。雖然經(jīng)過幾個(gè)版本迭代優(yōu)化，客戶端耗時(shí)已經(jīng)大大降低，但是還需要近900毫秒。好像距離一秒的目標(biāo)很近了。
3、但是webview初始化完成后，再調(diào)用loadUrl接口獲取目標(biāo)URL的HTML內(nèi)容并進(jìn)行渲染（圖中藍(lán)色部分）；由于我們的web層基于PHP語言來實(shí)現(xiàn)，一個(gè)web請求需要新建一個(gè)子進(jìn)程去查詢?nèi)舾蓚€(gè)后臺服務(wù)，這里的耗時(shí)至少需要200毫秒。算一下終端加后臺的耗時(shí)加起來已經(jīng)超過一秒了。。雖然沒有人能跑的比博爾特更快，但是我們還是有方法來讓我們的頁面打開更快。
第1個(gè)優(yōu)化是把串行改為并行！我們把終端webview初始化工作并行為兩個(gè)線程（圖中兩個(gè)橙色塊）：webview主線程處理主要的初始化工作，而登錄態(tài)獲取、業(yè)務(wù)插件初始化等工作放在webview子線程，這樣終端的耗時(shí)就從之前的兩部分的耗時(shí)之和變成了兩部分耗時(shí)的最大值。同樣在后臺我們也新建了一個(gè)proxy來代理后臺所有服務(wù)的查詢工作（右側(cè)綠色塊），由proxy來并行發(fā)起對其他后臺服務(wù)的查詢，proxy的耗時(shí)取決于最慢的那個(gè)后臺服務(wù)接口的耗時(shí)。
第2個(gè)優(yōu)化是網(wǎng)絡(luò)耗時(shí)的優(yōu)化。電影英雄中有段對白：劍術(shù)的最高境界是心中無劍，手中亦無劍。減少網(wǎng)絡(luò)耗時(shí)最有效的優(yōu)化方法莫過于不進(jìn)行網(wǎng)絡(luò)請求，也就是Cache。
1、雖然瀏覽器本身有緩存功能，可以通過設(shè)置靜態(tài)文件的緩存時(shí)間來減少請求數(shù)，但是我們經(jīng)過數(shù)據(jù)驗(yàn)證，發(fā)現(xiàn)移動端瀏覽器緩存有時(shí)候并不可靠，緩存還未過期也有可能被清掉重新請求。
2、H5標(biāo)準(zhǔn)中也有一個(gè)localstorage特性，我們通過擴(kuò)展seajs的緩存插件實(shí)現(xiàn)在localstorage中緩存JS文件，加快了HTML依賴的JS的加載速度。但是HTML本身仍然需要走網(wǎng)絡(luò)請求。
3、其實(shí)手Q也實(shí)現(xiàn)了一套離線包機(jī)制，用來緩存HTML和圖片、CSS、JS等文件，但是只能緩存靜態(tài)不變的內(nèi)容，比如剛開始介紹QQ會員時(shí)的會員個(gè)性化紅包頁面就利用了離線包的能力。然而我們的頁面有很多用戶數(shù)據(jù)（比如會員身份、會員成長值、QQ等級成長速度等）需要實(shí)時(shí)查詢，再加上終端復(fù)雜的離線包校驗(yàn)機(jī)制耗時(shí)很多，我們新建了HTML Cache機(jī)制，在終端緩存了整個(gè)HTML。
4、有了緩存之后，webview主線程先發(fā)起1.1的loadUrl操作展示本地HTML緩存給用戶，同時(shí)發(fā)起1.2的HTTP請求去獲取最新的數(shù)據(jù)內(nèi)容，如果有變更則通過第3步的jsbridge回調(diào)進(jìn)行頁面刷新，同時(shí)終端會異步進(jìn)行第4步的更新本地的HTML Cache。
5、如果頁面沒有變化，網(wǎng)絡(luò)耗時(shí)僅為加載本地HTML文件的IO時(shí)間，這個(gè)時(shí)間幾乎為0；如果頁面有變化，由于這里提前并行發(fā)起了http請求，網(wǎng)絡(luò)耗時(shí)也比上一頁中串行的HTTP直連要少很多。
6、這里還有一個(gè)問題，就是如果緩存的HTML內(nèi)容和最新的內(nèi)容不一致，我們需要刷新整個(gè)頁面嗎？答案是否定。大家注意下這里第2步返回內(nèi)容可能是HTML，也有可能是JSON，下一頁會介紹為什么。
1、我們將HTML拆分為兩部分：模板和數(shù)據(jù)塊。一個(gè)數(shù)據(jù)塊對應(yīng)一段HTML片段（上圖中藍(lán)色字部分），用注釋語句包裹起來；而數(shù)據(jù)塊以外的部分為模板，一般情況模板的內(nèi)容比較固定，dom結(jié)構(gòu)、內(nèi)聯(lián)的樣式等很少變動。
2、比如圖中有三個(gè)數(shù)據(jù)塊：key1，key2和key3，分別對應(yīng)這個(gè)頁面從上到下三個(gè)紅框框住的部分。
3、剛才有講到并行HTTP請求回來的內(nèi)容可能是HTML，也可能是JSON；我們的策略是如果是首次訪問本地沒有緩存或者緩存被清理則返回完整的HTML；如果模板未變化只是數(shù)據(jù)塊有變化，比如總成長值加了2點(diǎn)，從76660加到76662，或者生活福利模塊更換了2個(gè)廣告位，只需要返回JSON即可，由jsbridge觸發(fā)頁面回調(diào)來替換DOM節(jié)點(diǎn)實(shí)現(xiàn)頁面的局部刷新。
3、以上兩個(gè)優(yōu)化點(diǎn)需要終端和頁面按照統(tǒng)一規(guī)則緊密配合，我們通過擴(kuò)展HTTP協(xié)議來實(shí)現(xiàn)。
1、我們擴(kuò)展了4個(gè)HTTP協(xié)議頭，2個(gè)請求頭和2個(gè)返回頭。
2、accept-diff表明終端是否支持增量更新的能力，一般傳true，對于老版本的手Q，無法攜帶該頭部，后臺將會始終返回完整的HTML；template-tag代表終端本地緩存的HTML的SHA1摘要值；
3、template-change代表服務(wù)端模板是否有變更，模板和數(shù)據(jù)塊均無變更返回304，模板無變更僅部分?jǐn)?shù)據(jù)塊有變更時(shí)為false，首次和模板變更時(shí)都是true；cache-offline是后臺告訴終端如何進(jìn)行頁面刷新和本地HTML緩存更新，如果為true代表刷新頁面并更新緩存，如果為store，代表僅更新緩存不刷新頁面。
下面我們從整個(gè)流程上來看一下。
第一種場景是用戶首次或者緩存失效時(shí)加載頁面，用戶點(diǎn)擊終端入口后，在初始化webview的同時(shí)并行發(fā)起http鏈接，在webview初始化好之后會在內(nèi)核和http流之間建立橋接。內(nèi)核在讀取完畢之后終端根據(jù)模板數(shù)據(jù)拆分規(guī)則對html進(jìn)行內(nèi)容分割，并記錄模板和數(shù)據(jù)的tags信息，異步HTML為模板和數(shù)據(jù)用于下次與服務(wù)器通信實(shí)時(shí)更新。
1、第二種場景是用戶二次進(jìn)入頁面，這種情況的占比七成以上。webview優(yōu)先加載HTML緩存，并且根據(jù)http(s)返回碼的同步狀態(tài)，進(jìn)行不同的處理。
2、如果status為200，且返回的是JSON，說明只有數(shù)據(jù)變更，終端會對數(shù)據(jù)進(jìn)行diff處理，和頁面通過js通信進(jìn)行局部刷新。
3、如果發(fā)生模板變更，處理邏輯會有點(diǎn)復(fù)雜，終端根據(jù)在不同機(jī)型和網(wǎng)絡(luò)環(huán)境下做智能切換處理，速度較快時(shí)會拉取完HTML流交給內(nèi)核渲染，速度不快時(shí)仍然會建立橋接流，并且也會對HTML進(jìn)行拆分；
4、如果status為304說明完全命中緩存，則不作任何處理；
1、左邊的效果是最初頁面局部刷新時(shí)的表現(xiàn)，我們可以看到加載本地緩存的HTML后很快看到了整個(gè)頁面，然后成長值發(fā)生了變動，然后又更新了兩個(gè)廣告運(yùn)營位。但是這里的體驗(yàn)還是有點(diǎn)問題的，加載圖片需要時(shí)間，導(dǎo)致頁面的閃動很明顯。
2、我們又改進(jìn)了下，先將圖片下載完，再去局部更新這兩個(gè)廣告運(yùn)營位，最終實(shí)現(xiàn)了右邊比較平滑的效果。
另外一個(gè)圖片的優(yōu)化是圖片自適應(yīng)。
網(wǎng)頁中的流量大頭是圖片，圖片加載消耗了很多時(shí)間。我們實(shí)現(xiàn)了對于同一張圖片，終端看一根據(jù)用戶不同的手機(jī)分辨率返回不同規(guī)格的圖片，而這一切不需要做任何代碼修改，完全透明接入。
比如如果你是iPhone 7S，CDN返回750像素的高清大圖，如果你還在用iPhone 4S，CDN返回480像素的一般清晰度的小圖，這樣在保證體驗(yàn)的同時(shí)減少了加載的圖片大小，頁面更快展現(xiàn)給用戶。
這個(gè)項(xiàng)目內(nèi)部代號sonic，意思是希望頁面加載速度可以像音速一樣快。最終我們也實(shí)現(xiàn)了占比70%右側(cè)2個(gè)場景，局部刷新和完全cache時(shí)總耗時(shí)1秒左右，而且首次訪問時(shí)的總耗時(shí)也低于之前最左邊的HTTP直連。
我們除了讓H5頁面加載更快，還需要讓H5頁面開發(fā)更快以滿足活動運(yùn)營的需求。
首先我們看一下什么是運(yùn)營活動？
1、左邊第一個(gè)活動新游戲即將發(fā)布，在預(yù)約頁面提前預(yù)約的用戶在游戲發(fā)布后下載完成后可以免費(fèi)領(lǐng)取福利；
2、左邊第三個(gè)活動，QQ會員可以免費(fèi)領(lǐng)取一張美團(tuán)的優(yōu)惠券；
4、最右邊的活動，QQ會員玩天天酷跑游戲可以免費(fèi)抽獎獲取游戲道具；
1、運(yùn)營活動有四個(gè)要求：一般1-2天需要完成開發(fā)測試和上線、不同活動可能有相同的功能邏輯，一般會投入大量推廣資源所以對頁面的質(zhì)量要求比較高，大量資源推廣時(shí)并發(fā)訪問用戶多對性能要求比較高。
2、我們的思路是必須盡可能減少開發(fā)環(huán)節(jié)和開發(fā)人力，最小化功能邏輯實(shí)現(xiàn)顆?；蓮?fù)用，對前端代碼和后端服務(wù)要求穩(wěn)定可靠，必須持續(xù)的前端性能優(yōu)化。
3、我們的解決方案是構(gòu)建一個(gè)組件化的活動開發(fā)平臺，內(nèi)部代號ET
1、第一：減少一切可以減少的環(huán)節(jié)。一般H5頁面的開發(fā)流程是交互-設(shè)計(jì)-重構(gòu)-開發(fā)，我們和交互、設(shè)計(jì)人員制定好運(yùn)營活動的交互設(shè)計(jì)規(guī)范，比如統(tǒng)一彈窗樣式，從而減少了交互環(huán)節(jié)；利用H5的新特性canvas自動對設(shè)計(jì)稿進(jìn)行切圖，又省掉了重構(gòu)環(huán)節(jié)。
2、第二：組件化開發(fā)。開發(fā)人員只需要開發(fā)組件，組件可以在不同活動中復(fù)用。運(yùn)營人員只需要拖拽組件、配置資源，最后由執(zhí)行引擎生成包含活動邏輯的HTML頁面，自動發(fā)布外網(wǎng)即可。
一個(gè)組件由HTML片段，CSS樣式和JS邏輯構(gòu)成；開發(fā)人員完成組件開發(fā)之后，運(yùn)營人員像拼積木一樣，拖動幾個(gè)組件組合在一起，就可以生成運(yùn)營活動頁面。
同時(shí)ET平臺實(shí)現(xiàn)了一整套發(fā)布回滾流程支持，自動對接頁面性能測試工具，可以對運(yùn)營頁面的性能進(jìn)行自動化測試，最后也會給大家分享下如何進(jìn)行性能自動化測試的。
該平臺上線后，月均上線活動達(dá)到300個(gè)以上，但全職開發(fā)人員投入僅1人。
保證H5頁面功能正常，并且讓H5頁面打開更快，不是一錘子買賣，需要可持續(xù)。H5頁面的質(zhì)量不能僅僅靠測試人員的手工測試來保證，我們需要一套自動化解決方案。
1、說到質(zhì)量標(biāo)準(zhǔn)，IOS9001是我們耳熟能詳?shù)膰H質(zhì)量標(biāo)準(zhǔn)，但是H5頁面的質(zhì)量標(biāo)準(zhǔn)是什么？
2、PC時(shí)代，我們知道performance api就能比較全面的透視整個(gè)頁面請求過程的耗時(shí)，在hybrid模式下，我們對H5頁面高質(zhì)量的定義是頁面功能的高可用和頁面加載速度更快。
3、功能高可用需要webview不會crash，頁面能夠正常打開并且業(yè)務(wù)邏輯符合預(yù)期；頁面加載速度更細(xì)化，終端耗時(shí)、網(wǎng)絡(luò)耗時(shí)、頁面耗時(shí)，同時(shí)需要關(guān)注總耗時(shí)大于5秒以上的慢用戶占比。
1、頁面功能可用性的自動化測試，我們構(gòu)建于騰訊內(nèi)部自研的自動化測試工具QTA。該工具不僅可以識別android和ios終端的控件，也可以識別web的dom控件，通過對點(diǎn)擊事件進(jìn)行模擬，將實(shí)際的返回值同期望值比較以確認(rèn)用例是否通過。
2、測試人員使用python語言編寫自動化測試腳本上傳到SVN，由分布式任務(wù)管理系統(tǒng)分配可供測試的手機(jī)模擬器或真實(shí)的手機(jī)，測試人員可以手工或者設(shè)置定時(shí)任務(wù)自動執(zhí)行測試計(jì)劃。
3、同時(shí)我們將web發(fā)布系統(tǒng)和任務(wù)管理系統(tǒng)進(jìn)行打通，每次發(fā)布前自動進(jìn)行功能自動化測試，只有在預(yù)發(fā)布環(huán)境的通過率達(dá)標(biāo)才能繼續(xù)發(fā)布，這樣就保證了頻繁變更時(shí)H5頁面的功能依然正常。
1、頁面性能自動化測試我們參考了很多現(xiàn)有的工具，比如yslow，雅虎前端優(yōu)化軍規(guī)以及谷歌的pagespeed，但是發(fā)現(xiàn)這些對hybrid模式支持的都不是很好，尤其是我們基于手Q環(huán)境下有更多的個(gè)性化的東西。
2、我們選擇了自研H5頁面性能自動化測試工具，簡稱為WPT，web performance test。參考了yahoo軍規(guī)，結(jié)合終端環(huán)境特性和H5業(yè)務(wù)特性，對H5頁面加載的全流程進(jìn)行發(fā)布前測試和發(fā)布后回歸。
簡單回顧下，我們通過H5頁面和終端的深度融合實(shí)現(xiàn)了H5頁面的快速加載，同時(shí)通過組件化實(shí)現(xiàn)了H5頁面的快速開發(fā)，使用自動化工具實(shí)現(xiàn)了H5頁面變更時(shí)的持續(xù)的高可用和高性能，最終實(shí)現(xiàn)了高質(zhì)量的H5的架構(gòu)實(shí)踐。
作者：翟偉，QQ個(gè)性化業(yè)務(wù)前端團(tuán)隊(duì)leader，曾參與過超級QQ和QQ會員的前端開發(fā)工作，目前負(fù)責(zé)手機(jī)QQ個(gè)性裝扮的開發(fā)工作，擁有近10年的項(xiàng)目架構(gòu)和實(shí)踐經(jīng)驗(yàn)，專注于手機(jī)QQ的hybrid模式下H5優(yōu)化和持續(xù)集成方向。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
