图标设计与制作PPT完整全套教学课件

图标设计与制作全套课件第1章初识图标设计本章介绍：图标设计作为UI设计中重要的组成部分，可以帮助用户更好地理解产品的功能，是营造产品用户体验的关键一环。本章对图标的基本概念、应用场景、风格类型、性格表现、设计软件、设计原则以及设计流程进行系统讲解。通过本章的学习，读者可以对图标设计有一个宏观的认识，有助于高效便利地进行后续的图标设计工作。掌握图标的基本概念掌握图标的应用场景了解图标的风格类型掌握图标的性格表现掌握图标的设计原则掌握图标的设计流程学习目标图标（Icon）是具有明确指代含义的图形。通过将某个词语或概念设计成形象易辨的图形，进而降低用户的理解成本、提高设计的整体美观度。图标通常和文本相互搭配使用，两者相互支撑，共同起到传递其中所要表达的内容、信息以及意义的作用。1.1图标的基本概念特斯拉Model3车载系统图标1.2图标的应用场景1.产品图标产品图标是体现产品品牌调性和特性的图标。该类图标通常出现在电脑桌面、手机桌面以及APP应用市场等综合场景。QQ音乐产品图标抖音短视频产品图标支付宝产品图标1.2图标的应用场景2.功能图标功能图标是图形化的符号，具有明确功能。该类图标通常出现在界面中的导航栏以及标签栏等需要用户进行操作的界面模块。QQ音乐App抖音App支付宝App1.2图标的应用场景3.装饰图标装饰图标用于提升渲染气氛，更多的是承担视觉性作用。该类图标通常出现在引导页、空状态、弹窗、404页等页面进行内容点缀。好好住一起学App众安保险App1.3图标的风格类型1.拟物风格拟物化风格的图标贴近现实，带有渐变、高光、阴影等效果。iOS6时代达拟物风格到了流行的巅峰，之后逐渐被扁平风格赶超，现常用于工具类、游戏类等应用图标。拟物风格图标1.3图标的风格类型2.扁平风格扁平风格图标与拟物风格图标相反，很少有渐变、高光、阴影等效果。自2013年iOS7的推出扁平风格成为了设计的主流趋势，并且扁平化设计风格图标可以分为线性、面性以及线面三种类型。经过多年发展，设计师在线性、面形以及线面三种扁平化风格图标的基础上又设计衍生了其他风格，这些风格形式各异，富有特点并被广泛运用。扁平风格图标1.3图标的风格类型3.3D风格3D风格的图标立体有层次，由若干个几何多边体构成。其制作软件通常为3DMax和C4D，并常用于游戏中。扁平风格图标1.3图标的风格类型4.2.5D风格2.5D风格的图标是由物体的正面、光面和暗面三面组成，是一种模拟3D效果的图标。其制作软件通常为Illustrator，并常用于引导页、空状态以及弹窗中。2.5D风格图标1.4图标的性格表现1.圆角大小圆角的大小甚至有无会令图标表现出不同的性格，并影响用户使用产品的感受。圆角不同大小的图标设计示意图1.4图标的性格表现2.描边粗细描边的粗细通常是对线性图标的性格产生影响。描边不同粗细的图标设计示意图1.4图标的性格表现3.颜色搭配颜色搭配主要是通过颜色在数量上的搭配进行图标性格的影响。不同颜色搭配的图标设计示意图1.5图标的设计软件图标的设计软件主要有Photoshop、Illustrator、Sketch以及AdobeXD，如图1-13所示。建议初学者先掌握Photoshop（简称PS）和Illustrator（简称AI），有条件购买苹果电脑的话还要掌握Sketch。图标的设计软件1.6图标的设计原则1.可识别性•造型准：图标设计时通过对信息与图形的理解，应进行准确的图标造型，以保证用户理解图标需要传达出来的含义。比如图标使用从真实世界简化而来的造型更容易识别。都是表达点赞，左边的图标比右边的图标更具有识别性1.6图标的设计原则•颜色对比：图标设计时通过调整色相、明度、饱和度，应使用准确的颜色，以保证图标和背景形成对比。比如图标本身使用黄色，背景通常采用较深的颜色才能看的更清楚。同样的图标，黄色与黑色搭配更容易识别1.6图标的设计原则•够清晰：图标设计时通过设置尺寸大小及坐标位置，应使用正确的数值，以保证像素完美。比如图标的坐标位置为整数，尺寸为偶数会使图标更加清晰。准确造型的图标造型不准确的图标1.6图标的设计原则2.视觉统一•造型统一：图标造型必须要统一，造型统一包括使描边一致，倒角一致、留白一致、角度一致以及透视一致等。造型统一会使图标更加精致。描边粗细一致描边粗细不一致1.6图标的设计原则•风格统一：图标风格必须要统一，在进行设计时，我们通常会先将其中一个图标的风格确立，然后再将该风格延续使用到其他图标，以保证图标风格一致。风格统一会使图标更加整齐。风格统一的图标1.6图标的设计原则3.简洁美观•造型简洁：进行图标设计时减少不必要的细节，降低复杂度，这样设计出的图标会整体简洁，帮助用户快速识别。造型简洁的图标造型复杂的图标1.6图标的设计原则•比例协调：图标设计时根据特定的规则进行设计，以保证协调性，这样设计出的图标才会呈现最佳状态。比如当内形为外形的轮廓比为1:2时，图标的整体视觉效果最为平衡。内形与外形不同比例的图标1.6图标的设计原则•风格合理：图标设计使用合理的风格，这样设计出的图标才会更加符合产品需求并加强产品美观度。比如进行旅游出行行业的图标设计时，通常会在扁平化基础面性图标之上再添加其他效果，以此打造出丰富绚丽的图标效果。使用渐变层次叠加面性图标较单色面性图标更加契合旅游出行产品。风格不合理的图标风格合理的图标1.6图标的设计原则•配色科学：图标设计一定要使用科学的配色，这样设计出的图标才会更加符合表达含义并提升整体美观性。比如进行“美妆护肤”的图标设计时，通常会选择甜美、温柔的粉色以强调优美感，进行“电脑数码”的图标设计时，通常会选择冷静、中性的蓝色以强调科技感，再通过明度与纯度的变化，使用独特的颜色打造出精致的图标。配色不科学的图标配色科学的图标1.6图标的设计原则4.愉悦友好•品牌感：图标设计有时由于表达的意义相同，会导致不同产品中的图标设计普通甚至出现雷同。将品牌融入到图标的设计中，可以巧妙的让图标具备差异性，拥有独特的产品气质，避免抄袭情况。将品牌注入图标的闲鱼App1.6图标的设计原则•生命力：图标设计注入拟人化的元素，同样会令图标具备差异性，这种充满生命力的设计，会带给用户亲近友好的体验。来源Antdesign1.6图标的设计原则•微交互：在视觉设计的基础之上，为图标添加小动画，形成交互，会令用户感到更加愉悦。饿了么星选App1.7图标的设计流程图标的设计流程可以细分为六个步骤。图标的设计流程图标设计与制作第2章图标绘制方法本章介绍：绘制规范的图标是图标设计的基础，遵循图标的规范与规则可以保证图标的像素清晰、视觉统一以及效率提升。本章对图标标准尺寸系统、图标绘制像素完美、图标的绘制思路、布尔运算的使用、图标等比例缩放、图标的网格系统以及图标的视觉调整进行系统讲解。通过本章的学习，读者可以对绘制图标的规范有一个基本的认识，有助于高效便利地进行图标设计工作。掌握图标标准尺寸系统掌握图标绘制像素完美掌握图标的绘制思路掌握布尔运算的使用掌握图标等比例缩放掌握图标的网格系统掌握图标的视觉调整学习目标尺寸系统图标尺寸图标放大图标布局2.1图标标准尺寸系统图标的应用场景不同尺寸也不同，其中以4倍数和8倍数为基准是目前最灵活的设计尺寸系统。2.1.1尺寸系统图标的设计尺寸系统24px是目前最常用的图标尺寸。而20px则应用于紧凑型的页面布局中，因此也经常被使用。2.1.2图标尺寸最常用的图标尺寸如果需要更大尺寸的图标，可以直接成倍数放大24px或20px尺寸的图标进行使用。2.1.3图标放大被放大成不同尺寸的图标图标设计时留出一定的出血位，可以预防图标边缘被切掉以及把握图标的设计平衡。设计24px和20px图标时，通常在四边会各留出2px作为出血位。

