導(dǎo)語(yǔ)

表情包已經(jīng)成為我們?nèi)粘I钪辛奶毂磉_(dá)情感時(shí)不可或缺的一部分,有60%的用戶每天都會(huì)發(fā)送表情消息,但現(xiàn)狀往往是用戶都在使用千篇一律的表情包,缺乏個(gè)性化,人們會(huì)將時(shí)下流行的明星、動(dòng)漫、影視截圖或者貓狗萌寵作為素材并配上一些特定的文字以表達(dá)特定的情緒,那么基于用戶的表情包定制就成為了新的嘗試方向。

在自拍表情包里展現(xiàn)水彩世界另一個(gè)我

對(duì)于用戶來(lái)說(shuō),直接拍攝自己的大臉來(lái)作為表情包素材還是會(huì)有一定的門檻,雖然傳統(tǒng)的自拍表情包在讓用戶拍攝時(shí)也會(huì)采用一些趣味的頭戴掛件來(lái)做裝飾,但這類表情包仍舊還是直白了些,有些用戶可能會(huì)考慮到傳播時(shí)的肖像隱私一類的問(wèn)題而對(duì)拍攝產(chǎn)生一些抵觸心理。我們?cè)谒伎加袥](méi)有什么方案是可以讓表情包呈現(xiàn)出另外一種畫(huà)風(fēng),讓用戶作為平行世界的另一個(gè)自己對(duì)表情包進(jìn)行演繹。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

關(guān)于整個(gè)表情包套系的畫(huà)風(fēng)設(shè)定,我們參考了以往的相機(jī)素材運(yùn)營(yíng)經(jīng)驗(yàn),發(fā)現(xiàn)國(guó)人對(duì)于古風(fēng)素材的熱情經(jīng)年不減,可能是因?yàn)槊總€(gè)華夏兒女骨子里都還有一個(gè)古風(fēng)魂。在當(dāng)下年輕的流行審美趨勢(shì)的影響下出現(xiàn)了一種結(jié)合古風(fēng)氣韻衍生出的當(dāng)代古風(fēng)水彩畫(huà)風(fēng),由于水彩畫(huà)自身的基因里帶有清透感和暈染效果,所以這種形式很適合表現(xiàn)古風(fēng)素材的飄逸和柔美。

通常畫(huà)師在繪制畫(huà)稿的時(shí)候往往是依托于一個(gè)想象中的人物來(lái)進(jìn)行創(chuàng)作,而我們的表情包是要基于現(xiàn)實(shí)世界的普通人來(lái)實(shí)現(xiàn),普通用戶拍攝時(shí),服裝與發(fā)型通常是很現(xiàn)代的,如果整體設(shè)定成較重的古風(fēng)質(zhì)感,可能會(huì)有些違和。于是我們將該套表情包設(shè)定為帶有輕古風(fēng)氣質(zhì)的水彩畫(huà)風(fēng),人物部分的設(shè)定可以更貼近用戶自身五官特征來(lái)進(jìn)行繪制,這樣更加符合關(guān)于另一個(gè)我的設(shè)定。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

為了實(shí)現(xiàn)畫(huà)風(fēng)上的轉(zhuǎn)變,我們用到了近年來(lái)大熱的機(jī)器學(xué)習(xí)方法:生成對(duì)抗網(wǎng)絡(luò)(Generative adversarial network,GAN),這個(gè)方法是通過(guò)讓兩個(gè)神經(jīng)網(wǎng)絡(luò)相互博弈的方式進(jìn)行學(xué)習(xí),由一個(gè)生成網(wǎng)絡(luò)和一個(gè)判別網(wǎng)絡(luò)組成。生成網(wǎng)絡(luò)從潛在空間(latent space)中隨機(jī)取樣作為輸入,其輸出結(jié)果需要盡量模仿訓(xùn)練集中的真實(shí)樣本。

判別網(wǎng)絡(luò)的輸入則為真實(shí)樣本或生成網(wǎng)絡(luò)的輸出,其目的是將生成網(wǎng)絡(luò)的輸出從真實(shí)樣本中盡可能分辨出來(lái)。而生成網(wǎng)絡(luò)則要盡可能地欺騙判別網(wǎng)絡(luò)。兩個(gè)網(wǎng)絡(luò)相互對(duì)抗、不斷調(diào)整參數(shù),最終目的是使判別網(wǎng)絡(luò)無(wú)法判斷生成網(wǎng)絡(luò)的輸出結(jié)果是否真實(shí)。

