設(shè)計項目復(fù)盤:QQ為我畫年畫

0 評論 3103 瀏覽 20 收藏 17 分鐘

春節(jié)作為我國最盛大的傳統(tǒng)節(jié)日,歷經(jīng)長期的傳承和發(fā)展,已逐步形成了各地方,各民族穩(wěn)定的文化內(nèi)涵。設(shè)計師需要從用戶內(nèi)心出發(fā),探究用戶回家過年的真實意義,將情感基因視覺化。

Step1:“家”文化的情感基因

孟子曰:“天下之本在國,國之本在家?!敝袊鴤鹘y(tǒng)文化形成和發(fā)展的重要社會根基是以血緣關(guān)系為紐帶的宗法制度,它在很大程度上決定了中國的社會政治結(jié)構(gòu)和意識形態(tài)。雖然時代變遷,科技進(jìn)步,但是“家庭之上“的觀念千百年來已深入國人骨血。

“闔家團(tuán)圓”是國人回家過春節(jié)的第一要義?!敖鸶C銀窩不如自己的狗窩”,家是國人最圓滿的歸宿,暗含著人們對家鄉(xiāng)的歸屬和對家庭的熱愛。在國人的記憶里,“喜慶熱鬧”是春節(jié)最直觀的感受,營造春節(jié)快樂幸福的氛圍,滿足人們對未來美好生活的愿景。這種節(jié)日儀式使人們找到了本土文化歸屬感,形成了各地迥異的過年特色。

設(shè)計策略 | QQ為我畫年畫

Step2:情感基因的視覺化

神經(jīng)心理學(xué)指出人的爬行腦更加喜歡視覺化的信息,而不是抽象的信息。設(shè)計師把提煉出來的用戶情感視覺化,找到與之匹配的具象實物。

帶有春節(jié)特色的實物很多,比如紅包,燈籠,鞭炮等等,但它們都不具有差異性。在春節(jié)習(xí)俗中,什么物品既有差別,又可以承載用戶內(nèi)容,同時讓用戶愉悅呢?我們想到了年畫。

年畫是中國傳統(tǒng)文化的一部分,每值歲末,多數(shù)地方都有張貼年畫的習(xí)俗,以祝愿新年吉慶,驅(qū)兇迎詳,寄托了國人對未來日子的美好希望;年畫是地域文化的辭典,從中可找到各地域鮮明的文化個性;年畫的題材又包羅萬象,神仙、娃娃、美人、世俗生活……可見,年畫的這些優(yōu)勢與我們所需的實物基因高度吻合。

我們與天天P圖合作,打造“年畫”形式下的用戶私定照片。照片是勾起回憶的東西,也是社交的工具?,F(xiàn)在,用戶熱衷于在社交產(chǎn)品上分享和查看彼此相片,易于活動的傳播。

設(shè)計策略 | QQ為我畫年畫

Step3:設(shè)計流程與執(zhí)行

1. 設(shè)計流程

情感化設(shè)計結(jié)合諾曼心理學(xué)分為本能、行為和反思三個層級,分別對應(yīng)項目的不同訴求。

如果用戶認(rèn)為生成的個人年畫“漂亮“,這個判斷來自本能層,在此層次中,視覺、感知、聲音等生理特征起主導(dǎo)作用,因此,美感是重要的因素。設(shè)計師追求的效果是讓用戶有喜悅感(過節(jié)的喜悅、年畫美的喜悅)和家鄉(xiāng)歸屬感,造型、顏色、版式、文字都對情感反映有影響,可見,它是整體項目的核心內(nèi)容。

行為層和使用有關(guān),講究功能的實現(xiàn)。優(yōu)秀的行為層次設(shè)計有四個要素,即功能、易理解性、易用性和感受。在年畫項目里,UI為用戶提供年畫生成的步驟操作,就需要界面的信息清晰、提示動畫直觀、操作流程簡單且順暢和及時性的反饋。

一切盡在用戶心中是反思層的本質(zhì),用戶對年畫活動的評價和反饋是反思層的內(nèi)容。

項目設(shè)計周期較短,所以前兩個層級設(shè)計同步開始,需要多個設(shè)計師配合完成。

設(shè)計策略 | QQ為我畫年畫

2. 設(shè)計執(zhí)行

本能層-年畫設(shè)計

在創(chuàng)作年畫前,設(shè)計師把視覺元素進(jìn)行分類,將情感基因分為地域差異型和節(jié)日大眾型兩類元素;從地域差異緯度考慮,再拆分為建筑類、食物類和語言類;以此類推,把大眾型元素細(xì)分為人物類與道具類。分類的整理有助于設(shè)計師梳理繪畫思路,調(diào)配人員和工作內(nèi)容,保證多人同時高效輸出。

設(shè)計策略 | QQ為我畫年畫

人物設(shè)計

