赞助商
立即赞助

保姆级教程!手把手教你做超实用的插画组件库(附组件库下载)

手绘3年前 (2021)发布 流光
3K 0 0

今天给大带来的是如何建立设计师个人的插画组件库,因内过并知识点过多,请泡杯枸杞观看。

保姆级教程!手把手教你做超实用的插画组件库(附组件库下载)

关于个人插画组件库的 3 大疑问点:


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)、成套插画图片、宣传动画、些参考性图片(构图、表情、发型等等),可以去附件下载。

欢迎关注作者微信公众:「黑狮力」

保姆级教程!手把手教你做超实用的插画组件库(附组件库下载)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

大家好,我是娅一。初次见面,给大家带来一篇既简单又能出效果的教程。 既然简单,那么在上手前让我们先轻松愉快的欣赏下两...
扁平插画
编者按:这篇文章来自设计师 Titus Decali,他详细梳理了最近几年最为流行且他最喜欢的10种插画风格,并且每个风格下都推荐了...
手绘插画
本文将深入细节从多角度去解析组件化的概念,帮助我们理解、构建组件库。 设计组件化的概念本身是从程序的开发模式中演变而...
交互组件库
大家好,我是没有肚肚的杜杜~今天给大家分享下我在绘制人物插画的时候对人体结构的一些理解和小经验~以及我的字母女孩们的...
人物插画
在之前《从超多案例中,我总结了2020年值得关注的8个插画设计趋势》中,就提到了扁平插画是未来的一个流行插画设计趋势。扁平...
人物插画
​​​​​@N可可洛N、@爆炒地瓜​​​​:最近火爆微博的 iPad 插画创作你有看过么?今天优设请来了这些教程的作者 Gal Shir(https:/...
专访
今天,我们来讲解下组件的动态响应式,这是组件库搭建的重中之重,也是 Sketch 搭建组件库系列的终篇! 依旧,来一个大纲: ...
sketch
本文教你用仿型和破型的思路,掌握各种插画风格。 不管是 UI设计中还是营销活动中,插画都有很高的出场率,原因并不复杂:插...
仿型