通過(guò)大量的圖像學(xué)習(xí)訓(xùn)練可以讓機(jī)器學(xué)習(xí)到一套目標(biāo)畫(huà)風(fēng)的特征,從而作用在用戶的圖像上,將其轉(zhuǎn)化為帶有目標(biāo)畫(huà)風(fēng)特征的圖像。比如我們將所有莫奈的畫(huà)作為樣本放進(jìn)潛在空間(latent space)中,生成網(wǎng)絡(luò)和判別網(wǎng)絡(luò)通過(guò)對(duì)這些樣本的博弈學(xué)習(xí),最終可以得出一個(gè)莫奈畫(huà)風(fēng),應(yīng)用在用戶肖像上之后可以得到一幅帶有莫奈畫(huà)風(fēng)的用戶肖像。

這個(gè)技術(shù)可以在兼顧用戶對(duì)隱私的保護(hù)需求的同時(shí)還讓用戶遇見(jiàn)了更美好的自己,不僅避免了自拍時(shí)的直白與尷尬,還讓整個(gè)拍攝過(guò)程充滿新鮮感、趣味性和可演繹性。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

△ 圖例為CycleGAN的生成效果

團(tuán)隊(duì)里的開(kāi)發(fā)同學(xué)們基于GAN技術(shù)訓(xùn)練出了符合需求的水彩畫(huà)風(fēng)(硬核技術(shù)詳解傳送門見(jiàn)文章結(jié)尾)對(duì)人臉做了一個(gè)強(qiáng)畫(huà)風(fēng)的處理,在保留用戶明顯特征的同時(shí)進(jìn)行水彩畫(huà)風(fēng)的轉(zhuǎn)換,讓用戶置身其中更像是一個(gè)動(dòng)畫(huà)角色,這種抽離可以讓用戶作為另一個(gè)角色進(jìn)行嘗試和演繹,與前景氛圍共同呈現(xiàn)出一些有鮮明畫(huà)風(fēng)特色的表情包。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

一套風(fēng)格化表情包的形成除了人物部分的畫(huà)風(fēng)設(shè)定以外,還有兩大構(gòu)成要素分別是文案和前景氛圍,需要選擇搭配特定的文案和前景氛圍去呈現(xiàn)出完整的效果,文案決定了單個(gè)表情所表達(dá)出的主要信息,前景氛圍則生動(dòng)的表現(xiàn)出了文案想傳遞的情緒,二者缺一不可。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

傳遞情感,助用戶一臂之力

1. 內(nèi)容層面:文案的表達(dá)

文案往往能加強(qiáng)或擴(kuò)展用戶所想表達(dá)的信息:并不是每個(gè)人的表演能力都能強(qiáng)到僅用面部表情就能傳達(dá)出準(zhǔn)確的信息,普通用戶直接拍攝的表情GIF往往不夠清晰明了,前景氛圍以及文案的添加表達(dá)往往能直接傳達(dá)并加強(qiáng)用戶所想傳遞的信息。

在整體水彩表情包的文案選擇上我們采用了一些能表達(dá)古風(fēng)情緒的文案,如“別來(lái)無(wú)恙”、“落花寄相思”等一類的比較白話的文言文,包含了正負(fù)兩個(gè)方向以及一些比較中性的情緒,同時(shí)覆蓋了多個(gè)日常高頻場(chǎng)景。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

2. 表現(xiàn)層面:前景氛圍的設(shè)定

著重氛圍裝飾來(lái)輔助表達(dá)文案語(yǔ)義所傳遞的情緒。

A. 靜幀原畫(huà)設(shè)定

前景氛圍與GAN技術(shù)保持相同畫(huà)風(fēng):淡雅、唯美。在裝飾元素的選擇上會(huì)采用一些比較典型的古風(fēng)元素,顏色上整體使用低飽和度的高級(jí)灰色調(diào)搭配,保持清新淡雅水彩質(zhì)感,統(tǒng)一用柔和的深色在邊緣勾細(xì)線描邊。在繪制原畫(huà)的同時(shí)也需要帶著動(dòng)畫(huà)思維去考慮到后期動(dòng)畫(huà)上需要如何表達(dá)會(huì)更優(yōu)。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

B. 動(dòng)畫(huà)幫助表達(dá)用戶情緒

通過(guò)增添前景氛圍的動(dòng)畫(huà)可以加強(qiáng)文案的情緒表達(dá),而古風(fēng)的基因天然決定這種表達(dá)方式是含蓄而優(yōu)雅的,所以動(dòng)畫(huà)的表現(xiàn)上都會(huì)相對(duì)柔和一些。

