在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快地上手图标设计。
本文共分为5个部分：
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有4种元素，图片、文字、几何图形、图标。
△ 由图片、文字、几何、图标组成的界面
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI设计中除了插画元素以外唯一需要我们「绘制」、「创作」的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好的设计图标？
△ Clear APP 的截图
这就涉及图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了，就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行？
有两个原因，第一文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势。再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
△ 应用文字替换了图标的对比
第二点，就是关于视觉的观赏性。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
△ 设置页有图标和没有图标的对比
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
下面，我们将对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI设计会创作的图标有更全面的认识。
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
△ 常见的工具图标
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
1. 风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的。多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们罗列出来。
△ 线性风格的工具图标
2. 风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
△ 面性风格的工具图标
3. 风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下：
△ 混合风格的工具图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
△ 装饰图标在识别性上的作用
还有就是国内的界面设计环境，会根据运营需求设计进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
△ 节日活动中的装饰图标
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
1. 扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也比普通图标有更丰富的细节与趣味性。
△ 扁平风格的装饰图标
2. 拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
△ 拟物风格的装饰图标
3. 2.5D风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用2.5D会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
△ 2.5D风格的装饰图标
4. 炫彩渐变
这是一个拗口的原创名词，找不到更合适的形容，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
△ 炫彩渐变风格的装饰图标
5. 实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要在后面掌握它的做法。
△ 应用摄影实物的装饰图标
最后，就要说说启动图标了。启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把「LOGO嵌套进系统图标模版」的图标。
除了掌握必要的规范以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
1. 文字形式
使用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
△ 文字类的启动图标
2. 图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
△ 图标类的启动图标
3. 图形图标
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
△ 图形类的启动图标
4. 插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
△ 插画类的启动图标
5. 拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
△ 拟物类的启动图标
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了。
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了。通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这4款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
1. Sketch / XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔运算等功能（Sketch 相对 XD 更完善一点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款「位图软件」。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制粘贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就为我们后续的学习提供了技术支持，可以进入下一阶段了。
这是图标系列文章的第一篇，信息量不算少。所以我们在结尾再总结一次，方便大家记忆。
文章来源：优设网 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家是不是很好奇别人的图形怎么都这么有创意，而自己想设计图形的时候却无从下手。可能是还没有掌握方法。今天就分享一个图形创意的方法。希望大家了解后，在设计图形的时候有一个清晰的思路。
△ 插图来自日本插画师 Yu Nagaba
我们先来看这个图形，大家能认出这是谁吗？
没错，是爱因斯坦。为什么仅仅几条简单的线条，就能把一个真实的人物刻画出来呢？这就是我们今天讲的内容，如何去简化并且衍生成完整的图形。
简化的图形一直是趋势。它不仅仅利于快速传播、具有非常强的延展性，也经常作为海报的主体。
标志上也大部分以图形为主。所以作为设计师，简化图形的能力是必不可少的。
但是很多人对于图形简化还没有一个清晰的理解，更多的只会在图片的基础上进行简单的描摹。
这样描摹出来的图像很可能缺乏识别度，就像这个例子，描摹出来后它到底是狗呢，还是狼呢？
简化的第一步是确定基本元素。总的来说，就是什么元素能够确定这个物体的种类。比如玫瑰是确定它是“花”这一种类。什么元素能让我们辨别它是花而不是其他东西呢？
枝茎加上花苞，以及红绿配色就可以让我们辨别它是“花”的种类了。至于叶子就属于补充元素。这都是让我们辨别它的种类的基本元素。
玫瑰花苞和枝茎的常态关系是：花苞在枝茎的末端。如果随意变换关系，会影响最简形态下的识别度，所以前期简化最好不要做变化。
虽然这两个步骤能确定它的种类是“花”。但是它是什么花呢？我们还分辨不出来。就需要到第三步，找到图形的重要特征。
这个时候玫瑰花就需要以种类内的事物做参考。也是和其他花做对比。找出玫瑰花区别于其他花卉的重要特征。
红绿配色是我们对玫瑰的印象。玫瑰的枝茎带刺。玫瑰花的花瓣开得比较紧密，花瓣层层包裹像漩涡一样。这些都是玫瑰比较明显的特征。
分析完这些特点，我们只需要在原有的元素关系上加上这些特点，就能分辨出它是玫瑰花了。而这些特点可以在保证识别度的情况下任意删减组合。
比如说去掉刺也能通过其他特征辨别玫瑰。或者保留刺，去掉花瓣的细节，如果对于玫瑰有刺这一点比较熟悉的人来说也可以辨别它是玫瑰。又或者保留所有的图形细节，把颜色变成黑白，都是可以的。
我们刚刚说的玫瑰是本身自带的特征，其实在现实生活中还存在其他因素影响的特征。
比如附加特征，这个图形我们都能分辨它是鸟，但是具体是什么鸟却看不出来。
一旦加入橄榄枝，啊，我们就知道，它是鸽子。鸽子本身是没有橄榄枝的，它代表和平也是人类赋予它的象征。所以这些属于附加特征。
还有状态特征，比如壁虎，哪种壁虎的状态和角度更容易让你辨别它们的身份呢？我相信应该是能看到壁虎紧紧抓在墙上的状态。所以它的状态是否能体现它的身份，也是很重要的一点。
现在的示意图它只是随便画出来的，如果用在设计中，这个图形是不合格的，所以需要对它进行改造。
衍生图形主要从两个角度入手，风格化和陌生化。
比如花的漩涡状可以用同心圆表现。花苞用半圆形、枝茎和叶子同样用最基本的形状概括。
这个风格的图形非常简单，会显得它的完成度不高。所以这时就需要陌生化的处理，让它在创意想法上有亮点。
比如我们把同心圆的颜色改变，虽然辨识度少了。但是这种创意图形加上文案与画面氛围，可以判断出它的身份。
那么漩涡一定要圆形的吗？
带着这种疑问，我们就可以开始第二个衍生。以四变形为基本形，通过旋转不同角度，再加上渐变风格。第二个图形就衍生出来了。可能这两个会偏抽象一点，那也可以选择保留更多的特征。
就像这个图形的外形和线条刻画上更大地保留了玫瑰形态，所以在颜色上就可以不用完全遵循现实。
很容易，三个不同的图形就完成了。
因为图形衍生的过程对于想法、造型能力、不同风格的掌握有所要求，没办法通过简单的理论来分析，接下来会通过分析四个不同的案例的衍生方式，给大家提供一些衍生的思路。
螃蟹它的颜色是橙红色。蟹钳是螃蟹比较明显的特征。蟹的八条腿可以作为辅助元素。它的躯壳偏圆形。这些特点的组合就能呈现一个非常清晰的螃蟹的形象。但是别忘了图形的衍生是需要对特征有所取舍和变化的。
为了让螃蟹看起来更加的陌生化，我们可以考虑改变印象中螃蟹的常见形态，让它以一种更加有趣的动态呈现，比如让这个多爪动物以一种太阳一样的放射状呈现，变身元气螃蟹。
第二个方案保留圆形的身体，加上尖锐的蟹钳特征，就完成了一个新的螃蟹图形。虽然颜色的变化和少了八条腿的特征，但是在保留其他特征时作出的变化却也能让我们清晰辨别它是螃蟹。
那传统的螃蟹都是圆形的身子，我们能不能尝试把螃蟹的身体变方呢？带着这种思考，保留其他特征的同时作相应的风格化处理。又一个新的图形产生。
这些就是螃蟹部分的衍生图形。
火龙果的配色是很明显的特点。表皮会带有绿色的鳞片。相对椭圆的身体。火龙果是白色的果肉和黑籽的组合。
第一个衍生很简单的，就是简化火龙果的外形，最后变化颜色。
这一次同样保留火龙果的外皮特征，因白色果肉和黑籽的结合让我联想到骰子，我们可以把这个想法和火龙果结合一下，让它变得更加有创意。
使用不寻常的切块方式，也能产生另一个图形。
这些就是火龙果部分的衍生图形。
颜色同样是我们辨别它的一个很重要的特征。除了颜色，我们还可以看到西瓜的表面有条纹的覆盖。像是西瓜这种简单的圆形水果，切块之后的造型，可能会更有辨识性。是一个很好的附加特征。最后，黑色的瓜籽同样是我们辨别西瓜时的一个显著特性。接下来就需要对它们进行风格化的处理。
西瓜的条纹部分，这一次我们用几何图形来做一些尝试。错位再压缩，让条纹的比例感更强。加入半圆形的西瓜切块之后，感觉有点像是人脸对吧？那我们就顺势添加一个眼睛，让它拟人化。
符合了这么多特征之后，造型上就不用那么写实了，我们完全可以抽象一些来绘制它。加入之前的眼睛和切块之后，它就完成了。
西瓜切开后的这个形状特征让我们很容易辨别它的身份，所以就可以保留这个形状特征，做一些大胆的变化。
比如颜色上可以完全脱离西瓜原有的颜色。用几何色块的方式去填充造型，让风格化的更强烈。到这里，这个图形也就完成了。按照这种思路，能不能保留配色，但是在切块的形状上进行改变呢？
那就到了第三个衍生，我们把它分成三块去表现西瓜的层次。因为造型已经足够抽象了，所以这里我们用颜色去尽量还原西瓜的印象。组合到一块，是不是就有西瓜切块的感觉了呢？
我们把这个数量增加一些，就更有辨识度了，再调整里面的一点变化。那么到这里，这个图形也就完成了。
这是西瓜部分的衍生。
青蛙是绿色的，由于身体和四肢的对比，会感觉四肢很细长。另外后爪很长，并且有蹼。弯曲的后腿是青蛙比较特别的地方。
这一次，我们可以从造型上做变化。比如切断连接四肢的关节部分，不过这样的造型在美感上还不是很理想。
那么尝试到这里，觉得下面的这个脚的直线结构很有趣，是一个很有变化性的特点。所以我们可以按照这个方向再去尝试一下。
把手臂的部分也修改成直线的样式，那么这里这个图形就完成了。
这一次，我们把目光聚焦到青蛙细长的四肢上，为了让造型看起来更生动，这个图形我决定打破对称的方式。将四肢和身体的比例做一些夸张的处理，让身体更小，四肢更大。爪尖用来划水的蹼也同样做了夸张的处理。那么在这个过程中，我们会继续摆放四肢的位置，让每个部分的空间看起来更均衡一些。
强调了四肢之后，我们还可以反着来，尝试强调身体的部分。为了让四肢看上去更细小，这一次我们用线条来绘制。
这是青蛙部分的效果。
来回顾一下我们这篇教程所有的图形。
我们从极简化的元素开始，通过不同特征的组合与变化，再为它添加陌生化和风格化的处理，就能能衍生出非常多形态各异、各种风格的图形。
文章来源：优设网 作者：研习社
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2016 年玩追波的时候，有幸加入了 FreedomUnion 团队，当时团队内的小D（Dea_n）的界面渐变风很受欢迎，他使用的颜色干净、舒服、有感染力，很快形成了自己特有的设计风格。
我被他的配色深深吸引了，特别想研究他的配色，就尝试把他的作品在 PS 中打开，尝试吸色，找找他经常使用的配色范围。为什么他配出来的颜色就很吸引人，长时间看眼睛也不会太累？下面先欣赏一下小D（Dea_n）的设计作品。
作品已经过了三年了，如果是一般的配色作品应该看上去会有些过时，但是小D（Dea_n）的作品看上去并没有，还是有不少作品的配色现在看上去也是很前卫的。一起来看看我对小D（Dea_n）的大部分作品的吸色情况吧。
小D（Dea_n）的用色着实很大胆，很多都是贴边用色。我上大学的时候，老师曾经说过尽量少用贴边的颜色设计，包括灰色也可以使用带有颜色倾向的高级灰。这下终于明白了为什么小D（Dea_n）的配色这么亮眼。
当然我也有自己的小发现，我发现每个的作品主配色的 CMYK 值总会有两种色值为 0%，比如C：0%、M：91%、Y：95%、K：0%。
难道只是偶然？当时我也请教过小D（Dea_n）是否是刻意的，得到的答案是并没有。然后小D（Dea_n）靠自己卓越的配色能力进入小米 RIGO 设计团队。
当小米 miui9 系统官网海报出来的时候，我把作品拿到 PS 一吸色，结果告诉我小D 一定参与了这个作品的配色设计。那为什么只有黄色的 CMYK 的色值是有 3 种颜色混合而成的。
难道仅靠着一点吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面设计中？CMYK 配色方法可不可以增加它的扩展性？CMYK 配色方法可以作为一种配色方法帮助设计师完成色彩搭配的工作吗？带着这些疑问我继续研究配色。
我们来看一下「子弹短信」的应用图标，它的用色基本符合之前说的 CMYK 配色方法，当然是不包含子弹上的深色调。渐渐地我发现 CMYK 配色方法的路子越来越宽了。
Asher 是追波绘画写实图标的大神，他的写实作品配色饱和度高，光影通透到位，需要很强的手绘功底。在他的设计作品中除去暗色调和深色调的部分，其他配色基本都使用了 CMYK 配色的技巧。
我们都知道 iOS 系统和 Android 系统，在他们各自的系统规范中对配色也有相应的规范。我们提取两大系统规范中的配色进行吸色分析。
一顿猛吸之后，发现大厂系统规范的用色也基本符合 CMYK 配色方法的标准。
前段时间 IBM 重新定义了他们的设计语言，在产品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。
近期很多互联网公司进行了品牌改版，深亮色调到浅亮色调慢慢成为一种趋势。
新版的 Facebook LOGO 从深蓝色变为亮蓝色，字体则继续保持原样。其中 CMY 值进行适当减少。除此之外，图标部分也由原来的圆角正方形变为圆形，图标中的「f」从偏右的位置移到圆形的中间位置。
全球旅行者喜爱的民宿预订平台 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。
微信 7.0 版本使用了经过调整的全新图标。图标除了原来绿色渐变的背板变浅外，两个标志性的对话气泡与背景板的比例也做了相应的调整。色彩的 CY 值减少了。调整后的新版图标除了空间感和符号感也更强外，整体变得「更轻」了。
在网易云音乐 6.0 版本中，对品牌 LOGO 再次进行了调整。新版网易云音乐图标最明显的变化为红色的主色调，其次为「留声机」和「音符」组合而成的图形部分。
红色较之前变得更加明亮，同时图标红色背景由之前的纯色改为轻微的红色渐变填充。新的红色着重考虑了用户长时间使用屏幕造成的视觉疲劳，采用比较「轻」的色彩可有效降低这种问题。其中颜色 CMY 三种色值都有减少。图形部分，新版图形缩小了中间交叉部分的面积，顶部向右弯曲的弧形变大。整体效果较之前更加清晰，特别是在更小的应用尺寸中，其展示的效果明显要比之前的好。
看到上面的描述是不是特别想知道当 CMYK 中的两个色值同时为 0 时，不同颜色的色域范围？带着这样的想法，把红橙黄绿青蓝紫中每类选一种颜色进行区域研究。打开 PS，在拾色器中截取不同颜色的色域范围如下：
上图白色区域就是在红色 C 值为 0、K值为 0 时的色域范围，范围还是很小的。
黄色的 CMYK 色域很奇怪，在色相 38-58 度的黄色纯度最高时，CMY 都有色值。也就是 PS 里面最纯的黄色也是由 CMY 复色调和而成的。这也是为什么之前黄色使用时，CMYK 色值是由三种颜色混合而成的。
上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围，范围开始慢慢变大，意味着绿色高饱和度的可使用颜色越来越多。
上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围，范围也开始慢慢变大，大体范围和绿色相当。
上图白色区域就是在蓝色 Y 值为 0、K 值为 0 时的色域范围，范围应该很大了。
上图白色区域就是在紫色 Y 值为 0、K 值为 0 时的色域范围，范围和蓝色的色域范围相当。
上图白色区域就是在洋红色 Y 值为 0、K 值为 0 时的色域范围，范围和蓝色、紫色的色域范围相当。
1. CIE
从理论上讲，可见光分布的色彩域就是 CIE 所表示的色域。在颜色感知的研究中，CIE 1931 XYZ 色彩空间（也叫做CIE 1931色彩空间）是其中一个最先采用数学方式来定义的色彩空间。从 CIE 图中能看出冷色的区域远远大于暖色的区域。其中黄色和红色的色域范围相对较少，完全符合 PS 拾色器里面的色域范围。
2. RGB
RGB 是计算机荧光屏显示颜色的色彩方式，它们是由 R、G、B 三种发光质通过加光混合产生的。RGB 色彩模式是一种加色模式，将红光、绿光和蓝光以不同的比例相加可以合成各种各样的色光。R、G、B 三种颜色各能产生 2 的 8 次幂，即 256 级不同等级亮度的颜色。256*256*256 即 16777216种颜色。RGB 色彩模式主要用在电脑显示器和电视上。RGB 色彩模式是绘图软件最常用的一种颜色模式。
3. CMYK
CMYK 由C（青）、M（品红）、Y（黄）、K（黑）四色高饱和度的油墨以不同角度的网屏叠印形成复杂的彩色图片。CMYK 色彩模式是一种颜料模式，它利用色料三原色混色原理，加上黑色油墨，形成各种各样的色彩。
这种模式属于相减混色模式，广泛运用于绘画和印刷领域。CMYK 的色域范围比 RGB 的色域范围要小，某些色彩无法用 CMYK 油墨印刷出来。当这些不能印刷出来的颜色出现时，在 PS 的「拾色器」对话框上会显示一个带感叹号的三角形警告标志，表示这些颜色超出 CMYK 的色域。即使设计了比较鲜艳的颜色，如果超出了 CMYK 印刷颜色的色域，计算机就会用一个接近它的较灰暗的颜色去顶替它。可见大部分 CMYK 印刷颜色的色域小于 RGB 屏幕颜色的色域。
我们来仔细研究下 CIE 色域范围，CMYK 当中的黄色色域值有一小段超过了 RGM 的色域值。这就说明黄色的更饱和的 CMYK 的原色和间色可能在 RGB 的范围之外。
其他的我们还有一个方法去验证。就是在 PS 里面新建颜色模式为 CMYK 的文件，打开拾色器界面，把颜色调到右上角改变色相值的 0-360度 的范围。色相在 38-58 度的黄色区域对话框上不会显示带感叹号的三角形警告标志，表示黄色区域的 CMYK 色域值是超过 RGB 的色域值。这就是为什么 iOS 系统规范中的黄色色值必须是三种颜色混合而成的。这时候特殊的颜色就需要特殊处理。
CMYK 配色法就是两种颜色的色值为 0%，但是黄色因为色域问题是由三色组成的（c值尽量小于10）。
色域集中在纯色系的范围，浊（灰）色系和暗色系除外。
界面的主色（纯色系为主）、图标设计、品牌色（纯色系为主）都可以使用 CMYK 配色法。
CMYK 配色法目前多适用于互联网产品，虽说在创意上要敢于创新，但在实际的工作中还是需要理性地根据公司品牌和产品定位，合理地进行色彩搭配。目前此方法没有更多的理论依据支撑，如有疑问希望多多交流。
文章来源：优设网 作者：水手哥
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
题图来自Saurageresearch
企业对客户旅程总体的认知与应用比例为25%，属于初期水平。2C类企业、大型企业、金融行业对客户旅程的认知和应用水平明显高于其他类型的企业。大多数企业在最近两年才开始尝试客户旅程方法，主要由研究、设计、客服部门在主导客户旅程的应用，客户旅程地图的绘制频率大部分是每年或半年绘制一次。
企业目前主要将客户旅程应用于客户需求分析、产品和服务的设计、以及客户旅程测量与分析等领域，并在提升客户满意度、促进以客户为中的企业文化，以及提升营销和运营的转化率方面效果最明显。大部分企业对认为客户旅程有积极的效果，极少给出负面评价。客户旅程方法使用时间越长，客户旅程地图绘制频次越高的企业获得效果越明显，并且2B企业比2C企业获得效果更明显。
虽然目前由市场部门（包括营销、销售和品牌部门）主导的比例较少，但由市场部门主导客户旅程应用获得效果明显好于其他部门主导的情况，由客服部门主导的效果低于其他部门。这与MyCustomer在2018年在欧美的研究结论相反，这可能说明市场部门在客户体验领域的主导权在逐步上升。
对于未来一年的使用客户旅程的意愿，虽然各类企业对客户旅程方法的效果表示肯定，并且明确表示不会使用的比例很少，但相当比例的企业存在较大不确定性。存在的主要困难和挑战包括专业知识、方法和技能的欠缺，以及专业工具和平台的不足。未来客户旅程方法要在整体应用水平上取得突破，这些方面是需要重点聚焦的领域。
02：
不同类型的企业，在客户旅程的认知和应用程度上也表现出较大差异：2C企业的应用程度明显高于2B类型的企业，总体认知和应用比例分别为30%和20%。大型企业也明显高出中小型企业，分别为29%、22%和19%。客户旅程是一个相对比较复杂的系统性方法，真正的应用需要人员、资金等各项资源的投入，大型企业更具备优势。相比而言，小型企业的在。分行业来看，认知和应用程度最高是银行/金融/保险行业（30%），一方面是由于这个行业的本身的客户决策流程长、金额大、风险大，另外一方面也是由于这个行业的利润较高，企业有相对较为充足的资源进行投入。
由客户研究部门和团队主导客户旅程的绘制时目前的最常见的模式，其次是设计部门，以及客服、品质部门主导。但产品、战略、营销、销售部门主导的情况也一定的比例，这也说明目前开展客户旅程应用的企业，其目的存在多样性。不同部门来主导，其方法和应用上也会存在差异。
在绘制客户旅程的过程中，目前主要用的是客户调查数据和客户访谈数据，这也是客户研究团队最擅长和最容易采集的数据。其次最常用的数据来源是客户行为和客户反馈/投诉数据，总体上对外部数据应用多于内部数据，对小数据多于大数据。
在客户旅程地图绘制工具方面，使用最多的是PowerPoint，处于绝对领先的地位；其次是常用的绘图和设计工具，例如Visio、Photoshop、Adobe Illustrator等；专用的客户旅程地图绘制工作使用比例非常低，最主要的客户旅程地图专用绘制工具UXpressia的使用比例也只有10%，其他的则更低，使用比例只有2%-4%。主要是目前客户旅程地图绘制并不是一项常见工作，所以通用型的文编编辑和绘图工具会是常用选择，而目前的客户旅程地图绘制工具多为英文版本，国内还没有出现较好的客户旅程地图绘制工具，这也是客户旅程地图专用工具使用比例较低的重要原因。
不同情况下，客户旅程的应用效果也不尽相同。调查数据显示，使用客户旅程方法时间越长，绘制客户旅程地图频率越高，客户旅程方法取得的效果越好。使用2年以上的企业和2年以下的企业表示有效的比例（包括“比较有效”和“非常有效”，下同）分别为83%和69%；每年绘制多次客户旅程地图的企业和多年绘制一次地图的企业的表示有效的比例分别为81%和62%。
在将客户旅程方法进行具体应用时，最常见是用于客户需求分析、产品和服务设计、客户旅程分析和测量。其次是在企业文化建设、工作管理和沟通方面的应用。在具体操作层面，例如客户旅程编排、营销和互动，目前也有一定比例的具体应用。随着客户旅程方法应用的进一步深入，直接到操作层面的应用将逐步提升。
客户旅程在不同领域的应用对最终的效果有明显的影响：表示客户旅程应用效果一般的企业在各个具体应用领域的应用比例均低于获得明显效果的企业。效果一般的企业在客户需求研究和分析、客户旅程编排、市场营销和推广，以及品牌传播与互动方面的应用差距最大（落后超过10%的比例）。从调查数据来看，虽然用于编排、营销和品牌的总体比例不高，但确实影响最终应用效果的显著因素。
通过以上在不同领域的应用，客户旅程方法在各个方面的效果都有所体现，尤其是在提升客户满意度、强化以客户为中心的企业文化、提升营销和运营的转化率方面最为明显，分别由59%、54%和37%的企业表示在这三个方面得到了提升。
不同类型的企业未来使用客户旅程方法的可能性也存在明显差异。使用客户旅程越久、使用频率越高，获得的效果越好的企业，继续使用客户旅程方法的倾向越高。2C企业比2B企业未来更愿意使用客户旅程，虽然2B企业获得效果更明显，但2B企业使用客户旅程的难度和成本更多到，导致2B企业的使用意愿要明显低于2C企业。另外，相对于中型和小型企业，大型企业的使用意愿明显更高，表示可能会使用的比例达到了61%，明显高出中小型企业。
对于在客户旅程应用过程中的挑战，最大的困难不是预算不足，而是知识、方法、技能、工具和人员的欠缺和不足，尤其是专业知识和方法的掌握不够，是最大的两项困难。其次碰到的问题是企业高层，以及其他部门的支持不够。
文章来源：UXOOLS
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关于按钮的一些知识和我的一些观点分享给大家。
按钮是最常用的组件之一，有很多小伙伴并没有很全面的认识这个组件，今天我把关于按钮的一些知识和我的一些观点分享给大家。
一 按钮的作用
在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用按钮。
1）什么是按钮
按钮用于触发一个及时操作。
2）有什么作用
2.1 功能操作
比较常见的是：展开收起、加减、下拉等。这种情况下以功能性为主，按钮的形式适当弱化，重点强调功能，突出主体信息。
2.2 指引用户下一步操作
这个是最常见的使用场景，每个可交互页面上都有这类按钮的出现，用来指引用户下一步该怎么做。比如：创建、保存...
2.3 培养用户习惯
当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长此以往用户就会形成使用习惯。如果某操作能够为用户持续带来价值，那就可以在按钮的位置让它更醒目，持续培养用户点击习惯。
二 按钮有哪些类型
· 主按钮：用于主动行动点，一个操作区域内只有且只能有一个主按钮；
· 默认按钮：用户内有主次之分的一组行动点；
· 虚线按钮：常用于【添加】操作；
· 文本按钮：用于次级的行动点；
· 链接按钮：用于作为外链的行动点。
三 按钮的状态
1）交互状态
1.1 Normal 正常状态
此状态为按钮的正常显示状态，就是按钮在也页面中的常规状态。
1.2 Hover 悬浮状态
此状态为按钮的悬浮状态，当鼠标滑过时候的状态会给用户一个交互反馈，因为它只是一个视觉上的反馈并无实际作用，所以在移动端就把此状态去掉了。
此状态的效果并没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.3 Click 点击状态
此状态为按钮的鼠标 / 手指按钮状态，操作完此状态后，就会引发此按钮的真实作用。
同时，此状态的效果也没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.4 Disable 禁用状态
此状态为按钮的不可操作状态。
当页面中有未完成的任务或页面中有错误导致不可提交页面时，按钮会处于 Disable 状态。这个状态在产品中也是很常用的，而且这种情况下应该引导用户去做其他操作，所以此按钮在视觉上一定要弱于其他。所以要制定一个通用的展示方案。
一般方案有两种：
· 无论按钮本身颜色是什么，它的背景色均为纯灰色，常用的色值有：#CCC、#999等，此种方案为常用方案；
· Disable 状态为 Normal 状态的 30% 透明度，如果你想让按钮都有颜色倾向的话，可以用这种方案。
2）状态属性
· 常规：常规样式的按钮，主操作按钮；
· 危险按钮：删除/移动/修改权限等危险操作，一般需要二次确认；
· 幽灵按钮：用于背景色比较复杂的地方，常用在首页/产品页等展示场景；
· 加载：用于异步操作等待反馈的时候，可以避免多次提交。
四 按钮的使用方法 / 禁忌
1）一个操作区有且只有一个主按钮
一个操作区有且只有一个主按钮去引导用户操作，如有有多个或没有则会影响用户的判断。尽可能少的让用户去做选择，产品的终极目标应该是“傻瓜式”产品，不要让用户有学习成本。
2）圆角值
根据产品风格，三种圆角值的设定：
2.1 圆角值为 0
这种适合用在比较严谨 / 企业级产品中，比如：阿里云；
2.2 小圆角值
这种是最常用的形式，在不失严谨的同时还有一些细节，如果可以的话，尽量选这种的；
2.3 超大圆角值
这种一般需要有独特的产品风格才可使用。样式不好把控全局效果，所以使用频率较低，慎重使用。
较大圆角值，此类千万不要用，不要问，问就是太丑。
3）精简文字
按钮里面的文字一定是精简的，不要展示过多文字，更不要折行。
4）文字与按钮比例要适中
文字与按钮的比例要适中，文字不要太大或太小，都会影响视觉展示。
5）弥散阴影
如果你想要用弥散阴影，阴影的颜色尽量用带按钮本身颜色倾向的，这样会让按钮更有呼吸感。需要注意的是：只有主按钮才能用阴影，其他级别的不要用，不然识别度会变差，并且会让按钮的体验变得很差。
6）主次操作按钮样式统一
主次操作按钮样式要统一，不要滥用样式。
7）按钮样式与其他组件要有区别
实际使用中，按钮样式不要与其他组件样式混用，避免让用户产生误解，做一些不必要的操作和思考。
8）不同场景适配
现在暗黑模式也是常用的场景了，所以黑/白场景下都要考虑到识别度的问题。
9）主次按钮的位置
主次按钮左右的问题，也常常出现在设计讨论会中，这次我直接放个结论吧，以后不要再为这件事吵架了。
在提交页面、弹窗中，主按钮在右；在其他常规页面上，酌情考虑。
五 按钮尺寸
按钮尺寸具体用多大的，这里我总结了一个规范（仅代表个人意见）。
· 高 = 文字行高 + Xn，X=自然数，n=4
· 宽 = 文字宽度 + Xn，X=自然数，n=4
在其他地方也可以用类似的公式去做规范，比如卡片的间距，你可以设置 n 为基础值，在此基础上用 Xn 去选取合适的值。
注意：常用的字号为 12px、14px，尽量不要用太大的字号在按钮上。
小结
按钮只是众多组件中的其中一个，也是最常用的组件之一。对于设计师来说，无论大小组件，我们都要精益求精的去思考，只有把每一个细节做好了，才能做好产品。日积月累的把每一个知识点掌握了，我们也就成长了。
文章来源：优设网 作者：友设青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一个简易的小教程，一起Get起来~
设计中存在一些不可忽视的趋势。尽管玻璃态在UI设计中不是新的事物，但是最近又被人们挖掘出来了。有些人甚至将这个趋势称为“玻璃态”。
下面让我向你展示如何通过7个简单的步骤教你如何创建玻璃态的UI效果。
1）画一个形状
首先创建一个基本形状，一个具有以下尺寸的矩形：640×400，再加40pt的圆角。
2）应用渐变填充
现在该基本填充了。在本教程中，我们将使用渐变。两种渐变颜色都将是纯白色（#FFFFFF），但是它们的不透明度会有所不同。将第一个设置为40％，第二个设置为10％。
3）添加背景模糊
我们来模仿玻璃的是模糊感。首先将背景模糊值设置为20左右，来看看这个是表面如何变化的。当然，你也可以根据自己的效果来设置不同的模糊度。
4）添加边框
一个优雅的边框会为元素增添了光泽。当玻璃表面重叠时，它也有助于建立视觉层次。如果要在设计中创建定向光的幻觉，则可能需要对边框使用渐变。我是这样制作卡片的，所以看起来更有“质感”。
卡边界对角渐变的设置：
边框：3px
颜色1：#FFFFFF（不透明度50％）
颜色2：#FFFFFF（不透明度0％）
颜色3：＃FF48DB（不透明度0％）
颜色4：＃FF48DB（不透明度50％）
5）应用阴影
细微的阴影效果有助于增强视觉层次。由于阴影的存在，区分所有层将更加容易。
在我的示例中，我使用具有24的模糊值的深色，并且扩展减小为-1。这次，你将通过添加阴影样式属性以与玻璃表面一起成形来获得最佳效果。
6）填写内容
是时候添加一些内容了。填写必要的徽标和文字。要创建压印层的错觉，请用白色填充内容，并将不透明度降低到50％。你也可以玩图层混合-尝试叠加以获得有趣的结果。
7）添加质感
玻璃卡片已完成，但是，你可以进一步添加一些高级纹理！要添加优雅的噪点，我们添加带有噪点的图像。将不透明度降低到20％，并将填充的混合模式设置为“叠加”。看看现在看起来多么有质感。
来看一些其它的尝试~
文章来源：UI中国 作者：Tzw_n
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家好，今天给大家带来的是配色干货系列之第三期！！超级干货！！
前两期地址传送门：
前面两期，主要分享审美的培养与提升、配色的技巧与习惯。本篇更为实在，主要分析有哪些经典的万金油配色组合，满足日常工作使用。
看完这篇文章，相信你对色彩的掌握，能更深一步~~干货建议提前收藏！喜欢记得给咱们公众号添加星标喔~~
1）经典搭配-黄配黑
色板 颜色组合
Yellow & Black
黄配黑的色系非常经典耐看，普适度也很广。我在公众号里写的一些文章，也经常采用这套配色。
这套黄与黑的组合很适合一些生活、社区、人文、情感等场景进行使用，情绪温和。如果你的设计，会被频繁的在这些场景里进行使用，那么不妨使用一下这套黄黑配色试试看。
比如以下这些案例：
这里也给出我经常使用的两组黄黑色板，一组更为活泼鲜艳，更具娱乐化。一组更为内敛，充满文化气息。
推荐组合色板①：
推荐组合色板②：
2）科技搭配-蓝黑白
色板 颜色组合
Blue & Black
这套色彩就不多说了，蓝色可以说是我非常喜欢的颜色之一了。从咱们公众号的logo，还有日常发文的封面，相信大家就能感受到。
蓝黑白搭配，可以说颜色是百看不腻，并且蓝色色相偏冷，没那么多情绪倾向，所以更能够让人心平气和的阅读信息，提升效率。因此也经常被用到科技、数据、社交、工具等应用场景。
比如以下几组案例：
关于蓝黑白，我也给大家推荐两组我很喜欢的色号组合。一组更为明亮，显得年轻活泼些，而另外一组则更加深沉商务，更为内敛。
推荐组合色板③：
推荐组合色板④：
3）CP组合-红蓝配
色板 颜色组合
Red & Blue
这套颜色组合，在近几年可以说是非常流行了。颜色比较浅的，有经典的马卡龙色组合，被广泛运用到年轻社交等工具场景。而颜色重点的，直播娱乐等秀场平台，也都大量可见其身影。
红蓝搭配，颜色的相撞导致色彩充满了热情与朝气，社交娱乐化产品的场景，非常适合这套色彩组合。
比如下面这些案例：
这里也给大家分享两套红蓝搭配的色板，一套略显温柔，另外一套则热情如火。
推荐组合色板⑤：
推荐组合色板⑥：
4）经典国潮-赤金组合
色板 颜色组合
Yellow & Black
这几年国潮风格也越来越受到大众所喜爱，而在国潮色彩的搭配中，赤色与金色的搭配。一方面红色中国味特色浓厚，而搭配上高档的金色，瞬间浓厚的精致国民画风，就出来了。
比如每年的集五福，就是非常经典的赤金组合，精致的同时，还非常接地气儿。
关于赤金，我也从潘通色里挑选出了一组很经典高档的色彩组合，色板色号也分享给大家。
推荐组合色板⑦：
推荐组合色板⑧：
5）尊显高贵-黑金色
色板 颜色组合
Yellow & Black
黑金组合相比其它颜色更显高贵，在很多知名的APP里面，也都是能看得到，比如淘宝的88vip，京东金融的小金库。这套色彩组合往往代表着商务、尊贵，高级，既内敛又隐蔽，通常被用到各类会员、金融等尊贵体系中。
比如以下这些案例
关于黑金里面的金色，也分为两种，一种颜色更为纯金，还有种偏向于玫瑰金，玫瑰金的色彩相对要更温和一些，没那么冰冷。这两套色板，我都分享给大家啦~~
推荐组合色板⑨：
推荐组合色板⑩：
6）其它色彩组合
色板 颜色组合资源下载
Yellow & Black
除了我上面分享的这五套经典配色，还有很多其它的色彩组合，也都非常优秀好看，比如上次分享的这些：
这段时间的积累收集，又更新了下面这些新色板。
还有很多，就不一一展示了。方便大家收藏，我把这些色彩组合的图片+色板文件，都进行了打包，方便大家直接借鉴这些色彩。
文章来源：UI中国 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。
一、关于个人插画组件库的3大疑问点：
1、为什么要建立个人插画组件库？
其实最主要目的是为了给自己的插画提供一个设计轴心，我们可以围绕着这个轴心创作出更具有效率规范的插画内容，演变更多的插画风格，让我们使用插画时变得游刃有余，提升率的设计输出，衍生更多的组件化运营设计与品牌插画组件库。（注：按照以下步骤设计，插画手残党也能轻松学会哦！）
2、品牌（产品、项目）插画组件库与个人插画组件库的区别？
01-规范区别：
品牌插画组件库：组件品牌插画库前会做很多细致的规范，如：颜色规范/情景规范/光线规范/关节细节处理/景别元素处理等等；
个人插画组件库：为了让我们的插画更具有灵活性，所以在做个人插画组件库时不会做太多的规范，反而为了插画的衍生要更注重人物构造、比例、小组件等等，目的就是为了成立个人插画轴心。（注：个人插画轴心是针对于第一个插画系统的原型，我们后面的插画风格衍生都会参照第一个插画系统的原型，后面会给大家详细讲解）
02-使用效率：
品牌插画组件库：使用更加，拖入即可更换组件使用；
个人插画组件库：因为我们采用的是不断迭代式做法，所以在刚建立个人插画组件库时，我们的组件替换效率是比较低的，但是在逐渐迭代中，我们的使用效率会逐步提升。
03-拓展力：
品牌插画组件库：因为有很多规范的约束，所以拓展力偏弱，不过针对于自己的品牌已经足够了，它本身就是为了自己的品牌服务的；
个人插画组件库：因为从我们插画组件库的层级分区来看本来就是为了衍生拓展，所以拓展力非常强，不仅可以衍生出相同类型的插画风格，还可以衍生出不同类型的插画形势，甚至可以以个人插画组件库为基础创建单独的运营设计组件库，或者升级为品牌插画组件库。
3、个人插画组件库哪些人最应该去建立？
我认为UI设计师是最应该去建立的，在我们线上接触的banner、功能页、启动页、海报等等，很多都可以用到插画去设计，不管是针对于在公司还是针对于自己私下接私活都是一大利器，可以让你的完成甲方的任务，更大程度保证设计的统一性以及输出的质量。（相信大家都遇到过到处找插画素材拼凑banner的时候吧，有了个人插画组件库就不用愁了）
当然除了UI设计师还有插画设计师、平面设计师、美工也都可以去建立插画组件库，不过具体还是要看每个人所接触的不同设计内容，有些设计师的设计内容很少接触到插画部分，或者很少接触到可以组件化的插画（比如材质复杂、偏手绘插画），所以就没有必要去建立插画组件库。
二、如何建立个人插画组件库？
想要建立个人插画组件库就要从它的本质特点出发去考虑，个人插画系统归纳下来一共有三大特点：可复用、适应力强、效率高。那么接下来我会围绕着这三点来阐述该如何制作UI设计师个人的插画系统。
1、可复用性方向出发设计
可复用性是做插画系统的一个基础，如果不能解决可复用问题，那么做个人插画系统根本没有任何意义。
如果想要达到插画可复用性，我们就要把插画内容进行不同的拆分，在它可替换的部分都作为一个复用样式，让它可以更换不同的组件，那么我的解决方案有五步：
第一步：
设定基础人物组件（肢体细节、型体比例），规范组件内容。如果你是第一次做人物组件，可以多在网上找一些可参考内容：
下图是我做的一个基础人物组件案例：
从人物组件上面来看我一共把它们分为了9个小件，它们分别为：头部、上身、上臂、前臂、手掌、臀部、大腿、小腿、脚掌。
从人物比例来看，男性比例为10a，男性略高，上身宽大，整体壮硕；而女性比例为9a，稍矮于男性，纤细苗条。不管是男性还是女性整个身体构造简单常规，符合真实人物比例，有利于后期的组件改造。（第一个插画组件最好使用常规比例，后面会提到为什么要这样做）
在人物组件上的划分并不是固化的，你可以把它细化分为9个部分，也可以分为7个部分，如果分为7个部分就把上臂与前臂统一融为手臂，大腿与小腿统一融合为腿部，到底要怎么去进行组件化，还是要取决于自己设计的插画人物特性。
除了男性、女性外也可以建造更多的人物进来，例如老人、小孩、婴儿...人物越多，后续的延展空间也越大，前期为了更快的制作插画组件库，可以先建立1到2个人物，后续可以逐步完善迭代。
第二步：
为了后期人物的动态延展，我们可以用人物组件制定一些高频的人物基础动态，例如标准站姿、坐姿、跑动等，以便于我们插画的延展，图示如下：
做人物基础动态可以让我们在后面的插画设计上少花很多时间，例如工作中要用到跑步动态时，那么就可以直接用人物基础动态里面的跑步动作进行添加人物细节，会节省很多工作时间，提升工作效率。
第三步：
有了人物组件的基础，我们就可以开始设计插画的风格。
在设计前我们可以多参考一下别人的插画风格，这里所说的风格主要是指插画的处理方式，比如：颜色的选择、表情的处理、衣服材质的处理、曲线直线的选择等。
我们需要注意的是建立第一个插画系统时可以先做一个风格简单的，不仅容易调节组件也有利于后期的风格衍生，以下是我为人物添加的简单基础风格（ 特点：纯色/完全按人物组件贴合设计/无渐变）：
第四步：
设计人物组件（可以让你的插画在不同的场景应用不同的动作/服装/表情/肤色等）
1/发型：
在发型上面我们可以进行一些人物的区分，可以适用于不同的场景，例如：男性第一个适用于公司场景，第二个适用于学生，第三个适用于军人...
2/肤色：
做肤色的变化最主要原因是让插画适应于国际化，在不同的场景中可以加入不同肤色的人物。
3/表情：
表情是为了更好的体现出人物在环境中的状态，如：领取红包插画，人物的表情就应该是开心或者大笑。
4/角度：
在插画的角度上，我们采用了最常用：正面、半侧、正侧，让它在插画中的适应力变得更强。
5/纹理：
我们目前设计了6个基本纹理，基本纹理不仅可以设定于服装中，还可以设定于辅助元素以及背景中。
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的复用样式简单、的规范插画组件库，想要覆盖替换组件内容也是十分方面，如下：
2/非常规人物组件库
除了常规的人物组件库外，我还单独罗列了非常规人物组件库，这一类组件库主要是作用于人物特殊的动作形态，比如下面3个透视类的插画动作形态，这些动态与常规的插画组件库的内容很多是不互通的，比如脸的角度、鞋子的角度、身体的透视尺寸，所以我们就单独给他罗列一个非常规人物组件库。
都是同为组件库，当然也有可替换内容，非常规人物组件库与常规的人物组件库的层级逻辑有所不同，常规的人物组件库是用小组件替换人物动作，但是非常规人物组件库是先替换整体的动作然后才可以替换小组件，这也是对他的特殊化管理。（注：不想舍弃它，又不想为他做出更大的调整，所以就单独让它成立出来。）
根据非常规组件库的设定给大家做个小案例：
以上可以看出我在这个透视化的插画人物中可以替换表情、发型、纹理、上身、下身。
3/动物组件库
我这里做的动物组件库是用来辅助人物以及调和场景的，所以在层级划分上并不会做的非常细，满足我的日常插画需求即可，当然如果你想把动作组件库做的非常细，那么可以参照人物组件库的层级来划分层级。
根据我使用的动物组件库层级，给大家举一个正确小案例与错误小案例，先看下错误小案例：
可以看到下图（狗子）是一个非常粗糙的动物组件库，里面只能替换动作以及动物的动作，当选在狗子的状态下，狗子除了换动作没有其他的组件选项，虽然我想让动物组件库简化，但是也不至于什么都不能替换。
接下来看看正确的案例：
我们可以看到在猫咪的状态下就有很多组件可以选择，不仅可以替换猫咪的动作，还可以替换展示形式（展示形式我是按照景别来做差异化，当然也可以用其他方法）、猫咪表情以及猫咪的颜色，这样的动物组件库已经完全能够满足我的设计需求。
4/辅助元素组件库
辅助元素组件库层级最好要添加景别，因为我们经常会遇到同一个元素在不同产品中体现出不同的景别，如果不区分，在选取组件时就非常的伤脑经，经验之谈、强烈要求。
为了大家更好的理解，我给大家举一个小案例：
我们可以看到我不仅可以切换元素，还可以切换景别以及颜色，至于其他的小组件我并不需要，因为这些已经足以满足我的日常运营设计需求，这个层级划分简单实用非常推荐。
5/背景元素组件库
背景元素组件库一共分为两种类型，分别为：组合场景背景与纹理背景。
组合场景背景：
组合场景背景是用辅助元素组件库拼凑而来，它是一个可以直接用的完整场景，想要替换的组件如果在辅助元素组件库能够替换，那么在背景组件库也是可以的。（注：这里牵涉到组件库的重组调动，在后续出的文章中会详细提到）
上面的插画由白天变为黑夜只需要用组件库就能轻松完成，而这些组件库也不是现做的，全部是辅助元素组件库里提取过来的，也就是我所说的组合场景背景是用辅助元素组件库拼凑而来。
大家可以发现插画中山上的小房子只用一个组件就可以全部替换颜色，而左右两边的树却要做6次不同的替换，树木需要多次替换的原因这就是没有做重组，如果想要相同元素做相同的替换，那么建议在调换过程中重组组件，优化层级。
纹理背景：
纹理背景相对于来说就是最简单的，它里面只存在纹理的不同样式，并且只可更换颜色。
三、人物插画组件库如何结合到运营设计中？
1、创建常见运营设计规范
在做设计前，我们先要做好运营设计的规范，以便于组件库的插入应用。
那么我就用卡片弹窗来举例：做设计前我们先确定卡片内容，当内容确定后，根据内容进行卡片的运营设计规范：
我们需要注意的是初步规范里并不需要涉及到用什么字体，也不需要罗列出插画的尺寸规范，我们可以在后面的设计中一步步去实现。
2、结合运营设计的两大方法：
当规范做好时，我们就可以利用规范去制作相应的组件库，利用组件库来结合运营设计，按照不同的情况可以分为以下两种方法：
1/重组组件库（无人物动态组件的情况下）
在一些运营设计中，如果我们要用到的人物动作之前并没有做过，那么就需要我们重新设计人物动作，设计完后再把可以重组的人物组件拖到我们现在的组件中进行重组，分以下几步进行：
第一步，根据卡片的规范做出卡片的设计内容，如下：
第二步，把设计好的内容分板块，以便于组件库的层级划分。在这里我把他们一共分为了4个大块，分别为：文字组件、人物组件、辅助装饰组件、背景元素组件。
第三步，在大的板块下划分小组件，结合小组件就可以得到我们组件库的层级，可看下图：
在小组件里，很多都是个人组件库里原本有的内容，这时我们就可以把它们拖进来进行重组。
假如你替换的元素不够用，那么就需要你自己手动设计了，这样也能反过来扩充你总的人物组件库内容，其实组件库的内容就是这么一点点迭代添加的，当你的组件库内容越来越多时，你的设计成本就会越来越低。
三步下来我们就把组件库融入到了运营设计中了，有了新的子级运营设计组件库。
2/直接替换（有人物动态组件的情况下）
如果你做的运营内容组件库里都有，那么就可以按着规范直接拖入即可，也没有必要去进行重组。
总结：
总的来说组件库的建立是一个庞大的工程，在你有了基础架构的时，你就要慢慢往里面塞更多的内容进行填充，当你的内容足够多时它就可以反向为你提供更多的便利，它是你的宝贵的设计资源库。
因为这期的内容实在太多，所以插画组件库的应用、运营设计常用模块组件案例、重组技巧以及品牌插画组件库的建立我会另外抽时间给大家总结。（做案例太费时间希望大家谅解）
参考资料提取：
我为大家提供了一些组件库的可参考性文件，里面包含成套组件库（sketch）、成套的插画图片、宣传动画、一些参考性的图片（构图、表情、发型等等）。
文章来源：tob.design 作者：黑狮力
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
祝愿大家在新的一年，有一个新的开始，更加有活力，更加有生机，生活像亮丽黄一样靓丽而多彩，像灰一样静谧而不失优雅。
蓝蓝设计的小编 http://www.lanlanwork.com
