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

为什么要做插画系统

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

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

插画系统的定位

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

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

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

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

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

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

• 效率：插画体系之所以要形成系统的关键，通过组件化构建的插画系统，保证规则一致的基础上减低投入成本，提升设计效率。
• 延展：规则与标准的统一并不代表限制，除了人物、物件、场景的丰富演变，JTD插画系统将用户偏好的插画风格也作为可配置项，让设计的延展性达到极致。
• 普适：JTD插画系统的普适性是核心，不仅为产品线的用户提供插画服务，我们拓宽了目标用户群体与应用场景的边界，对于感兴趣的普通用户也可以应用JTD插画系统实现自定义插画创作。
• 情感：情感化是所有插画系统的基础，我们围绕「人物+场景」为中心，构建高品质的插画标准，打造有温度的情感体验。

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

插画的基础设定

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

• 头身比：

在设计之初，我们一致认为我们想要设计的插画系统是能突破对B端产品固有印象，期望赋予它更具有温度、趣味性以及普适性。因此，我们没有选择目前市面上运用较多的夸张风格，而是选择了更接近人物真实比例的设定——将女生定为6.5头，男生定为7头。这种头身比让人物形象看起来更加亲切、也更易于大众化的传播与使用。

• 肩胯特征：

为了能明显区分男女形象，符合人物生理形态。我们将女生的躯干绘制为正三角：肩窄胯宽，更灵动优雅；男生则为倒三角：肩宽胯窄，更具责任感和信任感。

• 腰臀特征：

女生的腰会比男生的高一些，这一点从腰线能够清楚地看出来，且女生的腰部更加纤细，因此女生形象的上半身略短，下半身则更纤长。同时女生形象的臀部更宽，更丰满。反之，男生上半身略长，臀部较小。

• 四肢特征：

为了与人物比例保持一致，我们的四肢也采用了较写实的风格，并非直上直下的圆柱形体，而是有肌肉、有流线型转折的。同时，我们在设计时也做了圆滑处理，让整体看起来更生动，更有温度。

• 手势：

我们梳理了一些应用频次较高的手势，做了统一绘制（手腕粗细一致，手指风格统一）。在保证规范性的同时也提高了组内的绘制效率，以便后期可直接挑选使用。

• 脚：

目前大多数采用以下两种表达方式：

第一种：可以区分脚的各个面，有助于在画鞋的过程中找到转折点，但是太过简单，在绘制鞋的时候由于每个人理解的差异性，容易出现偏差；

第二种：简单地表达脚的外轮廓，能在搭建人物框架时起到快速示意的作用，但是缺少正面、侧面的引导，也容易导致后期的偏差问题。

结合以上两种表达方法，我们研究出适合我们的脚：

1）遵循插画写实原则，脚具有更多转折的细节，同时也做了圆滑处理；

2）添加辅助线，体现脚的各个面，方便后期画鞋；

3）增加脚踝关节，方便连接腿部。

我们梳理了一些常见的姿势进行统一绘制，可以快速搭建人物，提高组内绘制效率。

• 动态基础：

在确定标准人物比例之后，为了规范后期的动态绘制，我们又新增了侧面和3/4侧的基础人物动态视图，并添加了关键节点和动态骨骼线，最终实现人物骨骼化。可直接通过调整动态线、定位关节点，旋转四肢来设计新的动作。

在设计动态时，我们首先考虑的是人物动态的易用性和可复用性。因此，我们在以上 3 种视图的基础之上，围绕日常工作场景绘制多种人物动态，涵盖了正、侧、背三种视角，以及站、坐、跑、跳等多种动作，后续既可单人使用，亦可搭配使用，以提高设计效率。

插画的人物设计

当我们完成插画系统人物结构的基础设定后，时间进入了2022的开端，所以我们决定以新春佳节为场景，构建一套团队人物形象，为大家带来节日乐趣。

• 设计风格：

