系列文章目录

1.搭建架构

1.1搭建架构并填充图标底层知识一（本文内容）

2.填充知识

2.1填充图标底层知识二

2.2填充图标底层知识三

2.3填充图标底层知识四

2.4填充图标底层知识五

2.5填充图标知识--图标设计深度解析

3.内化知识-刻意练习

3.1.图标设计完全指南--三维图标设计法则

一  为什么优先去搭建并填充图标的知识体系呢？

在前面的系列文章中我们系统的讲解了如何搭建设计知识体系，我想各位小伙伴肯定在学习的过程中会有各种各样的疑问或不解，不知道如何下手开始搭建

其实也不用太担心，这是非常正常的情况，我一开始也是这样的，所以呢在本次的系列文章中，我将和大家一起来搭建并填充 UI设计知识体系

下图是我当前搭建的适合于我现阶段的UI设计知识体系架构脑图（架构的搭建并非要一次完成，可以边填充边内化边完善），红框中标注出来的内容就是我们今天所要搭建的主题--专业知识--图形能力--图标模块

下面说到为什么要优先搭建图标模块，因为图标是组成 UI界面的关键一环，图标质量的好坏直接决定了 UI界面的视觉美观度和你的设计专业程度，不同的图标风格也决定着不同的产品风格，在日常的设计工作中也会高频用到此项技能知识，也符合前面讲到的建立知识体系首先要明确建立学习主题的目的--有实际的高频的运用场景（没有看过或遗忘的小伙伴们可以回顾下之前的干货文章哦---万字长文！全网最具深度的设计师倍速成长终极宝典--搭建设计知识体系  ）

好了，明确了学习填充的主题之后我们开始搭建图标知识体系的框架

搭建架构可以通过各种可靠渠道建立架构，无需自己创造

此时我有两个思路，一是直接在站酷等专业设计分享网站搜图标绘制流程或者图标设计理论知识，二是从更为底层的设计知识体系开始填充，大家可以思考一下图标的本质是什么？是不是平面设计的知识，品牌图形的设计知识?图标设计的知识其实是从这两大底层知识体系中延伸出来并不断演绎的

我填充知识体系的理念是尽量从最核心的底层知识体系开始填充，这样你填充内化的知识才是真正最核心，最有用的知识内核，掌握了这些之后再去绘制图标，你会发现其实是降维打击，因为图标的知识只是平面构成中的一小部分而已

因此我将从设计基础知识中的平面构成开始搭建架构并填充有关图标设计知识的内容，那我应该从哪里去获取这些知识呢？

可以站在巨人的肩膀上建立知识之间的连接，可以借鉴专家的知识体系、专业网站、经典书籍

因此我找到了两本经典书籍作为搭建图标知识体系的核心内容--《平面构成》和《品牌设计法则》，我们可以把书中涉及到的与图标设计关联度高的内容填充到我们的知识体系中，然后通过刻意练习和费曼学习法去内化吸收，大家也可以跟我一起填充哦

二  搭建图标知识体系架构

接下来我会把两本书的目录呈现出来然后找出更适合图标的基础知识架构，最终将其应用在我的UI设计知识体系-图标知识体系的细分架构中，之后再去填充内化

《平面构成》

第一章概述

一、平面构成的确立与发展

二、平面构成的概念与目的

三、平面构成研究与解决的问题

四、从具象到抽象的训练

第二章形式美的原理与法则

一、平衡

二、对比

三、调和

四、节奏

五、变异

第三章造型的基本要素

一、点

二、线

三、面

四、形与形的关系

五、形与空间的关系

第四章形象的构成

一、基本形

二、规定形中的变化

三：单形切除

四、形的群化

五、多形组合

第五章平面构成的基本形式法则

 一、重复与近似

二、分割与比例

三、渐变与发射

四、对比构成

五、特异构成

六、空间构成

七、打散重构

八、肌理

《品牌设计法则》

第一篇品牌设计的核心理念

第一章品牌理念

第二章品牌符号

第三章品牌标志

第二篇品牌标志的三大基石

第四章图形符号设计

第五章中文标准字设计

第六章西文标准字设计

第七章品牌色彩设计

第三篇品牌设计流程

第八章品牌设计流程

抽取整合为图标知识体系

造型的基本要素

一、点

二、线

三、面

四、形与形的关系

五、形与空间的关系

形象的构成

一、基本形

二、规定形中的变化

三：单形切除

四、形的群化

五、多形组合

图形符号设计

最终图标知识体系的细分架构完成，接着我们进入填充环节

在填充之前想和小伙伴们说下，你完全可以把本系列文章当做学透图标知识并内化吸收的图标设计教科书来阅读，推荐你找一段充足的时间去阅读，理解，学习其中的内容，可能有些内容不是那么好理解，没关系你可以反复多阅读几遍去加深印象，从而去理解它，我想效果会更好，千万不要只读一遍就认为可以掌握了

