教你了解大廠的完整設計流程
發(fā)布時間:2022-01-22 10:26 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

項目背景


2D 厘米秀日活較高且平穩(wěn),項目組不斷在嘗試一些新玩法,提升用戶活躍度和新鮮感。根據(jù)前期的用戶調(diào)研,我們發(fā)現(xiàn)目標用戶期待的訴求包括:更自由的 DIY 功能和更真實的形象。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

為尋求突破,目前 3D 厘米秀的核心玩法孵化了包括捏臉,換裝,收集和小窩 DIY,而區(qū)別于同類競品的核心優(yōu)勢是 3D 小窩 DIY 功能,所以我們在前期內(nèi)容設計上花費了很大的精力來強化我們的核心玩法。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

3D 人物和小窩的設計對于一支從未做過游戲的團隊來說,挑戰(zhàn)是巨大的。針對內(nèi)容設計,設計團隊投入了大量的人力物力來做,所以有必要了解設計的出發(fā)點,價值點在哪?這就需要從卡噗的產(chǎn)品目標說起。

1. 產(chǎn)品目標

卡噗的產(chǎn)品目標是以工具玩法為切入點,讓用戶玩起來,進而通過豐富社交玩法功能,培養(yǎng)用戶的社交習慣,最終打造一個社交平臺。結(jié)合產(chǎn)品目標,明確了設計的主要發(fā)力點在于內(nèi)容設計上,要滿足用戶的 DIY 需求,前期就需要填補大量內(nèi)容空缺。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

2. 設計目標

而針對內(nèi)容設計,我們把設計目標定位到三個不同階段。大體上的規(guī)劃是在前期進行設計快速沖量,填補內(nèi)容空缺,讓用戶能夠正常玩基礎功能。在解決溫飽問題后,開始逐步提升內(nèi)容質(zhì)量和可玩性,讓用戶沉淀下來。這種目標推進的思路也是伴隨用戶情感加深的一個過程。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程


風格探索


在內(nèi)容設計上,我們前期進行了大量的風格預演,主要分為幾個步驟,競品分析,確定比例,人物造型設計,場景設計等等。

1. 競品分析

開始設計之前,我們計劃從人物風格入手,理由是人物風格比較容易找到定位,場景風格則相對困難找到明確的風格屬性;诖耍覀儗κ忻嫔虾诵母偲愤M行了分析,結(jié)合目標用戶的品味,主要是 10-20 歲的用戶喜好,設定了一個大的方向。人物設定為偏中性,不會特別逼真也沒有很卡通的感覺。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

2. 確定比例

針對人物設定,我們也進行了非常多的測試,目的是找出一種合適的比例,既不影響整體造型,又給人一種可愛的印象。為了使各種動作在小屏幕上清晰可見,手和腳被設計得很大,并且手臂和腿部被延長,以便可以應用各種姿勢和動畫。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

3. 人物造型設計

針對人臉設計,我們也測試了 3 種不同的風格:西方風格,東方風格,和動漫風格。西方風格和已經(jīng)非常流行的 3D 角色 Zepeto 很接近;參照了中國藝人和中國動畫設計的東方風格缺乏新鮮感,似乎沒有什么吸引力;最后的日漫風格給人可愛親切之感,滿足許多人的品味,同時也區(qū)別于其他 3D 角色的設計。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

4. 場景設計

人物風格大致明確后,場景風格就比較容易找到方向,需要與人物風格相匹配。我們通過搜集參考,希望能夠做到開放式,輕質(zhì)感,未來感。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

這是最初的場景概念設計嘗試,并做了相應的性能和材質(zhì)預研,平衡視覺效果及可行性。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程


內(nèi)容規(guī)劃


依據(jù)設計目標,在項目的不同階段,我們對內(nèi)容的設計規(guī)劃也在不斷摸索中前進;厮莩跗诘浆F(xiàn)在的內(nèi)容輸出,大體上可以分為 2 個階段。

第一階段,以功能為核心

卡噗的目標用戶中有很大一部分是與 2D 厘米秀的用戶群體重疊的,所以在初期做內(nèi)容設計時,會著重去參考 2D 厘米秀中比較受歡迎的內(nèi)容元素,這樣能提升決策效率,也能減少一定的試錯風險。

在這個階段,我們主要分 2 個部分來設計,主線是設計 2D 厘米秀中受歡迎程度較高的熱門主題,輔線是設計節(jié)日時間節(jié)點的運營主題,以滿足用戶和產(chǎn)品的基本訴求。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

