前段時(shí)間，一篇描述了150種“美”的紅字推文《紅了！》刷屏朋友圈。這是被稱為“公眾號(hào)創(chuàng)意天花板“的GQ創(chuàng)造出的又一爆款圖文。除了文案，引發(fā)熱議的還有排版。閱讀時(shí)，文字會(huì)跟隨讀者的視線展開(kāi)，語(yǔ)句的動(dòng)效與其意義相互呼應(yīng)，組成了一篇沉浸式的圖像詩(shī)，這是微信圖文不曾有過(guò)的閱讀體驗(yàn)。在許多讀者眼中，這個(gè)呈現(xiàn)形式本身也是一種對(duì)美的詮釋。 

《紅了！》的動(dòng)態(tài)設(shè)計(jì)出自工作室「符號(hào)互動(dòng)」，GQ的許多創(chuàng)意圖文背后都有這家工作室的身影，比如，廣受好評(píng)的《楊洋的虛擬3D空間展廳》、互動(dòng)劇本《中產(chǎn)階級(jí)劇本》等。

我們電話拜訪了「符號(hào)互動(dòng)」的主理人小楊，一個(gè)今年剛畢業(yè)的00后，國(guó)內(nèi)頂尖的微信SVG設(shè)計(jì)師。他從大二開(kāi)始創(chuàng)業(yè)，專職微信圖文定制化開(kāi)發(fā)，現(xiàn)在團(tuán)隊(duì)已經(jīng)有了10個(gè)成員，是GQ、共青團(tuán)、小米、OPPO等媒體和品牌的御用SVG設(shè)計(jì)團(tuán)隊(duì)。

《紅了！》爆火之后，小楊更忙碌了，通話只能在深夜進(jìn)行。但他依然非常仔細(xì)地和我們分享了GQ爆款圖文背后的秘密、讀者與媒介互動(dòng)的規(guī)律、SVG動(dòng)效大受歡迎的原因......不僅如此，在艱難的大環(huán)境下，小楊還是“用愛(ài)發(fā)電”的成功案例。編程、設(shè)計(jì)、數(shù)字化營(yíng)銷既是他的愛(ài)好，也是他的生意，我們也請(qǐng)他聊了聊在非常垂直細(xì)分的營(yíng)銷領(lǐng)域里創(chuàng)業(yè)是種怎樣的體驗(yàn)。

? 01

為什么GQ總這么酷

Q：有想過(guò)《紅了！》會(huì)刷屏嗎？

A：能猜到，但沒(méi)想到會(huì)這么爆。

Q：接到《紅了！》這個(gè)項(xiàng)目時(shí)，你的想法是什么？

A：我一開(kāi)始以為他們要的就是可以往下延伸的大字報(bào)。溝通后發(fā)現(xiàn)，他們要“優(yōu)雅”。所以要很柔地去呈現(xiàn)“美”，你就會(huì)看到字不是啪啪地砸下去或彈出來(lái)，要漸變的、均勻的過(guò)渡下去。

我們過(guò)了很多遍文案，琢磨它的節(jié)奏感。150句，不可能讓它播四五分鐘，用戶沒(méi)這個(gè)耐心。五分鐘后才能看到廣告，客戶也會(huì)跳腳。所以最后把它控制在了60秒左右，在這個(gè)范圍內(nèi)設(shè)計(jì)節(jié)奏。

一開(kāi)始要播的慢，用優(yōu)雅的動(dòng)畫把人吸進(jìn)來(lái)。梗和金句在哪，決定了哪里停頓，哪里跳行。比如：美是美式，美是多加冰的美式。這是一個(gè)層層遞進(jìn)的梗，要先突出第一句，還要設(shè)計(jì)出兩句話的遞進(jìn)效果。

再比如：美是老板的反義詞，這是一個(gè)有共鳴的金句，會(huì)為它設(shè)計(jì)專屬的節(jié)奏。

Q：我們發(fā)現(xiàn)還有一些很細(xì)節(jié)的設(shè)計(jì)，比如適配夜間模式。

A：對(duì)，我們做了深色模式的適配，白底黑字的圖片，切換成深色模式后，它會(huì)變成黑底白字。這種細(xì)節(jié)，可能很少有人會(huì)做。

還有一句“美是膠片相機(jī)的快門聲”，我們?cè)O(shè)計(jì)了整屏都會(huì)閃爍的閃光燈效果，而不是一張局部閃爍的GIF。

我們會(huì)預(yù)判讀者的閱讀動(dòng)線，大家看到哪播到哪，出完A動(dòng)效才會(huì)接B動(dòng)效，這樣牽著大家的注意力。這也是SVG技術(shù)對(duì)比GIF的一個(gè)優(yōu)勢(shì)。

Q：整體排版會(huì)讓人想起朱贏椿《設(shè)計(jì)詩(shī)》的創(chuàng)作手法，視覺(jué)和文字一同構(gòu)建出了關(guān)于美的意象，《紅了！》的創(chuàng)作理念是這樣嗎？

A：對(duì)，它有一個(gè)學(xué)術(shù)名詞叫“圖像詩(shī)”。

Q：開(kāi)發(fā)《紅了！》用了多長(zhǎng)時(shí)間？

A：3天，GQ不怎么改稿。

Q：你和GQ合作多久了？平時(shí)是怎么分工的？

A：2020年開(kāi)始的。合作方式分創(chuàng)意主導(dǎo)型和技術(shù)主導(dǎo)型兩種。創(chuàng)意主導(dǎo)型由GQ主導(dǎo)策劃方案，技術(shù)主導(dǎo)型由我們主導(dǎo)技術(shù)模型，再反推出方案。

Q：技術(shù)反推方案，具體是怎么做的？

A：舉個(gè)例子，GQ在2022年5月發(fā)布的《楊洋的3D虛擬展廳》。

當(dāng)時(shí)我們突破了微信的一些限制，讓圖片首次能在公眾號(hào)里呈現(xiàn)三維反轉(zhuǎn)效果。讀者滑動(dòng)圖片，會(huì)產(chǎn)生視角上的變化，帶來(lái)身處三維空間的體驗(yàn)。

當(dāng)時(shí)GQ實(shí)驗(yàn)室公眾號(hào)正要發(fā)布雜志5月刊的封面故事，看到這項(xiàng)技術(shù)之后，靈機(jī)一動(dòng)，選擇用這項(xiàng)技術(shù)去呈現(xiàn)楊洋的照片和故事，營(yíng)造出展廳的氛圍。大家看完都說(shuō)很高級(jí)、很震撼。

Q：所以，有時(shí)你們的視覺(jué)創(chuàng)意會(huì)跑在策劃前面，給到一些超預(yù)期的東西？

A：對(duì)，會(huì)有這種情況。比如《90后回看2005年，笑著笑著就哭了》這篇文章，讀者可以選擇一張有年代感的記憶卡片，選擇后，他會(huì)看到一個(gè)日歷翻頁(yè)的效果。這個(gè)效果不是GQ要求的，我覺(jué)得“撕日歷”更能呼應(yīng)主題，引發(fā)行為上的共鳴，有助于形成一個(gè)具象化多感官的情景，所以就做了。

Q：有哪些創(chuàng)意你們費(fèi)了很大的勁兒才實(shí)現(xiàn)？

A：其實(shí)微信的SVG生態(tài)和普通前端動(dòng)畫不同，微信只開(kāi)了一個(gè)很小的開(kāi)發(fā)口子，一行可以搞定的代碼，在微信上就很擰巴，要敲十行。

比如GQ《中產(chǎn)玩盲盒》這篇文章，要實(shí)現(xiàn)抽盲盒和自動(dòng)算分兩個(gè)邏輯，最后用了很多“奇技淫巧”才解決。

? 02

給微信圖文

注入靈魂的SVG動(dòng)效

