寫(xiě)在前面

FaceTeam 是 58 的品牌人物角色系統(tǒng)。通過(guò)定義風(fēng)格統(tǒng)一的 58 各業(yè)務(wù)線(xiàn)屬性的人物角色形象，并應(yīng)用到日常視覺(jué)設(shè)計(jì)中，強(qiáng)化 58 品牌認(rèn)知度和提升視覺(jué)統(tǒng)一性，傳遞公司信息的同時(shí)建立與用戶(hù)的聯(lián)系。

此前 58 已經(jīng)發(fā)布了 FaceTeam 插畫(huà)人物系統(tǒng)并在 58 各個(gè)業(yè)務(wù)線(xiàn)日常設(shè)計(jì)中得到廣泛應(yīng)用。

今年我們制定了建立 FaceTeam 3D 人物角色系統(tǒng)的目標(biāo)。我們希望打造一套 58 特色明顯的 3D 人物角色系統(tǒng)。并通過(guò)將 3D 人物組件化的方式整合，降低 3D 人物角色素材的使用門(mén)檻，讓 58UXD 設(shè)計(jì)師更輕松的使用 3D 人物角色進(jìn)行視覺(jué)創(chuàng)意，達(dá)到提升視覺(jué)品質(zhì)和提高工作效率效的目的。

為什么要做 3D 人物組件庫(kù)？

1. 趨勢(shì)

隨著 3D 風(fēng)格的流行，及在視覺(jué)設(shè)計(jì)中的廣泛應(yīng)用，3D 元素在日常視覺(jué)設(shè)計(jì)中成為了不可或缺的元素。

2. 統(tǒng)一

58 同城是一個(gè)海量的分類(lèi)信息服務(wù)平臺(tái)，包含房產(chǎn)、招聘、二手車(chē)、團(tuán)購(gòu)、黃頁(yè)多條業(yè)務(wù)線(xiàn)，打造一套 58 特色明顯的 3D 人物角色系統(tǒng)，應(yīng)用到各個(gè)業(yè)務(wù)線(xiàn)中，作為平臺(tái)一致性的一個(gè)標(biāo)準(zhǔn)，保證視覺(jué)輸出的關(guān)聯(lián)性和穩(wěn)定性。

3. 效率

減少視覺(jué)過(guò)程中的重復(fù)性工作，高效的的組件化方式，提高設(shè)計(jì)的效率與產(chǎn)能。

如何構(gòu)建一套符合 58 業(yè)務(wù)體系的 3D 人物角色體系

作為 58 的 3D 人物角色體系，需要滿(mǎn)足多方面的需求，首先需要具備兼容性，可以應(yīng)用到 58 的任何一條業(yè)務(wù)線(xiàn)而沒(méi)有違和感，其次需要具有擴(kuò)展性才能滿(mǎn)足龐大的業(yè)務(wù)體系的需要，做一套企業(yè)級(jí)的人物組件庫(kù)并不是一蹴而就的事情，我們?cè)诓粩嗟奶剿骱蛧L試中得到最終要的結(jié)果。回頭再去看整個(gè)過(guò)程經(jīng)歷了以下幾個(gè)階段。總結(jié)過(guò)程中的經(jīng)驗(yàn)和走過(guò)的彎路分享給大家。

1. 團(tuán)隊(duì)組建

一套強(qiáng)大的 3D 系統(tǒng)需要強(qiáng)大的 3d 團(tuán)隊(duì)去支持，但是對(duì)于 3D 軟件這種新應(yīng)用與運(yùn)營(yíng)設(shè)計(jì)的手法，并不是每個(gè)設(shè)計(jì)師都能掌握，好在團(tuán)隊(duì)小伙伴學(xué)習(xí)能力和自驅(qū)力都比較強(qiáng)，在不斷學(xué)習(xí)中掌握各項(xiàng)技巧，出色地完成了需求。

2. 基礎(chǔ)角色定義

如何去定義 3D FaceTeam 的基礎(chǔ)人物形象風(fēng)格是至關(guān)重要的一環(huán)，我們需要提煉角色風(fēng)格，同時(shí)要兼顧龐大多業(yè)務(wù)線(xiàn)的需求，因此基礎(chǔ)角色形象需要普適性和拓展性，這期間經(jīng)歷了一個(gè)漫長(zhǎng)的探索過(guò)程。

我們建立了情緒版，做了大量的風(fēng)格分析，確保角色風(fēng)格的差異性和可識(shí)別性。

同時(shí)也做了多次風(fēng)格嘗試，最開(kāi)始我們希望人物真實(shí)且貼近生活，因此在在人物設(shè)定上比例更接近真人，同時(shí)選擇了使用 MD 軟件制作衣服，還原衣服的真實(shí)質(zhì)感。結(jié)果基于人物設(shè)定和服裝的原因這套人物的產(chǎn)出風(fēng)格上缺乏美感和年輕感，被果斷 PASS.

之后我們有嘗試了偏卡通風(fēng)格的形象設(shè)計(jì)，讓形象更加簡(jiǎn)潔概括，但是總體產(chǎn)出又缺乏特點(diǎn)和記憶點(diǎn)。

在不斷的嘗試和修改中，我們終于找到了屬于 Faceteam 風(fēng)格該有的關(guān)鍵詞，最終從形象本身和實(shí)際應(yīng)用緯度進(jìn)行了進(jìn)行風(fēng)格提煉的思考，得到了正確的方向。

我們?cè)诮酉聛?lái)的設(shè)計(jì)的過(guò)程中我們延續(xù)了 2D Faceteam 基因，希望 3D FaceTeam 仍然是圓潤(rùn)親和，容易被大眾接受的風(fēng)格，因此保留了其面部特征以及圓肩，頭身比等特點(diǎn)，同時(shí)結(jié)合三維模型的特點(diǎn)，為新的 3D 形象調(diào)整了身材比例，使其更有特點(diǎn)和記憶點(diǎn)，與其他競(jìng)品形象產(chǎn)生差異化。

58 各業(yè)務(wù)場(chǎng)景的用戶(hù)群體都逐漸向年輕化邁進(jìn)，3D FaceTeam 在風(fēng)格定位上更加趨于年輕化，方便日常運(yùn)營(yíng)過(guò)程中的視覺(jué)表現(xiàn)，我們通過(guò)服裝配飾的設(shè)計(jì)，呈現(xiàn)人物的年輕化和潮流感，整合以上訴求，分別設(shè)計(jì)了全新的 FaceTeam 3D 男女基礎(chǔ)形象，為 FaceTeam 3D 角色庫(kù)確定風(fēng)格基礎(chǔ)。

3. 業(yè)務(wù)線(xiàn)角色拓展

在總結(jié)了基礎(chǔ)角色設(shè)計(jì)的經(jīng)驗(yàn)后，我們對(duì)拓展角色設(shè)計(jì)的設(shè)計(jì)流程進(jìn)行了調(diào)整，回歸到先以成本比較低的 2D 形式去做人物設(shè)定，再轉(zhuǎn)化為 3D 模型，減少方案修改的時(shí)間成本。

FaceTeam 3D 的最終目標(biāo)是是覆蓋 58 各個(gè)業(yè)務(wù)線(xiàn)的人物角色日常應(yīng)用需求，因此確立了基礎(chǔ)形象之后，需要擴(kuò)展一個(gè)人物角色庫(kù)，保證每條業(yè)務(wù)線(xiàn)的設(shè)計(jì)師在庫(kù)里都能找到自己需要的人物角色。

我們溝通 58 各業(yè)務(wù)線(xiàn)的設(shè)計(jì)師，收集他們?nèi)粘ＴO(shè)計(jì)中最高頻使用的角色身份訴求，為收集到的人物角色做了優(yōu)先級(jí)排序，合并重復(fù)角色，刪選出更加精準(zhǔn)的可以代表各業(yè)務(wù)線(xiàn)的角色。最終確定了包含女 hr、女白領(lǐng)、男普工、女青年男青年、中年女性、女房東、男中年拓展角色的清單。

為了統(tǒng)一人物角色的風(fēng)格，我們?yōu)槊總€(gè)角色的人體做了統(tǒng)一化的處理，因此需要通過(guò)服裝配飾設(shè)計(jì)以及代表身份屬性的小元素去定義角色性格以及職業(yè)屬性。保證每個(gè)角色的定位準(zhǔn)確，使其成為形象鮮活，有血有肉的存在。

配合年輕化，潮流化的出發(fā)點(diǎn)，我們對(duì)服裝配飾進(jìn)行了將信息收集和腦暴，又對(duì)人物服裝進(jìn)行了研究，設(shè)計(jì)出符合每個(gè)角色定位的服裝搭配。

團(tuán)隊(duì)每位成員認(rèn)領(lǐng)了自己的角色，通過(guò)反復(fù)修改磨合，逐漸達(dá)到風(fēng)格統(tǒng)一，然后整合成一套風(fēng)格一致的的 2D 角色設(shè)定。

協(xié)作共創(chuàng)輸出 3D 角色模型

結(jié)合 2D 形象的設(shè)定，在 3D 基礎(chǔ)角色模型的基礎(chǔ)上，進(jìn)行拓展角色的 3D 模型角色設(shè)計(jì)，基礎(chǔ)角色模型的搭建，自然的形成一套 3D 設(shè)計(jì)規(guī)范，人體素模一致，保證了每個(gè)角色的身材比例一致，統(tǒng)一的骨骼綁定系統(tǒng)，確保后期動(dòng)作輸出的一致性。對(duì)服裝細(xì)節(jié)的處理，確保服裝風(fēng)格的一致性。

在渲染輸出方面，我們也做了多種渲染風(fēng)格的嘗試，將每種風(fēng)格輸出的人物 PNG 交給各業(yè)務(wù)線(xiàn)的設(shè)計(jì)師應(yīng)用到日常設(shè)計(jì)中進(jìn)行實(shí)際驗(yàn)證，最終結(jié)論為環(huán)境燈光和材質(zhì)都相對(duì)柔和的渲染效果普適性更強(qiáng)，在 UI 和運(yùn)營(yíng)設(shè)計(jì)中都可以很好的適配更多應(yīng)用場(chǎng)景，因此我們選擇了柔光環(huán)境的渲染作為最終的渲染輸出風(fēng)格。

最終盡管在多設(shè)計(jì)師協(xié)作條件下，仍輸出了風(fēng)格統(tǒng)一，套系感明顯的 3D 任務(wù)角色庫(kù)。

所有 3D 角色完成后，我們開(kāi)始思考如何將這些成型的 3D 資源交付給各業(yè)務(wù)線(xiàn)設(shè)計(jì)師使用，實(shí)現(xiàn)資源價(jià)值最大化應(yīng)用，為此我們做了兩個(gè)方向的工作。

1. 角色動(dòng)作圖片庫(kù)輸出

我們?yōu)槊總€(gè)角色設(shè)計(jì)一套符合身份定位，且高頻使用的動(dòng)作，統(tǒng)一渲染輸出成 PNG，形成圖片庫(kù)，上傳到風(fēng)火輪、水晶球等 58 設(shè)計(jì)師素材共享平臺(tái)，方便設(shè)計(jì)師隨時(shí)調(diào)取，直接應(yīng)用到視覺(jué)設(shè)計(jì)中，既幫助 3D 基礎(chǔ)薄弱的同學(xué)跨越了 3D 軟件使用的障礙，又可以快速獲取資源的完成需求 。

在 Faceteam 團(tuán)隊(duì)成員共同努力下，完成了包含 10 個(gè)角色，14 套服裝，112 個(gè)動(dòng)作的人物角色庫(kù)設(shè)計(jì)，覆蓋 UXD 各業(yè)務(wù)線(xiàn) 90%的日常運(yùn)營(yíng)需求。

2. 人物 3D 組件預(yù)設(shè)庫(kù)

對(duì)于已有 3D 基礎(chǔ)的同學(xué)，我們希望直接提供模型給這些設(shè)計(jì)師使用，這樣可以更加靈活的延展視覺(jué)畫(huà)面的設(shè)計(jì)。但是繁瑣零散的模型下載為設(shè)計(jì)師的使用增加了時(shí)間和學(xué)習(xí)成本，因此我們想到了人物組件預(yù)設(shè)庫(kù)的方式。

通過(guò)整合的方式，將所有人物角色模型集合到統(tǒng)一的模型預(yù)設(shè)庫(kù)各業(yè)務(wù)線(xiàn)設(shè)計(jì)師只需一鍵安裝即可獲得所有人物角色，及動(dòng)作預(yù)設(shè)，以更加觸手可得的方法進(jìn)行推廣應(yīng)用，降低了設(shè)計(jì)師學(xué)習(xí)和下載成本，更加高效的使用人物角色庫(kù)。

基礎(chǔ)功能：人物組件預(yù)設(shè)庫(kù)包含設(shè)定好的 10 個(gè)基礎(chǔ)角色，并為每個(gè)角色做了 8 個(gè)特定動(dòng)作，設(shè)計(jì)師選擇所需角色和動(dòng)作后，調(diào)整攝像機(jī)角度即可渲染得到自己想要的角色狀態(tài)。

擴(kuò)展功能：人物組件庫(kù)包含人物服裝、發(fā)型、動(dòng)作、環(huán)境及配件等組件，組件之間可以自由組合，靈活搭配，在原有 10 款角色模型的基礎(chǔ)上，可以擴(kuò)充出 60+新的角色模型，大大增加了角色數(shù)量，增加了設(shè)計(jì)的靈活性和多變性，滿(mǎn)足了設(shè)計(jì)師對(duì)于更龐大的角色系統(tǒng)的需求。

人物組件庫(kù)的拓展及應(yīng)用

人物組件庫(kù)完成后，通過(guò)簡(jiǎn)單的培訓(xùn)，大部分的設(shè)計(jì)師已下載安裝預(yù)設(shè)文件，并掌握使用方法，F(xiàn)aceTeam 任務(wù)角色系統(tǒng)也在 UXD 各業(yè)務(wù)線(xiàn)中推廣使用，設(shè)計(jì)師在遵守品牌統(tǒng)一性的基礎(chǔ)上，靈活運(yùn)用組件庫(kù)的人物元素，衍生出了更具創(chuàng)新個(gè)性及多維度視覺(jué)特點(diǎn)的作品，以下為各業(yè)務(wù)線(xiàn)設(shè)計(jì)師的應(yīng)用產(chǎn)出。

房產(chǎn)

招聘

車(chē)服

平臺(tái)

58 原本業(yè)務(wù)線(xiàn)繁多，每條業(yè)務(wù)線(xiàn)有自己的視覺(jué)緯度，很難形成統(tǒng)一的品牌認(rèn)知，F(xiàn)aceTeam 3D 人物角色的應(yīng)用，成為了視覺(jué)輸出聯(lián)系的紐帶，為每一張海報(bào)印上了 58 特有的標(biāo)簽，確保了品牌統(tǒng)一性。獨(dú)特的人物造型，增強(qiáng)了品牌認(rèn)知度，提升品牌感知，方便品牌傳播。

一鍵安裝的人物組件庫(kù)方便也真實(shí)的幫助快速處理日常需求，提升設(shè)計(jì)效率，F(xiàn)aceTeam 3D 人物組件庫(kù)已在完成了我們?cè)谠O(shè)計(jì)之初的預(yù)期功能。

未來(lái)計(jì)劃

未來(lái) faceteam 3D 組件庫(kù)還將精細(xì)化打磨人物角色模型，增加角色數(shù)量，豐富組件種類(lèi)，擴(kuò)展模型資產(chǎn)，同拓展表情組件使其感情表達(dá)更加精準(zhǔn)。制作更好的素材供大家使用，敬請(qǐng)期待。

歡迎關(guān)注「58UXD」的微信公眾號(hào)：