红色为出血位，图标的设计尽量不要到红色区域2.1.4图标布局图标像素完美的概念软件实现图标像素完美课堂案例-用软件实现图标像素完美2.2图标绘制像素完美图标像素完美指图标的每一个像素位都可以精确对应到一个像素。通常我们会将图标的坐标位置设置为整数，尺寸设置为偶数，以保证图标更加清晰。2.2.1图标像素完美的概念

像素完美的图标像素不完美的图标1.设计原则在软件中，我们会将图标的坐标X和坐标Y设置为整数，宽和高设置为偶数，角度以45度为单位进行旋转，以实现图标像素完美。2.2.2软件实现图标像素完美

经调整后像素完美的图标像素不完美的图标2.软件设置有时即使遵循了像素完美的设计原则，但还是会出现像素不完美的情况，这是因为软件没有进行正确的设置。通过正确的软件设置，才能绘制出像素完美的图标。2.2.2软件实现图标像素完美

使用属性面板中的“X”、“Y”、“宽”和“高”选项实现图标的像素完美。2.2.3课堂案例-用软件实现图标像素完美

效果图图标结构拆解图标绘制工具课堂案例-用纸笔进行图标结构的分解2.3图标的绘制思路

绘制图标和搭积木有着异曲同工之处，其实每一个图标都是有不同的形状共同组合而成的。2.3.1图标结构拆解

图标的结构拆解1.矢量形状矢量形状是绘制图标的基本工具。运用矢量形状绘制的图标有着放大不失真的特点，不同软件里的矢量形状工具原理一致，展现会略有不同。2.3.2图标绘制工具

Photoshop矢量形状工具Illustrator矢量形状工具Sketch矢量形状工具XD矢量形状工具2.贝塞尔曲线贝塞尔曲线是绘制图标的辅助支撑。它在绘制矢量图形时，可以轻松地绘制出准确的造型，在软件中我们通常运用钢笔等工具进行贝塞尔曲线的绘制。2.3.2图标绘制工具

PS钢笔等工具截图3.布尔运算布尔运算是绘制图标的核心功能。它可以将绘制的基本形状，通过合并、减去、相交、排除等数学计算变成新的形状，从而制作出不同造型的图标。2.3.2图标绘制工具

经过布尔运算得到新的形状分析出图标的结构，用纸笔绘制图形形状，实现布尔运算，制作出不同造型的图标。2.3.3课堂案例-用纸笔进行图标结构的分解

需要分解结构的图标不同软件的使用不同颜色的使用课堂案例-绘制基础面性图标课堂案例-绘制基础线性图标2.4布尔运算的使用

不同软件在使用布尔运算绘制图标的操作上会有微小区别，其中由于Photoshop是图像处理软件，因此在使用布尔运算绘制图标方面，和其他软件区别较为明显。我们通过示意图将区别形象地进行了展示。2.4.1不同软件的使用

不同软件在进行布尔运算的操作示意图当两个形状颜色不同时，使用布尔运算会只保留一种形状颜色。其中合并、相交和排除会保留顶部形状颜色，相减则会保留底部形状颜色。2.4.2不同颜色的使用

当两个形状颜色不同时经过布尔运算，保留的形状颜色示意图使用椭圆工具、路径选择工具和减去顶层形状命令绘制基础图形，使用快捷键变换图形，使用填充工具为图形填充颜色。2.4.3课堂案例-绘制基础面性图标

