今天给大带来的是如何建立设计师个人的插画组件库，因内过并知识点过多，请泡杯枸杞观看。
1. 为么要建立个人插画组件库？
实最要目的是为了给自己的插画供一个设计轴心，我们可围绕着这个轴心创作更具有效率规范的插画容，演变更多的插画格，我们使插画时变得游刃有余，升效率的设计输，衍生更多的组件营设计与牌插画组件库。（注：按照步骤设计，插画手残党轻松会哦！）
2. 牌（产、项目）插画组件库与个人插画组件库的区别？
规范区别：
品牌插画组件库：组件品牌插画库前做很细致的规范，：颜规范/情规范/光规范/关节细节处理/别元素处理等等；
个人插画组件库：为了让的插画更有灵活性，所以在做个人插画组件库不会做多的规范，反而为了插画的衍生要更注重人物构造、比例、组件等等，目的就是为了成立个人插画轴心。（注：个人插画轴心是针对于第一个插画系统的型，后面的插画风格衍生都会参照第一个插画系统的型，后面会给大家详细讲解）
使用效率：
品牌插画组件库：使用加高效，拖入即可换组件使用；
个人插画组件库：因为我们采的是断迭代式做法，在建立个人插画组件库时，我们的组件替换效率是较低的，但是在逐渐迭代中，我们的使效率会逐步升。
拓展力：
品牌插画组件库：因为有多规范的约束，所以拓展力偏弱，不过针对于的品牌已经足够了，它本身就是为了的品牌服的；
个插画组件库：为从我们插画组件库层级分区来看本来是为了衍生拓展，所以拓展力常强，不仅可以衍生出相类型插画风格，可以衍生出不类型插画形势，甚至可以以个插画组件库为基础创单独运设计组件库，或者升为品牌插画组件库。
3. 个人插画组件库哪些人最应该去建立？
认为 UI 计是最应该去建立的，在线上触的 banner、功能页、启动页、海报等等，多都可以用插画去计，不管是针对于在公还是针对于私下私活都是一大利器，可以让你高效的完成甲方的任，更大程度保证计的统一性以及输出的质量。（相大家都遇过找插画素材拼凑 banner 的候吧，有了个人插画组件库就不用愁了）
然除了 UI 设计师有插画设计、面计、美工也都可以去建立插画组件库，不过体还是要每个人所触的不同计内容，有些计的计内容少触插画部，或者少触可以组件化的插画（比如材质复杂、偏绘插画），所以就没有必要去建立插画组件库。
想要建立个人插画组件库就要从它的本质点出发去考虑，个人插画系统归纳下来一共有三大点：可复用、适应力、效率高。那下来会围绕着这三点来阐述该如何制作 UI 计个人的插画系统。
1. 可复用性方向出发设计
可复用性是做插画系统的一个基础，如果不能解决可复用问题，那做个人插画系统根本没有任何义。
如想要到插画可复用性，我们要把插画内容进不拆分，在它可替换部分都作为个复用样，让它可以更换不组件，那么我解决案有五步：
第步：
设定基础物组件（肢体细节、型体比例），规范组件内容。如你是第做物组件，可以多在网上找些可参考内容：
下图是我做个基础物组件案例：
从物组件上来看我共把它们分为了 9 个小件，它们分为：头部、上身、上臂、前臂、手掌、臀部、大腿、小腿、脚掌。
从人比例看，男性比例 10a，男性略高，身宽，整体壮硕；女性比例 9a，稍矮于男性，纤细苗条。不男性还女性整身体构造简单常规，符合真实人比例，利于后的组件改造。（第一插画组件好使用常规比例，后面会提到什么这样）
在人物组件上的划分并是固的，你可把它细分为 9 个分，可分为 7 个分，如果分为 7 个分就把上臂与前臂统一融为手臂，大腿与小腿统一融合为腿，到要怎么进行组件，还是要取决于自己设计的插画人物特性。
除男、女外也以建造更的人物进来，例老人、小孩、婴儿…人物越，续的延展空间也越大，前期为更快的插画组件库，以先建立 1 到 2 个人物，续以逐步完善迭代。
二步：
为期人物的动态延展，我们以用人物组件定一高频的人物基础动态，例标准站姿、坐姿、跑动等，以便我们插画的延展，图示下：
做人物基础动态以让我们在面的插画设计上少花很时间，例工中要用到跑步动态时，么就以直接用人物基础动态里面的跑步动进行添加人物细节，节省很工时间，提升工效率。
三步：
有人物组件的基础，我们就以开始设计插画的风。
在计前可以多参考一下别人的插画风格，这所说的风格主要是指插画的理方式，比如：颜色的选择、表情的理、衣服材质的理、曲线直线的选择等。
需要注的是建立第一个插画系统可以先做一个风格简的，不仅容易调节组件也有利于后期的风格衍生，以下是为人物添加的简基础风格（ 点：纯色/完全按人物组件贴计/无渐变）：
四步：
设计人物组件（以让你的插画在不同的场应用不同的动/服装/表情/肤等）
- 发：
发型面我们可以行一些人的区分，可以用于不同的场景，例如：男性第一用于公司场景，第二用于学，第三用于军人…
- 肤色：
做肤的变化最主要原因是让插画适应国际化，在不同的场中以加不同肤的人物。
- 表：
表情是为了更好体现出物在环境状态，如：领取红插画，物表情应该是开心或者大笑。
- 角度：
在插画的角上，我们采了最：正面、半侧、正侧，它在插画中的适应变得更强。
- 纹理：
目前计了 6 个基本纹理，基本纹理不仅可以定于服装中，还可以定于辅助素以及背景中。
- ：
整人组件中，分 3 块可替换服装组件，分别：身、下身、子。例如身可以替换短袖、袖、卫衣、背，同时它的下一层级还可以替换服装纹理、服装动作、服装颜色。
结合以的人组件我们就可以组合出各种不同的动作，如下：
第五步：
- 设计通用组件库：
通组件库中的元素最开始要黑白灰来表达，因为在同的场景中元素的有很大差异，例如盆作为景元素会多许多细节，作为远景元素可只是作为线条来点缀，这些表达方式我们可在日后使过程中添到它的子级库即可，这样可我们在使组件库时更灵，有利于我们迭代组件库，后面会逐一的讲解。
这 5 个步骤来我们的可复性插画就做好了，那么接来看看效果：
我们以看到以下 4 个场，运用到不同的别处理方式，例：一组为背渐变；二组背则采用大面积的纯；三组背用表达；四组则用浅面表达。
这也是品牌插画组件库的大点，虽然都是可复用性插画，但是品牌插画组件库大部是使用现有的、有规范的，而所做的个人插画组件库可以用同一个辅助素增添不同的插画表达形式，不断迭代，迭代的越多它的内容选取性就越高，后续就可以直拖入使用，比如图 4 中的植物就有 2 种状，第一种是显示部颜色，第二种则直为灰色。（注：后面会详细讲解）
以下活动页中，背景素也可以运用同的方法，在的背景组件库中调取想要的个插画素，把它组放入活动页背景中，进行再次调色得不同的背景组，以下三种背景组都可以相互替换使用。
2. 让你的插画具有极强的适应力
适应力强是指我们的插画系统以匹大数的产品，因为个人插画组件库是以设计师身份做的，我们面临各类产品，而各类产品风有不同的变化，要决一点我们以使用以下三个方法：
方法一：改变人物结构
例：你想为产品 A 做一插画类的功能页或 banner 时，现你现有的一套插画组件库并不符合产品特，产品 A 想表达更夸的成分，而我们所做的插画系统显示更的是柔和与大众，样就完不匹，么我们就要去改变一个基础点，就是人物结构，通人物结构的重组我们以得到想要的夸效果，么我就男女各举一例结构重组对比图，下：
我们为了在身体结构中最大程达到人物夸张的效果，在原有 10a 例的情况对原本的身体结构做了重大调整，男性：上身的缩短，身的延长及手脚的突；女性：整体更硬朗，手脚放大，腿长。
果把他们用相同的插画风表现出来，就出现下效果：
当你在做人物结构整时，你现有一个常规的人结构为基点去设计是么重要，也就是之前所提的为什么一版插画组件让你做常规的，因为果不是常规人结构，整来非常烦，就很难有参考意义。
方法二：改变插画风
除人物结构外我们还以更的考虑插画风，通不同的插画风去适应不同的产品，例：面/渐变//极简…同样我就男女各举一例，下：
上图改变风，男的风则更偏向条的表达与高亮；女的风则简单直接，更注重凸显的碰撞。
方法三：改变人物结构+插画风
在上面两种方法中除已有的基础人物结构 A 与插画风 A，我们还得到人物结构 B、C 与插画风 B、C，果我们用人物结构 B（或 C）与插画风 B（或 C）结合又以形成新的插画状态。
按照这样的方式来我们就可逐步添自己的插画系统，假如当你的插画系统人物结构有 5 组、插画格有 5 组时，你就可组合 25 组同的插画，这样你的插画系统适应就极强了，甚至你要为产做插画系统时，可大幅参考你的个人插画系统，当然这一切都是需要自己慢慢迭代添的。
3. 用软件规范插画组件库（层级详解），提升应用效率
为了更好的替换组件，升输的工作效率，我们可从一开始就使软件对插画进行管。面上可供复样式的软件蛮多的，这里我就使应率最的 Sketch 来进行讲解。
首先我给大家讲一下我的插画组件库的构成，我的插画组件库一共分为 5 大块，分别为：人物组件库、非常规人物组件库、动物组件库、辅助元素组件库、辅助背组件库，而 5 大块中也细分出很小级，我就一一为大家分析下我所用的级。
我们以从以上图中看出从风分类开始直至最小的组件，我用到最的数是 5 。
如果大家的有点懵，就拿一块从层 1 层 5 举例说：
风格分类（A）-度分类（正侧）-四大组件（下身）-动作（B）-颜色（B）
这里所用是 sketch 复用样“套套”，“套套”组件看似复杂，其实简单，并在软件换取都在大组件内，为不是软件讲解所以不带入过多软件知识。
制作时我们不一次性就出很多小组件，比如表时，一就 10 多 20 全部包含完，其实必，我人比较建议始小组件 3-5 种常用的就可以了，因组件库不断添加优化的，所以可以后续作应用中再不断的添加。
有了层级的划分，我们可 sketch 的复样式简单、效的规范插画组件库，想要覆盖替换组件容是十分方面，如：
非常规人组件库
除了常规的人组件库外，我还单独罗列了非常规人组件库，这一类组件库主作用于人特殊的动作形态，比如下面 3 透视类的插画动作形态，这些动态与常规的插画组件库的内很多不互通的，比如脸的角度、子的角度、身体的透视尺寸，所以我们就单独给他罗列一非常规人组件库。
都同组件库，当然也可替换内，非常规人组件库与常规的人组件库的层级逻辑所不同，常规的人组件库用小组件替换人动作，但非常规人组件库先替换整体的动作然后可以替换小组件，这也对他的特殊化理。（注：不舍弃它，又不他出的调整，所以就单独让它立出。）
根据非规组件库的设定给大做个小案例：
上可看我在这个透视的插画人物中可替换表情、发、纹、上身、身。
物组件库
我这里做的物组件库是来辅助人物及调和场景的，在层级划分上并会做的非细，满足我的日插画需求即可，当然如果你想把作组件库做的非细，那么可参照人物组件库的层级来划分层级。
根据我使用的动物组件库级，给大家举一个正确小案例与错误小案例，先看下错误小案例：
可以下图（狗）是一个非常粗糙的动物组件库，面只能替换动作以及动物的动作，当选在狗的状下，狗除了换动作没有其的组件选项，虽然想让动物组件库简化，但是也不至于什都不能替换。
下来正确的案例：
可以在猫咪的状下就有多组件可以选择，不仅可以替换猫咪的动作，还可以替换展示形式（展示形式是按照景别来做差异化，当然也可以用其方法）、猫咪表情以及猫咪的颜色，这的动物组件库已经完全能够足的计需求。
辅助素组件库
辅助素组件库层最好要添加景别，因为经常会遇同一个素在不同产品中体现出不同的景别，如果不，在选取组件就非常的伤脑经，经验之谈、烈要求。
为了大家更好的理解，给大家举一个案例：
我们可以看到我不仅可以切换元素，可以切换景以及颜色，至于其他小组件我并不需要，为这些已经足以满足我日常运设计需求，这个层级划分简单实用常荐。
背景素组件库
背景素组件库一共为种类型，别为：组景背景纹理背景。
- 组合场背：
组合场景背景是辅助元素组件库拼凑而来，它是一个可直接的整场景，想要替换的组件如果在辅助元素组件库够替换，那么在背景组件库是可的。（注：这里牵涉到组件库的重组调，在后续的章中会详细到）
上面的插画由白天变为黑夜只需要组件库就轻松成，而这些组件库是现做的，全是辅助元素组件库里取过来的，就是我说的组合场景背景是辅助元素组件库拼凑而来。
大家以现插画中上的小房子只用一个组件就以部替换颜，而左右两边的树却要做 6 次不同的替换，树木需要次替换的原因就是没有做重组，果想要相同元素做相同的替换，么建议在换程中重组组件，优化级。
- 纹背景：
纹理背景相对于就简单的，它里面只存纹理的不同样式，并且只可换颜色。
1. 创建常见运营计规范
在做计前，先要做好运营计的规范，以便于组件库的插入应用。
那么我用卡片弹窗来举例：做设计前我们先确定卡片内容，内容确定后，根据内容进卡片运设计规范：
我们需要注意是初步规范里并不需要涉及到用什么体，也不需要罗列出插画尺寸规范，我们可以在后设计步步去实现。
2. 结合运营设计的两大方法：
规范做好时，我们可以利用规范去制作相应组件库，利用组件库来结合运设计，按照不情况可以分为以下两法：
组组件库（物动态组件情况下）
在些运设计，如我们要用到物动作前并没有做过，那么需要我们新设计物动作，设计完后再把可以组物组件拖到我们现在组件进组，分以下几步进：
第一，根据卡片的规范出卡片的设内，如下：
第二，把设好的内分板块，以便于组件库的层级划分。这里我把他们一共分了 4 块，分别：文字组件、人组件、辅装饰组件、背景元素组件。
第步，在大的划分小组件，结合小组件就可得到我们组件库的层级，可看图：
在小组件里，很多都是个人组件库里原本有的容，这时我们就可把它们拖进来进行重组。
假你替换的元素不够用，么就需要你自己手动设计，样也能反来扩充你总的人物组件库内容，其组件库的内容就是么一点点迭代添加的，当你的组件库内容越来越时，你的设计成就越来越低。
三步下来就把组件库融入了运营计中了，有了新的运营计组件库。
直替换（有人物动组件的情况下）
如果你做的运营内容组件库都有，那就可以按着规范直拖入即可，也没有必要去进行重组。
总的来说组件库的建立是一个庞大的工程，在你有基础架构的时，你就要慢慢往里面塞更的内容进行填充，当你的内容够时它就以反向为你提供更的便，它是你独一无二的宝贵的设计资源库。
因为这期的内容实在多，所以插画组件库的应用、运营计常用模块组件案例、重组巧以及品牌插画组件库的建立会另外抽间给大家总结。（做案例费间希望大家谅解）
我为大家提供了些组件库可参考性文件，里含成套组件库（sketch）、成套插画图片、宣传动画、些参考性图片（构图、表情、发型等等），可以去附件下载。
欢迎关注作者微信公众：「黑狮力」
浙公网安备33011002017549号