图标是组成 UI界面的关键一环，图标质量的好坏直接决定了 UI界面的视觉美观度和你的设计专业程度，不同的图标风格也决定着不同的产品风格，在日常的设计工作中也会高频用到此项技能知识。
同时呢，图标的种类繁多，风格多变，绘制起来又有一定的技巧性和审美力来把控整体的图标风格及美观度。因此呢可能有不少小伙伴在面对图标设计时不免眉头紧锁，不知如何下手。每天也看了不少图标设计的优秀作品和教程，可真正当自己上手时就傻了眼。
为什么呢？其实也很好理解，你每天所看到的都是十分碎片化的图标设计知识，东一块西一块的，你只知其一不知其二，很难了解到全局是怎样的，有点像盲人摸象。
那怎么才能解决这个问题---搭建一个图标设计知识体系（关于如何搭建设计知识体系的科普文可以回顾前文最具深度的一线大厂设计师倍速成长终极宝典--搭建设计知识体系）
那可能很多小伙伴会说这个体系怎么去搭建呢？不用担心，在本次的系列文章中，我将和大家一起来搭建并填充图标设计知识体系，我填充知识体系的理念是尽量从最核心的底层知识体系开始填充，这样你填充内化的知识才是真正最核心，最有用的知识内核，掌握了这些之后再去绘制图标，你会发现其实是降维打击，因为图标的知识只是平面构成中的一小部分而已
因此我找到了两本经典书籍作为搭建图标知识体系的底层核心内容--《平面构成》和《品牌设计法则》，我们可以把书中涉及到的与图标设计关联度高的内容填充到我们的知识体系中，然后通过刻意练习和费曼学习法去内化吸收，大家也可以跟我一起填充哦。下图为所要填充的图标设计知识体系的框架图。
系列文章目录
1.搭建架构
1.1搭建架构并填充图标底层知识一
2.填充知识
2.1填充图标底层知识二（本文内容）
2.2填充图标底层知识三
2.3填充图标底层知识四
2.4填充图标底层知识五
2.5填充图标知识--图标设计深度解析
3.内化知识-刻意练习
3.1.图标设计完全指南--三维图标设计法则
一 填充图标知识体系
造型的基本要素
面
面的定义
- 在几何学中，“面”的含意是：面是线移动的轨迹。面只具有长、宽两度空间，没有厚厚度。直线的平行移动为方形；直线的回转移动成为圆形；直线和弧线结合运动形成不规则形。因此，面也称为“形”。面在造型中所形成的各种形态，是设计基础中的重要形态因素。
面的种类
- 面的形态是多种多样的，在平面意义上的形，归纳起来有四种。
- 即直线形、几何曲线形、自由曲线形、偶然形。
面的性格
- 面与线一样有着丰富的感情性格，但也有与线不同的，那就是面具有量感，即在轮廓线内涂上黑色，就可以感觉到充实的块状感，极其突出，有安定、实在之感。
- 面的轮廓与它的感情性格最有关系，不同性质的线组成不同的轮廓。如，由直线组成的形与曲线组成的形，在视觉上和心理上产生的影响和感觉截然不同。
- 直线形
- 具有同直线相近的性格特征。如，方形给人的感觉是简洁、明了、秩序，具有平稳、安全、庄重、踏实的心理效应，象征着男性的性格特征。
- 几何曲线形
- 借助于规尺工具完成的形，比直线形柔软、平滑、有弹性，理性感觉较强。
- 自由曲线形
- 与几何曲线形相比自由曲线形显得更生动、更有个性、变化更丰富，更具有柔情的女性特征。因此，也最能引起人们的兴趣，不容易产生呆板、乏味、枯燥的感觉，容易保持新鲜感。
- 偶然形
- 即不是有意识创造的，而是偶然所得或产生于自然的形象，它不同于其它形象，很难得到完全相同的形象。如，打翻的墨水形成的墨迹或雨花石的花纹很难再有相同的。偶然形具有一种朴素、实在、自然的美。这种美除了体现在外轮廓上，更主要的是体现在形象表面的肌理上；两者的结合使其个性更强烈。
面的作用
- 稳定性
- 立体空间
- 面可用多种方法来表现二维空间中的立体形态，使之产生三维空间感。
- 丰富层次
面在 UI图标中的应用
- 下面两组图标均是使用直线形+几何曲线形构成的图标，因此既有直线形的简洁、明了、秩序，具有平稳、安全、庄重、踏实的心理效应，象征着男性的性格特征。又有几何曲线形柔软、平滑的特点
- 多层面叠加风格，能起到丰富层次的作用，让图标更为有质感
形与形的关系
- 在版面中往往不会只出现一个形象，通常是多个形象同时存在于一个版面。因此，当两个或更多的形象在相遇时可以产生多种不同的关系，而这些关系又能使原本单调平淡的形象变得丰富起来，版面由此而活跃。
形与形关系的8种形式
- 分离
- 即两个或多个形象之间保持一定的距离，互不相碰。形象彼此间分离的距离，以及形象与空间之间的关系，是根据版面构成的需要而定的。
- 接触
- 当两个形象的边缘恰好相碰时，所形成的关系称为形的接触。
- 覆盖
- 就是一个形象遮挡住另一个形象的一部分，使覆盖与被覆盖的形象产生“上与下”或“前与后”的空间关系。
- 透叠
- 透叠不同于覆叠，当两个形象交叠时一般不分上下或前后。因为，透叠的形象具有透明性质，故在两个形象重叠时。便会在重叠处形成一个新的形象，并以正负形出现，即重叠的新形象常以负形出现，而原形象则呈现为相反的形象。
- 联合
- 即两个表面肌理、色彩基本相同的形象联合起来，成为一个较大的新形象。
- 减缺
- 减缺与覆盖的含义类似，所不同的是：减缺是以正负的形象进行覆盖，而且负形在上遮挡住一部分正形，由于负形不可见，因此，覆盖后就使正形小于被覆盖前，成为新的形象，没有“上下”、“前后”之分。
- 差叠
- 差叠与透叠有相似的含义，但性质却绝然相反，差叠是两个负形互相交叠减缺后，剩下的部分成为另一个新的小形象。
- 重合
- 就是两个相同的形象，其中一个形象完全覆盖住另一个，虽然，有“上下”、“前后”之分，却不可见，就如同日全食的现象。
形与形的关系在 UI图标中的应用
- 下图中的两组图标，体现着形与形的关系，分别有覆盖 差叠 透叠 联合 重合，使原本单调平淡的形象变得丰富起来，图标由此而活跃，充满层次感
形与空间的关系
- 在习惯上人们常把有视觉特征和外形的物体称为形象，形象的存在是有赖于空间的，即任何形象都必然占有一定的空间。就平面而言，形象是可见的、实在的、具有视觉冲击力的，称之为“图”，周围的空白部分被称为“地”或“底”，它的作用是衬托“图”，使图能显示出来。
正负形
- 有紧张、前进感的“图”，在平面构成常规表现中为黑色，称为“正形”;“地”则为白色，即为“负”;在中国画论中把可见的“图”称为“实”，空白的“地”称为“虚”;反之，当“图”为负形时，“地”必须与之相反呈现为“正地”;正负表现最典型的图形是我国的阴阳“太极图”。
图地翻转
- 由这个原理延伸出的著名图形“卢宾之壶”，正是巧妙地利用正负图地关系，使之正负负均成图形，即称“图地反转”。这一发现为设计创意提供了极好的方法，正负形的相互衬托产生了意外的形象，创造出意想不到的视觉空间。反转图形的魅力在于，它增加了图形的趣味性、多义性和耐读性，在视觉上让人有一种全新的感觉。
- 在平面设计的创作中要充分运用好“图”与“地”的关系，抓住重点，突出主体图形。这就需要更加深刻地认识图、地之间的关系和图、地特征的比较，把握容易成为图形的条件。
- 下图三组海报巧妙的利用正负形关系，形成了图地翻转的视觉效果，增加了图形的趣味性、多义性和耐读性，在视觉上让人有一种全新的感觉。
图地关系的运用
- 在视觉习惯上，容易形成并突出图形的条件是;与周围相比较具有醒目的位置，合理的空间等。
- 在版面中央位置或垂直、水平方向的形象，比较容易突出。
- 位置在下部的比位于上部的更容易突出。
- 在形象的大小关系上，小形象比过大的形象更容易突出。
- 完整的形象比不完整的形象更容易显示。
- 在一组相同性质的形中，异质形象更能成为注目聚点。
- 聚集的形象比分散的形象更容易突出。
- 群化的形象或对称的形象比较容易显示。
- 以往的视觉经验积累，在头脑中已形成概念，容易形成图形。
- 正确利用好图与地的关系，掌握好图形的形成和突出的条件，这对平面设计的创作十分重要。因为，无论是招贴、书籍、杂志、包装、DM广告、样本等都需进行版面编排，而版面编排首先涉及的是图地关系；其次是编排中图形的安排，可以运用图形形成和突出的条件来达到醒目、有冲击力的效果。所以，必须理解这些原理，并根据设计主题和内容的不同灵活的运用。图地关系的应用
形与空间的关系在 UI图标中的应用
- 正负形风格在 UI界面图标中的应用其实非常的普遍，它增加了图形的趣味性、多义性和耐读性，在视觉上让人有一种全新的感觉，下图几组图标均是正负形原理的应用，比如下方左图中“儿童”的 icon，脸部造型就是利用负空间营造出来的，十分的巧妙，以及右图中的“直播”icon也是相同的原理应用
二 本文回顾
在本篇文章中我们完成了填充图标知识体系中的造型的基本要素内容，下面回顾一下我们前两篇文章所填充的内容
造型的基本要素
三 总结
好了，以上就是本篇的全部内容了，也非常希望你能够跟我一起来逐步搭建起这个知识体系，在下一篇文章中我将继续更新图标篇的系列文章，敬请期待哦
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册