友情提示
在填充之前想和小伙伴们说下，你完全可以把本系列文章当做学透图标知识并内化吸收的图标设计教科书来阅读，推荐你找一段充足的时间去阅读，理解，学习其中的内容，可能有些内容不是那么好理解，没关系你可以反复多阅读几遍去加深印象，从而去理解它，我想效果会更好，千万不要只读一遍就认为可以掌握了
UX设计知识体系搭建实录--图标篇（四）
其实自己刚入行时并没有意识到搭建一个适合自己的知识体系有多么重要，在进入大厂前的一年突然意识到如果我没有构建一个完整的框架结构去承载自己每天所学的知识，去明确我应该优先学习哪些知识，那么我还会像现在一样慢慢的成长
因此我开始尝试搭建自己的UX设计知识体系，也初现成效，后来顺利进入大厂便是明证
同时呢也坚定了自己今年要持续搭建一个UX设计知识体系的目标，因此呢我决定把自己搭建的过程，搭建中的思考，搭建中沉淀的设计方法论通过这个公众号持续的分享给大家，也希望大家受我影响开始着手搭建一个适合自己的设计知识体系吧，让自己倍速成长，一年顶三年！
前情提要
如果你看过前一篇文章可以忽略下面这一小段内容，主要是给第一次看到本系列文章的小伙伴做前情提要哈
可能很多小伙伴会说这个体系怎么去搭建呢？不用担心，在本次的系列文章中，我将和大家一起来搭建并填充图标设计知识体系，我填充知识体系的理念是尽量从最核心的底层知识体系开始填充，这样你填充内化的知识才是真正最核心，最有用的知识内核，掌握了这些之后再去绘制图标，你会发现其实是降维打击，因为图标的知识只是平面构成中的一小部分而已
因此我找到了两本经典书籍作为搭建图标知识体系的底层核心内容--《平面构成》和《品牌设计法则》，我们可以把书中涉及到的与图标设计关联度高的内容填充到我们的知识体系中，然后通过刻意练习和费曼学习法去内化吸收，大家也可以跟我一起填充哦。下图为所要填充的图标设计知识体系的框架图。
系列文章目录
1.搭建架构
1.1搭建架构并填充图标底层知识一
2.填充知识
2.1填充图标底层知识二
2.2填充图标底层知识三
2.3填充图标底层知识四（本文内容）
2.4填充图标底层知识五
2.5填充图标知识--图标设计深度解析
3.内化知识-刻意练习
3.1.图标设计完全指南--三维图标设计法则
一 填充图标知识体系
图形符号设计
完形视觉原理（格式塔原理）
- 完形视觉原理（格式塔）是设计领域被广泛使用的设计心理学原理，也就是我们所熟知的格式塔原理，实际上，整个平面设计的手法背后都是由“格式塔”视觉原理支撑的，包括品牌设计、交互设计、网页设计等等一切
- 完形视觉原理的核心含义
- 人们总是先看到整体，然后再去关注局部，人们对事物的整体感受不等于局部感受的加法，人脑的视觉系统总是在不断地试图在感官上将图形进行闭合。整体不是部分的简单总和或相加，整体不是由部分决定的，而整体的各个部分是由这个整体的内部结构和性质所决定的。
平面视觉的基本形态
- 设计师通过对图形、文字、图片、色彩进行平面视觉创造，最终可以归纳总结为以下四种基本形态。
- 和谐
- 变化
- 在视觉上形成秩序性的变化，通过大小、肌理、形状、空间、色彩等手法形成对比，以此来体现视觉信息的内容与层级。
- 冲突
- 更加激烈突出的对比手法，戏剧性的效果。某个局部与整体因缺乏共同点而格格不入，视觉上更鲜明。
- 混乱
- 和谐与秩序的反面，失去平衡、条理，不可控的。整体中含有太多不同性质的个体，人的视觉系统很难从中找到规律以进行内容认知
完形视觉原理六大规则
- 是一种诠释人类视觉认知行为的心理学学说。它对品牌标志如何形成可被人识别的完整符号提供了明确有力的方法论。品牌标志要想使人形成印象深刻的记忆认知，就需要了解人脑中的完形视觉识别的机制。当我们看到标志、文字等一切物体的时候，并不是看到它们的组成构件。这个理论让我们明白在图形符号乃至各类视觉信息的设计中要寻找秩序、规律。通过理性地对各个元素间的关系、规律、差异、冲突与整体间的尺度把控，使设计抵达受众对象的心智。
简洁律
- 什么是简洁律
- 人脑在认知复杂或者模糊的图形对象的时候，会倾向于通过分解复杂的场景来降低信息的混乱程度，会将其多余、没有规则的部分简化，保留有必要且有规律的相关视觉单元机构，以获得最简洁的构成去加以理解。
- 因此，这就是为什么在图形、标志设计中，成熟的设计师要以最简单的几何形状——圆形（椭圆形）、正方形（含长方形、菱形）、三角形（有各种角度的三角形）为基本形，通过布尔运算理性设计图形符号。脱离基本几何形体去设计图形会产生大量琐碎的不规则形状，这会造成视觉传播的低效，为传播受众制造信息获取上的大量障碍，而且不规则形体会给标志在各个媒介应用上的统一增加难度。
- 图形的分类
- 图形一般可以分为两类——几何图形和有机图形
- 有规则的、可被基本的几何图形（圆形、正方形、三角形）概括的图形。从几何学上讲，几何图形不会受到平移、缩放、旋转和镜像的影响，换句话说，即一种几何图形即使经过了这一系列的变换之后，其性质也不会被改变。
- 指的是那些无规律的、复杂多样且千差万别的形状。
- 为什么几何图形是对圆形、方形、三角形进行概括的图形？
- 因为有规则的图形可以说都是通过这三种图形的加减完成的。
- 一个有机图形的轮廓存在以下这几种线条形态的连续，这些线条形式囊括了所有几何图形，而这些线条都来自于圆形（包括椭圆形）、正方形（长方形、菱形）、三角形（各类三角形）的组合
- 如何增强图形记忆点
- 制造规律，标志要简洁且没有不必要的烦琐细节干扰到标志的整体性。
- 因此使用几何图形理性地设计图形符号是设计师需要持久磨炼的基本功。几乎所有经典的标志都是使用几何图形去构成的，只有极少数的品牌标志是由无序的有机图形构成的。
- 举个例子
- 在全球百强品牌中，唯有肯德基的标志是由有机图形构成的。可以看到，它的图形是很多有机图形组合成的漫画形式的人物标志。但这是特例，因为它的图形部分是其创始人哈兰德·大卫·桑德斯，其核心识别在于白发、白胡子、戴着特别领结的老爷爷的形象，因为人脸是人日常接触中最为复杂的识别对象，所以对人脸特征的抓取获得的敏感度相当高。即使如此，肯德基也在最新的一次品牌形象更新中，向着更加概括、规则的方向简化。简化了对于人脑第一时间识别无效的多余、琐碎的图形细节。
- 注意点
- 除去一些特殊的识别性很强的有机图形，在标志设计中，不管是图形符号还是标准字，通过几何图形以规律的形式去创作适用于绝大多数品牌。
- 通过几何图形和规范的手法去设计标志是设计师基本的素养，这也是简洁图形、去除多余细节的必经之路。
- 不要教条化，不少设计师把这种行为教条化，为了几何而几何，刻意使用圆形的增减去设计图形，最后设计出来的作品成为“四不像”。
- 绘制技巧
- 其实在开始创作图形符号的时候，要先用手绘的形式（如下图小鸟和骑自行车的熊的案例）去创作，然后才利用几何形状去约束自己的图形轮廓，让图形轮廓的弧线、折角变得更加简洁、合理、优雅。因此要切记，规范化的几何图形约束是设计进一步完善的步骤，而不是干涉创作的形式主义，这一点同样也适合与图标的绘制
- 简洁律在 UI图标中的应用
- 简洁律在图标中的体现，从左一到右一不断的简化计算器的细节特征，不断的做减法，保留核心视觉记忆点后将其几何化
- 在这一过程中会将其多余、没有规则的部分简化，比如计算器上多余的按键-显示屏-无用的文字等等，保留有必要且有规律的相关视觉单元机构，比如“等号”，以获得最简洁的构成去加以理解。
平衡律
- 完形视觉原理抓住了我们在观察事物时的三种倾向性，即倾向于将复杂的视觉信息概括为更为简洁的、更有对称性的、更易理解其意义的图形
- 平衡率的核心
- 平衡律的核心是告诉我们，在整个画面的设计元素间不应该提供混乱或不平衡的感觉，否则人们的注意力会被导向寻找不平衡的因素，或者思考这种怪异感觉的解决方法，而不是专注于获取设计内容的信息。
- 举个例子
- 下面的图例中，在我们视觉感知最左侧的复合图形的时候，倾向于将其理解为菱形与圆形的叠加，而不是②与③这种更加复杂的形式，而且①的理解相对于其他两者平衡性更强。平衡性指的是视觉上的平衡感，而不是对称性。
- 平衡是设计中非常重要的手法，平衡让观看的受众感受到和谐，而不平衡的设计会引发观者的不适感。
- 视觉平衡的重要性
- 在设计上达到视觉平衡依赖于我们对设计元素在画面之间视觉重量的把控。
- 视觉对象——不管是标志、图形符号、标准字还是各种设计画面乃至整体画面，要想呈现出良好而和谐的美学，不给视觉受众造成不必要的干扰，视觉平衡是首要注意的因素。
- 视觉平衡的认知是设计构成的美学基础，只有了解平衡才能知道什么时候去制造和谐，什么时候通过合理的失衡制造设计的戏剧性，从而展现内容层次。
- 举个例子
- 下图我们以杠杆的模拟为例来分析。图①：左右的圆形所处的位置、颜色、大小相同，因此是平衡的。图②：右侧圆靠近视觉中心点造成了画面失衡，左侧有下压的趋势。图③：位置相同而大小不同造成了画面的失衡。图④：左侧黄球明度高，右侧球明度低则视觉上显得很有分量。图⑤：左右球明度、饱和度相似，位置相对，因此左右平衡。图⑥：左侧球虽小，但数量多，因此感觉相对均衡。
- 掌握视角平衡小技巧
- 在对整体画面进行元素平衡的时候，可以把画面想象成是一张贴在画板上的画纸，画板中心点下面有一个圆锥作为支点，而画纸上设计元素的视觉重量会对画板形成压力
- 视觉中心
- 在没有被特别的视觉元素吸引视线的情况下，人的目光将自然地从左上方开始，并向右下方移动，穿过视觉中心。因此，在设计品牌触点应用设计的时候，往往要考虑整体画面的信息布局，根据视觉中心的规律去布局重要信息会得到更好的效果。这也解释了为什么很多时候主体的视觉信息会略微偏上。
- 举个例子
- 如果品牌标志中品牌色的数量较多，很容易使其色彩平衡难以驾驭，而谷歌的设计团队很好地处理了这个问题。在右下图中，我将其概括为基本几何图形，可以发现其标志的重心是分布在黄球内的，红色球和蓝色球左右侧都在错落的位置分布了，形成了很好的平衡。因为左侧的G为大写，所以面积和视觉重量会大很多，因此在右侧的绿色长方体的字母“l”及“g”正好均衡了它的重量。整个标志的用色可以说处理得炉火纯青。
- 影响视觉平衡的因素
- 视觉重量
- 图形元素对视觉产生的感知重量。在一个独立视觉空间内，能引发人关注的元素、组合越多其重量则越重，反之则越轻。视觉重量产生影响的因素有很多，如尺寸、肌理、色彩、疏密、位置等。
- 视觉方向
- 视觉力量的感知方向。通过线性引导、锐度、色彩等手法制造的张力、引起的视觉方向性，带有视觉方向的元素会增加其视觉吸引力
- 视觉平衡四种基本形态
- 对称平衡
- 以视觉中心点进行轴对称平衡、对称线平衡。对称平衡形式感很强，但也会因为手法过于单调、画面过于静态而令人感觉乏味。
- 不对称平衡
- 不同设计元素构成时通过视觉重量进行平衡的手法。这种不对称平衡可以形成对比性，并且对于元素间不同视觉重量的判断十分考验设计师的功底，形状、尺寸、颜色（明度、饱和度、色相）以及指向性、疏密、肌理等很多因素都会影响到设计对象的视觉重量。
- 径向平衡
- 又被称为放射平衡。以一个点为中心向外辐射开，其特点是在视觉上会产生一个向心力，突出其中焦点。
- 均衡分布平衡
- 在分布上对元素进行视觉重量上的均衡处理。均衡分布平衡方法可以体现出设计对象的丰富性、空间的充实感。
- 平衡率在 UI图标中的应用
- 两张图中的图标单独看大多数都是对称平衡，不对称平衡的基本形态，保持视觉上的平衡感。
- 当然了个别图标看起来视觉上并没有保持平衡，但我认为这个规则是一个基础的理论知识，我们应该尽量规范，而不是过于教条化，因为那样的话会让你设计出来的图标过于呆板，没有一丝的变化和创意，缺少灵动感
- 接着我们把视线从单个图标转到界面中，可以看到这一组图标整体的色彩，调性，颜色搭配，肌理质感，疏密都是较为统一，平衡的感觉
接近律
- 接近律指的是物体之间距离相对更近时会被视为整体，当距离相对更远时，不同物体被认为不是一个整体。接近律也是使我们能将连续点视为线性元素，并且形成引导的关键
- 举个例子
- 两个明度不同的点，它们出现在画面相对的角落。你会优先注意到明度低的左下角黑点，然后才注意到右上角的灰点。它们在空间位置上是两个彼此孤立的点，但通过不同明度，它们产生了视觉上的主次顺序。
- 随着两个点越来越近，它们被视为一个有密切联系的整体。这两个点可以是任何视觉焦点的主次，比如左侧黑点是图形符号，右侧灰点是标准字。与图一的区别是它们距离更近，形成了明确的联系，被视为群组。
- 当相互出现重叠的部分，产生了交集的区域，点与点就被视为一个整体，如完全一体的图形、融合关系、交叠关系等。图中图形A形成了融合的关系，图形B形成了交叠的前后层次关系。
- 几何图形叠加时，会形成更强烈的整体关系。可以看这三个案例：第一个奥迪的标志使用了四个圆，叠加形成了强烈的联合、并联感。第二个， e Music的标志使用了更多的手法，标志图形符号中有两种元素，第一种是叠加圆的整体，第二种是红点。叠加的圆形以放射状环绕，使用单个圆形放置中间并使用红色强调其核心性质（单个圆可以视作外围的两个圆形叠加的进一步融合），因此形成了外部向中心聚合的动态感觉。第三个是国内著名的设计顾问机构靳刘高设计的标志。其灵感来自中国传统的饰物方胜，方胜寓意“同心双合，彼此相通”，两个菱形叠加，形成了彼此区分但又整体感十足的图形符号。
- 接近律在 UI图标中的应用
- 下图中的图标都是运用了接近律的原理，一个图标由两个主体图形组成，成融合关系、交叠关系，就会被视为一个整体
二 本文回顾
在本篇文章中我们完成了填充图标知识体系中图形符号设计，下面通过脑图回顾一下本篇文章所填充的内容吧
图形符号设计
微信：shejizhishi001
公众号：设计芝士KING
我这里为各位小伙伴们准备了两个大礼包---
1.“精选图标源文件（非商用）+18个图标网站大合集”
2.阿里腾讯等大厂设计师能力模型体系
获取方式：关注公众号后转发本文（公众号同名文章）后添加我微信，回复“图标”或“能力模型”即可获得这个两个大礼包喽！
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册