58同城|一键装修背后的设计思考 - 图1

01
**

一键装修是什么

是指通过人工智能识别不同的户型数据并且完成家装设计,向用户呈现不同风格的家装效果,最终通过VR的形式展现给用户,给用户沉浸的浏览体验。

58同城|一键装修背后的设计思考 - 图2
效果展示

02
**

项目背景

首先看一下行业的现状,例如房产行业,房源的信息是否和用户的需求匹配,直接影响房产的商机和线索,甚至间接影响房产线下最终的交易,而用户的停留时长在一定程度上会影响用户的决策行为,现在房源信息的载体依旧停留在图片、文字、视频上。一键装修以空间场景作为内容场景向不同业务赋能,增加用户获取信息的效率,提升用户的停留时长,同时可以链接装修商家和用户,最后把空间场景转变为一种售卖场景,为B端的商家赋能,形成另一种商业生态。
58同城|一键装修背后的设计思考 - 图303
**

一键装修的特点

一键装修主要有三个特点,分别是立体、沉浸、高效。
第一个是以三维立体的形式呈现房源的信息。
第二个是全新的形式给用户沉浸的浏览体验。
第三个是用户获取的房源信息不仅是现在的房源情况,还可以了解装修之后的情况,获取信息更高效。

04
**

产品目标

一键装修的三大产品目标,第一个是赋能,通过一键装修向不同业务方赋能,提供服务全力以服,第二个是创新,全新的呈现形式给用户营造全新的浏览体验,增加用户的停留时长,第三个是重构,通过场景的功能和属性的转变,展示场景向售卖场景转变,重构平台和用户、商家新的关系。

58同城|一键装修背后的设计思考 - 图4
05
**

设计目标

在产品目标的基础上,设计要做什么呢?第一个目标是打造真实的装修视觉体验,使装修效果真实、清晰。第二个目标是提升一键装修的通用性,一键装修方案需要适配海量的房源,同时不能只赋能房产,甚至是要赋能其他的行业,例如新零售等等。

06
**

项目难点

一键装修是一个全新的项目,信息呈现更加立体。一键装修融合了室内设计、游戏设计、体验设计三个领域。同时一键装修有一定的门槛,需要了解整个项目背后对应的技术依托。这个全新的项目意味着很多设计都需要摸着石头过河,而且最终把确定的一键装修应用到全国海量的房源上。这个难度就像是你做了一个界面设计,但要适配100万部手机,没有任何规律可循。

58同城|一键装修背后的设计思考 - 图5

07
**

融合型设计思维

针对以上项目难点,设计团队采用了融合型设计思维。由于行业的融合造就了一键装修,同时对设计师的要求也会增加,不能再使用单一的思维方式去解决问题,所以需要设计师以视觉效果为出发点,通过设计规范、设计语言的沉淀训练机器,营造可互动交互的三维游戏场景。所以基于行业的融合转变为设计思维的融合,设计思维的融合主要分为角色融合、流程融合、产出融合。

58同城|一键装修背后的设计思考 - 图6

·角色融合
随着一键装修门槛的提升, 一个设计师除了做好设计师的效果图之外,还需要做半个技术工程师,了解一键装修的实现方式方法,深挖一键装修实现方案中存在的黑盒子,了解人工智能是如何参与到一键装修项目中,同时和产品开发一起探讨方案的实现成本,做到真正把控整个项目。

·流程融合
在沟通协作上增加了对外沟通的环节,所以除了对内需要和产品、技术建立一个全新的合作流程,同时对外也要建立和供应商的沟通机制,做好供应商的管理。最终把这两种流程进行融合,明确每一个环节参与的角色以及产出。

·产出融合
在产出上除了设计不同风格效果图,还需要拆解影响一键装修效果的元素,并根据这些元素产出机器可以理解和实现的策略,把设计策略转变为开发策略,真正做到训练机器,一键装修。

08
**

设计策略

基于融合型设计思维,我提出了四个设计策略。
第一个是探索技术边界,了解一键装修的实现方式。
第二个是测试模型方案,了解什么样的模型符合一键装修的项目需求。
第三个是拆解设计元素,根据家装的效果进行拆解,拆解为可被理解、复用、延续的设计元素。
第四个是设计元素的策略化,把影响视觉效果的元素梳理成可复用、可延续、可落地的设计语言。
image.png
image.gif

·探索技术边界
一键装修背后对应的主要有两种技术,分别是VR、AI,首先看一下VR,通过户型图自动生成硬装模型和材质贴图,根据户型自动进行软装模型的摆放和灯光的生成,通过间接光来照亮整个场景,最终渲染出全景图,呈现给用户。AI技术主要应用在软装摆放和灯光制作上,基于对户型的识别来选择对应的软装摆放方案。通过了解这两个技术方案可以更好的理解一键装修的本质。

·测试模型方案
测试模型以及模型对应的实现方案,探索适合一键装修使用的模型资源。
测试了大量的模型,通过前期反复的沟通、测试,最终找到了适合我们使用的数据格式,并且沉淀了6种模型规范文档。分别是软装模型规范、模型需求规范、材质贴图规范、模型导出规范、模型朝向规范、模型走查规范,通过沉淀的这六种规范奠定了一键装修模型的基础。
image.png·拆解设计元素
拆解设计元素可以让整个一键装修团队包括设计、开发、产品能够很好的对装修的效果形成更系统的理解和认知,让大家了解哪些元素在影响装修的效果,并且有哪些工作需要推进。

设计效果图,根据确认的效果拆解影响效果图的不同元素,共梳理出了四个,分别是模型、材质、灯光、渲染·设计语言的策略化**
设计元素、设计语言进行策略化,通过设计语言的策略化建立产品、技术、设计可理解、可复用、可落地的设计语言、设计规范,并且通过这种策略化的设计语言训练机器程序,使机器程序能够做到自动根据不同的户型去生成不同的家装视觉效果,根据不同的数据生成不同的场景元素。

设计语言的策略化,主要是这四个部分,分别是软装摆放语言、材质语言、灯光语言、渲染语言,通过这四种语言训练机器程序如何自动生成装修效果。

软装摆放语言:软装摆放语言又分为三步。
第一步是对空间进行识别和分割,把空间主要分为摆放空间和动线空间,通过空间的分割来确认模型的基本摆放空间。
image.png
image.gif第二步是确认布局,根据不同的摆放空间确定布局。例如厨房分为一线型布局、双线型布局、L型布局、U型布局,根据不同的布局来放置不同的软装模型。

58同城|一键装修背后的设计思考 - 图12

第三步是物体联动和空间限制,因为真实的装修户型的情况是非常复杂的,需要增加一些限制条件,所以在确定布局后,增加物体联动限制和空间限制,使软装模型的摆放更合理。

58同城|一键装修背后的设计思考 - 图13

当然摆放语言的设计是持续细化的过程,随着一键装修适配的房源增加持续细化摆放语言,这个过程也是训练机器程序的过程。

材质语言:VR装修采用的是pbr材质,这种形式表现的效果相对旧的材质系统会更加真实,同时这种材质系统是大部分游戏场景的通用材质系统,相对来说比较成熟。
image.pngimage.gif

同时制定了三个平台的不同的材质对应的参数,通过制定这个材质工具为团队成员赋能,同时也根据这个材质工具调整装修场景中的材质效果使场景效果更接近真实的物理效果。

58同城|一键装修背后的设计思考 - 图16
灯光语言:灯光语言的策略化分为三个步骤。
第一步是对灯光做梳理,主要确认灯光的基本参数和设置。

58同城|一键装修背后的设计思考 - 图17

第二步是制定两种不同的灯光实现规则,第一种灯光规则是室内灯光,由设计输出灯光的位置信息、参数信息。第二种灯光规则是根据硬装的模型数据通过复杂的数学运算生成灯光的位置和详细的灯光参数。

58同城|一键装修背后的设计思考 - 图18

第三步是确定所有房间的光源,在灯光实现规则确定后,梳理每一个房间可能存在的灯光,通过光源的主次区分再确认光源的类型和参数。
image.pngimage.gif渲染语言:**渲染语言的策略化,由于平台的属性问题,在表达镜面反射和间接光烘焙的时候需要增加额外的辐射体积,所以通过识别模型信息来建立辐射体积的大小尺寸,并且通过已有的数据来确认辐射体积的前后位置,最终完成特殊效果的渲染和全局渲染语言的制定。
image.gif

09
**

软装和硬装设计效果展示

image.png
现代风客厅

image.png
现代风卧室

image.gifimage.png
日式卧室

image.gifimage.png
日式卧室

image.png
简美风客厅

image.png
简美风餐厅

10
**

总结

一键装修作为一个新的形式满足用户获取房源信息的诉求,随着项目的落地,之后会继续推动其他软装风格上线,大家可以继续保持关注,同时除了风格样式的增加也会增加一些差异化的设计,让产品满足更广大用户群体的需求,提升产品的知名度。

整个项目从0到1落地遇到过诸多难题,非常感谢TEG技术团队、产品团队、PMO的支持,同时也感谢UXD夜校提供3D设计经验分享和指导。
image.png