l 三维组件系统1.0介绍

三维组件系统作为自如图形资产的一部分，是为了应对业务增长中对更高的品效合一需求而开发的团队生产工具，通过利益人及用户画像分析等研究确定了开发方向，对通用组件——自如产品及人物组件进行了开发，通过规范化参数同步兼容四种渲染器，通过预渲染模式来快速完成三维需求处理，三维设计师则可以通过组件库进行更丰富的拓展，提升团队协作效率。

l 三维组件系统开发流程

自如三维组件系统拥有一个基本的沙盒式设定世界观，保留了产品的高度还原及辨识度，同时增加了真实的生活质感。整个系统包含通用组件及角色组件两部分，在通用组件开发中，我们通过一系列设计规范来完成建模/材质/灯光的设定及封装；在角色组件部分我们通过对用户画像的研究，结合二维插画形象，完成了基本人物形象的设定及标准，并衍生出了表情等组件应用形式。

自如图形资产-三维组件系统——分享大纲与细节

l 自如图形资产

在2020年，自如发布了插画组件系统2.0，包含产品及人物两大部分，通过这套组件库，设计师能够高效、便捷处理大量需求，同时保证统一的品牌风格和产出品质。

通过插画组件库的经验积累，我们希望在自如价值增长的新阶段中寻找新的设计增长点，同时满足设计师与业务端对品质与效率的诉求，三维组件系统由此而生。我们希望通过插画+三维组件系统来完成对自如产品的数字化重塑，构建一个属于自如的品牌化图形资产平台。

Why.How.Who.

我们对项目相关利益人（设计师/用户/业务人员/企业/品牌等）及对应的用户画像进行了分析，对三维设计流程中的重要环节，从品牌、增长、效率、竞争力等维度进行评估，帮助我们明确设计目标及服务的人群，以及用何种形式来达成三维组件系统的工具属性。

l 预渲染（Pre-Render）

为了帮助非三维设计师利用三维图形资源，我们开发了预渲染机制，即通过对场景中元素的单独渲染及重构，重新组合为完成的场景并且能够在平面软件中进行编辑；通过规范中的特殊灯光及材质来保证一定程度上的可动性，让平面设计师能够利用这些基本的产品场景辅助他们完成设计，节省时间的同时获得不同于插画的视觉风格。

l 系统资产-通用组件

三维组件系统1.0的通用组件部分，包含自如友家/整租/心舍的全系列产品组件，每个产品场景中包含对应产品风格的床品/摆件/植物/家居用品组件，每个组件都可独立编辑；为了更好的展示效果和可用性拓展，我们对每个产品都进行了独立的Stage搭建，整个产品空间中的内容都可以得到充分展示，且保证了不同场景间的统一性。

在单一场景的基础上，我们还可以通过元素重组进行场景的扩展，如居住空间与生活空间。物品间的组合比例经过计算并拥有统一的模型规范，以确保任意组合下的和谐与统一。通过规范化的封装，所有设计师都可快速调用这些资源。

l 系统资产-角色组件

人物与我们的品牌息息相关，包括自如客/业主/管家/服务人员，所以我们对围绕品牌的不同角色进行了基础的形象设计以及表情设计。

l 开发流程-通用组件

一、 业务诉求

自如在十周年推出了新的产品与增长模式，为了满足不断增长的业务需求，以及顺应三维的设计趋势，我们基于插画组件系统积累的经验开始了对三维组件系统的开发。

二、 世界观设定

在开发前期，我们对系统进行了世界观定义，即由多种基本元素构成的沙盒世界。我们希望组件能够满足运营/体验等多种视觉需求，并区别于实物产品，让空间兼具玩具的质感与亲和力，又保留生活品质的细节，如同真实生活瞬间的浓缩。

三、 建模

我们对建模的基本原则进行了规范，即保持产品辨识/生活质感/沙盒式拓展。在比例尺上我们以一个中比例物体作为1x1参照物，来对其他场景模型比例进行约束，作为建模的标尺引导设计师工作。

四、 材质

单个场景中包含大量不同类型材质，我们将材质分为基础/布料/进阶三类，来满足不同的需求场景：使用基础材质快速上色，使用布料为场景增加柔软的生活质感，使用进阶材质丰富细节。我们为这些材质制定了规范来统一参数，保证产出效果的一致，设计师也可基于库内材质进行修改/拓展，保证材质库能够持续丰富。

五、 灯光

在研究布光方式的前期，我们进行了一些实验，通过Xpresso中利用Python生成正交性参数图片矩阵，来搭建一个简易的测试原型，通过多人实验快速得出满足群体需求的理想结果，将对应结果的参数作为布光基本原则。同时也对常见的布光形式进行了预设，以及与之匹配的机位预设。

六、 封装

通过字段式命名方式将组件库文件规范化管理，便于设计师快速调用，设计资源合理归类。

l 开发流程-角色组件

一、 角色画像

通过用户研究所得出的用户特征，我们提取了一些最具代表性的关键词来对基础角色进行侧写，从中提炼出基础角色形象的特征，并由插画设计师完成基本的头身比、表情规范以及基础角色形象的设定。

二、 角色建模

我们的三维角色形象基于二维插画稿开发，采用了标准八边型建模及凸形五官，确保角色在动态时更加稳定。当前组件库包含自如客/业主/管家及服务人员基础形象。通过骨骼绑定，能够让设计师自由摆出需要的动态或动画。

为了让角色形象更加生动，我们对角色的表情也进行了设计，通过自建控制器可以实现表情的自由调整和快速切换。