在主題的搭配上,一般是一個主題配 2 個人物設計(1 位男生+1 位女生),然后配上一個符合主題風格的小窩設計,構(gòu)成一套完整的設計方案。

針對產(chǎn)品需求,在第一階段我們共產(chǎn)出了 20 套主題,其中包括主線設計 14 套和運營 6 套。以下是部分主線設計方案展示:

太空主題

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

賽博朋克

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

夏日沙灘

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

流行樂隊

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

極簡電玩

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

可愛洛麗塔

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

森系女孩

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

民國初年

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

在日常運營上,我們以節(jié)日熱點和服裝系列款設計來推進內(nèi)容產(chǎn)出。以下是部分案例:

中秋神話

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

新春快樂

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

同時,為了能增添換裝的豐富度,我們也設計了一些不帶小窩的小人系列款,

冬季校服系列

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

時尚潮流系列

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

簡單日常系列

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

第二階段,以設計為核心

在上一個階段,我們的設計計劃主要是依據(jù) 2D 厘米秀的設計經(jīng)驗來判斷,以效率優(yōu)先,盡快打造主題設計的豐富性。讓用戶能夠玩上基礎 DIY 功能,其實更多的是基于產(chǎn)品思路為主導的設計。到了第二階段,我們希望能以設計為主導來增強整體的用戶體驗,提升品牌感,能讓用戶從品類繁復的主題中體驗到系列感。進而逐步建立數(shù)據(jù)驅(qū)動模式,不斷地從數(shù)據(jù)反饋中調(diào)整內(nèi)容設計,最終帶來數(shù)據(jù)和體驗的雙提升。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

基于這樣的思路,我們對目前線上不同主題的物品使用率數(shù)據(jù)進行了整理,發(fā)現(xiàn)日常類型的小窩使用率會比較高。我們通過分析發(fā)現(xiàn),對于大部分普通用戶來說,會比較習慣性的按自己腦海中已有的畫面去搭建自己的小窩,比如教室,臥室,咖啡廳這些有比較明確畫面感的場景,很容易就能搬到卡噗應用中。這對用戶來說,搭建成本相對較低,平衡用戶的操作成本,也是我們優(yōu)化用戶體驗的一部分。

所以,在第二階段,我們大體的設計規(guī)劃是以現(xiàn)實場景小窩為主線,以季節(jié)時令為節(jié)奏,搭配節(jié)日運營和 IP 元素為輔線來制定主題的設計輸出。

在這樣的背景下,我們目前已經(jīng)產(chǎn)出了 11 套主題,以下是一些設計方案的展示:

居酒屋

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

繽紛糖果

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

貓耳

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

萬物復蘇

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

愚人節(jié)

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

情人節(jié)

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

白色婚禮

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

我們也在 IP 合作上進行了嘗試,輸出了包括:

Super ELLE系列

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

痛仰樂隊

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

王者榮耀系列

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程


設計執(zhí)行


由于團隊之前在這塊缺乏 3D 游戲設計經(jīng)驗,所以在制作過程中也走了不少彎路。經(jīng)過一段時間的摸索,我們努力將制作流程進行標準化,以提升制作效率。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

這里我們以民國主題作為案例來具體說明我們的模型設計過程。

小窩模型設計

大量找參考,確定大的設計方向。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

白模設計。這個階段主要是要明確小窩大感覺,小窩中各個物件的比例關(guān)系,需要放置哪些物件等等。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

貼圖材質(zhì)渲染。根據(jù)風格參考,先用 3D 軟件渲染出期望的視覺效果

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

模型整理。需要按規(guī)范輸出單個模型物件,規(guī)劃包括減面,mesh 數(shù)合并,軸心,軸向調(diào)整等等。

在 Unity 中還原優(yōu)化材質(zhì),通過特定的工具進行輸出,上架并最終與大家見面。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程


設計質(zhì)量


由于在前期快速趕制設計資源,一些模型在設計質(zhì)量上不盡如人意。所以,在項目進行的過程中,我們也在逐步地提升內(nèi)容設計質(zhì)量。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

這是初期的線上效果,對比市面上的一些核心競品效果,整體視覺表現(xiàn)比較粗糙。

然后我們把主要問題定位為 4 類:模型之間的差異性不夠大,模型的結(jié)構(gòu)美感不足,UV 貼圖的細節(jié)比較少,模型之間的比例大小等輸出不夠規(guī)范。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

