友情提示
在学习之前想和小伙伴们说下，你完全可以把本系列文章当做学透图标知识并内化吸收的图标设计教科书来阅读，推荐你找一段充足的时间去阅读，理解，学习其中的内容，可能有些内容不是那么好理解，没关系你可以反复多阅读几遍去加深印象，从而去理解它，我想效果会更好，千万不要只读一遍就认为可以掌握了
UX设计知识体系搭建实录--图标篇
其实自己刚入行时并没有意识到搭建一个适合自己的知识体系有多么重要，在进入大厂前的一年突然意识到如果我没有构建一个完整的框架结构去承载自己每天所学的知识，去明确我应该优先学习哪些知识，那么我还会像现在一样慢慢的成长
因此我开始尝试搭建自己的UX设计知识体系，也初现成效，后来顺利进入大厂便是明证
同时呢也坚定了自己今年要持续搭建一个UX设计知识体系的目标，因此呢我决定把自己搭建的过程，搭建中的思考，搭建中沉淀的设计方法论通过这个公众号持续的分享给大家，也希望大家受我影响开始着手搭建一个适合自己的设计知识体系吧，让自己倍速成长，一年顶三年！
那如何搭建一个图标设计知识体系呢？（关于如何搭建设计知识体系的科普文可以回顾前文设计师倍速成长终极宝典01--设计知识体系之初识知识体系）
前情提要
如果你看过前一篇文章可以忽略下面这一小段内容，主要是给第一次看到本系列文章的小伙伴做前情提要哈
可能很多小伙伴会说这个体系怎么去搭建呢？不用担心，在本次的系列文章中，我将和大家一起来搭建并填充图标设计知识体系，我填充知识体系的理念是尽量从最核心的底层知识体系开始填充，这样你填充内化的知识才是真正最核心，最有用的知识内核，掌握了这些之后再去绘制图标，你会发现其实是降维打击，因为图标的知识只是平面构成中的一小部分而已
因此我找到了两本经典书籍作为搭建图标知识体系的底层核心内容--《平面构成》和《品牌设计法则》，我们可以把书中涉及到的与图标设计关联度高的内容填充到我们的知识体系中，然后通过刻意练习和费曼学习法去内化吸收，大家也可以跟我一起填充哦。下图为所要填充的图标设计知识体系的框架图。
系列文章目录
1.搭建架构
1.1搭建架构并填充图标底层知识一
2.填充知识
2.1填充图标底层知识二
2.2填充图标底层知识三（本文内容）
2.3填充图标底层知识四
2.4填充图标底层知识五
2.5填充图标知识--图标设计深度解析
3.内化知识-刻意练习
3.1.图标设计完全指南--三维图标设计法则
一 填充图标知识体系
形象的构成
基本形
- 认识了造型的基本元素，以及形与形的关系和形与空间的关系,便可以根据这些元素和原理进行形象的再创造。形象的再创造是平面构成的重要基础之一，形象不但是平面构成各个主题的基础，在实际运用中，这些形象的构成方法，又是标志、符号设计构成的好方法。
什么是基本形
- 在设计一组相同的形象或彼此有关联的形象，并进行组合构成时，这其中的一个或几个形象称为基本形。基本形就是构成图形的基本单位，点、线、面是构成基本形的元素，同时也可以是基本形。但是，就图形构成来说，不能仅限于一个点、一段线、一个三角形这样简单的基本形，而是需要变化多样、丰富新颖的基本形来构成图形。
- 下图是最简单的三组基本形--圆，三角形，矩形
基本形的不同组合方式
- 基本形按照单元骨格左右、上下进行连续的“重复构成”。
- 基本形也可以不依靠骨格，按反射、移动、回转、扩大的原理进行群化，构成具有独立性质的图形。
- 也能运用多个基本形进行分割重组，构成独立图形。
- 骨格是控制画面的一种框架，单元格是骨格的最小单位，也是控制基本形的基础单位。
基本形的设计方法和要求
- 基本形的设计主要需根据图形要求，运用点、线、面和构成原理来进行。常用的方法有两种。
- 选择哪一种方法关键是基本形的构成形式。如，用于重复构成的基本形，应考虑重复的特征，充分利用骨格构成组合有一定变化的基本形。
- 基本形的设计以简为宜，不能过于复杂，过于复杂的基本形在构成图形时，往往显得繁琐杂乱，影响整体效果。
- 其次，复杂的基本形常因其过分突出而有独立性质的感觉，使设计缺乏整体感而涣散。
- 再次，设计基本形时，还要注意锐角不能过多，过多锐角的基本形缺乏美感。
基本形在 UI图标中的应用
- 左图是以矩形，三角形为基本形的独立基本形。右图是用矩形，三角形，六边形等相同图形重复构成的基本形
- 可以发现都是以简为宜，没有用过于复杂的基本形去构成图形，那样的话会显得繁琐杂乱，影响整体效果
规定形中的变化
什么是规定形
- 在形象构成的方式中，以简洁的几何形为基础，用线、点在形象内作组合构成，称称为规定形中的变化。这是一种不依赖骨格而独立存在的图形。这种形象的再创造方式是运用形与地的关系、形与形的关系以及各种不同性质的线、点进行组合构成。
- 下图红框区域的图形形态即为基本形，简单来说就是需要有一个固定简洁的几何形作为容器，在这个容器内再进行图形设计
规定形的优点
- 优势在于简洁、明了、醒目，便于记忆。许多标识就是用此方式设计而成的。比如，桑塔纳、奔驰、中国银行、工商银行等名车、银行标志，都是以简洁的圆形为规定形象，用线在形象中进行组合变化。因此，规定形中的变化是设计标志的好方式。
在设计创作这种形象时要注意以下几点
- 要选择外形概括简洁的几何形作为规定形象，因为形象内线,点的变化是主体，如果外形复杂了就会冲淡主体，显得杂乱没整体感，不利记忆。
- 进入规定形内的元素不宜过多、过杂，过多的元素在规定的空间里会显得拥挤，不利于突出主体。
- 由于规定形象的限制，进入的元素不能变化过多。比如，不能过多的方向变化、大小变化、位置变化等。因此，变化要有序,形象要统一。
规定形中的变化应用
- 规定形中的变化这一表现手法在早期欧美标志中就非常常见，选用圆形，其构成特点是将图形置于中心，文字环绕图形，有集中醒目的效果。如今这种复古设计形式还在沿用。
- 设计元素的运用是灵活的，在规定形中可以是点线面，也可以是图形，也可以是文字。香港著名设计师陈幼坚为香港美心快餐和bossini服饰品牌设计的整体形象，运用的就是这种方法。
- 下面两例标识采用了相同的设计手法:选用了简洁的规定形。提取品牌LOGO中的典型元素，根据内容在规定的形状中进行变化。
规定形在 UI图标中的应用
- 下方左图是以圆角矩形为规定形的图标，右图是以圆形为为规定形的图标，优势在于简洁、明了、醒目，便于记忆。
- 注意：
- 在用规定形去设计图标使需注意要选择外形概括简洁的几何形作为规定形象，比如矩形，圆形，六边形，三角形等，切忌用一些复杂的异形作为规定形
- 进入规定形内的元素不宜过多，目的在于突出规定形中的主体形象不能过多的方向变化、大小变化、位置变化等。因此，变化要有序，形象要统统一。比如规定形内的元素都是居中，大小类型，方向基本保持一致既可以
单形切除
什么是单形切除
- 单形是只包括一个主体的形象，常常表现为一个自成一体的形象，可依或不依框架而存在。因为单形不是重复或连续图形的一个单位，所以，在构成时与基本形有相似之处，即线与点的形象都可以构成单形，线也可以绕成单形;单形可以是简洁的几何形，也可以由较小的形象联合而成。所不同的是:单形强调形象的独立性，是独立图形的一种。
- 单形的设计和构成方式很多，单形切除是这些方式中，既简单又行之有效的方式之一。单形切除能使原本较单一的形象丰富生动起来，又不失整体效果。这是因为单形切除只是进行局部的切割变化，还保持着原有的形象。这种方式与规定形中的变化有共同之处，即清晰、醒目、独立性强:不同的是单形切除不受外形限制，因此，也就更生动。单形切除同样也是构成标志的好方式。掌握单形切除的构成方式，关键在于把握构成的形式法则和形象构成的各种关系的运用。
设计构成的方法
- 切割的手法有:切、挖、镂等。
- 组合构成的形式有:
- 对称形式一反射. 移动、反转、扩大等。
- 对比形式一大小， 曲直.方向、疏密等.
- 组合构成的方式有
在设计构成中应注意
- 选择外形不要太复杂的单形，几何图形为佳。因为，切割后形象会自然复杂和丰富，故在单形时要简洁，用切割的方式使其丰富起来。
- 除对称形式外，切割部分-般要小于保留部分。
- 在一个单形内，使用的切割手法不能过多:切、割的次数和形式也不能太多。比如，用了直线切，又用曲线.弧线切,再镂圆，切的手法，次数、形式多了，就会显得杂乱，很难达到统一，影响形象的整体感和冲击力。
- 单形切除的部分，可以根据设计构成的需要，返回--用于形象重构;也可以切除，即镂下的形象，有时就不再返回，关键是视需要而定。
- 单形切除在组合构成过程中很难在头脑中预想出最终效果。因此，可以先用纸或即时贴剪出单形，然后再进行分割组合。
单行切割在 UI图标中的应用
- 下图的图标是通过矩形，圆形，弧线形，心形进行单形切除
形的群化
什么是形的群化
- 是基本形重复构成的一种特殊表现形式。它不同于重复构成，是不依赖骨格和框架进行基本形组合构成的，而是具有独立存在的性质，是独立图形的主要形式之一。由于基本形群化的独立性质，因此，在现代标志设计.符号设计中常采用此方式进行设计构成。
- 在设计基本形群化时，首先是基本形的设计，一个好的、美的基本形是群化的前提。其次是组合构成的形式。另外，基本形的数量也是组合的一个重要因素，基本形的多少直接影响着组合构成的效果。
群化构成的要领
- 用于群化的基本形与重复的基本形不同，重复的基本形可以借助单元格、正负来构成整体图形。因此，基本形的设计更多的考虑它的连续性和在单元格内的组合方式，群化组合的基本形则更注重自身的外轮廓形状。因为它具有一定的独立性，但又要进行特殊的组合，所以，基本形要简练、外轮廓要概括、整体，不能太复杂。另外，基本形不能太纤细，要防止琐碎和锐角。因为, 粗壮饱满的形象更宜组合，群化后的形象也更完整.美观。
- 进行组合群化的基本形数量不宜过多，一般2~6个是最常用的数量，太多的基本形在组合构成时,很难避免拥挤、杂乱。
- 基本形在群化构成排列时要紧凑、严密，注重群化后的外形.可以利用形与形的关系，如，透叠、错位、重叠等。总之，要避免松散、无序。
- 举个例子
- 设计一个用于群化的基本形复制若干个，用不同的组合形式和表现手法进行重组构成。
- 比如运用移动,反射.回转等,再结合透叠.错位.重叠等形式，就能设计出丰富多变和具有个性的群化形。
群化构成的形式
- 平行和上下平行排列
- 即水平移动排列或上下移动排列。如奥迪车的标志，由四个圆圈水平排列;用同样元素构成的奥运会标志，则是上下水平排列。
- 对称的反射排列
- 即由两个或四个相同的基本形，作左右或上下的反射排列。如小鹏汽车的标志是运用对称反射构成。
- 旋转和放射排列
- 即群化的基本形围着中心点作旋转或向外放射。一般基本形不少于三个;用两个基本形构成的是反转。如想象”盲人服务中心，机会国际经纪人等标志就是采用反转的构成手法;而美国护士协会的夜莺奖标志和美国革命二百周年授权标志则采用旋转构成手法;放射排列构成，是基本形围绕中心点向外排列。如，日本三菱、雪花水电公司、易买卖网站等标志。
- 值得一提的是，在组合构成的过程中，要善于思考和发现，发现组合过程中新形象的产生
- 群化构成的形式是灵活的，既可以采用单独的构成形式，也可以将几种形式综合运用，加上图地关系、形与形的关系，以及不同数量的基本形，就可以使一组基本形群化组合出多种形象。
形的群化在 UI图标中的应用
- 下图中的图形分别通过四个基本形做移动/旋转构成（左上），垂直对称（左下），三个基本形做旋转构成（右）
- 注意：
- 群化的基本形要简练
- 造型要饱满
- 基本形数量不宜过多，一般2~6个是最常用的数量
- 群化构成排列时要紧凑、严密
- 利用形与形的关系，如，透叠、错位、重叠等。
- 要避免松散、无序。
多形组合
什么是多形组合
- 多形组合是形象创造的形式之一。多形组合指的是多个单形根据组合构成的原理构成的形象。组合后的形象可以作为基本形，运用重复骨格构成重复或近似构成:也可以不依骨格和框架，构成具有独立性质的形象。由于它具有的独立性质,故许多标志. 符号的设计，常用此方式。
多形组合的要领
- 用于组合的单形，可以是相似的，也可以是不同的。
- 如，两个大小不一的圆形组合或一个圆形、 一个个方形组合构成。最基本的是，采用外形简洁的单形比外形复杂的要更好。
- 选用的单形数量不能过多，数量过多的单形组合在一起，较难把握整体效果，容易造成杂乱。
- 单形的变化不宜过多
- 比如，有圆的、方的、三角的、菱形的等，如此多的不同形象,很难避免混乱，同时也减弱了形象的冲击力。在标志设计时要特别注意这一点，不能因为变化，破坏了形象的独立性。
多形组合的形式
- 垂直对称
- 即以中心轴为基准，图形左右对称。如太阳神的标志，就是运用这种构成形式。
- 单形平衡构成
- 这种形式求的是整体平衡感，单形可以按需进行大小、位置、方向的调整。
- 注重外轮廓的形象
- 即在构成过程中，强调外轮廓的变化，有意识地将多个形象组合成新的、更完整的形象。
- 综上所述，形象构成的种种形式，为图形创造、标志、符号设计等提供了很好的方式。但是，更重要的是掌握这些构成形式，在理解设计主题后，准确选择表现形式。这些形式不是单一的，可以根据设计意图综合运用。总之，形象构成是平面构成的基础,也是抽象造型的重点，只有熟练掌握形象的构成，才能进一步进行构成设计。
多形组合在 UI图标中的应用
- 多形组合基本以外形简洁的单形为基础单位进行组合，有矩形，圆形，三角形，曲线型，弧线形等构成
- 注意
- 采用外形简洁的单形比外形复杂的要更好
- 单形数量不能过多
- 单形的变化不宜过多
二 本文回顾
在本篇文章中我们完成了填充图标知识体系中形象的构成内容，下面回顾一下本篇文章所填充的内容
形象的构成
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册