JTD插画系统如何组件化落地

作者：王韵壹、李英、熊慧卿

在视觉设计中，插画是一种有效传达信息与情感的表现形式。插画系统则是一个传播品牌形象最有效的手段，完整的插画系统能够覆盖产品业务的全场景。从0到1的把一个插画系统落地，需要设计师不断地探索和持续地积累。另外，插画系统的价值，一定是能够帮助产品以及业务更好地连接并触达用户，提升用户对品牌的认知和感受。

JTD插画系统如何组件化落地

一、为什么要做插画系统

JTD插画系统是以满足业务需求为基准，目标是实现适用于所有业务场景的品牌传播，如产品插图、营销图像、漫画、功能状态、用户流程、用户角色、故事板等。

JTD插画系统区别于以往定制化的插图方式，借鉴原子化、体系化思维，将插画组合元素重新拆解，并形成模块整合，基于组件化的角色设计构建插画库，我们搭建出一套骨架，搭配不同的皮肤以覆盖不同场景，结合插画更高效复用并且保持插画表现的多样性。我们运用Sketch、Figma、XD等设计工具来创建了混合嵌套组件，从而创建出了既独特又丰富的插画角色，有效的提升设计效率。实现品牌传播的统一性并且建立用户感知、情感共鸣。

二、插画系统的定位

设计前期，设计师们收集了大量国内外主流的插画系统，梳理出的风格有以下两大类：

1）以产品调性为核心：

情感化地表现局限于特定的产品线应用场景，因此同类型产品的插画风格定位类似，形象较为克制，容易趋于同质化，反而弱化了品牌形象表现力。

2）以流行风格为主导：

夸张、有趣、吸引眼球，随着风潮衰减仅适合于短期内用于特定场景，同时定制化程度较高，较难形成高效应用的插画系统。

考虑团队中各位设计师对风格定位理解与审美认知的主观差异，我们从不同维度进行深入挖掘，经过一系列的头脑风暴，我们确定了插画系统的核心设计原则与设计理念，构建出一套符合大家共同预期的插画系统。

首先第一步，用户维度进行分析，对目标用户进行精细化分层，调研每类用户的使用场景与核心需求，明确我们的服务方向。比如，我们以普通用户为例，插画系统提供很多个性化的图形，让用户可以自由的组合出他们喜爱的形象。

第二步，针对设计方向，利用「CBS卡片式智力激励法」让团队成员充分表达对于插画风格的个人理解、想法与期待，我们初期收集了超过60个设计理念关键词。通过「Thingking hat」思维模型，由团队成员各持不同角度对想法进行思考并发散，综合考虑团队内不同角色的意见，对设计理念进行了优先级的取舍并确定出关联分类。最后基于「更好的品牌传递」为设计目标，推导出插画系统的价值观核心关键词，分别为效率、延展、普适、情感。

效率：

插画体系之所以要形成系统的关键，通过组件化构建的插画系统，保证规则一致的基础上减低投入成本，提升设计效率。

延展：

规则与标准的统一并不代表限制，除了人物、物件、场景的丰富演变，JTD插画系统将用户偏好的插画风格也作为可配置项，让设计的延展性达到极致。

普适：

JTD插画系统的普适性是核心，不仅为产品线的用户提供插画服务，我们拓宽了目标用户群体与应用场景的边界，对于感兴趣的普通用户也可以应用JTD插画系统实现自定义插画创作。

情感：

情感化是所有插画系统的基础，我们围绕「人物+场景」为中心，构建高品质的插画标准，打造有温度的情感体验。

贯穿效率、延展、普适以及情感化，其围绕的核心是创作者与创作者、创作者与使用者、使用者与接收者的关系，任意一方的缺席将会影响设计作品的完整度。设计系统如何形成更好的心智流转链路，并非由创造者独立想法主导，而是大家共同认知的，这样才能发挥出认知的最大效用，帮助我们在设计的过程中更好地共同决策方向，最终实现共同认知与创造性的协同。

三、插画的基础设定

在确定了设计定位之后，我们开始插画系统的基础搭建。

基础设定，是实现组件化的关键，第一步是绘制人物骨架。为了传递品牌感、实现组件化、保持规范一致，我们首先制定了男女两种人物形象的规范，并绘制了多种视图：包括头身比、肩胯特征、腰臀特征、四肢特征、动态基础等。同时，我们利用图层透明度来展示关节点与人物前后层次。

头身比：