前情提要

如果你看过前一篇文章可以忽略下面这一小段内容，主要是给第一次看到本系列文章的小伙伴做前情提要哈

其实自己刚入行时并没有意识到搭建一个适合自己的知识体系有多么重要，在进入大厂前的一年突然意识到如果我没有构建一个完整的框架结构去承载自己每天所学的知识，去明确我应该优先学习哪些知识，那么我还会像现在一样慢慢的成长

因此我开始尝试搭建自己的UX设计知识体系，也初现成效，后来顺利进入大厂便是明证

同时呢也坚定了自己今年要持续搭建一个UX设计知识体系的目标，因此呢我决定把自己搭建的过程，搭建中的思考，搭建中沉淀的设计方法论通过这个公众号持续的分享给大家，也希望大家受我影响开始着手搭建一个适合自己的设计知识体系吧，让自己倍速成长，一年顶三年！

那如何搭建一个图标设计知识体系呢？（关于如何搭建设计知识体系的科普文可以回顾前文最具深度的一线大厂设计师倍速成长终极宝典--搭建设计知识体系）

不用担心，在本次的系列文章中，我将和大家一起来搭建并填充图标设计知识体系，我填充知识体系的理念是尽量从最核心的底层知识体系开始填充，这样你填充内化的知识才是真正最核心，最有用的知识内核，掌握了这些之后再去绘制图标，你会发现其实是降维打击，因为图标的知识只是平面构成中的一小部分而已

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

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

UX设计知识体系搭建实录--图标篇（五）

1.搭建架构

1.1搭建架构并填充图标底层知识一

2.填充知识

2.1填充图标底层知识二

2.2填充图标底层知识三

2.3填充图标底层知识四

2.4填充图标底层知识五（本文内容）

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

3.内化知识-刻意练习

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

一 填充图标知识体系

图形符号设计

• 相似律

• 
  
• 什么是相似律
• 
  
• 人们在接受视觉信息的时候会不经意地去概括物体的视觉特点，不管其是否在位置上相邻，都会将它们关联起来。图形间相似的特性越显著，越容易被视为相关联的整体。

• 
  
• 相似形式：形状相似
• 
  
• 
  • 
    
  • 方向相似
    
    
• 
  • 
    
  • 颜色、形式相似
• 
• 
  
  • 尺寸相似
• 
• 相似律在 UI图标中的应用
• 
  
  • 下图两组图标的布局很明显是根据相似律的原理，通过图标的大小，风格来区分不同类型的业务模块

• 
  
• 

• 连续律

• 
  

• 什么是连续律
• 
  
• 
  
  • 连续律解释了为何在连续排列元素的时候会对我们产生线性视觉影响，形成引导性。其原理是：人在通过眼睛和大脑接受视觉信息的时候更倾向于感知连续的形式而不是分离的碎片。
• 
  
• 直线的方向引导性
  
  
• 
• 弯曲的方向引导性

• 方向性：呈现向外趋势
• 
  

• 循环性：呈现闭合趋势

• 举个例子
  • 约翰·门登霍尔设计的标志，可以看出他很好地运用了连续律的技巧
• 
  
• 
  • 
  • 一组元素以平滑的线性连续罗列和不依照线排列相比较的话，前者看起来更具整体感，更符合人获得视觉信息的阅读方式，因为人获得信息的方式主要有三种：单一明确的单位信息对象、线性引导的信息对象、具有形状的信息对象。
  • 
    
  • 下图左侧，Ahway是一个旅行定制的平台软件，其主要通过手机App进行服务。可以看到下面的演绎图里，虽然一条粗线隔断了弧线，但人的视线依旧被隔断的弧线引导到圆点处（即纸飞机），这就是连续律的作用。下图中间，Hangar 646是华沙的一个蹦床公园，可以看到，标志通过一个半圆和四分之一圆的组合制造了一个连续律的引导，表达出了人在蹦床上蹦跳的路径。这个路径方向符合人从左至右的阅读方向规律，以及从冷色引导向重点暖色的运动感，运用了双重强调方向的手法。下图右侧是让保罗渔具设计的标志，可以看到，右上的块面是和整体断开的，虽然用了切断的手法，但并不影响其图形的延续性。

• 
  
• 
• 
  

• 闭合完形律（正负形原理）

• 
  
• 什么是闭合完形律
• 
  
  • 视觉系统会自动地尝试将敞开的图形封闭起来，从而试图将其感知为完整的图形而不是分散的碎片。
• 闭合完形律与连续律有很紧密的联系，因为大脑会习惯性地要求视觉去捕获完整的路径，只要存在足够的基本信息，大脑就会将其视为完整的整体并自主感知缺失的部分。
• 
  
