騰訊實戰!上億人在玩的「QQ為我畫年畫」是如何設計出來的?
春節作為我國最盛大的傳統節日,歷經長期的傳承和發展,已逐步形成了各地方各民族穩定的文化內涵。設計師需要從使用者內心出發,探究使用者回家過年的真實意義,將情感基因視覺化。
「家」文化的情感基因
孟子曰:「天下之本在國,國之本在家。」中國傳統文化形成和發展的重要社會根基是以血緣關係為紐帶的宗法制度,它在很大程度上決定了中國的社會政治結構和意識形態。雖然時代變遷,科技進步,但是「家庭之上」的觀念千百年來已深入國人骨血。
「闔家團圓」是國人回家過春節的第一要義。「金窩銀窩不如自己的狗窩」,家是國人最圓滿的歸宿,暗含著人們對家鄉的歸屬和對家庭的熱愛。在國人的記憶裡,「喜慶熱鬧」是春節最直觀的感受,營造春節快樂幸福的氛圍,滿足人們對未來美好生活的願景。這種節日儀式使人們找到了本土文化歸屬感,形成了各地迥異的過年特色。
情感基因的視覺化
神經心理學指出人的爬行腦更加喜歡視覺化的資訊,而不是抽象的資訊。設計師把提煉出來的使用者情感視覺化,找到與之匹配的具象實物。
帶有春節特色的實物很多,比如紅包,燈籠,鞭炮等等,但它們都不具有差異性。在春節習俗中,什麼物品既有差別,又可以承載使用者內容,同時讓使用者愉悅呢?我們想到了年畫。
年畫是中國傳統文化的一部分,每值歲末,多數地方都有張貼年畫的習俗,以祝願新年吉慶,驅凶迎祥,寄託了國人對未來日子的美好希望;年畫是地域文化的辭典,從中可找到各地域鮮明的文化個性;年畫的題材又包羅永珍,神仙、娃娃、美人、世俗生活……可見,年畫的這些優勢與我們所需的實物基因高度吻合。
我們與天天P圖合作,打造「年畫」形式下的使用者私定照片。照片是勾起回憶的東西,也是社交的工具。現在,使用者熱衷於在社交產品上分享和檢視彼此相片,易於活動的傳播。
設計流程與執行
1. 設計流程
情感化設計結合諾曼心理學分為本能、行為和反思三個層級,分別對應專案的不同訴求。
如果使用者認為生成的個人年畫「漂亮」,這個判斷來自本能層,在此層次中,視覺、感知、聲音等生理特徵起主導作用,因此,美感是重要的因素。設計師追求的效果是讓使用者有喜悅感(過節的喜悅、年畫美的喜悅)和家鄉歸屬感,造型、顏色、版式、文字都對情感反映有影響,可見,它是整體專案的核心內容。
行為層和使用有關,講究功能的實現。優秀的行為層次設計有四個要素,即功能、易理解性、易用性和感受。在年畫專案裡,UI為使用者提供年畫生成的步驟操作,就需要介面的資訊清晰、提示動畫直觀、操作流程簡單且順暢和及時性的反饋。
一切盡在使用者心中是反思層的本質,使用者對年畫活動的評價和反饋是反思層的內容。
專案設計週期較短,所以前兩個層級設計同步開始,需要多個設計師配合完成。
2. 設計執行
本能層 – 年畫設計
在創作年畫前,設計師把視覺元素進行分類,將情感基因分為地域差異型和節日大眾型兩類元素;從地域差異緯度考慮,再拆分為建築類、食物類和語言類;以此類推,把大眾型元素細分為人物類與道具類。分類的整理有助於設計師梳理繪畫思路,調配人員和工作內容,保證多人同時高效輸出。
人物設計
年畫作為新年時中國民間傳統的裝飾物件,寄託著人們對新的一年的祝願與祈盼。年畫內容類別豐富多彩,但無外乎表現的都是吉祥、喜慶相關的題材。自古以來,「五福臨門」便是中國人民孜孜以求的人生夙願,「福」、「祿」、「壽」、「喜」、「財」是民間關於人生幸福觀的五個常見維度標準,因此在進行人物角色創作時,我們以這五個方向作為創作題材的靈感來源,將「五福」的美好寓意融合到角色設計中。
根源於古人對自然的信仰與崇拜,傳統年畫通常採用借物抒情、寓意於物的手法。如用懷抱鯉魚的福娃寄託年年有餘的願望,巧借諧音將「祿」與「鹿」聯絡在一起,通過「仙鶴」、「喜鵲」、「貔貅」等形象寓意「長壽」、「喜慶」、「多財」。我們將傳統五福的象徵符號以圖形的方式結合到角色設計裡,同時創作出更具現代感的人物特徵,基於傳統,跳出框架。
出於時間限制,要在2周左右完成全部的角色設計,同時考慮到人物與前景食物、背景建築插畫的風格調性相配,人物採用了傳統年畫的偽立體插畫風格,表現手法上則更偏向二次元漫畫的方式。角色年齡跨度從正太蘿莉到熟男御姐,服飾以中式為主,兼具古裝、唐裝、舞臺裝等多種風格,在服裝細節、手勢及裝飾物件中融入五福的符號元素。以便吸引不同口味的使用者群體一同參與活動。
為了讓人物與使用者產生更多共鳴,這次我們與天天P圖合作,通過天天P圖成熟的「變臉」技術,讓年畫的人物與使用者實際樣貌進行融合。由於之前沒有面部融合人物的相關繪製經驗,初期融合圖的臉部繪製更偏向二次元卡通人物,然而融合後發現諸多問題,如誇張的五官比例無法與真人臉部完美融合、面部陰影導致融合後膚色斷層、髮型遮擋五官影響融合效果等等。在經過多次針對五官、髮型、膚色、妝容乃至面部表情的「微整容」後,真人融合用圖終於達到一個相對滿意的結果。
最終融合效果:
前景素材 – 食物、道具
中國人對於過年吃什麼是非常重視的,「年夜飯」作為春節期間一種必不可少的文化,其中一些傳統習俗一直沿襲至今。年夜飯的名堂很多,南北各地不同,有餃子、餛飩、長面、元宵等,而且各有講究,所以在食物繪製的過程中我們考慮到各個地區的習俗差異針對不同地區做了差異化分類。
大區域內通用食物,例如:北方的餃子,南方的湯圓,雞鴨魚肉等。
每個省份代表性過年食物,例如:川渝的火鍋,湖南的剁椒魚頭,新疆的手抓飯等。
突出「年味」氛圍通用類素材,例如燈籠,鞭炮,紅包等。
背景建築
千百年來,由於不同地區人們的生活環境和生活習慣的差異,在中華大地上留下了許多各具特色的建築。中國傳統建築並沒有嚴格的流派劃分,所形成的派系也是按照原住地居民長久以來根據當地風土人情而形成不同風格的民居。所以我們在背景的設計過程中融入了不同地區的風土人情。
例如雲南的背景設計中我們採用了當地居民裡最具有民族特點的吊腳樓作為基礎框架,再結合芭蕉葉等當地特色進行畫面豐富。
祝福語
與建築特色相比之下,語言是更能代表地域差異的一點了。中國文化博大精深,每個地區的文化風俗不同,所以各地的語言也有很大的差異,在祝福語部分,我們使用了拼音來表達當地語言的音調,想想用自己家鄉的語調念祝福語,年味兒更濃。
也會有一些地區當地特色或者有意思的祝福語,比如廣東地區的「恭喜發財,利是逗來」,也有東北地區的「過年可勁造」等等。與此同時,使用者也可以切換比較通用的祝福語來表達祝福。
色彩
在中國民間的色彩選擇上,突出顏色的明快與鮮豔。色彩明快要求飽和度高,色相對比明顯,面積對比大,這樣的作品才具有獨特裝飾性,因此衍生出了傳統五色理論──玄白赤青黃。五色作為基礎色,從它色相上又延伸出靛青、紫等中性色,這樣用色讓色彩更豐富、畫面更具有層次感,符合年畫節日氛圍。
版式
在年畫版面中,使用者能接受的視覺元素多少取決於它們的關係,例如:形狀、位置、大小、顏色等。當所有元素在版面中排列整體,顏色、大小、方向趨向統一時,給使用者帶來視覺上的穩定感。具體設計時,採用圖形-背景、相似和連續三種法則。
大部分人都是先看整體後關注細節,設計師使用「圖形-背景關係」大體將版式劃分主次層級,不用分割線,使用者也可直觀地看清畫面。版式細節處理上,採用「相似+連續」的方法。即把相同特性的元素劃分到一起,在添置到一條運動軌跡上,讓使用者在潛意識中形成類別劃分。設計師採用以上兩點,將食物、道具和語言類元素排列在一起,增加版面細節。
QQ年畫每省可生成72張模版,全國整體可生成2520張模版。龐大的模版系統方便使用者隨心搭配,即使在同一個地區也會擁有不同樣的專屬年畫。
行為層 – UI設計
使用者能輕鬆快速的生成個人年畫,是UI設計的目標。合理的利用層次,一方面會增進產品的易用性,降低大量資訊產生的視覺壓力,一方面也是將產品的核心價值更加突出的傳達於使用者。年畫介面的視覺層次,是將1秒的瀏覽時間,拆解成3個階段,每個階段只消耗0.3秒的時間,由此產生的閱讀順序減輕視覺壓力及不必要的干擾。
操作除了過程流暢外,恰當地使用手勢動畫提高產品易用性。此外,做完正常流程後,切記要考慮到特殊情況,進入首頁和換膚都會佔用使用者部分時間,及時的 loading 動畫降低使用者的負面情緒。
UI整體效果展示:
反思層 – 使用者反饋
《QQ為我畫年畫》上線之後,激起使用者熱烈反響。活動期間,共生成2.3億張春節年畫,平均每個使用者生成7次,使用者積極分享晒圖,社交模式的滲入進一步擴大活動的傳播與影響。
專案總結
這次的年畫專案首次與天天P圖合作,通過成熟的人臉融合技術,結合使用者家鄉背景特色創作出富有使用者個人特色的專屬年畫。新技術的結合帶來了一些新的困難與挑戰,也讓我們總結了不少經驗,如人臉融合圖要更貼近真人五官比例,人物表情、妝容、膚色、面部陰影都會影響最終融合效果。這次活動是傳統題材與現代技術結合的優秀案例,為我們未來運營活動的個性化玩法提供了更多的可能性。
歡迎關注「騰訊ISUX」的公眾號: