写在前面

FaceTeam 是 58 的品牌人物角色系统。通过定义风格统一的 58 各业务线属性的人物角色形象,并应用到日常视觉设计中,强化 58 品牌认知度和提升视觉统一性,传递公司信息的同时建立与用户的联系。

此前 58 已经发布了 FaceTeam 插画人物系统并在 58 各个业务线日常设计中得到广泛应用。

今年我们制定了建立 FaceTeam 3D 人物角色系统的目标。我们希望打造一套 58 特色明显的 3D 人物角色系统。并通过将 3D 人物组件化的方式整合,降低 3D 人物角色素材的使用门槛,让 58UXD 设计师更轻松的使用 3D 人物角色进行视觉创意,达到提升视觉品质和提高工作效率效的目的。

为什么要做 3D 人物组件库?

1. 趋势

随着 3D 风格的流行,及在视觉设计中的广泛应用,3D 元素在日常视觉设计中成为了不可或缺的元素。

2. 统一

58 同城是一个海量的分类信息服务平台,包含房产、招聘、二手车、团购、黄页多条业务线,打造一套 58 特色明显的 3D 人物角色系统,应用到各个业务线中,作为平台一致性的一个标准,保证视觉输出的关联性和稳定性。

3. 效率

减少视觉过程中的重复性工作,高效的的组件化方式,提高设计的效率与产能。

如何构建一套符合 58 业务体系的 3D 人物角色体系

作为 58 的 3D 人物角色体系,需要满足多方面的需求,首先需要具备兼容性,可以应用到 58 的任何一条业务线而没有违和感,其次需要具有扩展性才能满足庞大的业务体系的需要,做一套企业级的人物组件库并不是一蹴而就的事情,我们在不断的探索和尝试中得到最终要的结果。回头再去看整个过程经历了以下几个阶段。总结过程中的经验和走过的弯路分享给大家。

1. 团队组建

一套强大的 3D 系统需要强大的 3d 团队去支持,但是对于 3D 软件这种新应用与运营设计的手法,并不是每个设计师都能掌握,好在团队小伙伴学习能力和自驱力都比较强,在不断学习中掌握各项技巧,出色地完成了需求。

2. 基础角色定义

如何去定义 3D FaceTeam 的基础人物形象风格是至关重要的一环,我们需要提炼角色风格,同时要兼顾庞大多业务线的需求,因此基础角色形象需要普适性和拓展性,这期间经历了一个漫长的探索过程。

我们建立了情绪版,做了大量的风格分析,确保角色风格的差异性和可识别性。

同时也做了多次风格尝试,最开始我们希望人物真实且贴近生活,因此在在人物设定上比例更接近真人,同时选择了使用 MD 软件制作衣服,还原衣服的真实质感。结果基于人物设定和服装的原因这套人物的产出风格上缺乏美感和年轻感,被果断 PASS.

之后我们有尝试了偏卡通风格的形象设计,让形象更加简洁概括,但是总体产出又缺乏特点和记忆点。

在不断的尝试和修改中,我们终于找到了属于 Faceteam 风格该有的关键词,最终从形象本身和实际应用纬度进行了进行风格提炼的思考,得到了正确的方向。

我们在接下来的设计的过程中我们延续了 2D Faceteam 基因,希望 3D FaceTeam 仍然是圆润亲和,容易被大众接受的风格,因此保留了其面部特征以及圆肩,头身比等特点,同时结合三维模型的特点,为新的 3D 形象调整了身材比例,使其更有特点和记忆点,与其他竞品形象产生差异化。

58 各业务场景的用户群体都逐渐向年轻化迈进,3D FaceTeam 在风格定位上更加趋于年轻化,方便日常运营过程中的视觉表现,我们通过服装配饰的设计,呈现人物的年轻化和潮流感,整合以上诉求,分别设计了全新的 FaceTeam 3D 男女基础形象,为 FaceTeam 3D 角色库确定风格基础。

3. 业务线角色拓展

在总结了基础角色设计的经验后,我们对拓展角色设计的设计流程进行了调整,回归到先以成本比较低的 2D 形式去做人物设定,再转化为 3D 模型,减少方案修改的时间成本。

FaceTeam 3D 的最终目标是是覆盖 58 各个业务线的人物角色日常应用需求,因此确立了基础形象之后,需要扩展一个人物角色库,保证每条业务线的设计师在库里都能找到自己需要的人物角色。

我们沟通 58 各业务线的设计师,收集他们日常设计中最高频使用的角色身份诉求,为收集到的人物角色做了优先级排序,合并重复角色,删选出更加精准的可以代表各业务线的角色。最终确定了包含女 hr、女白领、男普工、女青年男青年、中年女性、女房东、男中年拓展角色的清单。

为了统一人物角色的风格,我们为每个角色的人体做了统一化的处理,因此需要通过服装配饰设计以及代表身份属性的小元素去定义角色性格以及职业属性。保证每个角色的定位准确,使其成为形象鲜活,有血有肉的存在。

配合年轻化,潮流化的出发点,我们对服装配饰进行了将信息收集和脑暴,又对人物服装进行了研究,设计出符合每个角色定位的服装搭配。

团队每位成员认领了自己的角色,通过反复修改磨合,逐渐达到风格统一,然后整合成一套风格一致的的 2D 角色设定。

协作共创输出 3D 角色模型

结合 2D 形象的设定,在 3D 基础角色模型的基础上,进行拓展角色的 3D 模型角色设计,基础角色模型的搭建,自然的形成一套 3D 设计规范,人体素模一致,保证了每个角色的身材比例一致,统一的骨骼绑定系统,确保后期动作输出的一致性。对服装细节的处理,确保服装风格的一致性。

在渲染输出方面,我们也做了多种渲染风格的尝试,将每种风格输出的人物 PNG 交给各业务线的设计师应用到日常设计中进行实际验证,最终结论为环境灯光和材质都相对柔和的渲染效果普适性更强,在 UI 和运营设计中都可以很好的适配更多应用场景,因此我们选择了柔光环境的渲染作为最终的渲染输出风格。

最终尽管在多设计师协作条件下,仍输出了风格统一,套系感明显的 3D 任务角色库。

所有 3D 角色完成后,我们开始思考如何将这些成型的 3D 资源交付给各业务线设计师使用,实现资源价值最大化应用,为此我们做了两个方向的工作。

1. 角色动作图片库输出

我们为每个角色设计一套符合身份定位,且高频使用的动作,统一渲染输出成 PNG,形成图片库,上传到风火轮、水晶球等 58 设计师素材共享平台,方便设计师随时调取,直接应用到视觉设计中,既帮助 3D 基础薄弱的同学跨越了 3D 软件使用的障碍,又可以快速获取资源的完成需求 。

在 Faceteam 团队成员共同努力下,完成了包含 10 个角色,14 套服装,112 个动作的人物角色库设计,覆盖 UXD 各业务线 90%的日常运营需求。

2. 人物 3D 组件预设库

对于已有 3D 基础的同学,我们希望直接提供模型给这些设计师使用,这样可以更加灵活的延展视觉画面的设计。但是繁琐零散的模型下载为设计师的使用增加了时间和学习成本,因此我们想到了人物组件预设库的方式。

通过整合的方式,将所有人物角色模型集合到统一的模型预设库各业务线设计师只需一键安装即可获得所有人物角色,及动作预设,以更加触手可得的方法进行推广应用,降低了设计师学习和下载成本,更加高效的使用人物角色库。

基础功能:人物组件预设库包含设定好的 10 个基础角色,并为每个角色做了 8 个特定动作,设计师选择所需角色和动作后,调整摄像机角度即可渲染得到自己想要的角色状态。

扩展功能:人物组件库包含人物服装、发型、动作、环境及配件等组件,组件之间可以自由组合,灵活搭配,在原有 10 款角色模型的基础上,可以扩充出 60+新的角色模型,大大增加了角色数量,增加了设计的灵活性和多变性,满足了设计师对于更庞大的角色系统的需求。

人物组件库的拓展及应用

人物组件库完成后,通过简单的培训,大部分的设计师已下载安装预设文件,并掌握使用方法,FaceTeam 任务角色系统也在 UXD 各业务线中推广使用,设计师在遵守品牌统一性的基础上,灵活运用组件库的人物元素,衍生出了更具创新个性及多维度视觉特点的作品,以下为各业务线设计师的应用产出。

房产

招聘

车服

平台

58 原本业务线繁多,每条业务线有自己的视觉纬度,很难形成统一的品牌认知,FaceTeam 3D 人物角色的应用,成为了视觉输出联系的纽带,为每一张海报印上了 58 特有的标签,确保了品牌统一性。独特的人物造型,增强了品牌认知度,提升品牌感知,方便品牌传播。

一键安装的人物组件库方便也真实的帮助快速处理日常需求,提升设计效率,FaceTeam 3D 人物组件库已在完成了我们在设计之初的预期功能。

未来计划

未来 faceteam 3D 组件库还将精细化打磨人物角色模型,增加角色数量,丰富组件种类,扩展模型资产,同拓展表情组件使其感情表达更加精准。制作更好的素材供大家使用,敬请期待。