女性向設計中的“實用美”—《食物語》視覺包裝設計思路

11天前發布

原創文章 / 多領域 / 教程
騰訊游戲學院 原創,如需商業用途或轉載請與騰訊游戲學院聯系,謝謝配合。

本文將重點從視覺設計的角度,復盤設計團隊在垂類產品中的探索之路以及食物語視覺包裝的設計與思考。

本文由 | P&PDesign(P&PDesign是騰訊互動娛樂發行線下的設計中心)及騰訊游戲學院《真經閣》欄目

聯合發布


講師介紹


Sammi 騰訊互娛 互動娛樂發行線P&PDesign設計中心 視覺設計師


導語


2019年,一款美食加美男的國風手游《食物語》在女性向游戲品類中脫穎而出。作為騰訊女性向賽道的第一款代理產品,具有較強的屬性特征。這也給聯合打造食物語的各個團隊帶來了新的挑戰。本文將重點從視覺設計的角度,復盤設計團隊在垂類產品中的探索之路以及食物語視覺包裝的設計與思考。

 

當今社會,“她經濟”的蓬勃發展,推動了女性的消費范圍逐步多元化。除影視、購物、美容等領域的女性消費增速迅猛之外,更多的女性向產品開始嶄露頭角,并有爆發之勢。女性的消費行為也變得更加情感化、多樣化、個性化、自主化、和休閑化。


數據出處:艾媒咨詢

 

放眼游戲行業,國內女性玩家數量在與日俱增,并且展現出不弱于男性玩家的消費實力。直到2017年末《戀與制作人》的火爆徹底點燃了中國女性向游戲市場。


一、女性向游戲的概念及分類


女性向游戲是指針對女性需求和喜好而研發,為女性提供定制游戲體驗的產品。

嚴格意義上的女性向作品大多是戀愛類型。近年因為創作蓬勃的關系,也漸漸出現了不以戀愛為主題的女性向作品。在玩法和題材上也不斷推陳出新,融匯貫通。女性向游戲的市場空間呈現逐步擴大的趨勢。且未來可期。


二、熱門女性向手游視覺特性分析


當前女性產品呈現出顏值與體驗并存、理性與情感交融的趨勢。所以無論是玩法體驗、聽視覺感受還是情感的寄托,都需要迎合絕大對數女性玩家的需求。其中,女性向游戲的視覺特征也正是本文要著重分析挖掘的內容。


數據來源:互娛用研《女性手游用戶研究》


科學家研究發現,用于識別顏色的視錐細胞的視蛋白基因位于X染色體上。男性有X和Y染色體,而女性有兩個X染色體,雙X染色體能夠使女性擁有更多視蛋白基因。能增強女性感知光譜中橙黃-紅色區域的能力,增強對色彩的感知能力。所以從生理的角度看,女性天生就是視覺動物,相比男性對美的要求更高,會格外的關注顏色和細節,同時也更加注重氛圍。


圖片來源:https://www.psychologytoday.com/us/blog/brain-babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye

 

我們做設計和戀愛的方式一樣,不是1+1=2的數學,但也不絕對不是沒有規律可循的玄學。要取悅對方,必先投其所好。那么如何才能滿足女性對美的訴求呢?三個關鍵要素缺一不可:


1.  精美細致的畫面


(1)下苦工盡雕琢(體現設計內涵)

除了畫風一致,畫質高,畫面豐富,有層次外。不同角色的設計都要符合劇情中塑造的人設,從樣貌穿著,言行舉止,道具細節的設計都要值得考究。


圖片來源:《解密單身女性為什么熱衷“虛擬戀愛”——《戀與制作人》熱點研究》

 


圖片來源:《食物語產品介紹》——餃子角色設計

 

(2) 為細節見真章(體現設計態度)

女性喜歡具有豐富細節的高品質畫面。具體表現為:

  • 元素豐滿,畫面不簡陋;

  • 造型多樣,保持新鮮感;

  • 材質刻畫細膩,保證精致度;

  • 設計貼合女性所關注和喜愛的內容。