在设计风格选择上，本次春节主题创作优先选择了粗描边的漫画风格，简单、轻松、趣味十足。 作为一种通用的经典设计风格，它并非稍纵即逝的流行，而是一种更加历久弥新的品质，能更长久地贴合流行趋势演变。且人物形象与姿态动效可延展程度较高，体现个人特征与气质，符合充满创意与活力的团队气氛。

• 场景气氛：

「中国红」是具有浓厚的文化基因的色彩，代表大众对春节喜庆和美好祝福的颜色，相比传统「吉祥八宝」华贵的装饰、复杂的场景而言，我们更倾向年轻化的表达来营造传统的节日气氛。

简洁的纯色背景代替繁杂的细节装饰，更好地将视角重心聚焦于人物与主题文字上，奠定节日气氛基调。字体选用了具有魏碑风格的粗线条字体，结构体势严谨端庄，转折处用笔提按明显，古朴新奇，以强烈的艺术风格奠定画面视觉格调，由此以文字表意强化画面的主题构建。

• 情景应用：

本次春节主题插画应用，原子化设计思维不只是运用设计工具对组件模块的构建与运用，向上一层思考构建团队形象场景的元素通过拆解重构，是否有另一种创造性的诠释的可能性。我们开始尝试对团队形象的独立人物剖析，以个人IP形象的方式延展各自的形象属性，让人物插画具像化人格化，赋予全新的生命力。从个人到组合再到场景，不同条线不同维度的演变路径都可以有独特的创造，正如JTD团队一样是由每位充满个个性的小朋友组建而成。将JTD插画设计理念中的延展、普适、情感价值上升至最大化，每个人都可创造自己的元形象。

• 场景组合：

在人物动态方面，为了使画面场景更加饱满，我们在原有动态的基础之上，融合春节元素，根据每个同学的性格特色，搭建了一组春节氛围的动态。

一方面丰富了人物性格特点，另一方面也使画面更具有韵律和层次，同时还验证了我们前期搭建的基础动态的可复用性。那些看似普通的工作动态，简单调一下角度，再加上一些配饰，就能立马变得欢快活跃起来。除此之外，为搭建丰富的场景，体现浓厚的春节氛围，我们还结合人物动态设计了不同的春节主题道具，通过春节元素和动态的搭配，人物之间能够实现自由组合，每个组合又能够呈现不同的主题。

• 人设-细节刻画：

搭建完动态之后，我们开始抓取团队每个成员的个人特征：发型、五官、脸型、服饰配件、爱好、性格等。尽可能还原每位同学的特点，让大家可以在茫茫人海中一眼就找到自己～

发型+脸型

在绘制中，我们发现其实只要细节够丰富，通过发型和脸型已经可以辨认出每一个人的特征。

面部表情

为了塑造有温度、有趣味性的人物形象。我们的五官风格同样保持线性，画风偏简约可爱。五官位置较真实比例略偏下，更显幼态。面部表情则主要通过人物的五官特征和性格特点来绘制，有的严肃认真、有的俏皮可爱、有的耍帅扮酷。

服饰

服饰的绘制重点在于衣褶与形体转折的结合以及丰富的服饰细节。同时服饰的选择也要符合人物特性：有的活力青春、有的简约干练、有的文艺清新...同时积累的服饰素材，也可以用于后期的组件库建设。使衣物与衣物之间也可以实现互相搭配。

主题道具

道具的绘制可以起到画龙点睛的作用，例如福字、灯笼等可以活跃画面氛围，吉他、耳机、游戏机有助于塑造人物角色，增添画面的层次感和空间感。

结语

基于业务需求我们用原子化体系化的思维搭建出了一套人物角色插画系统，并不断的完善规范。我们利用Figma协同，共建画板实时绘制、互动留言，享受创作过程。

后续我们将继续收集各业务线在插画使用过程中遇到的难点和场景进行总结，继续打磨和探索，持续整合，实现真正的降本增效。

最后欣赏一下我们JTD设计团队的全家福吧！

未完待续～

作者是五位小姐姐，欢迎留言猜一猜～期待我们下次皮肤吧！

新春快乐，虎然发财～