• 负空间的扩张性
• 
  
  • 如下图，左侧横线构成的组与中间的蓝色正方形等大，但看起来更高。右侧竖线构成的组与中间正方形等大，但看起来更宽。这是因为实线间的负空间形成了潜在的线条，负形与正形的蓝色线条形成对比，造成了扩张性，无形中影响了人的视觉对宽高的判定。
• 
  
• 

• 举个例子
  • 闭合完形律对于可识别的对象是有效的。如下图，在缺少相互之间衔接的部位后依旧可以被识别；但随着缺少部分的增加，识别度将慢慢降低。因此，设计师必须掌握好这之间识别度上的平衡。
• 
  
• 
• 
  
  • 
  • 世界自然基金会（WWF）的熊猫标志可能是这个世界上最广为人知的标志之一。如果你仔细观察可以发现，熊猫标志中其实很多块面彼此之间并没有连接，好似墨点，但当你第一眼看到的时候就可以认知到这是熊猫，并且因为大脑闭合完形律的作用为潜在的感知生成了并不存在的弧线，熊猫头部及身体缺少的弧线不需要画出来，你已经可以感知到了。
• 
  
• 
  • 
• 负形
• 
  
  • 我们将图形形状本身称为正形，或者叫作主体；将其周围的“空白”部分（纯粹的空间）称为负形，或叫作底。
  • 
    
  • 正负形的运用是标志设计中非常重要的一个手段，设计师在设计标志的图形符号或者标准字字形本身（正形）的时候，就必须时刻注意负形的情况。因为形体和空间是相辅相成的，互不可分的。一定的形体占据一定的空间，其体积深度便具有了空间的含义。在平面空间中也是一样的，空间与形体的基本形必然要通过一定的物体形状得以界定和显现。
  • 
    
  • 举个例子
    • Beats耳机标志的负形很好地把首字母融合到标志里，而且其造型就像一个戴着他们产品的用户的侧脸。同样在标志中融入核心产品的，还有“好时巧克力”利用“K”与“I”的负空间很巧妙地把产品融入进去。
• 
  
• 
  • 
    
    • 下图中的联邦快递（FedEx）的标志简洁而令人印象深刻，“滚石杂志”将该标志评为世界八大最佳标志之一,该标志在国际上还获得了40多个奖项。虽然联邦快递的标志属于字标（Wordmark），但在Ex之间独具匠心地利用字间距和比例的控制，创造了一个箭头的负形。

• 闭合完形律（正负形原理）在 UI图标中的应用
  • 
    
  • 利用闭合完形律，也叫正负形原理完成的图标
  • 虽然没有完整的画出大象的全貌吗，但是你第一眼看到的时候就可以认知到这是大象，并且因为大脑闭合完形律的作用为潜在的感知生成了并不存在的弧线，大象头部及身体缺少的弧线不需要画出来，你已经可以感知到了。
• 
• 

• 
  

• 视觉的对比方法

• 
  
• 平衡与对比
• 
  
  • 在平面设计中，设计元素存在两种状态：平衡与对比。平衡是寻求不同元素之间和谐的手法，而对比则是寻求张力、制造视觉张力的手法。
  • 
    
  • 在上一节的平衡律中其实已经包含了对比的概念，但是对于品牌标志设计来说，对比实在是太重要了。对比制造了冲突，让标志变得不仅有趣而且深入人心，因此在这里单独拎出来着重讲一下。
  • 
    
  • 视觉焦点:指整体的视觉对象中最能够引起人注意的视觉优先级的对象。品牌标志的一个要素就是必须要在其中制造一个视觉焦点。
• 
  
• 对比的七种基本手法
  • 
    
  • 对比的目的
    • 
      
    • 对比的目的是将设计中的元素进行视觉层级上的主次梳理，最终按预想的方式去引导受众的信息获取顺序。设计的核心，除了传递明确的视觉信息层级外，还需要利用各种手法制造视觉的趣味性。缺乏对比手法的无趣设计，不仅会使观者索然无味，更让设计的传播毫无转化效率。
    • 
      
  • 如何既明确视觉层次又增加设计的趣味性，是图形符号设计的目的之一，最终是为了传达品牌气质，并且使视觉层次对比鲜明，能够引发人的符号性记忆。这里就需要了解以下的几种基本对比方法，并根据实际情况进行搭配使用。
  • 
    
  • 常见的七种对比
  • 
    
    • 尺寸对比
    • 
      
    • 较大的物体视觉上要比较小的物体显得更重，因此通过面积尺寸形成了对比（大小、尺寸、形状、位置产生的对比是最常见的，是出现在差不多所有图形符号中的基本属性，因此图例选了比较有代表性的）