Q：可以用比較好懂的語(yǔ)言，介紹一下SVG技術(shù)嗎？

A：對(duì)微信圖文來(lái)說(shuō)，SVG是一種新興的排版技術(shù)，把前端動(dòng)畫引入了微信圖文，用戶可以通過(guò)點(diǎn)擊、滑動(dòng)等觸發(fā)方式，實(shí)現(xiàn)不同的動(dòng)畫效果與邏輯控制，和圖文形成雙向互動(dòng)。

音頻和動(dòng)畫

點(diǎn)燈效果

互動(dòng)游戲

Q：我發(fā)現(xiàn)比較有趣的微信SVG作品，都是近幾年冒出來(lái)的，這是為什么？

A：首先，跟微信生態(tài)有關(guān)。

微信為了用戶體驗(yàn)，禁止在微信公眾號(hào)圖文里插入JS，這也導(dǎo)致了微信圖文形式非常單調(diào)，微信后來(lái)就開(kāi)放了一部分SVG.

2016年，SVG規(guī)則被制定，但當(dāng)時(shí)的技術(shù)只能顯示矢量圖，呈現(xiàn)上會(huì)有很多的局限性。到了2020年，首次出現(xiàn)了可以引入位圖的方式，SVG開(kāi)始崛起。蘋果的推文《新一屆iPad Pro，有深度》，用SVG實(shí)現(xiàn)了圖文伸長(zhǎng)效果，給內(nèi)容帶來(lái)了很強(qiáng)的科技感和可讀性，帶火了SVG.后來(lái)，很多3C數(shù)碼領(lǐng)域的品牌都青睞用SVG加持新品發(fā)布內(nèi)容。

2021年《小米 Mix Fold 春季發(fā)布會(huì)》用SVG做了視差滾動(dòng)特效，把新品宣傳的科技感又帶上了一個(gè)梯度，引來(lái)很多數(shù)碼品牌效仿。這也是幫我們打響知名度的一個(gè)作品。

另一個(gè)原因，現(xiàn)在品牌宣傳越來(lái)越卷了。

Q：在你看來(lái)，SVG給微信公眾號(hào)帶來(lái)了哪些改變？

A：微信訂閱號(hào)很像手機(jī)上的報(bào)紙雜志，而SVG讓它的內(nèi)容形態(tài)遠(yuǎn)比報(bào)紙雜志豐富，增添了很多新的視覺(jué)效果、互動(dòng)維度。

SVG還有個(gè)功能性的作用，是合理地收納信息，比如它能把很多信息折疊起來(lái)，也能依據(jù)用戶的指令去篩選信息。公眾號(hào)作為一個(gè)信息門戶，很需要這種能力。

Q：從你的項(xiàng)目和文章中，可以感受到你對(duì)人與媒介技術(shù)之間的互動(dòng)規(guī)律很有興趣。從這個(gè)角度看，你覺(jué)得SVG特效的魅力在哪？給大家?guī)?lái)了哪些超預(yù)期的滿足感？

A：像我們給GQ做的《中產(chǎn)階級(jí)的劇本殺》，是一個(gè)互動(dòng)劇本。它用技術(shù)實(shí)現(xiàn)了一種更為開(kāi)放的非線性敘事網(wǎng)絡(luò)。這種敘事和廣播電視、圖書的線性敘事不同，不會(huì)只沿著一條時(shí)間線、讓人單向度地接收信息，反之讓文本有了跟《黑鏡：潘達(dá)斯奈基》等互動(dòng)劇相近的體驗(yàn)，最終形成了一種非線性、更開(kāi)放、雙向互動(dòng)、去中心化的超文本敘事。這種未知、不確定性會(huì)給人帶來(lái)滿足感。

SVG的各種點(diǎn)擊展開(kāi)效果，是一種漸進(jìn)的互動(dòng)方式，引導(dǎo)了大家的閱讀順序，可以減少信息傳達(dá)的損耗?！耙曈X(jué)隱藏”這個(gè)小技巧，也能最大程度勾起大家的好奇心。

