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

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

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

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

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

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

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

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

Why.How.Who.

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

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

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

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

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

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

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

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

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

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

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

二、 世界觀設(shè)定

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

三、 建模

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

四、 材質(zhì)

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

五、 燈光

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

六、 封裝

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

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

一、 角色畫像

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

二、 角色建模

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

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