• 
  
• 
  • 
    
    • 形状对比
    • 形状的变化带了反差性的对比，并且可以利用多个相同形状去烘托一个不同的形状，使其成为焦点，这种方法很有律动感和节奏感。
• 
  
• 
  • 
    
  • 颜色对比
  • 色相、饱和度、明度的不同都可以形成对比。
• 
• 
  • 
    
    • 肌理对比
    • 具有更复杂纹理的元素与相对简单纹理或无纹理的元素形成对比。
• 
• 
  • 
    
    • 虚实对比
    • 虚实对比来自自然世界中物体在空间中的进退关系，近的清晰，远的模糊，同时人的视觉焦点外的物体会因失焦而模糊。虚实关系也是表达层次的辅助手法之一。
      
      
• 
  
• 
  • 
    
    • 位置对比
    • 一个元素距离中心越远，视觉上就越重;相对上方的元素比下方的元素显得更重。位置的平衡、错位、缺失都可以形成不同性质的对比。
• 
  
• 
  • 
    
    • 方向对比
    • 方向性形成了空间的引导，从而产生了对比。视觉上垂直元素比水平元素重，对角线方向比水平、垂直方向具有更多的视觉重量。
      
      

• 
• 
  

• 图形符号的类型

• 
  

• 图形符号三种基本类型

  • 
    
  • 抽象型
  • 
    
    • 由基本的几何图形，如圆形、正方形、三角形及其变体进行叠加、相减复合构成的。抽象图形符号是品牌标志中比较简练、理性的类型。抽象图形通常更易识别、更容易复制。
    • 
      
    • 现代主义设计大师密斯·凡德罗（Mies Van Der Rohe）的话“少即是多”是现代主义设计的宗旨，而抽象图形的整个设计理念正是脱胎于现代主义设计观念。
• 
• 
  • 具象型
  • 
    
    • 图形符号与企业所想传达的价值之间的关系表现出某种性质的共同性，它借助具象图形所象征的意义或者定义去代表品牌的价值。其实在图形符号设计中，纯粹的具象型已经非常少了，很多都是抽象性质的具象图形，比如苹果的标志就是高度抽象概括的图形符号，其本身是由不同大小的圆叠加、相减完成的。因此在这里所指的具象图形有些并不一定是纯粹具象化的，而是其本身所描绘的内容来自于自然界或者是人工产物。
    • 
      
    • 举个例子
  • 
    
    • 具象型图形符号有时候会利用人们熟悉的事物进行象征、比喻，甚至可以使用人文社会约定俗成的事物进行创作，其图形符号很容易给人亲切感。如推特的品牌标志是一个小鸟的剪影，该识别造型的小鸟已经成为推特的独占符号。
• 
• 
  • 文字型
    • 
      
    • 品牌标志的图形符号核心概念是以品牌名称的首字母、缩写字母或者其中文字进行图形化设计而演绎出的图形符号。文字型图形符号的特点是很容易使人与其品牌名称进行关联性的联想，促进受众群体形成品牌符号记忆。
    • 
      
    • 举个例子
  • 
    
    • 在设计文字型图形符号时，设计风格通常会简洁且识别度高，这就很容易因为创意的不谋而合而与已有的设计撞车，所以需要设计师增加阅历，以避免这种被人指责抄袭的尴尬。
• 
  
• 

• 图形符号的三大类型在 UI图标中的应用
• 
  
• 下图三组图标分别为抽象形，具象形和文字形

  
  

• 

  二  本文回顾

在本篇文章中我们完成了填充图标知识体系中图形符号设计，下面通过脑图回顾一下本篇文章所填充的内容吧

图形符号设计

至此呢UX设计知识体系搭建实录--图标篇的全部底层基础知识都已填充完毕了，不知道你有没有跟我一起在填充呢？

在下一篇的文章中我将在图标底层基础知识之上给大家带来更易理解，更易实操，更易在实际设计中直接用到的图标知识技能，可以快速提升你设计图标的设计思维，设计能力，敬请期待吧

如果你有什么疑问，或工作中的困惑，设计中的问题都可以加我微信跟我交流哈，跟我一起倍速成长吧

微信：shejizhishi001

公众号：设计芝士KING

我这里为各位小伙伴们准备了两个大礼包---

1.“精选图标源文件（非商用）+18个图标网站大合集”

2.阿里腾讯等大厂设计师能力模型体系

获取方式：关注公众号后转发本文到朋友圈（公众号同名文章）后添加我微信，回复“图标”或“能力模型”即可获得这个两个大礼包喽！

Powered by Froala Editor