圖片來源:《戀與制作人》

 


圖片來源:《奇跡暖暖》


2.  清麗淡雅的色彩


柔和舒適,清麗淡雅的色彩對大多數女性都具有一定的吸引力。無關氣質和年齡。

 

上圖為:《戀與制作人》顏色提取

 


上圖為:暖暖系列顏色提取

 


上圖為:《遇見逆水寒》顏色提取

 

上圖為:《旅行青蛙》顏色提取

 

通過對部分熱門女性向游戲畫面的總結提煉,我們發現淡色系,低飽和度,低對比度色彩或已成為了該品類的標配。


色卡來源:花瓣網(畫板-CMYK配色列表)


3.  溫暖舒適的氛圍


(1) 視覺感受符合主題,帶入感強。

圖片來源:《戀與制作人》

 

(2) 添加具有女性特色且與生活相關的元素可以有效烘托氣氛,如:花瓣、蝴蝶、螢火、光斑、雪花、羽毛、玩偶、輕紗等。

以上分析提煉的女性視覺偏好特點雖然并不是絕對的,但似乎已經變成了現今“女性向游戲”視覺風格中約定俗成的規律。雖然規律可以被打破,但有一點不會變,女性追求的美是內外兼具的,渴望被尊重,被認真對待。所以當產品拿出十足的誠意,便能吸引女性“為愛發電”。


三、 案例運用


1. 項目背景


(1) 項目概述

食物語是由騰訊代理發行、天梯互娛研發的一款垂直女性向產品,具有較強的二次元和女性向屬性。

游戲特色:中華美食擬人、角色互動、溫暖治愈

核心玩法:卡牌養成+模擬經營+回合制RPG卡牌

美術風格:二次元中國風,賽璐璐與水彩相結合

 

(2) 設計痛點

在食物語的UI視覺設計中,我們除了參與UI風格,核心界面的設計外。還有游戲內分享圖,游戲內情感化界面以及平臺投放素材的設計。在接觸這塊內容后,我們發現一些關鍵問題:

  • 色彩寡淡,造型元素單一,氛圍冷清吸引力不夠,玩家分享意愿薄弱。

 

  • 設計素材拼湊感較強,構圖常規、單一、無張力。缺乏IP風格化,整體投放素材品質低于游戲真實美術水平。平臺投放效果較差。

 

 

  • 不同CP合作輸出,素材量多且雜,無統一設計標準,質量普遍偏低。


總結來看,有部分設計品質較低,不太符合女性對美的訴求。


 

(3) 設計目標

圍繞上述的痛點,我們需要制定合理出的優化目標,希望能解決痛點問題,滿足用戶訴求,讓設計為產品創造真正的實用價值。


2.   女性向手游視覺設計要點分析


(1) 了解項目——根據產品特征,分析設計關鍵

  • 融入國風元素

  • 添加溫暖動人的細節和氛圍

  • 貫徹二次元扁平的畫風和造型上的張力

 

(2) 讀懂用戶——觀察不同類型的用戶喜好,可根據不同投放渠道制定設計策略

在用戶方面,設計依然秉承“想用戶所需,懂用戶所求”的理念。在了解用戶群體的基礎信息以外,還要關注不同渠道,不同類型的女性用戶喜好,并定制針對性的設計策略。這也將是視覺優化的設計的難點之一。(由于用戶分層信息屬于項目敏感信息,此處暫不列舉)

 

針對平臺投放素材的設計,我們可以通過優劣質素材觀察分層用戶喜好。例如:

  • 手Q平臺的女性向用戶會偏好治愈溫馨、撩人、柔和、日系的素材風格;

  • 手Q平臺的核心二次元用戶,較喜歡二次元風格的素材。視覺表現有張力,形式感強,或者偏寧謐的意境、帶有浮世繪風格的元素等。

 