图标最终效果图使用圆角矩形工具绘制图形，使用属性面板的变换功能旋转图形，使用路径查找器命令，实现基础线性图标。2.4.4课堂案例-绘制基础线性图标

图标最终效果图图标等比例缩放问题图标等比例缩放方法课堂案例-将图标通过缩放置入界面2.5图标等比例缩放

在软件中，将图标等比例缩放，通常会出现圆角弧度和线条粗细两个问题。比如将一个图标等比例缩小，该图标的线条会变粗，弧度会变大，甚至变成圆形。2.5.1图标等比例缩放问题

细线条的圆角矩形通过等比例缩小变成了粗线条的正圆想要对图标进行不变形的等比例缩放，不同的软件有不同的实现方法。2.5.2图标等比例缩放方法

不同软件的等比例缩放的实现方法使用矩形工具绘制矩形框，使用变换命令，实现图标等比例缩放。2.5.3课堂案例-将图标通过缩放置入界面

效果图网格系统的定制意义网格系统的定制规范网格系统的使用方法课堂案例-运用网格系统调整图标2.6图标的网格系统

通过物理尺寸绘制的图标通常会失去视觉平衡，比如相同宽高尺寸下的方形和圆形，方形会比圆形大。因此为了达到图标与图标的视觉平衡，我们需要通过制定网格系统运用视觉尺寸进行一组图标的绘制。2.6.1网格系统的定制意义

物理尺寸和视觉尺寸下的对比不同形状的图标可以根据网格系统来进行规范，以实现一组图标的视觉平衡。网格系统中的形状可以分为四种，即方形、圆形、垂直矩形和水平矩形。在24px下的网格系统中，方形的宽高尺寸为18px，圆形的直径尺寸为20px，垂直矩形的高度尺寸为20px,宽度尺寸为16px，水平矩形的高度尺寸为16px,宽度尺寸为20px。2.6.2网格系统的定制规范

24px下的网格系统一组图标如果完全贴合网格系统的四种形状进行绘制，一定会出现单个图标的变形、不自然、比例不协调的现象。正确使用网格系统的方法是，将对应网格系统形状的图标放入该网格。根据图标自身的比例，做出轻微调整，可以使图标溢出网格或者未充满网格。这样既实现了一组图标的视觉平衡，又保证了单个图标的比例协调。2.6.3网格系统的使用方法

网格系统的使用方法使用选择工具移动图标的位置，使用属性面板中的“X”、“Y”和“宽”、“高”选项实现视觉平衡。2.6.4课堂案例-运用网格系统调整图标

需要置入网格的图标重心调整线条调整颜色调整课堂案例-进行图标的重心调整课堂案例-进行图标的线条调整课堂案例-进行图标的颜色调整2.7图标的视觉调整

如果粗暴的对图标重心进行物理对齐和物理平衡，会造成个别图标的比例失衡和整体排版的视觉错乱。图标的重心应该根据不同形状进行对齐调整。2.7.1重心调整

图标重心调整示意图同等厚度的线条，因为视错觉会使得竖线看起来要比横线薄。在进行图标绘制时，有时我们会通过适当调整线条尺寸来避免视错觉现象，保证图标的视觉平衡。2.7.2线条调整

图标线条调整示意图相同颜色下，由于文本所占的视觉面积小，因此颜色会比图标的颜色看起来轻。在进行图标绘制时，我们会通过适当加深文本的颜色，保证图标的视觉平衡。2.7.3颜色调整

图标的文字颜色调整示意图使用属性面板中的“X”选项进行图标的重心调整。2.7.4课堂案例-进行图标的重心调整

重心调整前重心调整后使用属性栏中的“描边粗细”选项进行图标的线条调整。2.7.5课堂案例-进行图标的线条调整

重心调整前重心调整后使用颜色填充工具调整文字颜色，实现图标与文字颜色视觉平衡。2.7.6课堂案例-进行图标的颜色调整

红色叉号为颜色调整前的图标绿色对号为颜色调整后的图标使用圆角矩形工具、减去顶层形状命令和自由变换命令绘制基础图形，使用属性面板中圆角半径调整图形圆角，使用填充工具为图形填充颜色。2.8课堂练习-制作家居类面性图标

图标最终效果图使用矩形工具、剪刀工具和直接选择工具绘制图形，使用描边选项调整描边效果。2.9课后习题-制作服饰类线性图标

