你有多久沒沉(chen)下心來，在微信里讀一(yi)篇長文了？
微信公眾號生態日趨飽和，這兩年的流行趨勢是條漫式寫作——這不僅僅指長圖推送，也包括“兩行字+一張圖”排版方式。
用戶的(de)注意力被切得七零八落(luo)，沒時間(jian)沒耐心讀干(gan)巴巴的(de)文(wen)字，只想呼喚閱讀更(geng)輕松(song)、信(xin)息更(geng)豐富的(de)展現(xian)形式，比如：圖(tu)文(wen)、視(shi)頻，以及互動內容。
我們此前(qian)已研究過(guo)“漫畫號”（點擊(ji)藍字可閱讀）這一風(feng)口。今天，我們把目光投向更小眾的互動內容(rong)，你將在接下來(lai)的文字中讀到：
相比長圖漫畫，互動內容還很小眾。雖然早在2016年，國內就有一些編輯器，推出“左滑”一類的模板，但大家使用它僅為節省空間，并未聯想到“互動”層面上。不過(guo)時隔三(san)年，技(ji)術還是那個技(ji)術，但用法已經變了很多。
9月25日，GQ旗下公眾號「黑鳳梨實驗室」，推出一篇題為《脾氣再好的女孩，看到第5句必炸》的文章。推送由22個左滑文本框組成，里面是模擬刮獎場景的圖片。一張圖是完整的句子，一張圖是灰色的刮獎區。一句話分上下兩半，前一句天使，后一句魔鬼。讀者左滑，就能看到隱藏的后一句。
《脾氣再好的女孩，看到(dao)第5句必炸》
這是利用簡單模板，達到交互效果的典型案例。GQ實驗室內容總監Rocco稱，他們去年就開始做互動推文，有時自己做，有時外包，主要增加溝通成本。這類形式，部分讀者會覺得很新奇，但如果不是內容非常抓人，大家多看幾次也就審美疲勞了。
最近(jin)一篇互(hu)動推文爆款，應該是「網易王三三」9月12日發布的《絕對色(se)感の挑戰：不瞎算你贏》。關于xx品牌是什么顏(yan)(yan)色(se)，文中列(lie)出了(le)20多(duo)道選擇題。比如，關于什么是“可口可樂(le)紅(hong)”，題干會(hui)給出六種紅(hong)色(se)選擇，讀者一一點開(kai)，就能得(de)到對應顏(yan)(yan)色(se)的名稱。
《絕對色感の挑戰：不瞎算你贏》
《絕對(dui)色感》推(tui)送(song)兩周后，閱讀量(liang)達(da)44萬，超過公眾號「網(wang)易王(wang)三三」平均(jun)閱讀水平。今(jin)年上半年開始(shi)，網(wang)易就陸續(xu)嘗試(shi)了很多(duo)互動玩法，比如點擊空白顯字、文字彈幕(mu)效(xiao)果等，色塊挑戰的翻(fan)牌技術，也不是他們第一次做。
“色感挑(tiao)戰(zhan)成功(gong)之后，我們(men)覺得SVG（Scalable Vector Graphics，可(ke)縮放的矢量圖(tu)(tu)形）交互是可(ke)行(xing)的，就開始(shi)嘗試別的新(xin)技術(shu)。”網易王三(san)三(san)工作(zuo)室(shi)的蔡捷文說，原(yuan)先點擊圖(tu)(tu)片都是顯字，但其(qi)實(shi)還可(ke)以顯圖(tu)(tu)。
在《絕對の無聊挑(tiao)戰》中(zhong)，滿屏都是模擬的氣泡(pao)袋，讀者可(ke)以挨(ai)個戳(chuo)破，得到(dao)不同的字，還有機會抽到(dao)瓢蟲。
《絕(jue)對の無聊(liao)挑戰》
國(guo)慶期(qi)間，「網易王三三」陸(lu)續推出記憶(yi)挑戰(zhan)、運氣挑戰(zhan)、直(zhi)男挑戰(zhan)等(deng)多篇互動文章，除了答(da)題(ti)、戳泡(pao)(pao)泡(pao)(pao)外(wai)，讀(du)者還可(ke)以在(zai)手(shou)機(ji)上拍蚊子、捏易拉罐、找(zhao)不(bu)同……
GQ和網易的嘗試，比較類似輕量級的H5。蔡捷文介紹，這種翻牌形式，比較適合做成4399小游戲。目前還有一種故事型思路，比如「不會畫出版社」，把長圖和互動結合，可以讓讀者選擇不同的故事線，得到不同的結局。
點擊A/B，顯示不同結局(ju)
不過，因為微信對代碼量有限制，超過2萬行后臺會卡死，「不會畫出版社」也沒有做太復雜的交互。多數時候，讀者的選擇只會改變中間一張圖片。最復雜的是《你真的很對不起自己》，結尾變換了多張圖片，讀者可以直接影響故事結局。
“這種交互可以(yi)讓(rang)讀者更好地代入，可以(yi)理解為(wei)是平面的(de)、無聲(sheng)效的(de)游戲”。「不會畫(hua)出版社」創始人(ren)王澤鵬表(biao)示。
創作者最關心(xin)的，莫過于投入產(chan)出比。
據介紹，網易《絕對色感》是(shi)3個人用(yong)兩天時間(jian)做(zuo)出來的。因(yin)為此前(qian)已有技術鋪墊，主要時間(jian)花在編(bian)輯(ji)(ji)和調試(shi)上。而《絕對の無聊挑戰》涉及(ji)的代碼量太大，雖然一早就在第三(san)方編(bian)輯(ji)(ji)器里排好，但復制(zhi)到微信(xin)后(hou)臺時頻(pin)繁報錯，作者解決bug到凌晨3點。
王澤鵬曾找過外包程序員，但對方報價偏高，因此選擇自己寫代碼。在他看來，更重要的是溝通太繁瑣，“程序員不懂內容，很多效果做不來，但其實有時磨一磨，是有其它解法的”。關(guan)鍵并(bing)非技術，而(er)是想法，即(ji)怎么運用基礎工具，做成想要的效果。
至于最(zui)終效果，也是仁者見仁智(zhi)者見智(zhi)。蔡捷(jie)文(wen)說，交互圖片的閱讀數據比常規的好，再加(jia)上有(you)爆款驗證，就更堅定(ding)了(le)他們(men)做交互圖文(wen)的決心。王澤迄(qi)今為(wei)止(zhi)共做了(le)3期交互圖文(wen)，增(zeng)加(jia)了(le)幾倍工(gong)作量，但傳(chuan)播和平時沒有(you)區別(bie)。
除了(le)這(zhe)些內容創(chuang)作者，我們(men)也找到了(le)深耕SVG的(de)程序員。他們(men)主要接觸哪些客戶，做哪種(zhong)交互？從(cong)他們(men)的(de)視角來看交互圖文，答(da)案又有些不一樣(yang)。
GL之前是卓越工程師，2017年開始(shi)探索微信交互圖文(wen)。據他介紹，2016年，JZ多媒體(ti)解決方案(an)與微信團(tuan)隊(dui)合作制定了《微信HTML5環境下的SVG AttributeName白名(ming)單(dan)》，但(dan)當(dang)時(shi)僅應(ying)用在一些「點擊空白顯示文(wen)字」之類的編輯器(qi)模板中(zhong)。
AttributeName 的(de)對照表（圖源(yuan)：JZH5）
時至今日，微信支持的交互技術代碼基本沒有升級，甚至在某些代碼層面增加了一些限制。也就是說，現在我們看到的交互圖文，其實2016年就可以制作，只是當時少有人研究罷了。
微信交互圖文沒有嚴格的分類，GL給客戶介紹時，一般分成兩種：模塊化交互圖文和沉浸式交互。前者只是在文(wen)章中(zhong)插(cha)入一(yi)(yi)個(ge)互(hu)動(dong)模塊，其(qi)他內(nei)容還是普通圖(tu)文(wen)排版；后者則是通篇矢量插(cha)畫(hua)，通過(guo)一(yi)(yi)個(ge)或幾個(ge)固(gu)定(ding)元素，利(li)用路徑位移(yi)動(dong)畫(hua)貫穿(chuan)全文(wen)，文(wen)中(zhong)通過(guo)交(jiao)互(hu)動(dong)畫(hua)（例如答題互(hu)動(dong)）串聯(lian)情節。
另一位設計師荒村，也曾撰文對交互圖文進行分類，主要是兩大類：文本驅動和產品驅動。前者因為文字多(duo)(duo)(duo)，適用的(de)交(jiao)互(hu)形式少，開發(fa)難度(du)較大(da)；后者以產品為主，跟(gen)SVG交(jiao)互(hu)結合(he)的(de)點多(duo)(duo)(duo)，趣味性強。這和GL的(de)分(fen)類(lei)，其實(shi)差不多(duo)(duo)(duo)。
荒村表示，在目前技術被濫用的情況下，只能通過創意和設計實現差異化。成本上(shang)，簡單的交(jiao)互圖文只需花幾百元定制(zhi)，復雜的上(shang)千元。效果上(shang)，黑(hei)科(ke)技排版更直(zhi)觀有趣(qu)，對閱讀量有帶動作用(yong)，個別會有爆(bao)點。但嘗(chang)鮮過后(hou)，公眾號整體(ti)內(nei)容和風格，才是影響用(yong)戶關注的決(jue)定因(yin)素。
而(er)根(gen)據(ju)GL的(de)(de)(de)(de)介紹，僅(jin)技術開(kai)發，一篇推(tui)文的(de)(de)(de)(de)報價在1000~12000元不等(deng)，基(ji)本都能控制在3000元以內，制作(zuo)周期1~2天。根(gen)據(ju)客戶反饋，閱讀量一般是之前(qian)的(de)(de)(de)(de)1.5~2倍，讀者留言會積極很多，暫時還沒碰到推(tui)送后傳(chuan)播變差的(de)(de)(de)(de)案(an)例。
我(wo)們發現(xian)一個(ge)現(xian)象：創(chuang)作者對(dui)交互圖文多持觀望(wang)態度(du)，真正(zheng)有強烈意愿(yuan)的是(shi)大(da)(da)企業。GL目前對(dui)接過(guo)十(shi)幾家廣告(gao)公司，合作過(guo)的品牌(pai)有大(da)(da)大(da)(da)小小上(shang)百個(ge)。Rocco卻表示，很多客戶執(zhi)迷于形式(shi)，要前所未(wei)見的新(xin)形式(shi)，但他(ta)還是(shi)比(bi)較推薦打動人心的內容。
“七年過去(qu)，因為交互爆過的(de)公眾號推文，兩只(zhi)手都數得過來。”王澤鵬認為，交互是為了體驗，比如更好的(de)代入(ru)感。網(wang)易《絕對色感》能火，是因為這種形式在H5時(shi)期(qi)就爆過，這個嘗試“非常穩”。
而且，其中不科學的地方在于：這件事技術門檻不高，有基礎的一天就能學會。雖然有可能研究出一種性價比高的交互方式，但這種形式一出現就會被復制，復制一百遍就變成了垃圾。
交互創意模(mo)板可以(yi)無窮多
既懂內容又懂技術的人不多，一般公眾號想嘗試可以去買，但這種訂單報價并不低——點擊圖片A顯示圖片B的技術，王澤鵬曾給人報價800元一組，他覺得其實不至于這么貴，現在主要是打一個信息差，畢竟甲(jia)方(fang)喜歡這種高端、罕(han)見的形式。
關于為何創作者很少做交互內容，GL覺得主要有三點原因：一是技術門檻；二是制作周期長，不好追熱點；三是互動性取決于視覺效果，對文字創作者來說意義不大。
但對企業(ye)(ye)來(lai)說(shuo)，交(jiao)互(hu)圖(tu)文類(lei)似「閹割版(ban)」的(de)H5，雖然很多效果(guo)還無(wu)法實現，但相對來(lai)說(shuo)，交(jiao)互(hu)圖(tu)文的(de)制作周期和成本(ben)更低，同時可以直接推送給(gei)讀(du)者，也(ye)具備轉化率(lv)高的(de)優勢(shi)，因此廣(guang)受品牌歡迎。整(zheng)體來(lai)說(shuo)，有定制需(xu)求的(de)用戶基本(ben)都是大企業(ye)(ye)/品牌。
GL接觸的客戶中，18年上半年手機品牌居多，18年下半年至今，汽車品牌占據了絕大多數，他們的需求從以前較多游戲類互動，逐漸演變成產品展示/內容呈現類互動。
部分合作品牌
“客戶不會為了交互而交互，交互始終是為內容服務的。點擊觸發并不只是為了呈現一個動畫效果，最重要的是為用戶獲取信息增設門檻，通過一次點擊，讓用戶更專注地注意到點擊后呈現的信息。”
荒村也表(biao)示，在企業周年、大(da)事(shi)件、新品上市、節(jie)日熱點等關鍵節(jie)點，品牌會(hui)制作(zuo)交互圖文(wen)。目前嘗試交互圖文(wen)的品牌數量，逐年遞增。預測(ce)以后的交互圖文(wen)，會(hui)集中在競爭激烈，且(qie)注重品牌區隔力的行業里，比如車企、電子產(chan)品、奢侈(chi)品等。
他還提到，目前微信支持SVG矢量交互動畫，未來可能放開位圖交互、支持參數(shu)傳(chuan)遞，圖文的(de)整(zheng)體效果類似H5。也可能增(zeng)加軌(gui)跡動畫（比(bi)如耐克(ke)廣(guang)告打對(dui)勾；麥當勞(lao)廣(guang)告畫M）、重力感應(ying)（比(bi)如金典投放的(de)廣(guang)告：北京大興(xing)機(ji)場(chang)）、AR等新玩法——前兩者已(yi)經在朋友圈廣(guang)告試用了。
示(shi)例(li)：軌跡動畫
新(xin)內容(rong)形態對數據庫、服務器、流量(liang)的挑戰都比較大，微(wei)信(xin)官方也會考(kao)慮運維成本。
受制于技術，微信交互圖文還達不到游戲的效果。一旦技術開放，H5、游戲、網頁能實現的功能都可以實現，甚至可以攜帶病毒。這對微信來說又是個考驗。不過王澤鵬認為，鑒于目前公眾號的視頻呈現不夠友好，或許直接沖向維度更高的互動內容，反而會有所突破。
如果(guo)還是(shi)延續2016年的(de)(de)能力，微(wei)信互(hu)動內容(rong)(rong)(rong)恐怕一時半刻不(bu)(bu)(bu)會(hui)成為(wei)主流(liu)，只(zhi)會(hui)是(shi)小眾潮(chao)流(liu)。不(bu)(bu)(bu)過，根據(ju)我們(men)得到的(de)(de)消息，微(wei)信將來會(hui)在內容(rong)(rong)(rong)呈現上有新嘗試。不(bu)(bu)(bu)少同行期待(dai)的(de)(de)是(shi)，如果(guo)微(wei)信能將常(chang)見的(de)(de)交互(hu)產(chan)品功(gong)能化，不(bu)(bu)(bu)需要代碼實(shi)現，交互(hu)內容(rong)(rong)(rong)創作的(de)(de)門檻會(hui)降(jiang)低很多(duo)。
屆(jie)時，交互圖文爆款會越(yue)來越(yue)多。但(dan)隨(sui)著(zhu)技術普(pu)及，工具使用只會變成(cheng)基礎能力。而(er)創意和內容，永遠是(shi)第(di)一生(sheng)產力。