為了更加明確設計思路,還可以通過測試數據總結設計經驗。例如:

  • 在排版構圖方面,食物語用戶對色彩繽紛、排版復雜、元素多的廣告素材展現轉化率更高。據觀察,在多款排版廣告素材同時投放的情況下,各素材轉化率都優于單一版式素材同時投放的轉化率。

  • 在人物選擇方面,也可對比分析出較為優秀的人物素材和女性玩家一些特殊的喜好。

 

(3) 明確意圖——了解不同運營目標下的設計意圖,再制定設計策略

  • 分享類:需多樣化,具有趣味性

  • 功能類:需便捷、實用、可互動

  • 傳播類:需有創意、易傳播

  • 內容類:需有梗、有共鳴


參考文獻:《微信精品游戲社交手冊》

 

(4) 制定規則——制定多維度設計規范,注重設計品質


3.  設計執行


案例1:游戲內情感化界面——增強氛圍,提升代入感

【定制禮包界面】

起初的定制禮包界面色彩暗淡 ,氛圍不夠積極,元素雖然豐富但主要主邊框造型比較單一。關鍵信息也不夠突出,玩家參與意愿較弱。


上圖為:《食物語》的舊版定制禮包界面

優化思路:

  • 色彩鮮明有對比,用裝飾物和光澤來塑造氛圍,如前文提到的螢火,花瓣,蝴蝶等;

  • 在外框和圖邊框上都充分融入國風元素,如中式房檐和燈籠等。設計貓頭形狀的折扣標簽可以呼應食物語吉祥物陸吾的形象;

  • 突出關鍵信息。

  • 注重細節刻畫。

 

上圖為:視覺元素參考

 

效果展示:


上圖為:《食物語》設計效果圖,最終效果見游戲內

 

 

【商城界面】

《食物語》原版的商城界面是偏功能型的列表式設計,雖然操作效率高,但內容的展示缺乏吸引力。界面色彩清新,偏冷淡,傳遞的感情比較冰冷,缺乏溫度。

 

上圖為:《食物語》的舊版商城界面

優化思路:

  • 設計方向偏情感化,充分融入國風元素,營造商店的感覺,同時讓物品展示更有儀式感;

  • 選取夜景但整體色調偏暖,讓氛圍更加積極;

  • 突出折扣信息;

  • 將部分功能融入場景中,會更加有趣。

 

上圖為:視覺元素參考

 

效果展示:


上圖為:《食物語》商城界面優化1.0


上圖為:《食物語》商城界面優化2.0(開發商在之前的基礎上調整了交互,視覺上也進一步優化)以上均為設計效果圖,最終效果見游戲內

 

 

除了上述界面外,設計中心參與游戲內情感化界面還包括首充和目前剛結束的“云華引春”活動。由于篇幅的原因,設計思路就不一 一展開了。


效果展示

【商城界面】


上圖為:《食物語》設計過程稿,最終效果見游戲內

 

【“云華引春”活動】


上圖均為:《食物語》設計效果圖,最終效果見游戲內

 

案例2:游戲內分享圖——提升視覺品質,提高分享率

【獲得食魂界面】

召喚是《食物語》的重要系統。為了給玩家創造更好的情境體驗,召喚過程需要玩家手動選中某個菜系為起點,拖動畫出一個寓意八大菜系的召喚陣。而獲得食魂的界面,就是召喚過程中重要的一環,召喚結果的出現需要能給玩家帶來獲得感。

原版的食魂獲得界面由于色彩和元素單一,食魂信息也不夠清晰。顯得創意不足,視覺品質不夠。并且與之前的召喚過程關聯性不大,有些脫節的感覺,所以分享率較低。


上圖為:《食物語》的舊版獲得食魂界面