具体填充时也不要过分纠结用哪个工具去填充，你可以使用我推荐的RE（RE介绍：设计师倍速成长终极宝典05--设计知识体系之如何填充/内化/更新知识体系），也可以使用更为主流的语雀，notion，熊掌记，印象笔记，有道云笔记等等等等。记住，工具只是载体而已，你把知识放在上面也仅仅是填充，这些知识此时并不属于你，更重要的是填充之后的内化环节

你可以直接复制我填充的内容到你的知识体系里，但切记要根据自己填充的主题去复制我相应的内容哦

三  填充图标知识体系

造型的基本要素

点

点的定义

• 几何学对“点”的定义是:点是线的开端和终止，两线相交而成的交点显示了点的位置。因此，点只具有位置，不具有大小，既无长度也无宽度，是最小的单位
• 从造型要素来看，“点”是一切形态的基础，也是造型要素的最小单位

点的大小

• 点的大小是有限度的，超越限度将会失去点的性质成为“面”。因此，点的确定是由点与环境空间的对比而决定的，关键在于点在空间中所占的面积是极少的。
• 举个例子，飞机在机场起飞前，飞机所占的面积与机场对比，飞机成面不是点。当飞机在几千米高空时，飞机与天空对比，飞机就成为点了。

点的形状

• 另外，点的形状是多样的，无任何限定，一般可分为规则形状和不规则形状两类。规则形状主要是指有序的几何形圆、方、三角、星形、菱形、梯形，等等。不规则形状指的是随意自由和偶然产生的点的形状。因此，如何成为“点”的，不在于它的形状，重要的是保持着点是细小单位的性质。

点的作用

• 从几何学的角度看“点”的作用
  • 点是力的中心。如，三脚架的三线相聚于一点，是最稳定的状态，这一点就是力的中心点。
• 具有张力，吸引视线
  • 作为视觉造型，“点”的作用是:点在版面空间中，具有张力作用。因为，当版面空间中只有一点时，由于点的刺激而产生集中力，将视线吸引聚集在此点上。这就说明了，点有紧张性。

点的情绪

点的紧张性和张力在人们的心理上，有一种扩张感。点在版面空间中的位置不同、数量不同、大小不同，给人的感觉也不同。

点的情绪根据位置而变化

点在中央时,能提高和加强注目性,有安定和平稳感,但缺少变化、过于单一。

点在上方偏边缘,有失平衡感觉,不稳定，但带有较强的动感。

点在上方中央,平衡性较好,有上升的感觉。

点在下方中央，稳定性较强,有下沉的感觉。

点在下方偏边缘，平衡性差,感觉失重。

在版面中两个较接近的点，由于点的张力作用，在心理上会产生连线的感觉;三个或四个点在不同的方向散开，其张力作用在心理上就表现为三角形或正方形。

大小

• 两个大小悬殊的点同时出现在版面上，视线往往先被大的、优势的一方吸引，然后才向小的点转移，从而形成强弱和节奏

一组大小按照数列变化的渐变点群，会产生运动感和进深感。大小不同的类似形，无论是规则的排列或自由排列，都容易产生进深感。

数量

• 一组距离接近的点，向一个方向排列就形成虚线的效果;几组距离接近的点，向水平和垂直方向排列就形成虚面效果。

点在 UI图标中的应用

• 从整个页面看，红框内的图标就是点，仔细看这些点的形状是多样的，有圆形，方形，三角形等等，因此点不在于它的形状，重要的是这个点和其他图形的对比关系，同理在界面中，图标相对于界面是一个个的点，如果放大去看又是一个个的面

再把红框内的点放大去看就成了一个的面

• 下方左图中，我们把整个图标当成一个面，面的四个边角，或左上角或右上角会有一个四分之一圆，我们可以把它当成一个点，处在边角的点有失平衡的感觉,不稳定，但带有较强的动感，把原本较为严肃，稳定的图标风格中融入了一丝灵动，活泼的感觉
• 
  
• 下方右图中可以把图标中白色镂空的部分看做一个点，四个图标的点均处在中央的位置,能提高和加强注目性，有安定和平稳感
  
  

线

线的定义

• 造型对“线”的概念是：线与点有同样的性质，即是可见的视觉形象。因此，线不但有位置，而且有一定的长度和宽度。
• 
  
• 点的移动产生线。因此，当点向一个方向移动时，就成为直线；当点在移动的过程中经常变化方向，就形成曲线;当点的移动方向间隔变换，则为折线。
• 
  
• 线与点一样，形状是多样的，无任何限定。这是由于线有一定的宽窄度，特别是较粗的线条，其线两端的形状是不容忽视的

线的种类

• 根据线的性质来分，线有两大类，一是直线；二是曲线。
• 
  
• 直线又可分为:
  • 不相交的线——平行线;
  • 相交的线——折线、包格线、集中的线;
  • 交叉的线——直交格子、斜交格子等。
• 
  
• 曲线又可分为：
  • 开放的曲线——弧、旋涡线、抛物线、双曲线等；
  • 封闭的曲线——圆、椭圆、心形等。
• 
  