年畫作為新年時中國民間傳統(tǒng)的裝飾物件,寄托著人們對新的一年的祝愿與祈盼。年畫內(nèi)容類別豐富多彩,但無外乎表現(xiàn)的都是吉祥、喜慶相關(guān)的題材。自古以來,“五福臨門”便是中國人民孜孜以求的人生夙愿,“?!薄ⅰ暗摗?、“壽”、“喜”、“財”是民間關(guān)于人生幸福觀的五個常見維度標(biāo)準(zhǔn),因此在進(jìn)行人物角色創(chuàng)作時,我們以這五個方向作為創(chuàng)作題材的靈感來源,將“五福”的美好寓意融合到角色設(shè)計中。

設(shè)計策略 | QQ為我畫年畫

根源于古人對自然的信仰與崇拜,傳統(tǒng)年畫通常采用借物抒情、寓意于物的手法。如用懷抱鯉魚的福娃寄托年年有余的愿望,巧借諧音將“祿”與“鹿”聯(lián)系在一起,通過“仙鶴”、“喜鵲”、“貔貅”等形象寓意“長壽”、“喜慶”、“多財”。我們將傳統(tǒng)五福的象征符號以圖形的方式結(jié)合到角色設(shè)計里,同時創(chuàng)作出更具現(xiàn)代感的人物特征,基于傳統(tǒng),跳出框架。

設(shè)計策略 | QQ為我畫年畫

出于時間限制,要在2周左右的時間內(nèi)完成全部角色設(shè)計,同時考慮到人物與前景食物、背景建筑插畫的風(fēng)格調(diào)性相配,人物采用了傳統(tǒng)年畫的偽立體插畫風(fēng)格,表現(xiàn)手法上則更偏向二次元漫畫的方式。角色年齡跨度從正太蘿莉到熟男御姐,服飾以中式為主,兼具古裝、唐裝、舞臺裝等多種風(fēng)格,在服裝細(xì)節(jié)、手勢及裝飾物件中融入五福的符號元素。以便吸引不同口味的用戶群體一同參與活動。

設(shè)計策略 | QQ為我畫年畫

設(shè)計策略 | QQ為我畫年畫

為了讓人物與用戶產(chǎn)生更多共鳴,這次我們與天天P圖合作,通過天天P圖成熟的“變臉”技術(shù),讓年畫的人物與用戶實際樣貌進(jìn)行融合。由于之前沒有面部融合人物的相關(guān)繪制經(jīng)驗,初期融合圖的臉部繪制更偏向2次元卡通人物,然而融合后發(fā)現(xiàn)諸多問題,如夸張的五官比例無法與真人臉部完美融合、面部陰影導(dǎo)致融合后膚色斷層、發(fā)型遮擋五官影響融合效果等等。在經(jīng)過多次針對五官、發(fā)型、膚色、妝容乃至面部表情的“微整容”后,真人融合用圖終于達(dá)到一個相對滿意的結(jié)果。

設(shè)計策略 | QQ為我畫年畫

最終融合效果:

設(shè)計策略 | QQ為我畫年畫

前景素材 – 食物、道具

中國人對于過年吃什么是非常重視的,“年夜飯”作為春節(jié)期間中一種必不可少的文化,其中一些傳統(tǒng)習(xí)俗一直沿襲至今。年夜飯的名堂很多,南北各地不同,有餃子、餛飩、長面、元宵等,而且各有講究,所以在食物繪制的過程中我們考慮到各個地區(qū)的習(xí)俗差異針對不同地區(qū)做了差異化分類。

1.大區(qū)域內(nèi)通用食物,例如:北方的餃子,南方的湯圓,雞鴨魚肉等。

設(shè)計策略 | QQ為我畫年畫

2.每個省份代表性過年食物,例如:川渝的火鍋,湖南的剁椒魚頭,新疆的手抓飯等。

設(shè)計策略 | QQ為我畫年畫

3. 突出“年味”氛圍通用類素材,例如燈籠,鞭炮,紅包等。

設(shè)計策略 | QQ為我畫年畫

背景建筑

千百年來,由于不同地區(qū)人們的生活環(huán)境和生活習(xí)慣的差異,在中華大地上留下了許多各具特色的建筑。中國傳統(tǒng)建筑并沒有嚴(yán)格的流派劃分,所形成的派系也是按照原住地居民長久以來根據(jù)當(dāng)?shù)仫L(fēng)土人情而形成不同風(fēng)格的民居。所以我們在背景的設(shè)計過程中融入了不同地區(qū)的風(fēng)土人情。

例如云南的背景設(shè)計中我們采用了當(dāng)?shù)鼐用窭镒罹哂忻褡逄攸c的吊腳樓作為基礎(chǔ)框架,再結(jié)合芭蕉葉等當(dāng)?shù)靥厣M(jìn)行畫面豐富。

設(shè)計策略 | QQ為我畫年畫

祝福語