優化思路:

  • 色彩需要清新明快,溫暖舒適,符合女性審美。并且能通過顏色讓玩家明確區分御、珍、尚、良四個品質;

  • 背景融合召喚所用的萬象陣,前后呼應,讓整個召喚流程更加合理順暢。同時并加入動效,讓整個界面更加豐富有細節;

  • 界面內加入能夠代表食物香氣的元素,配合中國祥云,讓細節更加豐富;

  • 梳理食魂信息,樣式上也根據品質定制化。

 

效果展示:


上圖均為:《食物語》設計效果圖,最終效果見游戲內

 

以上為游戲召喚剪輯片段

 

除了食魂獲得界面外,設計中心還參與了圖鑒、空桑快訊、分享答題、拯救食魂分享等界面的調優,使分享圖品質明顯提升,有效拉高用戶分享率。首周活躍用戶分享率相比于近1年同品類新游首周均值高出近20%。

優秀的分享素材能有效驅動用戶下載,提升分享素材的拉新效率。正如“愛心分享”和“答題分享”在視覺上幫助了食物語獲得了微信2019年9月及10月社交效率獎第一名。其中,反復調優的愛心分享活動素材,活躍用戶分享率創歷史新高。 當然優秀的分享素材也同樣離不開優秀的活動創意和文案~


上圖均為:《食物語》設計效果圖,最終效果見游戲內

 

案例3:平臺投放素材——提升平臺投放率及CP設計效率

設計中心針對部分平臺投放素材進行精細優化,通過對排版,字體,按鈕等元素的調整形成食物語素材的風格化。同時定制規范,提升平臺投放效率。

以下兩張圖均用于投放拉新建模分層用戶,第一張圖為優化前的投放素材,優化前背景復雜,與人物關系不清晰。角色張力不夠,按鈕設計粗糙且識別不夠,缺乏點擊欲望 。第二張圖經設計中心優化后,點擊率提升了200%

 

優化思路:

首先明確投放平臺,投放資源位和投放用戶。然后通過上文提到的方法針對目標群體制定視覺設計的發力方向。

  • 調整面板層級,讓信息傳達更明確;

  • 替換角色讓畫面更有沖擊力;

  • 突出國風元素;

  • 字體定制化設計更具風格化;

  • 對界面按鈕進行精細化設計。


效果展示:


之前的設計痛點中也提到,平臺投放素材由不同CP合作輸出,無統一設計標準,質量普遍偏低。為提升CP設計效率,需制定多維度設計規范,把控設計品質。


上圖為:《食物語平臺投放素材設計規范》

 

優化成果:

后續按設計中心規范出圖后,《食物語》部分素材亦因點擊轉化較好,被選為手Q平臺的優秀素材案例。10月的第一周和第四周,調優素材在微信平臺投放,并有幸名列成熟游戲第一名。


四、 總結

在一一解決《食物語》視覺設計中遇到的“無氛圍代入感差,無個性吸引力低及無規范設計效率低”的痛點問題之后。我們回歸主題開始思考到底什么才是女性向設計中的“實用美”?在我看來那就是我們的視覺設計能夠立足女性用戶、提供全民受用的高品質畫面,能積極弘揚產品本身的特質,同時提升設計體驗和產品口碑。

而要做到這些首先得知己知彼、投其所好,才能用正確的方式挖掘視覺體驗上的實用價值。

 

最后,感謝《食物語》團隊的每一位小伙伴,產品的成功離不開每一個環節的努力。再此,祝《食物語》半周年快樂。各位少主,有空就來空桑玩哦,還有很多有趣的設計等您探索~(PS:文章謹代表個人觀點,僅供交流學習參考)。

 

參考資料

https://www.psychologytoday.com/us/blog/brain-babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye

《尋找色覺女超人:能看到百倍色彩的她究竟在哪里?》https://www.guokr.com/article/441352/


想看更多好文,請關注騰訊PPdesign~

 

 


490
- 2位站酷推薦設計師推薦 -

    文章信息

    • 文章標簽

    沒有新消息



    tlc同乐城体育