女性向設計中的“實用美”—《食物語》視覺包裝設計思路
【前言】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.下苦工盡雕琢(體現設計內涵)
除了畫風一致,畫質高,畫面豐富,有層次外。不同角色的設計都要符合劇情中塑造的人設,從樣貌穿著,言行舉止,道具細節的設計都要值得考究。
圖片來源:《解密單身女性為什麼熱衷“虛擬戀愛”——《戀與製作人》熱點研究》
圖片來源:《食物語產品介紹》——餃子角色設計
2.為細節見真章(體現設計態度)
女性喜歡具有豐富細節的高品質畫面。具體表現為:
- 元素豐滿,畫面不簡陋;
- 造型多樣,保持新鮮感;
- 材質刻畫細膩,保證精緻度;
- 設計貼合女性所關注和喜愛的內容。
圖片來源:《戀與製作人》
圖片來源:《奇蹟暖暖》
二、清麗淡雅的色彩
柔和舒適,清麗淡雅的色彩對大多數女性都具有一定的吸引力。無關氣質和年齡。
上圖為:《戀與製作人》顏色提取
上圖為:暖暖系列顏色提取
上圖為:《遇見逆水寒》顏色提取
上圖為:《旅行青蛙》顏色提取
通過對部分熱門女性向遊戲畫面的總結提煉,我們發現淡色系,低飽和度,低對比度色彩或已成為了該品類的標配。
色卡來源:花瓣網(畫板-CMYK配色列表)
三、溫暖舒適的氛圍
1.視覺感受符合主題,帶入感強。
圖片來源:《戀與製作人》
2.新增具有女性特色且與生活相關的元素可以有效烘托氣氛,如:花瓣、蝴蝶、螢火、光斑、雪花、羽毛、玩偶、輕紗等。
以上分析提煉的女性視覺偏好特點雖然並不是絕對的,但似乎已經變成了現今“女性向遊戲”視覺風格中約定俗成的規律。雖然規律可以被打破,但有一點不會變,女性追求的美是內外兼具的,渴望被尊重,被認真對待。所以當產品拿出十足的誠意,便能吸引女性“為愛發電”。
案例運用
一、 專案背景
1.專案概述
食物語是由騰訊代理髮行、天梯互娛研發的一款垂直女性向產品,具有較強的二次元和女性向屬性。
- 遊戲特色:中華美食擬人、角色互動、溫暖治癒
- 核心玩法:卡牌養成+模擬經營+回合制RPG卡牌
- 美術風格:二次元中國風,賽璐璐與水彩相結合
2.設計痛點
在食物語的UI視覺設計中,我們除了參與UI風格,核心介面的設計外。還有遊戲內分享圖,遊戲內情感化介面以及平臺投放素材的設計。在接觸這塊內容後,我們發現一些關鍵問題:
色彩寡淡,造型元素單一,氛圍冷清吸引力不夠,玩家分享意願薄弱;
設計素材拼湊感較強,構圖常規、單一、無張力。缺乏IP風格化,整體投放素材品質低於遊戲真實美術水平。平臺投放效果較差;
不同CP合作輸出,素材量多且雜,無統一設計標準,質量普遍偏低;
總結來看,有部分設計品質較低,不太符合女性對美的訴求。
3.設計目標
圍繞上述的痛點,我們需要制定合理出的優化目標,希望能解決痛點問題,滿足使用者訴求,讓設計為產品創造真正的實用價值。
二、女性向手遊視覺設計要點分析
1.瞭解專案——根據產品特徵,分析設計關鍵:
- 融入國風元素
- 新增溫暖動人的細節和氛圍
- 貫徹二次元扁平的畫風和造型上的張力
2.讀懂使用者——觀察不同型別的使用者喜好,可根據不同投放渠道制定設計策略
在使用者方面,設計依然秉承“想使用者所需,懂使用者所求”的理念。在瞭解使用者群體的基礎資訊以外,還要關注不同渠道,不同型別的女性使用者喜好,並定製針對性的設計策略。這也將是視覺優化的設計的難點之一。(由於使用者分層資訊屬於專案敏感資訊,此處暫不列舉)
針對平臺投放素材的設計,我們可以通過優劣質素材觀察分層使用者喜好。例如:
- 手Q平臺的女性向使用者會偏好治癒溫馨、撩人、柔和、日系的素材風格;
- 手Q平臺的核心二次元使用者,較喜歡二次元風格的素材。視覺表現有張力,形式感強,或者偏靜謐高冷的意境、帶有浮世繪風格的元素等。
為了更加明確設計思路,還可以通過測試資料總結設計經驗。例如:
- 在排版構圖方面,食物語使用者對色彩繽紛、排版複雜、元素多的廣告素材展現轉化率更高。據觀察,在多款排版廣告素材同時投放的情況下,各素材轉化率都優於單一版式素材同時投放的轉化率。
- 在人物選擇方面,也可對比分析出較為優秀的人物素材和女性玩家一些特殊的喜好。
3.明確意圖——瞭解不同運營目標下的設計意圖,再製定設計策略
- 分享類:需多樣化,具有趣味性
- 功能類:需便捷、實用、可互動
- 傳播類:需有創意、易傳播
- 內容類:需有梗、有共鳴
參考文獻:《微信精品遊戲社交手冊》
4.制定規則——制定多維度設計規範,注重設計品質
三、設計執行
1.案例(1):遊戲內情感化介面—— 增強氛圍,提升代入感;
【定製禮包介面】
起初的定製禮包介面色彩暗淡 ,氛圍不夠積極,元素雖然豐富但主要主邊框造型比較單一。關鍵資訊也不夠突出,玩家參與意願較弱。
上圖為:《食物語》的舊版定製禮包介面
優化思路:
- 色彩鮮明有對比,用裝飾物和光澤來塑造氛圍,如前文提到的螢火,花瓣,蝴蝶等;
- 在外框和圖邊框上都充分融入國風元素,如中式房簷和燈籠等。設計貓頭形狀的折扣標籤可以呼應食物語吉祥物陸吾的形象;
- 突出關鍵資訊;
- 注重細節刻畫;
上圖為:視覺元素參考
效果展示:
上圖為:《食物語》設計效果圖,最終效果見遊戲內
【商城介面】
《食物語》原版的商城介面是偏功能型的列表式設計,雖然操作效率高,但內容的展示缺乏吸引力。介面色彩清新,偏冷淡,傳遞的感情比較冰冷,缺乏溫度。
上圖為:《食物語》的舊版商城介面??
優化思路:
- 設計方向偏情感化,充分融入國風元素,營造商店的感覺,同時讓物品展示更有儀式感;
- 選取夜景但整體色調偏暖,讓氛圍更加積極;
- 突出折扣資訊;
- 將部分功能融入場景中,會更加有趣。
上圖為:視覺元素參考
效果展示:
上圖為:《食物語》商城介面優化1.0
上圖為:《食物語》商城介面優化2.0
(開發商在之前的基礎上調整了互動,視覺上也進一步優化)以上均為設計效果圖,最終效果見遊戲內??
除了上述介面外,設計中心參與遊戲內情感化介面還包括首充和目前剛結束的“雲華引春”活動。由於篇幅的原因,設計思路就不一 一展開了。
效果展示:
【商城介面】
上圖為:《食物語》設計過程稿,最終效果見遊戲內
【“雲華引春”活動】
上圖為《食物語》設計效果圖,最終效果見遊戲內
2.案例(2):遊戲內分享圖——提升視覺品質,提高分享率;
【獲得食魂介面】
召喚是《食物語》的重要系統。為了給玩家創造更好的情境體驗,召喚過程需要玩家手動選中某個菜系為起點,拖動畫出一個寓意八大菜系的召喚陣。而獲得食魂的介面,就是召喚過程中重要的一環,召喚結果的出現需要能給玩家帶來獲得感。
原版的食魂獲得介面由於色彩和元素單一,食魂資訊也不夠清晰。顯得創意不足,視覺品質不夠。並且與之前的召喚過程關聯性不大,有些脫節的感覺,所以分享率較低。
上圖為:《食物語》的舊版獲得食魂介面
優化思路:
- 色彩需要清新明快,溫暖舒適,符合女性審美。並且能通過顏色讓玩家明確區分御、珍、尚、良四個品質;
- 背景融合召喚所用的永珍陣,前後呼應,讓整個召喚流程更加合理順暢。同時並加入動效,讓整個介面更加豐富有細節;
- 介面內加入能夠代表食物香氣的元素,配合中國祥雲,讓細節更加豐富;
- 梳理食魂資訊,樣式上也根據品質定製化。
效果展示:
上圖均為:《食物語》設計效果圖,最終效果見遊戲內
以上為遊戲召喚剪輯片段
除了食魂獲得介面外,設計中心還參與了圖鑑、空桑快訊、分享答題、拯救食魂分享等介面的調優,使分享圖品質明顯提升,有效拉高使用者分享率。首周活躍使用者分享率相比於近1年同品類新遊首周均值高出近20%。
優秀的分享素材能有效驅動使用者下載,提升分享素材的拉新效率。正如“愛心分享”和“答題分享”在視覺上幫助了食物語獲得了微信2019年9月及10月社交效率獎第一名。其中,反覆調優的愛心分享活動素材,活躍使用者分享率創歷史新高。當然優秀的分享素材也同樣離不開優秀的活動創意和文案~
上圖均為:《食物語》設計效果圖,最終效果見遊戲內
3.案例(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/
來源:騰訊P&Pdesign
原地址:https://mp.weixin.qq.com/s/mdxIstgA-pJ-_GWLZdVR-Q
相關文章
- 《食物語》互動迭代思路:“她”時代下的情感化設計食物語
- 女程式設計師創業:姐賣的不是食物,是驚喜!程式設計師創業
- 視覺設計中五感的運用!視覺、聽覺、嗅覺、味覺和觸覺!視覺
- 槍械的美學設計與思路解析
- 史丹佛:資料視覺化與美學設計【視訊】視覺化
- 小議視覺設計中的漸變視覺
- 用程式語言解密京東雲女程式設計師解密程式設計師
- 高效的設計視覺化視覺化
- 互動設計/視覺設計/網頁設計/UX設計/UI設計的區別視覺網頁UXUI
- 傳說中的女程式設計師程式設計師
- 從概設流程、審美、設計思路幾個方面,漫談遊戲美術設計的思維方式遊戲
- 馬峰視覺設計視覺
- 如何製作實用美觀的設計文件
- 淺析視覺設計中的圖文關係視覺
- 程式設計時你用什麼食物來提神?程式設計
- 前端使用 Konva 實現視覺化設計器(13)- 折線 - 最優路徑應用【思路篇】前端視覺化
- dns安全視覺化 設計DNS視覺化
- 美國的女程式設計師程式設計師
- 視覺化編輯器的設計視覺化
- 乙女手遊賣點在哪裡?淺析大廠乙女手遊的設計思路與特色
- UI設計培訓分享:UI設計師的設計思路UI
- 《鴻圖之下》:如何做“不一樣的國風國戰”視覺包裝設計視覺
- 用程式設計工具實現資料視覺化的幾個選擇程式設計視覺化
- Javaweb設計思路JavaWeb
- 視覺化搭建 - 容器元件設計視覺化元件
- 女程式設計師、女設計師、女運營……原來女生也能活成這樣!程式設計師
- Web設計中對視差設計的誤區Web
- 最早做遊戲設計與開發的女程式設計師遊戲設計程式設計師
- 國外的視覺設計好在哪裡?視覺
- 視覺化資料的目的化設計視覺化
- 前端使用 Konva 實現視覺化設計器(6)前端視覺化
- 前端使用 Konva 實現視覺化設計器(2)前端視覺化
- 前端使用 Konva 實現視覺化設計器(3)前端視覺化
- 前端使用 Konva 實現視覺化設計器(4)前端視覺化
- RESTful API 設計思路及實踐RESTAPI
- 一種新的程式設計思路(中): (轉)程式設計
- 機器視覺在生產包裝技術中的應用視覺
- 兩年外包女程式設計師的真實感受程式設計師