另外，SVG把聲音、圖像、視頻效果都結(jié)合起來(lái)了，俗稱多媒體，更容易引起情緒共鳴。同時(shí)，內(nèi)容+SVG可以塑造出立體的、跟現(xiàn)實(shí)相近的情境，讓內(nèi)容所表達(dá)的情感更容易被理解，這就是為什么會(huì)收獲“沉浸感、高級(jí)感”這樣的評(píng)價(jià)。

Q：現(xiàn)在用SVG的公眾號(hào)越來(lái)越多了，你也合作過(guò)很多品牌，為什么GQ的作品是最出圈的？

A：首先是選題差異。品牌號(hào)和GQ這種媒體號(hào)的選題方向和意圖是不同的，不能放在一起比較，品牌號(hào)的選題都比較難破圈。

另外，跟GQ相近的一些大眾的娛樂(lè)化媒體，往往缺少經(jīng)驗(yàn)去定制這類的SVG內(nèi)容。

還有一個(gè)原因。GQ是第一個(gè)通過(guò)排版創(chuàng)意出圈的媒體，這個(gè)標(biāo)簽給他帶來(lái)的效應(yīng)會(huì)越滾越大，其他媒體很難超越。

Q：3年后，你期待微信圖文變成什么樣？你預(yù)測(cè)會(huì)變成什么樣？

A：我希望行業(yè)生態(tài)可以再開(kāi)放一些。技術(shù)很快會(huì)到頭，未來(lái)更重要的是創(chuàng)意如何同技術(shù)結(jié)合。

? 03

“在人文和科技的十字路口，我發(fā)現(xiàn)了風(fēng)口”

Q：公司成立多久了？

A：大二在學(xué)校的時(shí)候就成立了。 

Q：一句話介紹公司做的事，你會(huì)怎么說(shuō)？為什么公司叫符號(hào)互動(dòng)？還挺有學(xué)術(shù)色彩的。

A：符號(hào)互動(dòng)致力于調(diào)動(dòng)一切可能的媒介技術(shù)來(lái)促進(jìn)人機(jī)的雙向度互動(dòng)。

確實(shí)，翻開(kāi)任何一本講傳播學(xué)的書，都會(huì)看到符號(hào)這個(gè)詞，人與媒介是通過(guò)符號(hào)溝通的，“符號(hào)互動(dòng)”正好呼應(yīng)公司的業(yè)務(wù)，我們?cè)陂_(kāi)發(fā)人機(jī)交互的圖文。

Q：你是怎么發(fā)現(xiàn)“微信SVG開(kāi)發(fā)”這個(gè)創(chuàng)業(yè)機(jī)會(huì)的？咱倆是校友，可以看到做內(nèi)容生產(chǎn)類創(chuàng)業(yè)的同學(xué)比較多，從媒介技術(shù)出發(fā)創(chuàng)業(yè)的人比較少。

A：我從小就對(duì)商業(yè)、編程、傳播比較感興趣。一直在玩相關(guān)的東西，小學(xué)開(kāi)始自學(xué)編程，還把一個(gè)游戲社群也做到了行業(yè)第一。

在浙傳又學(xué)了文化產(chǎn)業(yè)管理，掌握了些管理學(xué)知識(shí)。SVG項(xiàng)目正好可以把編程、傳播、商業(yè)這三個(gè)我感興趣的東西匯集起來(lái)實(shí)操，它算是一個(gè)很垂直很小眾的領(lǐng)域，背靠的大行業(yè)我覺(jué)得是數(shù)字營(yíng)銷。

公司起步的時(shí)候，SVG算得上一個(gè)小風(fēng)口，我跟GQ也開(kāi)始了合作，當(dāng)時(shí)判斷SVG要起來(lái)了，競(jìng)爭(zhēng)當(dāng)時(shí)也不算很激烈。

這個(gè)風(fēng)口站在了人文和科技的十字路口。你最好懂編程，懂設(shè)計(jì)，還要有媒介素養(yǎng)。 