图标最终效果图图标设计与制作第3章线性图标设计本章介绍：线性图标作为扁平化图标中的一种，具有简约轻盈的特点。同时伴随着扁平化设计的发展，线性图标也演变出了更多设计风格，需要UI设计师们进行系统的学习和了解。本章对线性图标的基础知识、基础设计以及创意设计进行系统讲解。通过本章的学习，读者可以对线性图标有一个全面深入的认识，并快速掌握绘制常用线性图标的规范和方法。掌握线性图标的基础知识掌握线性图标的基础设计掌握线性图标的创意设计学习目标线性图标即通过统一的线条进行绘制，表达图标的功能。该类图标带有形象简约、设计轻盈的特点，会呈现出干净的视觉效果。同时由于线性图标中使用元素本身的简单性，亦会产生设计师创作空间降低等问题，并且在制作复杂线性图标会产生识别性减弱等现象。线性图标使用场景非常丰富，作为页面的功能图标常用于导航栏、金刚区、列表流、分类区、局部操作、标签栏等。3.1线性图标的基础知识线性图标示意图1.描边设置•描边数值：进行线性图标设计时，描边的数值大小要保持一致，并尽量采用整数，如果要用小数的话建议使用“0.5”递进。描边数值的不同设置会影响到图标的性格表现，因此需要根据产品气质选择合适的图标描边数值。3.2线性图标的基础设计小米有品App底部标签栏•对齐方式描边数值如果是奇数应该使用内或者外描边，因为居中的描边会容易模糊。在做闭合路径的线性图标时，通常采用内描边的对齐方式，因为外描边的矢量图形视觉上其实是比实际数值要大，不利于控制图标大小。3.2线性图标的基础设计描边为偶数和奇数时不同对齐描边的示意图2.圆角设置进行线性图标设计时，圆角的数值大小一致，建议为偶数，不能出现小数。同时圆角的数值设置往往和描边的数值设置有千丝万缕的联系。如果图标的描边为2px，圆角通常设置为2px；描边为3px，圆角通常设置为4px。描边为4px以上通常设置无圆角。3.2线性图标的基础设计微信App底部标签栏3.造型比例进行线性图标设计时，图标的内形和外形之比需要达到1:2。这样设计出的图标才会使整体视觉效果较为平衡，能够呈现最佳状态。3.2线性图标的基础设计图标不同比例的示意图3.3线性图标的创意设计基础线性课堂案例-制作线性圆角图标基础线性延伸线性断点课堂案例-制作线性断点图标课堂案例-制作线性叠加图标1.线性直角线性直角图标明快果断。线性直角图标示意图3.3.1基础线性2.线性圆角线性圆角图标柔和亲切。线性直角图标示意图3.3.1基础线性使用圆角矩形工具和直线段工具绘制线性圆角图标，使用描边命令设置描边选项，使用变换命令制作线性圆角图标。图标最终效果图3.3.2课堂案例-制作线性圆角图标1.不透明度线性不透明度图标富有层次。线性不透明度图标示意图3.3.3基础线性延伸2.色彩变化线性双色图标活泼可爱。在制作时，可以根据色环以及品牌做出类似色、对比色以及黑白+品牌色的色彩变化。线性双色图标示意图3.3.3基础线性延伸3.增加高光线性高光式图标复杂传统。线性高光图标示意图3.3.3基础线性延伸线性断点图标有趣文艺。在制作时，难度系数也较高，下面将通过断点位置、断点位置以及断点端点三个方面进行线性断点图标制作的详细讲解。线性断点图标示意图3.3.4线性断点1.断点位置断点位置首先会选择在图标元素之间的拼接处进行断线，因为这样会最大限度的保障图标识别度。断点位置示意图3.3.4线性断点2.断点距离在制作48px线性图标时，断点距离通常在10px左右。断点距离示意图3.3.4线性断点3.断点端点断点的端点如果是方形，则表现出尖锐、锋利的特点。当断点的端点是圆形，则表现出温和、亲切的特点。因此大家在设计断点端点时，需要根据产品特征与受众，选择合适形状。方头断点示意图以及圆头断点示意图3.3.4线性断点使用矩形工具和椭圆工具绘制图形，使用直接选择工具调整图标锚点，使用路径查找器命令实现线性断点图标。3.3.5课堂案例-制作线性断点图标未加入断点加入断点使用圆角矩形工具、椭圆工具和直线段工具绘制线性叠加图标，使用剪刀工具剪切路径，使用描边命令设置描边选项，使用渐变工具实现制作线性叠加图标。3.3.6课堂案例-制作线性叠加图标图标最终效果图使用绘图工具、直线段工具和路径查找器命令绘制图形，使用属性面板调整描边属性，实现线性双色图标。我爱我家App3.4课堂练习-制作线性双色图标使用绘图工具、直线段工具和路径查找器命令绘制图形，使用属性面板调整描边属性，使用渐变工具实现线性渐变图标。平安财富宝App3.5课后习题-制作线性渐变图标图标设计与制作第4章面性图标设计本章介绍：面性图标作为扁平化图标中的一种，具有醒目突出的特点，同时伴随着扁平化设计的发展，面性图标也演变出了更多设计风格，需要UI设计师们进行系统的学习和了解。本章对面性图标的基础知识、基础设计以及创意设计进行系统讲解。通过本章的学习，读者可以对面性图标有一个全面深入的认识，并快速掌握绘制常用面性图标的规范和方法。掌握面性图标的基础知识掌握面性图标的基础设计掌握面性图标的创意设计学习目标面性图标即填充图标。面性图标由于占用的视觉面积要比线性图标多，所以具有整体饱满、视觉突出的特点，能够帮助用户快速进行图标的位置定位。但面性图标不宜在界面中大面积出现，这样会产生界面过于臃肿，用户视觉疲劳等问题。面性图标的使用场景与线性图标同样丰富，常用于页面的核心业务，如金刚区、内容装饰、标签栏、列表流等。4.1面性图标的基础知识面性图标示意图1.轮廓外形•造型繁简：流畅的外形可以让面性图标的整体变得简洁规整。同时在保持简约设计的同时，设计关键的特征细节也有利于提高图标的识别度，比如使用相机元素制作的图标，在简约外形的基础之上添加闪光灯的细节特征，会使图标的设计更加生动。4.2面性图标的基础设计简约外形的相机图标增加细节的相机图标复杂外形的相机图标•圆角弧度：圆角弧度的差异会让图标展现出不同的气质，如无圆角图标比较直接硬朗；小圆角普遍使用，圆角通常设置为2px；大圆角图标比较柔美可爱，圆角通常设置为4px及以上。4.2面性图标的基础设计无圆角面性图标小圆角面性图标大圆角面性图标2.挖空比例进行面性图标设计时，内部图形的挖空比例需要占20%～30%。这样设计出的图标才会使整体视觉效果较为和谐，能够呈现最佳状态。4.2面性图标的基础设计面性图标挖空比例示意图3.底板设计•有无底板：同一个面性图标，通过底板的设计可以使其发生微妙的变化，产生不同的性格特点。无底板的面性图标又称为单独型图标，这类图标视觉感知更直观；有底板的面性图标又称为组合型图标，这类图标具有层次，相对精致。越小的图标形体应该越简单，因此建议采用单独型图标，图标的尺寸足够大时可采用组合型的图标，并补充图标的细节。4.2面性图标的基础设计图标有无底板对比图•底板效果：在组合型图标中，针对底板可以运用弥散投影增加质感。弥散投影又称为弥散阴影（DiffuseShadow），与软件中直接使用效果的普通阴影技术相比，这种投影的表现则更有深度、更富层次、更加精致。目前，弥散投影已经作为一种设计潮流并广泛应用于UI设计中。4.2面性图标的基础设计制作图标底板的弥散投影基础面性课堂案例-制作单色面性图标基础面性延伸面性多色面性渐变面性叠加课堂案例-制作面性叠加图标设计面性微质感课堂案例-制作面性微质感图标4.3面性图标的创意设计基础单色面性图标简约基础。4.3.1基础面性基础单色面性图标示意图使用矩形工具、圆角矩形工具、添加锚点工具和直接选择工具绘制图形，使用路径查找器命令实现布尔运算，使用渐变工具实现制作单色面性图标。4.3.2课堂案例-制作单色面性图标图标最终效果图1.不透明度面性不透明色块图标富有层次。4.3.3基础面性延伸面性不透明色块图标示意图2.高斯模糊面性高斯模糊图标空间感强。4.3.3基础面性延伸面性高斯模糊图标设计示意图3.光影效果面性光影效果图标带微拟物。4.3.3基础面性延伸面性光影效果图标示意图面性多色图标活泼丰富。在制作时，根据颜色的数量，可以细分为双色图标、三色图标以及多色图标。4.3.4面性多色面性多色图标示意图面性渐变图标丰富可爱。在制作时，根据渐变的形式，可以细分为单色渐变、炫彩渐变、柔和多色渐变以及YOGA多色渐变设计风格。单色渐变4.3.4面性渐变面性叠加图标层次感强。线性叠加图标示意图4.3.5面性叠加使用椭圆工具、矩形工具和圆角矩形工具绘制图形，使用快捷键变换图形，使用路径选择工具和减去顶层形状命令实现布尔运算，使用渐变叠加命令和添加图层蒙版命令制作面性叠加图标，使用横排文字工具输入文字。图标最终效果图4.3.6课堂案例-制作面性叠加图标设计面性微质感图标层次极强。面性微质感图标示意图4.3.7面性微质感使用矩形工具、圆角矩形工具、椭圆工具、钢笔工具、路径选择工具和减去顶层形状命令绘制基础图形，使用变换-透视命令变换图形，使用图层样式命令中的渐变叠加命令、投影命令和内发光命令添加图层样式，实现面性微质感图标。图标效果图4.3.8课堂案例-制作面性微质感图标使用属性面板中的不透明度选项，实现面性透明度变化图标。贝壳找房App4.4课堂练习-制作面性透明度变化图标使用椭圆工具、圆角矩形工具、多边形工具、钢笔工具绘制图形，使用图层蒙版实现面性渐变图标。途牛国庆节App4.5课后习题-制作面性渐变图标图标设计与制作第5章线面图标设计本章介绍：线面图标作为扁平化图标中的一种，具有趣味俏皮的特点，同时伴随着扁平化设计的发展，线面图标也演变出了更多设计风格，需要UI设计师们进行系统的学习和了解。本章对线面图标的基础知识、基础设计以及创意设计进行系统讲解。通过本章的学习，读者可以对面性图标有一个全面深入的认识，并快速掌握绘制常用线面图标的规范和方法。掌握线面图标的基础知识掌握线面图标的基础设计掌握线面图标的创意设计学习目标线面图标是线性图标和面性图标的结合。线面图标由于兼具线性和面性两种图标的优势，所以具有生动趣味、俏皮可爱的特点。通过对线面比例的不同把控，线面图标能够呈现出不同的视觉感知。但线面图标由于自身特点，会有一定的局限性，并不能适用大部分产品。线面图标的使用场景比较独特，常用于趣味类产品、弹窗、空页面、引导页。5.1线面图标的基础知识线面图标示意图1.填充位置线面图标中，面的位置通常会出现4种情况，即面在线内部、面与线错位、面与线有交集拼接、面与线无交集拼接。5.2线面图标的基础设计面的位置示意图2.填充数量进行线面图标的内部填充时，颜色可以分别按照小比例30%、大比例80%、全比例100%的填充量进行填充。5.2线面图标的基础设计不同比例的图标填充示意图3.填充形状进行线面图标错位填充时，可以按照图标本身的形状或圆形、矩形、圆角矩形等固定形状进行填充。5.2线面图标的基础设计图标形状固定形状内部填充课堂案例-扁平插画图标制作错位填充课堂案例-制作线面错位填充图标线面拼接课堂案例-阴阳填充图标制作5.3线面图标的创意设计1.小比例填充线面小比例填充图标小巧有趣。在制作时，可以根据不同的设计方式做出透明度、邻近色以及黑白+品牌色的变化。5.3.1内部填充线面小比例填充图标示意图2.大比例填充线面大比例填充图标饱满有趣。在制作时，可以根据内部填充颜色的位置，做出内部图形和内错高光的效果变化。5.3.1内部填充线面大比例填充图标示意图3.全比例填充线面全部填充图标醒目有趣。在制作时，可以实现多种丰富美观的效果。其中邻近色扁平插画、对比色扁平插画、渐变色扁平插画和MBE插画最为常用。5.3.1内部填充邻近色扁平插画对比色扁平插画使用椭圆工具和直线段工具绘制图形，使用剪刀工具剪切路径，使用描边命令设置描边选项，使用渐变工具实现扁平插画图标制作。5.3.2课堂案例-扁平插画图标制作图标最终效果图错位填充线面图标独特有趣。在制作时，可以根据错位填充的形状形成固定形状错位填充和图标形状错位填充的变化。5.3.3错位填充线面错位填充图标示意图使用矩形工具、圆角矩形工具、椭圆工具和直线段工具绘制图标，使用剪刀工具剪切路径，使用描边命令设置描边选项，使用路径查找器命令实现制作线面错位填充图标。5.3.4课堂案例-制作线面错位填充图标面性多色图标示意图线面拼接图标个性有趣。在制作时，可以根据拼接的位置形成交集拼接和分离拼接的变化。线面拼接图标示意图5.3.5线面拼接使用椭圆工具和直线段工具绘制图形，使用剪刀工具剪切路径，使用描边命令设置描边选项，使用渐变工具实现阴阳填充图标制作。图标最终效果图5.3.6课堂案例-阴阳填充图标制作使用圆角矩形工具、椭圆工具、钢笔工具和直线段工具绘制图形，使用剪刀工具剪切路径，使用路径查找器实现布尔运算，使用描边命令设置描边选项，使用渐变工具实现线面双色图标。微医App5.4课堂练习-线面双色图标制作使用圆角矩形工具、椭圆工具、钢笔工具和直线段工具绘制图形，使用剪刀工具剪切路径，使用路径查找器实现布尔运算，使用描边命令设置描边选项，实现MBE线面图标制作。MBE线面风格5.5课后习题-MBE线面图标制作图标设计与制作第6章2.5D图标设计本章介绍：2.5D图标作为扁平化图标中的一种，具有趣味层次的特点，由于其形式新颖独特，因此这种风格在近年来被设计师进行了广泛的学习与使用。本章对2.5D图标的基础知识、基础设计以及创意设计进行系统讲解。通过本章的学习，读者可以对2.5D图标有一个全面深入的认识，并快速掌握绘制常用2.5D图标的规范和方法。掌握2.5D图标的基础知识掌握2.5D图标的基础设计掌握2.5D图标的创意设计学习目标2.5D图标是由物体的正面、光面和暗面三面组成，模拟3D效果，如图6-1所示。该图标介于3D和2D之间，具有趣味真实、层次丰富的特点。同时由于2.5D图标创作，要求设计师不仅要熟练操作软件，更要掌握素描基础和颜色搭配，因此需要有一定的设计能力才能完全掌握该图标的设计制作。6.12.5D图标的基础知识2.5D图标示意图1.空间结构绘制网格能够更好的把握2.5D图标的空间结构，令图标各个元素的路径和锚点都落在网格的锚点和路径上。同时运用网格，便于规范图标立体效果的一笔笔勾画，常用于制作如冰淇淋等非常规形态的立体效果。6.22.5D图标的基础设计网格绘制的步骤图2.确定光源加入光源感可以让图标更加立体。加入光源后，需要区分图标的明暗面，并且要保证光源的方向和强弱关系是一致的。6.22.5D图标的基础设计投影关系示意图3.零件搭建一个2.5D图标通常会由多个零件组合而成，如果每一个零件都让设计师一笔笔勾画，会大大降低工作效率。因此我们需要借助软件功能，快速实现零件的制作，提高效率。6.22.5D图标的基础设计3D功能实现立体效果2.5D描边变化2.5D色彩变化2.5D不透明度课堂案例-制作2.5D图标6.32.5D图标的创意设计2.5D描边变化图标简洁理性。6.3.12.5D描边变化2.5D描边变化图标示意图2.5D色彩变化图标醒目丰富。6.3.22.5D色彩变化2.5D色彩变化图标示意图2.5D不透明度图标层次明确。6.3.32.5D不透明度2.5D不透明度图标示意图使用直线段工具和旋转命令绘制参考线网格，使用绘图工具、镜像工具、渐变工具、路径查找器命令、变换命令以及3D命令制作2.5D图标，使用文字工具添加文字。6.3.4课堂案例-制作2.5D图标图标最终效果图使用圆角矩形工具、椭圆工具、钢笔工具和直接选择工具绘制图形，使用路径查找器命令实现布尔运算，使用3D命令制作2.5D图标。图标最终效果图6.4课堂练习-制作2.5D图标使用圆角矩形工具、椭圆工具、钢笔工具和直接选择工具绘制图形，使用路径查找器命令实现布尔运算，使用3D命令制作2.5D图标。图标最终效果图6.5课后习题-制作2.5D图标图标设计与制作第7章图标项目设计本章介绍：学习图标设计，不是为了单纯的画一组图标，而是要让图标可以应用到真实的项目中。因此，设计师需要系统学习图标应用到项目中的知识点，这样才会发挥好图标的作用。本章对导航栏及其图标设计、标签栏及其图标设计、金刚区及其图标设计以及应用图标进行系统讲解。通过本章的学习，读者可以对图标项目设计有一个基本的认识，有助于高效便利地进行完整的图标设计工作。掌握认识导航栏及其图标掌握认识标签栏及其图标掌握认识金刚区及其图标掌握认识应用图标学习目标导航栏的概念导航栏的类型导航栏的规范课堂案例-制作电商类导航栏图标7.1认识导航栏及其图标导航栏（NavigationBar，Navbar），位于App顶部，状态栏下方，提供了位置指示及功能操作。Android中，由于使用的是MaterialDesign设计语言，因此将iOS中的导航栏称之为顶部应用栏（TopAppBar）。7.1.1导航栏的概念iOS导航栏Android顶部应用栏1.常规导航栏·标题导航栏：标题导航栏是常规导航栏中最基础的一种，主要由标题和操作图标组成。这类导航栏常用于二级详情界面或导航简单的一级界面。7.1.2导航栏的类型造作新家App，一级界面标题导航栏·搜索框导航栏：搜索框导航栏是常规导航栏中专门用于搜索功能的导航栏。在标题导航栏的基础之上，增加搜索框，去除导航标题，这类导航栏常用于新闻资讯、交流社区以及娱乐影音等需要进行高频检索的App首页。7.1.2导航栏的类型网易新闻App，搜索框导航栏·Tab/分段控件导航栏：Tab和分段控件导航栏都是常规导航栏中有多个选项的导航栏。区别在于分段控件导航栏一般有2~5个可选项，且不能左右滑动，常用于内容较严肃的新闻和理财等类型App；而Tab导航栏的可选项可以扩展很多，并且可以左右滑动切换，常用于内容较活泼的社交和娱乐等类型App。7.1.2导航栏的类型产品经理App，分段控件导航栏2.通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中。7.1.2导航栏的类型天天基金App，通栏导航栏小米有品App，通栏导航栏3.大标题导航栏大标题导航栏是导航栏中将标题进行放大的导航栏。这类导航栏常用于定位高端、文艺清新的界面中，可以帮助减少视觉噪音，让内容更加突出。但这类导航栏不适用于功能性较强的界面中。7.1.2导航栏的类型壹钱包App，大标题导航栏1.标题导航栏（1）标题导航栏尺寸·iOS标题导航栏宽度：375pt，高度：44pt。·Android标题导航栏宽度360dp，高度56dp。（2）标题导航栏文字·标题文字尺寸：17～18pt。·操作注释尺寸：16pt。·重要提示：文字层级字号对比>2pt（3）标题导航栏图标·图标设计尺寸：24pt。7.1.3导航栏的规范2.大标题导航栏（1）大标题导航栏尺寸·iOS标题导航栏宽度：375pt，高度：96pt。·Android标题导航栏宽度360dp，高度128dp。（2）大标题导航栏文字·标题文字尺寸：34pt。·操作注释尺寸：32pt。（3）大标题导航栏图标·图标设计尺寸：24pt。7.1.3导航栏的规范3.搜索框导航栏（1）搜索框导航栏文字·搜索文字尺寸：14pt。·图标文字尺寸：9pt。（2）搜索框导航栏图标·图标设计尺寸：24pt、20pt、16pt。·重要提示：图标设计的尺寸规律为4或8的倍数。（3）搜索框导航栏间距·整体设计分布：内部间距建议为8pt，外部间距建议为16pt。·重要提示：间距分布的远足应遵循五分原则和等分原则。7.1.3导航栏的规范使用矩形工具和直线段工具绘制图形，使用剪刀工具剪切路径，使用描边命令设置描边选项，使用路径查找器命令实现制作电商类导航栏图标。7.1.4课堂案例-制作电商类导航栏图标图标最终效果图标签栏的概念标签栏的类型标签栏的规范课堂案例-制作旅游类标签栏图标7.2认识标签栏及其图标标签栏（tab栏），位于App的底部，提供了位置指示及页面切换的作用。Android中，由于使用的是MaterialDesign设计语言，因此将iOS中的标签栏称之为底部应用栏（BottomAppBar）。7.2.1标签栏的概念iOS标签栏Android底部应用栏1.背景样式·白色或浅灰：白色或浅灰背景样式的标签栏，区分明显，最为常用。7.2.2标签栏的类型虎嗅App标签栏·黑色或深灰黑色或深灰背景样式的标签栏，适用于短视频、工具类等高级娱乐型App。7.2.2标签栏的类型抖音App标签栏2.展示方式·图标标签栏以纯图标的方式进行展示，普遍识别性较弱。这类展示方式适用于小众文艺类App。7.2.2标签栏的类型字里行间App标签栏·文字标签栏以纯文字的方式进行展示，样式比较单一。这类展示方式适用于短视频类型的App。7.2.2标签栏的类型小红书App标签栏·图标+文字标签栏以图标+文字的方式进行展示，拥有较高的识别度，是大多数App采用的展示方式。7.2.2标签栏的类型微信读书App标签栏·图标+文字+舵式标签栏以图标+文字+舵式的方式进行展示，都会具有发布需求。这类展示方式适用于社区型App。7.2.2标签栏的类型58同城App标签栏1.标签栏的尺寸·iOS标签栏宽度：375pt，高度：49pt。·Android标签栏宽度：360dp，高度：56dp。·通用的图标设计尺寸：24pt。·FAB（浮动操作按钮）设计尺寸：56pt。·图标下文字设计尺寸：10pt。7.2.3标签栏的规范2.标签栏的布局标签栏图标数量通常在3～5个。标签栏的布局方法共有屏幕等分、边距删减等分以及图标左右间距相等这三种。屏幕等分的方式最常用，其具体的布局方法是，列宽=屏幕宽度/标签个数。边距删减等分的方式是对屏幕等分方式的一种补充，其具体的布局方法是，减去标签栏中左右两边间距，再将标签进行等分。图标左右间距相等的方式并不常用，其适用于标签数量为3个的时候。7.2.3标签栏的规范3.标签栏的图标·标签栏图标尺寸：通用的图标设计尺寸为24pt。不同形状的图标会产生不同的视觉重量，为保持视觉平衡，不同形状的图标设计尺寸可参考下图。7.2.3标签栏的规范方形：宽高18px圆形:直径20px垂直矩形：高度20px,宽度16px水平矩形：高度16px,宽度20px·图标的切换状态：线性（未选中状态）-面性（选中状态），这种方式下的切换状态反馈最强烈，最常用。7.2.3标签栏的规范支付宝App·图标的角标设计角标的概念：角标（badge），又称徽标，通常指出现在图标右上角的红色图形，表示有新内容或者待处理信息。7.2.3标签栏的规范网易严选App标签栏角标的色彩：绝大多数的角标用色都是红色，部分品牌色为暖色系色彩的App会使用其品牌色作为角标色彩。7.2.3标签栏的规范腾讯视频App标签栏角标的尺寸在角标的尺寸中，小红点建议为6～8pt，红色圆形建议为12～16pt（圆角矩形、类圆角矩形的高度），小红点与红色圆形大小关系通常为1:2。7.2.3标签栏的规范角标尺寸示意图角标的字体角标的字体应该为非衬线，可以和系统字体进行匹配。当底层的图形为圆形时，字体与底层的比例关系接近1：2。当底层的图形为圆角矩形时，字体与圆角矩形的高度比例同样接近1:2；字体距上下侧距离：字体距左右侧距离=1:1.2。7.2.3标签栏的规范角标的层级角标出现在面性图标，通常加入白色描边。7.2.3标签栏的规范京东App标签栏使用矩形工具、钢笔工具和直接选择工具绘制图形，使用描边命令设置描边选项，使用透明度命令实现旅游类标签栏图标。7.2.4课堂案例-制作旅游类标签栏图标图标最终效果图金刚区的概念金刚区的类型金刚区的规范课堂案例-制作旅游类金刚区图标7.3认识金刚区及其图标金刚区又称为快速功能入口，通常是位于搜索框、banner之下，是页面的核心功能区域，表现形式为多行排列的宫格区图标。具有趣味展示以及业务导流的作用。7.3.1金刚区的概念支付宝App1.图标+文字设计形式以图标+文字类型为主的金刚区，有着设计细节丰富，富有创意等优势，但同时容易出现对文字信息依赖性较强的问题。7.3.2金刚区的类型贝壳App金刚区2.图片+文字设计形式以图片+文字类型为主的金刚区，有着主题明确，具有感染力等优势，但同时容易产生产品缺乏设计感等现象。7.3.2金刚区的类型盒马鲜生App金刚区3.图标+图片+文字设计形式以图标+图片+文字类型为主的金刚区，有着运营目的强等优势，但同时容易导致产品视觉不统一等问题。7.3.2金刚区的类型网易考拉海购App金刚区1.金刚区的尺寸7.3.3金刚区的规范金刚区尺寸示意图2.金刚区的布局·数量金刚区图标的数量根据米勒法则的7±2规律而来，通常在一行中不超过5个图标。7.3.3金刚区的规范酷狗音乐App·方法金刚区的布局方法共有边距删减法和占位等分法这两种。边距删减法具体的布局方法是，减去左右两边间距，再进行等分。这种布局方式适用于有一行5个图标或带有底板图标的金刚区。占位等分法具体的布局方法是，列宽=屏幕宽度/标签个数。这种布局方式适用于一行4个图标或无底板图标的金刚区。7.3.3金刚区的规范4.金刚区的图标·金刚区图标尺寸主图标底板：40～48pt。内环图标：是底板的0.618（黄金分割比）。副图标：底板的0.618或0.382（黄金风格比）。7.3.3金刚区的规范金刚区图标尺寸示意图·金刚区图标风格无底板面性图标：无底板的金刚区面性图标，视觉层级感针对有底板金刚区面性图标稍弱。这类图标常用于主金刚区及少数副金刚区。7.3.3金刚区的规范贝壳找房App副金刚区有底板圆形底板+面性图标：圆形底板+面性组合的金刚区图标，有着柔和简洁的特点。这类图标最为常用。7.3.3金刚区的规范壹钱包App金刚区·金刚区图标层级金刚区图标层级通常按照图标的基本属性来进行层级划分，即面性图标>线性图标，粗线图标>细线图标，深色图标>浅色图标，彩色图标>灰色图标。7.3.3金刚区的规范金刚区图标层级划分示意图·金刚区图标配色不同的色彩因为其固有的特点，会产生不同的感受。如红色带给我们热情兴奋的感受，而绿色则带给我们安全舒缓的感受。因此进行图标配色时要考虑色彩情绪，需要让色彩表达的含义和该图标表达的含义一致。7.3.3金刚区的规范色彩情绪示意图使用圆角矩形工具、椭圆工具、直接选择工具和路径选择工具绘制图形，使用快捷键变换图形，使用渐变叠加命令添加图层样式，实现旅游类金刚区图标。7.3.4课堂案例-制作旅游类金刚区图标图标最终效果图应用图标的概念应用图标的类型应用图标的规范课堂案例-制作娱乐类应用图标7.4认识应用图标应用图标即产品图标，是体现产品品牌调性和特性的图标。7.4.1应用图标的概念MaterialDesign应用图标示意图1.文字形式文字形式的应用图标，即运用中文、英文、数字以及诸如“¥”等特殊符号为核心设计要素的应用图标。这类应用图标有着表达信息直白明确，不容易被曲解含义的优势特点。7.4.2应用图标的类型文字形式的应用图标2.图形形式图形形式的应用图标，即通过线性、动物、卡通以及剪影等设计方法进行图形创意而形成的应用图标。这类应用图标有着生动形象，加深产品印象的优势特点。7.4.2应用图标的类型图形形式的应用图标3.组合形式组合形式的应用图标，即通过图形和文字进行自由组合而成的应用图标。这类应用图标有着设计丰富的特点，不过设计师需要注意把握好文字和图形之间的平衡感。7.4.2应用图标的类型组合形式的应用图标4.游戏角色游戏角色的应用图标，即将游戏中的角色直接进行使用的应用图标。这类应用图标有着通俗直观，丰富鲜艳的特点。7.4.2应用图标的类型游戏角色的应用图标应用图标的设计尺寸可以采用1024px，参数在iOS和Android中都适用并根据iOS官方模版进行规范。7.4.3应用图标的规范iOS官方模版示意图使用圆角矩形工具、椭圆工具、钢笔工具和直线段工具绘制图形，使用路径查找器实现布尔运算，使用描边命令设置描边选项，实现美食类导航栏图标。7.5课堂练习-制作美食类导航栏图标图标原型图使用椭圆工具、矩形工具和圆角矩形工具绘制图形，使用快捷键变换图形，使用路径选择工具和减去顶层形状命令实现布尔运算，使用渐变叠加命令实现美食类标签栏图标，使用横排文字工具输入文字。7.6课后习题-制作美食类标签栏图标图标原型效果图图标设计与制作第8章图标验证输出本章介绍：清晰有效的图标设计方案不仅是UI设计师重要的输出物之一，更加直接影响到工程师对图标设计效果的还原度。本章对图标验证方法、图标切图格式、PNG图标切图、SVG图标切图以及图标命名规范等基础知识及相关规则进行系统讲解与演练。通过本章的学习，读者可以对图标验证输出有一个基本的认识，并快速掌握相关图标的验证以及输出。掌握图标验证方法掌握图标切图格式