與建筑特色相比之下,語言是更能代表地域差異的一點了。中國文化博大精深,每個地區(qū)的文化風(fēng)俗不同,所以各地的語言也有很大的差異,在祝福語部分,我們使用了拼音來表達(dá)當(dāng)?shù)卣Z言的音調(diào),想想用自己家鄉(xiāng)的語調(diào)念祝福語,年味兒更濃。

也會有一些地區(qū)當(dāng)?shù)靥厣蛘哂幸馑嫉淖8UZ,比如廣東地區(qū)的“恭喜發(fā)財,利是逗來”,也有東北地區(qū)的“過年可勁造”等等。與此同時,用戶也可以切換比較通用的祝福語來表達(dá)祝福。

設(shè)計策略 | QQ為我畫年畫

色彩

在中國民間的色彩選擇上,突出顏色的明快與鮮艷。色彩明快要求飽和度高,色相對比明顯,面積對比大,這樣的作品才具有獨(dú)特裝飾性,因此衍生出了傳統(tǒng)五色理論 —— 玄白赤青黃。五色作為基礎(chǔ)色,從它色相上又延伸出靛青、紫等中性色,這樣用色讓色彩更豐富、畫面更具有層次感,符合年畫節(jié)日氛圍。

設(shè)計策略 | QQ為我畫年畫

版式

在年畫版面中,用戶能接受的視覺元素多少取決于它們的關(guān)系,例如:形狀、位置、大小、顏色等。當(dāng)所有元素在版面中排列整體,顏色、大小、方向趨向統(tǒng)一時,給用戶帶來視覺上的穩(wěn)定感。具體設(shè)計時,采用圖形-背景、相似和連續(xù)三種法則。

大部分人都是先看整體后關(guān)注細(xì)節(jié),設(shè)計師使用“圖形-背景關(guān)系”大體將版式劃分主次層級,不用分割線,用戶也可直觀地看清畫面。版式細(xì)節(jié)處理上,采用“相似+連續(xù)”的方法。即把相同特性的元素劃分到一起,在添置到一條運(yùn)動軌跡上,讓用戶在潛意識中形成類別劃分。設(shè)計師采用以上兩點,將食物、道具和語言類元素排列在一起,增加版面細(xì)節(jié)。

設(shè)計策略 | QQ為我畫年畫

QQ年畫每省可生成72張模版,全國整體可生成2520張模版。龐大的模版系統(tǒng)方便用戶隨心搭配,即使在同一個地區(qū)也會擁有不同樣的專屬年畫。

設(shè)計策略 | QQ為我畫年畫設(shè)計策略 | QQ為我畫年畫

行為層 – UI設(shè)計

用戶能輕松快速的生成個人年畫,是UI設(shè)計的目標(biāo)。合理的利用層次,一方面會增進(jìn)產(chǎn)品的易用性,降低大量信息產(chǎn)生的視覺壓力,一方面也是將產(chǎn)品的核心價值更加突出的傳達(dá)于用戶。年畫界面的視覺層次,是將1秒的瀏覽時間,拆解成3個階段,每個階段只消耗0.3秒的時間,由此產(chǎn)生的閱讀順序減輕視覺壓力及不必要的干擾。

設(shè)計策略 | QQ為我畫年畫

操作除了過程流暢外,恰當(dāng)?shù)厥褂檬謩輨赢嬏岣弋a(chǎn)品易用性。此外,做完正常流程后,切記要考慮到特殊情況,進(jìn)入首頁和換膚都會占用用戶部分時間,及時的loading動畫降低用戶的負(fù)面情緒。

設(shè)計策略 | QQ為我畫年畫

UI整體效果展示:

設(shè)計策略 | QQ為我畫年畫

反思層 – 用戶反饋

《QQ為我畫年畫》上線之后,激起用戶熱烈反響?;顒悠陂g,共生成2.3億張春節(jié)年畫,平均每個用戶生成7次,用戶積極分享曬圖,社交模式的滲入進(jìn)一步擴(kuò)大活動的傳播與影響。

設(shè)計策略 | QQ為我畫年畫

Step4:項目總結(jié)

這次的年畫項目首次與天天P圖合作,通過成熟的人臉融合技術(shù),結(jié)合用戶家鄉(xiāng)背景特色創(chuàng)作出富有用戶個人特色的專屬年畫。

新技術(shù)的結(jié)合帶來了一些新的困難與挑戰(zhàn),也讓我們總結(jié)了不少經(jīng)驗,如人臉融合圖要更貼近真人五官比例,人物表情、妝容、膚色、面部陰影都會影響最終融合效果。這次活動是傳統(tǒng)題材與現(xiàn)代技術(shù)結(jié)合的優(yōu)秀案例,為我們未來運(yùn)營活動的個性化玩法提供了更多的可能性。

 

來自公眾號:騰訊ISUX(ID:tencent_isux)

原文地址:https://mp.weixin.qq.com/s/9Q33PdYRh0pKLchY8ouwJQ

題圖來自作者

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!