傳媒領(lǐng)域很大，每個(gè)人都有自己的專長(zhǎng)，我覺(jué)得重要的是找到一個(gè)垂直細(xì)分的領(lǐng)域，一方面競(jìng)爭(zhēng)對(duì)手少、起步就快，另一方面在你資源少的情況下，可以小成本開(kāi)局。

Q：什么時(shí)候覺(jué)得有底氣成立公司了？現(xiàn)在發(fā)展到多少人了？成員都來(lái)自哪里？

A：這個(gè)領(lǐng)域是輕資產(chǎn)運(yùn)營(yíng)，沒(méi)什么債務(wù)風(fēng)險(xiǎn)或者固定資產(chǎn)折舊，我覺(jué)得大學(xué)生創(chuàng)業(yè)，選這種領(lǐng)域不會(huì)有太大壓力。

我們現(xiàn)在是10個(gè)人，大家基本都二十四五歲，成員多來(lái)自于業(yè)內(nèi)。

Q：你現(xiàn)在幾乎每天都在發(fā)新項(xiàng)目，忙到很晚，這些是《紅了！》帶來(lái)的嗎？ 

A：《紅了！》確實(shí)帶來(lái)了一些合作機(jī)會(huì)。但它和小米發(fā)布會(huì)一樣，主要是公關(guān)層面的影響，更長(zhǎng)尾，不會(huì)只體現(xiàn)在業(yè)務(wù)量上。它能帶來(lái)一些很好的標(biāo)簽，讓大家知道我們可以做什么量級(jí)、行業(yè)、風(fēng)格的作品。

Q：微信圖文定制化開(kāi)發(fā)是個(gè)好生意嗎？和135、秀米這種編輯器平臺(tái)相比，區(qū)別在哪？

A：公眾號(hào)生態(tài)雖然受到了短視頻媒介沖擊，但體量還是很大的，作為品牌公關(guān)最正式的新媒體窗口，它的基本盤會(huì)一直在。絕大多數(shù)品牌都會(huì)用到SVG技術(shù)。

編輯器的模版是模式化的、滯后的，他能實(shí)現(xiàn)的交互效果決定他的定價(jià)會(huì)比較低。我們提供的是編輯器無(wú)法完成的定制化開(kāi)發(fā)服務(wù)，根據(jù)定制化程度報(bào)價(jià)和h5開(kāi)發(fā)報(bào)價(jià)相當(dāng)。

目前愿意做定制化開(kāi)發(fā)的，主要還是一些最頭部的品牌和媒體。

Q：怎么看公司業(yè)務(wù)比較依賴微信單一生態(tài)？感覺(jué)是有風(fēng)險(xiǎn)的。

A：我覺(jué)得要先專精于一件事。很多傳統(tǒng)行業(yè)競(jìng)爭(zhēng)很激烈，后入局者很難獲得一個(gè)成本和規(guī)模上的優(yōu)勢(shì)。我覺(jué)得要把一個(gè)細(xì)分領(lǐng)域做好，先穩(wěn)扎穩(wěn)打。

Q：接下來(lái)，會(huì)繼續(xù)拓展一些新技術(shù)嗎？3年后，你希望做到什么程度？

A：不會(huì)很快拓展新技術(shù)，要繼續(xù)深耕SVG希望先把業(yè)務(wù)的規(guī)模做起來(lái)，通過(guò)規(guī)模效應(yīng)形成優(yōu)勢(shì)，像管理學(xué)課本里說(shuō)的那樣，一步步來(lái)，先實(shí)現(xiàn)規(guī)?；?，沒(méi)有增量了再做多角化，往其他方向發(fā)展。

Q：創(chuàng)業(yè)兩年，站在“微信的小風(fēng)口”，你現(xiàn)在是什么狀態(tài)？

A：基本每天上班到一兩點(diǎn)，周末還要處理上周沒(méi)完成的工作，所以365天基本沒(méi)一天休息。

小楊的朋友圈日常