首先從貼圖入手,增加貼圖的明暗細節(jié)及層次,對于引擎來說,貼圖細節(jié)的豐富能比較直接地改善渲染壓力,快速出效果。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

因為要讓用戶能夠 DIY,模型間的差異性是很重要的。通過優(yōu)化模型結(jié)構(gòu)和配色,使其差異更加顯著。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

對于單個模型來說,在場景中的比例是非常重要的。既不能太大,影響可放置物件數(shù)量,又不能太小,影響用戶的操作易用性。所以,在模型上給定了大中小三種尺寸范圍,先取相對于人物的大體比例和再結(jié)合模型之間的相對比例作為微調(diào)。確保模型易于操作,且大小合理。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

通過對設計質(zhì)量的持續(xù)跟進及優(yōu)化,一段時間后初見成效,可以看到對比早期的版本,在模型結(jié)構(gòu),貼圖細節(jié)上都有非常大的進步。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

輸出到線上 APP 的實際效果也有了很大的改善。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

從物品的用戶使用率上,能夠判斷用戶更喜歡使用細節(jié)更豐富,更好看的模型。改進后,整體使用率上是有一個大的提升的。接下來,我們也將繼續(xù)對設計質(zhì)量進行優(yōu)化,以滿足用戶對設計品質(zhì)的追求。


規(guī)范建立


由于 3D 制作流程復雜,項目中合作人員眾多,為了將前期的研究成果保質(zhì)保量的落到實處,需要推動一系列流程進行標準化。

模型輸出標準。通過明確輸出標準,調(diào)整方式,常見問題以及案例示意,確保模型輸出準確無誤。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

Unity 輸出標準?ㄠ鄣脑O計不同于一般的 UI 設計項目,不是把設計資源從設計軟件中切圖輸出就結(jié)束了,它還需要經(jīng)過引擎輸出才能給到開發(fā)最終的美術(shù)資源。而在引擎中,需要做的工作就是需要把各種 3D 資源,通過引擎參數(shù)調(diào)整到引擎中的最佳效果,所有上線后的美術(shù)效果都需要以引擎為準,所以這塊也非常的重要。

因為這些設計效果,開發(fā)直接在引擎中是很難拿捏得很準的,所以這部分工作也需要設計師來把控。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

設計側(cè)通過建立引擎標準化文件,提升工作效率,保證在各個平臺上能顯示一致。

最后,再把這些標準形成文檔,給到項目組各個合作團隊使用,確保了設計的一致性和輸出效率。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程


創(chuàng)意設計


不光是做好內(nèi)容標準化,我們還在內(nèi)容創(chuàng)意上做了一些嘗試。比如墩子設計,2D 元素 3D 化,室內(nèi)室外設計等等。

1. 墩子設計

最初的設計,只有小窩,背景是 UI 層的 2D 漸變顏色,整體效果顯得比較單調(diào),像是一個未施工完成的建筑。所以,我們嘗試結(jié)合 2D 品牌的概念,豐富周邊環(huán)境,使場景更加完整,讓用戶能清晰地理解自己所處的狀態(tài)。將這個概念落地后,用戶的反饋也是非常不錯的。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

2. 2D元素3D化

為了能夠更好的提升整體氛圍感,我們還嘗試將一些 UI 元素做成模型,置入場景中,同時加上動效,使之在融入場景的同時還能保持比較高的識別度,而不影響用戶的正常使用和轉(zhuǎn)化率。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

3. 室內(nèi)室外的設計

場景設計只有室內(nèi),未免略顯單調(diào),我們也嘗試了一些室外的設計,讓人物走出房間。將室內(nèi)和室外進行設計聯(lián)動,同一個主題能有 2 個不同的空間環(huán)境,使之成為一個整體,更富有想象力。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程


未來規(guī)劃


對于未來,我們也在積極的做一些設計預研,讓應用變得更加有趣。未來,我們會把主要精力放在主題的品牌調(diào)性,材質(zhì)表現(xiàn),特色設計等等內(nèi)容上,也請大家期待一下吧。


項目思考


面對這樣的創(chuàng)新型項目,需要設計師善于知識跨界,在未知領域敢于快速嘗試,然后及早的做好流程規(guī)范,實現(xiàn)設計的簡化和統(tǒng)一。另外,在不同階段要善于做不同取舍策略,這樣才能在保證性能的同時兼顧美術(shù)效果。

用騰訊的實戰(zhàn)案例,幫你了解大廠的完整設計流程

3DS 2020入門到應用教程
我要自學網(wǎng)商城 ¥80 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC