l 三維組件系統(tǒng)1.0介紹

三維組件系統(tǒng)作為自如圖形資產(chǎn)的一部分，是為了應(yīng)對(duì)業(yè)務(wù)增長(zhǎng)中對(duì)更高的品效合一需求而開(kāi)發(fā)的團(tuán)隊(duì)生產(chǎn)工具，通過(guò)利益人及用戶(hù)畫(huà)像分析等研究確定了開(kāi)發(fā)方向，對(duì)通用組件——自如產(chǎn)品及人物組件進(jìn)行了開(kāi)發(fā)，通過(guò)規(guī)范化參數(shù)同步兼容四種渲染器，通過(guò)預(yù)渲染模式來(lái)快速完成三維需求處理，三維設(shè)計(jì)師則可以通過(guò)組件庫(kù)進(jìn)行更豐富的拓展，提升團(tuán)隊(duì)協(xié)作效率。

l 三維組件系統(tǒng)開(kāi)發(fā)流程

自如三維組件系統(tǒng)擁有一個(gè)基本的沙盒式設(shè)定世界觀(guān)，保留了產(chǎn)品的高度還原及辨識(shí)度，同時(shí)增加了真實(shí)的生活質(zhì)感。整個(gè)系統(tǒng)包含通用組件及角色組件兩部分，在通用組件開(kāi)發(fā)中，我們通過(guò)一系列設(shè)計(jì)規(guī)范來(lái)完成建模/材質(zhì)/燈光的設(shè)定及封裝；在角色組件部分我們通過(guò)對(duì)用戶(hù)畫(huà)像的研究，結(jié)合二維插畫(huà)形象，完成了基本人物形象的設(shè)定及標(biāo)準(zhǔn)，并衍生出了表情等組件應(yīng)用形式。

自如圖形資產(chǎn)-三維組件系統(tǒng)——分享大綱與細(xì)節(jié)

l 自如圖形資產(chǎn)

在2020年，自如發(fā)布了插畫(huà)組件系統(tǒng)2.0，包含產(chǎn)品及人物兩大部分，通過(guò)這套組件庫(kù)，設(shè)計(jì)師能夠高效、便捷處理大量需求，同時(shí)保證統(tǒng)一的品牌風(fēng)格和產(chǎn)出品質(zhì)。

通過(guò)插畫(huà)組件庫(kù)的經(jīng)驗(yàn)積累，我們希望在自如價(jià)值增長(zhǎng)的新階段中尋找新的設(shè)計(jì)增長(zhǎng)點(diǎn)，同時(shí)滿(mǎn)足設(shè)計(jì)師與業(yè)務(wù)端對(duì)品質(zhì)與效率的訴求，三維組件系統(tǒng)由此而生。我們希望通過(guò)插畫(huà)+三維組件系統(tǒng)來(lái)完成對(duì)自如產(chǎn)品的數(shù)字化重塑，構(gòu)建一個(gè)屬于自如的品牌化圖形資產(chǎn)平臺(tái)。

Why.How.Who.

我們對(duì)項(xiàng)目相關(guān)利益人（設(shè)計(jì)師/用戶(hù)/業(yè)務(wù)人員/企業(yè)/品牌等）及對(duì)應(yīng)的用戶(hù)畫(huà)像進(jìn)行了分析，對(duì)三維設(shè)計(jì)流程中的重要環(huán)節(jié)，從品牌、增長(zhǎng)、效率、競(jìng)爭(zhēng)力等維度進(jìn)行評(píng)估，幫助我們明確設(shè)計(jì)目標(biāo)及服務(wù)的人群，以及用何種形式來(lái)達(dá)成三維組件系統(tǒng)的工具屬性。

l 預(yù)渲染（Pre-Render）

為了幫助非三維設(shè)計(jì)師利用三維圖形資源，我們開(kāi)發(fā)了預(yù)渲染機(jī)制，即通過(guò)對(duì)場(chǎng)景中元素的單獨(dú)渲染及重構(gòu)，重新組合為完成的場(chǎng)景并且能夠在平面軟件中進(jìn)行編輯；通過(guò)規(guī)范中的特殊燈光及材質(zhì)來(lái)保證一定程度上的可動(dòng)性，讓平面設(shè)計(jì)師能夠利用這些基本的產(chǎn)品場(chǎng)景輔助他們完成設(shè)計(jì)，節(jié)省時(shí)間的同時(shí)獲得不同于插畫(huà)的視覺(jué)風(fēng)格。

l 系統(tǒng)資產(chǎn)-通用組件

三維組件系統(tǒng)1.0的通用組件部分，包含自如友家/整租/心舍的全系列產(chǎn)品組件，每個(gè)產(chǎn)品場(chǎng)景中包含對(duì)應(yīng)產(chǎn)品風(fēng)格的床品/擺件/植物/家居用品組件，每個(gè)組件都可獨(dú)立編輯；為了更好的展示效果和可用性拓展，我們對(duì)每個(gè)產(chǎn)品都進(jìn)行了獨(dú)立的Stage搭建，整個(gè)產(chǎn)品空間中的內(nèi)容都可以得到充分展示，且保證了不同場(chǎng)景間的統(tǒng)一性。

在單一場(chǎng)景的基礎(chǔ)上，我們還可以通過(guò)元素重組進(jìn)行場(chǎng)景的擴(kuò)展，如居住空間與生活空間。物品間的組合比例經(jīng)過(guò)計(jì)算并擁有統(tǒng)一的模型規(guī)范，以確保任意組合下的和諧與統(tǒng)一。通過(guò)規(guī)范化的封裝，所有設(shè)計(jì)師都可快速調(diào)用這些資源。

l 系統(tǒng)資產(chǎn)-角色組件

人物與我們的品牌息息相關(guān)，包括自如客/業(yè)主/管家/服務(wù)人員，所以我們對(duì)圍繞品牌的不同角色進(jìn)行了基礎(chǔ)的形象設(shè)計(jì)以及表情設(shè)計(jì)。

l 開(kāi)發(fā)流程-通用組件

一、 業(yè)務(wù)訴求

自如在十周年推出了新的產(chǎn)品與增長(zhǎng)模式，為了滿(mǎn)足不斷增長(zhǎng)的業(yè)務(wù)需求，以及順應(yīng)三維的設(shè)計(jì)趨勢(shì)，我們基于插畫(huà)組件系統(tǒng)積累的經(jīng)驗(yàn)開(kāi)始了對(duì)三維組件系統(tǒng)的開(kāi)發(fā)。

二、 世界觀(guān)設(shè)定

在開(kāi)發(fā)前期，我們對(duì)系統(tǒng)進(jìn)行了世界觀(guān)定義，即由多種基本元素構(gòu)成的沙盒世界。我們希望組件能夠滿(mǎn)足運(yùn)營(yíng)/體驗(yàn)等多種視覺(jué)需求，并區(qū)別于實(shí)物產(chǎn)品，讓空間兼具玩具的質(zhì)感與親和力，又保留生活品質(zhì)的細(xì)節(jié)，如同真實(shí)生活瞬間的濃縮。

三、 建模

我們對(duì)建模的基本原則進(jìn)行了規(guī)范，即保持產(chǎn)品辨識(shí)/生活質(zhì)感/沙盒式拓展。在比例尺上我們以一個(gè)中比例物體作為1x1參照物，來(lái)對(duì)其他場(chǎng)景模型比例進(jìn)行約束，作為建模的標(biāo)尺引導(dǎo)設(shè)計(jì)師工作。

四、 材質(zhì)

單個(gè)場(chǎng)景中包含大量不同類(lèi)型材質(zhì)，我們將材質(zhì)分為基礎(chǔ)/布料/進(jìn)階三類(lèi)，來(lái)滿(mǎn)足不同的需求場(chǎng)景：使用基礎(chǔ)材質(zhì)快速上色，使用布料為場(chǎng)景增加柔軟的生活質(zhì)感，使用進(jìn)階材質(zhì)豐富細(xì)節(jié)。我們?yōu)檫@些材質(zhì)制定了規(guī)范來(lái)統(tǒng)一參數(shù)，保證產(chǎn)出效果的一致，設(shè)計(jì)師也可基于庫(kù)內(nèi)材質(zhì)進(jìn)行修改/拓展，保證材質(zhì)庫(kù)能夠持續(xù)豐富。

五、 燈光

在研究布光方式的前期，我們進(jìn)行了一些實(shí)驗(yàn)，通過(guò)Xpresso中利用Python生成正交性參數(shù)圖片矩陣，來(lái)搭建一個(gè)簡(jiǎn)易的測(cè)試原型，通過(guò)多人實(shí)驗(yàn)快速得出滿(mǎn)足群體需求的理想結(jié)果，將對(duì)應(yīng)結(jié)果的參數(shù)作為布光基本原則。同時(shí)也對(duì)常見(jiàn)的布光形式進(jìn)行了預(yù)設(shè)，以及與之匹配的機(jī)位預(yù)設(shè)。

六、 封裝

通過(guò)字段式命名方式將組件庫(kù)文件規(guī)范化管理，便于設(shè)計(jì)師快速調(diào)用，設(shè)計(jì)資源合理歸類(lèi)。

l 開(kāi)發(fā)流程-角色組件

一、 角色畫(huà)像

通過(guò)用戶(hù)研究所得出的用戶(hù)特征，我們提取了一些最具代表性的關(guān)鍵詞來(lái)對(duì)基礎(chǔ)角色進(jìn)行側(cè)寫(xiě)，從中提煉出基礎(chǔ)角色形象的特征，并由插畫(huà)設(shè)計(jì)師完成基本的頭身比、表情規(guī)范以及基礎(chǔ)角色形象的設(shè)定。

二、 角色建模

我們的三維角色形象基于二維插畫(huà)稿開(kāi)發(fā)，采用了標(biāo)準(zhǔn)八邊型建模及凸形五官，確保角色在動(dòng)態(tài)時(shí)更加穩(wěn)定。當(dāng)前組件庫(kù)包含自如客/業(yè)主/管家及服務(wù)人員基礎(chǔ)形象。通過(guò)骨骼綁定，能夠讓設(shè)計(jì)師自由擺出需要的動(dòng)態(tài)或動(dòng)畫(huà)。

為了讓角色形象更加生動(dòng)，我們對(duì)角色的表情也進(jìn)行了設(shè)計(jì)，通過(guò)自建控制器可以實(shí)現(xiàn)表情的自由調(diào)整和快速切換。