以“別來(lái)無(wú)恙”來(lái)為例,我們利用了柔軟的柳葉和薄紗營(yíng)造出春風(fēng)拂面的氛圍,遠(yuǎn)處上空飛翔的燕子代表了冬去春來(lái),故人相見(jiàn),別來(lái)無(wú)恙。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

以“豈有此鯉”為例,原本“豈有此理”會(huì)比較抽象一些,并且想在古風(fēng)中表現(xiàn)出“生氣”這種情緒波動(dòng)比較大的負(fù)面情緒也是有一定難度的,于是在此處我們采用了一個(gè)諧音具像化的手法:“豈有此理”諧音“豈有此鯉”,并且利用鯉魚(yú)跳水濺起水花和海棠枝干晃動(dòng)落下花瓣,生動(dòng)的表達(dá)出生氣的情緒。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

C. 讓用戶與內(nèi)容互動(dòng)

每一段前景都會(huì)帶有一些劇情,并且都以平視的角度進(jìn)行繪制,符合大部分用戶一貫的自拍習(xí)慣角度,讓用戶有置身其中的代入感。

以“喚我何事?”為例,云朵從遮擋到散開(kāi),荷花、荷葉從彎腰到起身的動(dòng)作,利用擬人化的手法表達(dá)出文案語(yǔ)義,同時(shí)文案的暈染出現(xiàn)效果也有種被喚起的感覺(jué),用戶在這種前景氛圍的引導(dǎo)下往往能演繹出一些意想不到的效果。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

以“噓”為例,藍(lán)紫暗色調(diào)營(yíng)造林間安靜、神秘的氛圍,前后虛化提升空間感,柳葉飄動(dòng),讓用戶置身其中仿佛要和他們一起化身成為這林中精靈。蝴蝶撲閃著翅膀緩緩飛來(lái)并跟隨人臉作為互動(dòng)的氛圍元素,同時(shí)文案緩緩出現(xiàn)的方式也呼應(yīng)著其語(yǔ)義特質(zhì),--噓~不要嚇跑它。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

激發(fā)用戶表演熱情

全部水彩畫(huà)風(fēng)表情包效果展示

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

由于表情包是在用戶的聊天過(guò)程中傳播的,屬于用戶的隱私,所以我們無(wú)法拉取到真實(shí)用戶演繹出來(lái)的表情包,但是通過(guò)表情包的使用數(shù)據(jù)統(tǒng)計(jì),我們不難看出水彩表情包上線后還是受到了大多數(shù)用戶的喜愛(ài),鮮明的畫(huà)風(fēng)、生動(dòng)有趣的動(dòng)畫(huà)以及完整的模特展示在一定程度上激發(fā)了用戶表演熱情,使聊天過(guò)程充滿樂(lè)趣。我們采訪了一些用戶使用之后的體驗(yàn)感受,得出了一些關(guān)鍵詞。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

關(guān)于這套表情包的后續(xù)的衍生應(yīng)用我們?cè)陧?xiàng)目初期就有考慮到,所以從繪制靜幀原畫(huà)開(kāi)始一直到表情包動(dòng)畫(huà)完成都是按照3:4的相機(jī)拍攝比例來(lái)做的將主體內(nèi)容放置在1:1的參考線內(nèi),完成動(dòng)畫(huà)以后同時(shí)輸出了1:1的表情包素材和3:4的不帶文案的相機(jī)前景裝飾素材,方便后期復(fù)用。

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

結(jié)語(yǔ)

表情包在日常已經(jīng)變成了我們傳遞情緒最不可缺少的的一部分,而用戶的喜好也會(huì)在日新月異的社會(huì)文化中快速變化,設(shè)計(jì)師除了在提升自己的專業(yè)技能以外,還需要提升產(chǎn)品思維和保持洞察力努力發(fā)現(xiàn)和創(chuàng)造出更多的可能性。

技術(shù)支持來(lái)自騰訊光影研究室,對(duì)人臉GAN畫(huà)風(fēng)訓(xùn)練技術(shù)感興趣的同學(xué)可以看看這個(gè):揭秘上了騰訊財(cái)報(bào)的QQ卡通畫(huà)

更多表情包設(shè)計(jì)故事:

歡迎關(guān)注作者微信公眾號(hào):「騰訊ISUX」

表情包還能怎么設(shè)計(jì)?騰訊QQ團(tuán)隊(duì)借古風(fēng)玩出新高度!

收藏 24
點(diǎn)贊 23

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。