• 线的方向：

  • 线是有长度的形象，因此，就具有方向性的特征。
  • 直线有朝纵向走的垂直线、朝横向走的水平线、方向性很强的各个角度的倾斜线。
  • 曲线有弯曲、回转、波浪式流向等方向性。
• 
  
• 举个例子
  • 金属线材构成埃菲尔铁塔，是规则的直线

线的性格

• 线对心理上的影响比点更强烈，也就更具感情性格。不同种类的线有着不同的性格，不同性格的线在心理上形成的感觉也各不相同，
• 
  
• 大体上的感觉是：直线表示静，曲线表示动，折线表示不安定。
• 
  
• 直线的性格
  • 速度感、紧张感，有直接、锐利、明快、简洁等特性，从生理和心理的角度看，直线具有男性要素。
  • 
    
  • 粗直线
    • 象征着豪放、厚重、力量和强壮。
  • 
    
  • 细直线
    • 象征着纤细、敏感、微弱并带有神经质。
  • 
    
  • 折线
    • 象征着焦虑、不安定和躁动等。
• 不同方向的直线同样也显示了不同的感情性格，线的方向比线的性质、感情性格更明显更强烈。
  • 
    
  • 垂直线
    • 使人联想起庄重、严肃的场面，让人肃然起敬，因而又具有坚挺、强直的性格特征：上下走向使垂直线有下落、上升的趋势，并带有较强的紧张感。
  • 
    
  • 水平线
    • 使人联想到无限扩展的地平线及大地给予的安定、稳妥感。因此，表现出安定、稳重、平静、永恒的性格。另一方面,过于的安稳夹带着保守因素，有寂寞、疲劳、无生气的感觉。
  • 
    
  • 斜线
    • 从平衡的角度来说，斜线首先给人的感觉是失衡产生的不安定感，但也使人联想起飞机的起飞与降落。因此，有着强烈的向上或冲刺前进的运动感；同时，斜线的不安定中却又表现了青春的活力。
    • 下图中用红线标注出来了线的不同方向，属于斜线，斜线表现出青春的活力，再结合俏皮的画风，清晰明确的营造出这款APP轻松，活力，年轻的风格调性

几何曲线

• 是规矩绘制的曲线，与直线相比显得较温和、柔软，含有女性特征，具有幽雅、有秩序的性格，并有较强的柔韧性和速度感。
• 几何曲线的典型表现是圆周，它有对称和秩序性的美，极富现代性。因而，它表现的是一种理性的节奏。

自由曲线

• 是不借助任何工具，随意徒手而成的曲线。自由曲线与几何曲线相比显得更圆润，富有弹性，因而象征着女性。自由曲线的轻松自如充分体现了自然美，它有着流畅、柔美、富于变化的性格。因此，自由曲线表现出极自然的节奏。

线的作用

• 封闭的线构成形，因为面的轮廓是由线来决定的。
• 线有分割和限制作用。
• 线有引导视线和指示作用。
• 线的间隔距离不同，会产生不同的效果;有秩序的变化线的间隔，可表现强烈地进深感和立体感;大量密集的线，将会形成面的感觉;逐渐变化角度的倾斜直线，有扭曲的曲面感。

线在 UI图标中的应用

• 下方左一图的图标用的是直线中的粗直线，象征着豪放、厚重、力量和强壮，有直接、锐利、明快、简洁等特性，从生理和心理的角度看，直线具有男性要素。因此这组风格的图标就非常适合 PP体育这一运动+男性风格的 App 中使用
• 
  
• 中间的图标是芒果 TV 的 logo，用的是斜线+粗直线的手法，有着强烈的向上或冲刺前进的运动感；同时，斜线的不安定中却又表现了青春的活力，和芒果 TV 年轻活力的调性非常匹配右图是闲鱼 App 的底部 tab 栏图标，整体是通过几何曲线的手法表现，与直线相比显得较温和、柔软，含有女性特征，具有幽雅、有秩序的性格，并有较强的柔韧性和速度感，因此也多用于风格较为可爱，具有亲和力的 App 中使用

四  本文回顾

在本篇文章中我们主要讲了三大点

1.为什么优先去搭建并填充图标的知识体系呢？

因为图标是组成 UI界面的关键一环，图标质量的好坏直接决定了 UI界面的视觉美观度和你的设计专业程度，不同的图标风格也决定着不同的产品风格，在日常的设计工作中也会高频用到此项技能知识，也符合前面讲到的建立知识体系首先要明确建立学习主题的目的--有实际的高频的运用场景

2.搭建图标知识体系架构

把两本书的目录呈现出来然后找出更适合图标的基础知识架构，最终将其应用在我的UI设计知识体系-图标知识体系的细分架构中，之后再去填充内化

3.填充图标知识体系

填充了造型的基本要素里的点和线的模块

五  总结

好了，以上就是本篇的全部内容了，也非常希望你能够跟我一起来逐步搭建起这个知识体系，在下一篇文章中我将继续更新图标篇的系列文章，敬请期待哦

Powered by Froala Editor