UI图标设计制作教程（Figma UI3）课件全套 第1-6单元-图标制作入门 -风格化图标

UI图标图形设计FIGMAUI3版单元1图标制作入门李炳琰教师xx学校xx学院xxx专业概览Overview单元1图标制作入门1.1

图标的基础知识1.2图标设计的原则1.3图标设计软件图标常被用作指代某个功能，它可以让观看者快速识别其所指示的功能。相较于文字形式的信息指示，图标以更加简洁的图形，增大了信息识别和传递的效率。图标是一种几何化的、简约的图形，如图所示。在手机软件界面中，图标非常常见；在日常生活中，图标也随处可见，例如道路上的交通安全标识、卫生间的男女标识。这些图标不仅直接、简洁，而且容易记忆和识别，所以常用于指示信息。在UI领域中，图标也被称作“ICON”1.1.1

什么是图标单元1图标制作入门1.1

图标的基础知识左侧使用了图标代表密码的可见性和选择日期的按钮，相同的含义，则需要使用4或5个文字才能表达出来，这样增加了用户认知成本。从这个案例可以看出，图标在传达含义上的简洁和高效。在UI界面中，图标已经形成了一种界面中的新型“文字”，图标图形已经能够代替许多功能信息，并且比直接使用文字更加简洁。图标按钮与文字按钮的对比1.1.1

什么是图标1.1

图标的基础知识左侧使用了向下和向上两个图标，代表菜单的展开和收回，图标在点击后上下翻转，同时菜单出现或隐藏，这种操作方式让用户很容易理解，几乎没有学习成本。如果替换成图中右侧的文字，这种直观性就消失了。图标的出现不仅让信息的传递简洁而高效，有时也让信息的指示更加直观。适时地使用图标，能够达到文字所没有的直观和高效。图标按钮与文字按钮的对比1.1.1

什么是图标1.1

图标的基础知识左侧未使用图标，而右侧使用了图标。图标的使用丰富了UI界面的视觉感受。除指代信息和功能以外，图标有时候也用于装饰。将与文字含义接近的图标与文字组合，一起形成界面中表述的内容，这样比纯文字的内容更有视觉吸引力。图标的装饰作用1.1.1

什么是图标1.1

图标的基础知识图象字符是基础的图标图形，像文字一样，一个字符是一套图标集的基本单元；装饰图标（Icon）则是带有装饰的图标图形，可以用来代表应用程序、功能、文件等概念，也可以用来装饰。1.

从功能上划分从功能上可以将图标图形划分：图象字符（Glyph）装饰图标（Icon）1.1.2图标的分类单元1图标制作入门1.1

图标的基础知识图象字符（Glyph）：试着找一找左图中的10个图象字符吧。单元1图标制作入门1.1

图标的基础知识装饰图标（Icon）试着找一找图中的6个图标吧。单元1图标制作入门1.1

图标的基础知识小贴士单元1图标制作入门1.1

图标的基础知识2图标与插图的区分图标和插图在设计上有着明确的区分，图标注重简洁性和功能性，而插图则更侧重于细节和艺术表现。1图标与文字的配合：图标和图像字符可以独立使用，也可以与文字结合。结合文字使用时，图标的含义更加清晰。若单独使用，应选择用户熟悉的图标以避免混淆。2.

从图形上划分分为三种主要类型：线性图标面性图标线面结合图标1.1.2图标的分类单元1图标制作入门1.1

图标的基础知识线性图标：线性图标由线条组成，在界面设计中特别常见。线性图标的线条粗细对于图标的识别度和美观度至关重要。在界面设计中，1.5像素粗细的线条是线性图标的标准选择，因其与常规字体的粗细相匹配，使得图标与文字组合时既协调又美观。单元1图标制作入门1.1

图标的基础知识面性图标：面性图标由色块组成，面性图标的色块一般由多个图形色块加减得到。面性图标因其较大的视觉面积和重量感，即使在图标尺寸较小的情况下也能保持相对清晰。单元1图标制作入门1.1

图标的基础知识线面结合图标：线面结合图标也可称为混合图标，结合和了填充色块和描边线条的特点；可以是整个图形同时使用填充和描边，也可以是部分图形使用填充而部分图形使用描边。线面结合图标通过线条和色块不同方式的结合，可以在保持视觉简洁的同时，增加图标的层次感和识别度，可以制作出卡通、复古、现代等风格的图标。单元1图标制作入门1.1

图标的基础知识概览Overview单元1图标制作入门1.1

图标的基础知识1.2图标设计的原则1.3图标设计软件图中这些图标在UI界面中已经有了约定俗成的含义，所以即使单独使用也不会产生歧义。对于那些用户不熟悉或未广泛认知的图标，建议配合文字使用，以确保用户能够正确理解其含义。随着时间的推移，某些图标已经形成了固定用法，因此即使没有文字说明，这些图标也能准确代表特定功能。1.2.1约定俗成的图形单元1图标制作入门1.2图标设计的原则主页图标普遍被认可为房子形状，我们可以在这个基础上，通过调整图标线条粗细、圆角、线条连接、繁简度等细节，创造出用户识别的且有一定风格感的图标。这样既能保持图标的普遍认知，又能加入不同的设计风格。总而言之，图标具有良好的识别性有助于提高界面设计的易用性，也是图标设计需要考虑的首要因素。在用户界面设计中，对于那些已经深入人心、具有“约定俗成”含义的图标，不建议为追求创新而大幅度改变其图形。最好的做法是沿用这些图标的原有图形，或者在不改变其基本识别性的前提下，对细节进行适度的调整。不同风格的主页图标单元1图标制作入门1.2图标设计的原则图中尽管每个图标的高度相同，但由于形状不同使它们的面积并不相同，从而在视觉上产生了大小不一的效果。在设计图标时，视觉大小平衡是一个重要的考量因素，它影响用户对图标的感知和整体界面的协调性。我们的目标是确保一套图标中的每个图标在视觉上大小一致，而不是简单地使它们的宽度或高度相同。1.2.2均衡的视觉大小单元1图标制作入门1.2图标设计的原则面积是衡量图形元素视觉“重量”的关键因素。以正方形和圆形为例，当它们的宽度和高度相同时，正方形在视觉上看起来比圆形更大。这是因为在相同的宽高条件下，正方形的面积大于圆形，因此对视觉的影响也更大。所以为了使不同形状的图形在视觉上具有相同的大小，我们应该基于它们的面积而非单纯的宽高来调整。高度相同与视觉大小相同确保图标视觉大小一致的正确方法是让它们的面积接近。单元1图标制作入门1.2图标设计的原则根据这个原理，我们把不同图形叠加，比较它们在同一个宽高的外框下面积的大小，也就是它们视觉上的大小。相同外框下的面积大小比较正方形>圆形>三角形=菱形。单元1图标制作入门1.2图标设计的原则对于一套图标，尤其是当图标数量非常多的时候，仅凭肉眼调整图形以保证图标视觉大小均衡是不够准确的。因此，引入图标模板是必要的，它可以帮助统一图标的视觉大小。为了保证一套图标在视觉上大小一致，需要根据每个图标的具体形状特点来调整其宽度和高度。对于视觉重量较轻的图形，如三角形，使用较大的尺寸；而对于视觉重量较重的图形，如正方形，则使用较小的尺寸。相同外框下的面积大小比较单元1图标制作入门1.2图标设计的原则在设计图标时，除了形状本身对视觉大小的影响，图形的镂空程度也对面性图标的视觉重量有显著影响，因为镂空区域会直接减少视觉面积。镂空减少了面积第一个图标的镂空较少。第二个图标中间的镂空较多，所以增加了其整体的宽高以平衡视觉重量。第三个图标的基础正方形大小与第一个图形相同，上方增加了两个小矩形，一定程度上也缓解了中间镂空导致的视觉重量的降低。第四个图标由一个正方形和一个矩形组成，且镂空较小，所以它在设计时，正方形部分的边长要小于第一个图标。单元1图标制作入门1.2图标设计的原则图中左侧图标三角形与圆形水平居中对齐，二者左右内间距均为7像素，此时三角形看起来偏左；右侧图标中三角形右移1像素后，其重心与圆形重心重合，图标视觉上平衡了，此时三角形距左8像素、距右6像素。图标设计需关注视觉重心的平衡。视觉重心是在视觉感受上图形重量平衡的点，有时和图形的物理中心不重合，不同图形形状视觉重心可能不同。视觉重心可以被理解为图形重量分布的平衡点。想象一下，如果你将一张三角形的纸片放在指尖上，使其保持平衡，那么纸片平衡的位置就是这个三角形的重心，也是三角形的视觉重心1.2.3平衡的视觉重心单元1图标制作入门1.2图标设计的原则圆形的视觉重心在圆心，三角形视觉上左重右轻，重心偏左。三角形的视觉重心不同单元1图标制作入门1.2图标设计的原则图中上方的三个图标虽然在物理中心上与外框中心对齐，但由于它们都包含三角形元素，这导致它们在视觉上出现了偏移：第一个图标看起来偏下，第二个图标偏左，第三个图标也偏下。图中下方三个图标为调整后的结果：第一个图标向上移动，第二个图标向右移动，第三个图标也向上移动。通过这些调整，图标在模板中的位置得到了优化，使得它们在视觉上居中，考虑图标与图标模版的视觉重心重合单元1图标制作入门1.2图标设计的原则平衡视觉重心的本质是在物理中心的基础上，将图形向视觉上“较轻”的一侧微移，以补充该区域的视觉重量。以三角形为例，其“尖角”部分在视觉上显得“较轻”，因此需向尖角方向微移，以达到视觉平衡。第一个图标的上半部分在视觉上“较重”，因此它在图标框中的位置相对偏下；第二个图标的下半部分“较重”，所以它在框中偏上；第三个图标的上半部分“较重”，导致它在框中偏下。平衡视觉重心——复杂组合图形单元1图标制作入门1.2图标设计的原则Figma中创建的三角形的外框比其实际形状稍大，并且在左侧预留了空白区域。这个设计补偿了三角形视觉重量不均匀的分布，使新建的三角形可以直接与其他图形进行水平对齐，而不会引起视觉重心的偏移。三角形与圆形居中对齐后，无需调整位置，就能得到视觉上均衡的播放图标。图形工具考虑了视觉重心的平衡问题单元1图标制作入门1.2图标设计的原则不同字体的字面率在图标设计中，也需要考虑图形在外框中的占比，确保同一套图标中所有图形的占比在视觉上接近，从而保持整体设计的统一性和视觉上的协调性。1.2.4相近的图形占比单元1图标制作入门1.2图标设计的原则与字体设计中的字面率类似，这些图标的图形占比存在差异，大小不一。然而，在同一套图标中，各个图形的占比是相对一致的，使得整套图标在视觉上看起来大小协调，保持了一致性。。任务：对比iconfont中不同图标的占比单元1图标制作入门1.2图标设计的原则一套APP或网站通常需要几十到上百个图标，这些图标分布在界面的各个角落，共同构成用户对界面的视觉印象。因此，保持图标风格的一致性至关重要。以下3点是基本的设计原则:图标的类型图标的细节处理图标的色彩1.2.5一致的图标风格单元1图标制作入门1.2图标设计的原则概览Overview单元1图标制作入门1.1

图标的基础知识1.2图标设计的原则1.3图标设计软件①在浏览器中输入网址：，打开Figma官网。②点击右上角注册按钮③在弹窗中输入邮箱和密码④登录刚才输入的邮箱，找到Figma发送的确认邮件⑤点击邮件中的链接，跳转至Figma网站，注册成功注册账户1.3.1

软件注册与安装单元1图标制作入门1.3图标设计软件网页版：使用Figma的浏览器版本时，需要下载并安装字体安装器。安装后，要先刷新Figma设计界面，字体安装器才会生效注意浏览器兼容性文件管理界面1.3.2文件管理桌面版软件主页

网页版返回文件管理界面（主页）单元1图标制作入门1.3图标设计软件文件类型选择“设计文件”的格式单元1图标制作入门1.3图标设计软件文件管理逻辑：草稿中的文件，可以邀请他人查看草稿中的文件，但无法邀请他人共同编辑。单元1图标制作入门1.3图标设计软件1.3.3

设计界面与视图控制左侧边栏：包含“图层”和“组件”两个标签。其中“图层”内有页面和图层列表。当前页面内的，画布中的所有元素都有对应的图层，不同页面有不同的画布。画布区域：

是设计工作的主要区域，用户使用鼠标和快捷键编辑画布内容。右侧边栏：

修改选中元素的属性，例如位置、尺寸、填充和描边等。右上角展示正在查看或编辑文件的用户，同时设置了分享按钮。单元1图标制作入门1.3图标设计软件1.3.3

设计界面与视图控制缩放视图：将鼠标指针放置在画布区域，按住

Ctrl

键的同时滚动鼠标滚轮。拖动视图：将鼠标指针放置在画布区域，按住空格键，鼠标指针临时变成“抓手”工具，此时可以拖动视图。松开空格键后，鼠标指针会恢复为原来的工具。我们在设计界面进行图标绘制时，需要不断地缩放或移动视图。当前视图缩放比例显示在右上角（“分享”按钮下方），默认为“100%”，点击可以修改这个比例。在频繁调整视图时，我们常临时调用快捷键调整视图，以免打断正在进行的操作，以下是两个视图控制的快捷键：单元1图标制作入门1.3图标设计软件1.3.4本书快捷键说明按住和按下：“按住”表示按住不放，“按下”则表示只需按下一次即可。Ctrl和Cmd：本书中的快捷键为Windows系统对应的快捷键。如果您使用的是MacOS系统，请将书中的

Ctrl

键替换为

Cmd键。Alt和Option：本书中的快捷键为Windows系统对应的快捷键。如果您使用的是MacOS系统，请将书中的

Alt

键替换为

Option键。单元1图标制作入门1.3图标设计软件1.3.5

文件共享文件的权限有“可查看”和“可编辑”两种。如果无法选择“可编辑”权限，说明文件不在项目中，将文件移动到项目文件夹中，可启用该状态。权限评论按下快捷键

C或者选择工具栏中的“评论”工具，鼠标指针会切换成评论图标，在画布中任一位置单击，即可在该位置发表评论。按下

Esc键，退出评论功能。单元1图标制作入门1.3图标设计软件1.3.6中文设计软件MasterGo：/即时设计：https://js.designPixso：/三款国产UI设计软件单元1图标制作入门1.3图标设计软件UI图标图形设计FIGMAUI3版单元2线性图标—锚点操作xx学校xx学院xxx专业李炳琰教师概览Overview2.1基础图形2.2基础图形的变形——增加并移动锚点2.3制作断线-增加并删除锚点2.4单元练习单元2线性图标—锚点操作单元2线性图标—锚点操作2.1.1基础图形工具图形工具插入图形：选择某个图形工具后，拖曳鼠标，可插入与拖曳区域大小相同的图形。除直线外，其他图形还可以通过在空白处单击鼠标进行插入。2.1基础图形2.1.1基础图形工具修改图形大小：选中图形后，图形周围出现蓝色选框，蓝色选框的四角显示正方形的控制点。拖曳图形的蓝色边线或者四角的控制点，可修改图形的宽高。如果在拖曳的同时，按住

Shift

键，可等比例缩放图形。快捷键：用快捷键可以方便地调用和切换图形工具。矩形工具的快捷键是

R，是“Rectangle”的首字母。椭圆工具的快捷键是

O，是“Oval”的首字母。2.1基础图形2.1.1基础图形工具描边设置：描边的属性主要包括颜色、对齐方式和线条粗细，在线条粗细的输入框中输入数值或在其图标上拖拽鼠标，即可修改线条的粗细2.1基础图形2.1.1基础图形工具描边对齐方式2.1基础图形2.1.1基础图形工具选择居中描边：不同的描边对齐方式会影响图形的视觉大小。在设计图标时，建议尽量统一使用居中描边，以保证图标的大小一致性和样式的适应性。单元2线性图标—锚点操作2.1.2案例练习—绘制侧边栏图标侧边栏图标观察：仔细观察发现，图标可以看作由左右两个宽度不同、高度相同的矩形组成，也可以看作由一个矩形和一条竖线组成。这里讲解第一种思路的绘制方法。目标：学习绘制矩形图形，熟悉基础图形工具。单元2线性图标—锚点操作2.1.2案例练习—绘制侧边栏图标线段的三种连接不同描边对齐方式下的连接效果单元2线性图标—锚点操作2.1.3

案例练习—绘制搜索图标搜索图标观察：仔细观察后发现，图标由一个圆形和一条短线组成，整体是倾斜状态。目标：学习绘制倾斜图标。对于倾斜图标的绘制，要先将所有图形按垂直方向绘制好，再将所有图形编组后旋转。这样保证多个图形的对齐和对称。单元2线性图标—锚点操作2.1.3

案例练习—绘制搜索图标直线和钢笔工具绘制出的线段对比线段对齐问题单元2线性图标—锚点操作2.1.4

案例练习—绘制魔法棒图标魔法棒图标观察：仔细观察发现，图标由一个五角星和一条短线组成，五角星和短线没有相接，图标整体向左倾斜。目标：学习使用“星形（Star）”工具的方法，进一步熟悉软件。单元2线性图标—锚点操作2.1.4

案例练习—绘制魔法棒图标星形的控制点星形角度比率变化概览Overview2.1基础图形2.2基础图形的变形——增加并移动锚点2.3制作断线-增加并删除锚点2.4单元练习单元1图标制作入门单元2线性图标—锚点操作2.2.1锚点操作图形不同状态图形有三种不同的状态：未选中、选中和编辑。通过有无选中框和选中框的样式，可以区分这三种状态。选中图形时，选中框显示为蓝色路径线，图形四角显示为正方形控制点。编辑图形路径时，选中框为灰色路径线，图形四角显示出圆形的锚点控制点。单元2线性图标—锚点操作2.2.1锚点操作进入编辑模式三种方式可以进入编辑模式：①直接“双击”图形②选中图形后按下

Enter键③选中图形后，单击顶部工具栏中间的“编辑对象（Editobject）”图标如果图形仅含有较细的描边，不容易双击，或者希望同时选中多个图形并一同进入编辑模式，推荐使用第二种方法——选中图形后按下

Enter键。单元2线性图标—锚点操作2.2.1锚点操作编辑模式下的工具栏按下

ESC键或在空白处双击，可退出编辑模式。单元2线性图标—锚点操作2.2.1锚点操作编辑模式下，使用“移动工具”可以选择和取消锚点，操作如下：①单击鼠标，单选锚点，选中后的锚点由空心圆变为蓝色的实心圆。②单击鼠标时按住shift键，多选锚点。③按住鼠标拖曳，批量多选锚点，拖曳区域为蓝色半透明矩形。④按下ESC键，或鼠标在空白处单击，取消选择锚点。选择锚点：单元2线性图标—锚点操作2.2.1锚点操作编辑模式下，选中锚点后，移动锚点的方式如下：①鼠标拖动：选择“移动工具”，拖曳在选中的锚点上，移动被选中的单个或多个锚点。②按键盘的方向键：按一次键盘的↑键，锚点向上移动1像素。按住

shift

键的同时，按一次键盘的↑键，锚点向上移动10像素。其他方向键同理。③属性设置：在“X”和“Y”中输入具体的数值或公式，可以精确地移动锚点。例如想让多个锚点同时向左和向下移动15像素，可在“Y”输入框内添加“+15“，在“X”输入框内添加“-15”，按回车后完成移动。移动锚点：单元2线性图标—锚点操作2.2.1锚点操作“X”坐标轴向右：“X”值增加，对象向右移动，“X”值减少，对象向左移动。“Y”坐标轴向下：“Y”值增加，对象向下移动，“Y”值减少，对象向上移动。坐标轴方向：单元2线性图标—锚点操作2.2.1锚点操作在编辑模式下，使用“移动”或“钢笔”工具，将鼠标悬停在路径线上，鼠标指针会变为，提示可新增锚点的位置，单击可新增锚点。不同之处：“移动”工具只能在软件提示的两个锚点之间的中点位置新增锚点，而“钢笔”工具可以在路径线上任意位置新增锚点。新增锚点：单元2线性图标—锚点操作2.2.1锚点操作在编辑模式下，使用“钢笔”工具，新增一个锚点后，继续单击新增下一个锚点，锚点之间会生成连接锚点的路径。软件允许连接图形中任意两个锚点，甚至是封闭路径上的锚点。

连接锚点：单元2线性图标—锚点操作2.2.2案例练习——绘制主页图标观察：图标的基础图形是矩形，有四个锚点（蓝色）。在矩形的上边新增一个锚点（红色），并其上移，得到图标外轮廓。绘制一条横线与其组合，得到完整图标。目标：练习增加和移动锚点。单元2线性图标—锚点操作2.2.2案例练习——绘制主页图标为什么要及时退出编辑模式？单元2线性图标—锚点操作2.2.2案例练习——绘制主页图标复制和粘贴图层属性通过快捷键，可以复制“房子”的图形属性，粘贴到“横线”的图形属性中。复制属性：Ctrl+Alt+C粘贴属性：Ctrl+Alt+V单元2线性图标—锚点操作2.2.2案例练习——绘制主页图标以整数居中对齐——奇偶性一致单元2线性图标—锚点操作2.2.2案例练习——绘制主页图标线段与图形的对齐单元2线性图标—锚点操作2.2.3

案例练习——绘制文件夹图标观察：图标的基础图形是矩形，有四个锚点（蓝色）。在矩形的上边新增两个锚点（红色），并将左上边一蓝一红两个锚点同时上移，得到图标外轮廓。绘制一条横线与其组合，得到完整图标。目标：练习增加多个锚点、单独设置锚点转角；智能参考线和查看间距的方法。单元2线性图标—锚点操作2.2.3

案例练习——绘制文件夹图标对齐到像素：在右上角视图调整菜单中，默认勾选，图形的大小和坐标会自动对齐到整数像素。这在设计图标时非常重要，确保图标的图形的精确。在本例中，锚点2位于一条18像素长的线段的1/4位置，因此它的横坐标计算为3200+18*1/4=3204.5像素。输入小数：虽然勾选了“对齐到像素”，软件仍允许用户在坐标值“X”“Y”和宽高“W”“H”的输入框中手动输入小数值，以便处理某些特殊情况。但使用鼠标移动或拖曳图形时，坐标和尺寸又会自动以整数值进行调整。单元2线性图标—锚点操作2.2.3

案例练习——绘制文件夹图标智能参考线单元2线性图标—锚点操作2.2.3

案例练习——绘制文件夹图标住Alt键（Windows系统）或Option键（Mac系统）查看间距单元2线性图标—锚点操作2.2.4

案例练习——绘制文件图标观察：图标的基础图形是矩形，有四个锚点（蓝色）。在矩形的上、左两边各新增一个锚点（红色），并将矩形左上角的锚点（蓝色）向右下移动，移动后的锚点（蓝色）需与新增的两个锚点（红色）水平和垂直对齐，从而形成一个直角三角形。目标：连接封闭图形的任意锚点；理解居中描边的作用。单元2线性图标—锚点操作2.2.4

案例练习——绘制文件图标特殊图形在不同描边对齐方式下的效果单元2线性图标—锚点操作2.2.5案例练习——绘制地图图标观察：图标的基础图形是矩形，有四个锚点（蓝色）。在矩形的上下两边各新增两个锚点（红色），并调整其位置。上下两行锚点分别在水平方向上均匀分布，所以图标中的四条竖线间距相等。锚点两两（一蓝一红）水平对齐，所以图标中的斜线对称或平行。目标：学习水平分布功能单元2线性图标—锚点操作2.2.6

拓展练习——操作锚点绘制图标练习目标：进一步熟练掌握本小节所学的知识，锻炼观察并分析图标锚点的能力，保证图标对称的能力。在绘制时，要注意图形对称。例如1，3，4三个图标，在移动锚点时，要保证两侧锚点移动相等的距离。概览Overview2.1基础图形2.2基础图形的变形——增加并移动锚点2.3制作断线-增加并删除锚点2.4单元练习单元1图标制作入门单元2线性图标—锚点操作2.3制作断线-增加并删除锚点许多线性图标是由多个图形组合而成，其组合方式之一是“截断”某个图形后“嵌入”其他图形，即通过在原本完整的图形上制造开口，并在断口处放置其他图形，从而形成完整图标，单元2线性图标—锚点操作2.3制作断线-增加并删除锚点举例：阿里健康品牌图标库单元2线性图标—锚点操作2.3.1删除锚点断开线段删除锚点①“钢笔工具”：按住

Alt

键，鼠标指针变为，在锚点上单击即可删除该锚点。②“删除/退格键”：单选或多选锚点后，按下

Delete键，删除选中锚点。单元2线性图标—锚点操作2.3.1删除锚点断开线段使用退格键删除锚点钢笔工具删除锚点单元2线性图标—锚点操作2.3.1删除锚点断开线段开口图形的描边对齐方式当原本闭合的图形变为开口图形后，描边的对齐方式选项尽管没变，但本质上都变为了“居中描边”的样式。因此，建议在设计图形时优先选择“居中描边”，这样当图形被修改为开口图形后，其原本的大小不会产生变化。单元2线性图标—锚点操作2.3.1删除锚点断开线段不同描边对齐方式的适应性单元2线性图标—锚点操作2.3.1删除锚点断开线段创建开口的技巧建一个开口共需3个锚点：两个定位开口的锚点（图中红色锚点）和一个开口内任意位置的锚点（图中黄色）。根据图形本身的锚点分布，这三个锚点可以是原图形有的，也可以是自行创建的。红色的定位锚点位于开口的两端。如果路径线是直线，创建开口后，可移动这两个锚点修改开口的大小。黄色的开口内锚点位于两个红色锚点之间，删除这个锚点即可创建开口。该锚点可位于开口之间的任何位置。单元2线性图标—锚点操作2.3.2案例练习——绘制分享图标观察：图标的基础图形是矩形，右上角产生了开口，标记其锚点为蓝色。开口处放置了一个箭头图形，标记其锚点为黄色。目标：开口的制作方法；单独设置圆角。单元2线性图标—锚点操作2.3.3

案例练习——绘制开关图标观察：图标的基础图形是圆形，顶部有开口，开口处有两个新增的蓝色锚点。还有一条竖线，由两个黄色的锚点组成。目标：制作对称的开口圆形。单元2线性图标—锚点操作2.3.3

案例练习——绘制开关图标连续添加锚点的连线效果注意：圆形的开口制作完成后，不能再移动锚点，否则会破坏圆形和弧线。单元2线性图标—锚点操作2.3.4

案例练习——绘制上传图标观察：图标的基础图形是矩形，顶部有两处开口，内部有一个箭头。顶部的开口由7个蓝色的锚点组成，其中矩形右边线的顶端线的形状，该位置有两个锚点。目标：制作开口图形。单元2线性图标—锚点操作2.3.5

拓展练习——打破闭合图形概览Overview2.1基础图形2.2基础图形的变形——增加并移动锚点2.3制作断线-增加并删除锚点2.4单元练习单元1图标制作入门单元综合训练区域填充UI图标图形设计FIGMAUI3版单元3线性图标——绘制曲线xx学校xx学院xxx专业李炳琰教师概览Overview3.1基础图形创建曲线3.2锚点控制曲线3.3胶囊形状的曲线3.4单元练习单元3线性图标——绘制曲线单元3线性图标——绘制曲线3.1.1图形的圆角右图中，左右两侧分别为100×100和200×100两种矩形，当“”圆角半径的数值增加至50后，继续增加圆角数值，图形均不会产生变化。所以对于矩形，圆角半径的数值最大只能增加至短边边长的一半。图形的圆角单元3线性图标——绘制曲线3.1.1图形的圆角选中矩形后，外观选项中，圆角输入框右侧出现独立圆角按钮，用于单独控制矩形四个角的圆角大小。点击按钮，展开四个圆角设置的输入框，分别控制矩形的四个角的圆角大小。要注意的是，修改过锚点的矩形，不再有独立圆角功能。矩形的独立圆角功能单元3线性图标——绘制曲线3.1.1图形的圆角选中图形后，鼠标指针移到图形上时，图形转角处会出现圆角控制点。拖动这些控制点可同时修改图形所有圆角的大小。鼠标指针拖动或停留时，指针旁会显示圆角的数值。圆角控制点单元3线性图标——绘制曲线3.1.1图形的圆角视图缩小到一定程度后，软件将不显示圆角控制点。此时，放大视图即可找到控制点。单元3线性图标——绘制曲线3.1.1图形的圆角进入编辑模式，选中锚点，修改属性栏中的数值，即可调整对应锚点的圆角。退出编辑模式后，图形的圆角属性显示为“Mixed”。但是如果在中重新输入一个数值，图形的所有圆角又会被重新统一为此数值。修改锚点对应的圆角单元3线性图标——绘制曲线3.1.2案例练习——绘制地点图标观察：图标的路径是旋转了45度的正方形（红色线），增加图中三个蓝色锚点的圆角至最大，便可得到主要图形，与加号图形组合，得到该图标。目标：练习增加圆角创建曲线的方法。单元3线性图标——绘制曲线3.1.3

案例练习——绘制可见图标观察：图标的路径是旋转了45度的正方形（红色线），增加其上下两个锚点（蓝色）的圆角并移动，便可得到图标的主要图形。目标：练习“移动锚点调整曲线弧度”的方法。单元3线性图标——绘制曲线3.1.3

案例练习——绘制可见图标对称性单元3线性图标——绘制曲线3.1.3

案例练习——绘制可见图标去除缺口的方法单元3线性图标——绘制曲线3.1.3

案例练习——绘制可见图标增加圆角去除缺口单元3线性图标——绘制曲线3.1.3

案例练习——绘制可见图标出现小数后的对齐技巧本案例中的“眼睛”图形是通过将一个15×15（宽×高）的正方形旋转45度并修改圆角得到的。旋转后，图形宽度变为71.57（数值精确到小数点后两位）。由于其宽度为小数，无法直接与宽高为7×7的正圆对齐。因此，需临时取消勾选“对齐到像素”（SnaptoPixelGrid），以解除整数像素的移动限制，从而实现小数图形的对齐。对齐完成后，必须重新勾选“对齐到像素”（SnaptoPixelGrid），否则在绘制和移动图形时，图形的大小和位置会频繁出现小数值，导致图标不够精确。单元3线性图标——绘制曲线3.1.4

案例练习——绘制地球图标观察：图标由圆形、两条横线和“眼睛”形状组成，横线平均排布在圆形内部，“眼睛”形状则与上一步绘制方法相同。目标：巩固练习曲线绘制方法；锻炼观察分析能力。单元3线性图标——绘制曲线3.1.5拓展练习——用圆角创建曲线练习目标：进一步熟练掌握本小节所学的知识，锻炼观察并分析图标形状的能力，以及保证曲线对称的能力。图标曲线部分的形状，均来自本小节中的案例。使用本小节中学习的绘制方法，绘制曲线并修改曲线弧度，要注意保持图形的对称性。概览Overview3.1基础图形创建曲线3.2锚点控制曲线3.3胶囊形状的曲线3.4单元练习单元3线性图标——绘制曲线单元3线性图标——绘制曲线3.2.1锚点与曲线锚点1和锚点2定位曲线的两端，锚点3则用于控制曲线的弧度。单元3线性图标——绘制曲线3.2.1锚点与曲线给居中的锚点（用于移动控制弧线）设置一个较大的圆角半径数值。这样可以在移动锚点修改弧度时，曲线始终能保持平滑，而不会因为锚点移动距离较大而圆角半径数值不够而失去曲线。单元3线性图标——绘制曲线3.2.2案例练习——绘制书本图标观察：图标的形状左右对称，所以只需要绘制图标图形的一半，复制得到另一半后修改样式即可。曲线的中间有一个锚点来创建和控制曲线，我们将曲线中间的锚点标记为蓝色，普通锚点标记为黄色，得到分析图。目标：练习增加并移动锚点创建曲线的方法。单元3线性图标——绘制曲线3.2.3

案例练习——绘制海浪图标观察：图标由四个相同的波浪线组成，我们只需要绘制其中一个。我们将波浪线中用于创建曲线的锚点标记为蓝色，固定形状的锚点标记为黄色。其中两端有两个绿色的带圆角锚点，作用是让线条两侧端点为水平方向。目标：练习增加并移动锚点创建曲线的方法。单元3线性图标——绘制曲线3.2.3

案例练习——绘制海浪图标绘制图标时，勾选上“像素网格”可以辅助查看图形的尺寸和锚点之间的距离等。“像素网格”的开关在右上角显示视图大小的菜单栏。像素网格单元3线性图标——绘制曲线3.2.3

案例练习——绘制海浪图标线段的方向❌✅单元3线性图标——绘制曲线3.2.3

案例练习——绘制海浪图标快捷键

Ctrl

+D

的功能是重复上一步操作，是一个非常实用的快捷键，常配合复制快捷键

Alt，用于快速复制出相同、等间距排列的图形组。单元3线性图标——绘制曲线3.2.4

拓展练习——用锚点控制曲线弧度锚点控制曲线综合训练练习目标：进一步熟练掌握本小节所学的知识，锻炼观察并分析图标形状的能力、新增锚点绘制曲线的能力。概览Overview3.1基础图形创建曲线3.2锚点控制曲线3.3胶囊形状的曲线3.4单元练习单元3线性图标——绘制曲线单元3线性图标——绘制曲线3.3.1圆角数值的规律（相邻锚点）圆角半径总和>=其线段长度时，线段完全变为弧线两个圆角半径数值相同，曲线对称；圆角半径不同，曲线不对称，圆角数值的比例等于圆角大小的比例。单元3线性图标——绘制曲线3.3.1圆角数值的规律若仅调整单个锚点的圆角，最大允许值为该锚点两侧短边的边长，因为与之相邻的锚点圆角数值为零。单元3线性图标——绘制曲线3.3.2

案例练习——绘制胶囊图标观察：观察发现图标中包含的三个胶囊形状。目标：练习绘制胶囊形状。单元3线性图标——绘制曲线3.3.3拓展练习——识别并绘制胶囊图形练习目标：进一步熟练掌握本小节所学的知识，锻炼观察并分析图标形状的能力，练习胶囊形状图标的绘制。概览Overview3.1基础图形创建曲线3.2锚点控制曲线3.3胶囊形状的曲线3.4单元练习单元3线性图标——绘制曲线单元3线性图标——绘制曲线3.4.1知识回顾通过调整锚点的圆角来绘制曲线不仅能够便捷地实现精确的曲线效果，还具有很大的灵活性。我们可以先用直线确定轮廓位置，再给锚点添加圆角。即使在添加圆角后，仍可不断移动锚点位置，调整出最理想的曲线弧度。相比之下，使用钢笔工具的控制杆绘制曲线则很难达到这样的灵活性。本单元主要讲解了如何调整锚点的圆角绘制曲线并修改其样式。曲线在图标设计中非常常见，但绘制图标中的曲线有其特殊方法，并非像普通绘图中使用钢笔工具那样复杂。通过本单元介绍的方法，基本可以绘制出大多数图标中的曲线，且绘制出的曲线精确、对称，具有几何美感。单元3线性图标——绘制曲线3.4.2练习巩固根据本单元的学习内容，请大家分析并绘制下列图标。绘制时要观察图标的形状路径、分析图标上锚点分布的位置、以及需要增加圆角的锚点。理清思路后，曲线图标的绘制将非常简单。单元3线性图标——绘制曲线3.4.3单元训练答案红色线条：绘制路径。蓝色圆：带有最大圆角的、制作和控制曲线的锚点。黄色圆：曲线两端、用于固定形状的锚点。其中，黄色圆标记的锚点根据实际图形的需求，可以设置较小的圆角，用于修饰形状。单元3线性图标——绘制曲线3.4.3单元训练答案单元3线性图标——绘制曲线3.4.3单元训练答案单元3线性图标——绘制曲线3.4.3单元训练答案UI图标图形设计FIGMAUI3版单元4面性图标——布尔运算xx学校xx学院xxx专业李炳琰教师概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.1.1图标模版三种图标模版单元4面性图标——布尔运算4.1.1图标模版“活动区域”大小为20像素×20像素。所有图形都应该在24像素×24像素的模版内，不能超出。活动区域周围有2像素的“内边距”当图形视觉面积较小时，图形可延伸至2像素的内边距区域。单元4面性图标——布尔运算4.1.1图标模版单元4面性图标——布尔运算4.1.1图标模版图形参考线中的四个形状，尺寸各不相同，其宽高和面积如图所示，这几个图形面积在320左右，所以视觉大小较为接近、整体看起来比较协调。图形参考线不仅协调了图形的视觉大小，还规范了图形的比例。正方形和圆形的宽高比为1:1，横矩形的宽高比为4:5，竖矩形的宽高比为5:4。根据图形参考线的规定，可以创建图形视觉大小协调、比例一致图标系统。单元4面性图标——布尔运算4.1.1图标模版第一行的1~4号图标的基础图形，符合模板中的图形参考线的规定；第二行的5~8号图标，在图形参考线的规定上有所修改单元4面性图标——布尔运算4.1.2案例练习——绘制沙漏图标观察：观察并分析沙漏图标，发现沙漏图标由上下两个对称的六边形组成。六边形可以通过增改矩形锚点得到，然后翻转六边形，组合两者可绘制出沙漏图标。目标：练习增加并移动图形的锚点、图形的翻转以及图标模版的使用方法。单元4面性图标——布尔运算4.1.2案例练习——绘制沙漏图标1.

快捷键：按下

Shift+H

水平翻转，按下

Shift+V

垂直翻转。2.

右键菜单：选中对象，单击鼠标右键，在弹出的菜单中选择。3.

位置选项栏：选中对象，在右上角的位置选项栏中，单击（水平翻转）或（垂直翻转）。翻转对象的方法：单元4面性图标——布尔运算4.1.3

案例练习——绘制手表图标观察：观察并分析图标图形，可以发现手表图形是由一个圆环和两个梯形组成。通过绘制一个圆环和两个梯形并调整其位置，即可完成图标制作。目标：练习增加并移动锚点修改图形；图形的翻转；图标模版的使用。单元4面性图标——布尔运算4.1.3

案例练习——绘制手表图标使用快捷键Shift+X，可以快速切换图形的描边和填充属性。对于原本仅有填充而无描边的图形中，按下Shift+X，将会去除填充属性，增加描边属性，并且描边的颜色与填充颜色相同。单元4面性图标——布尔运算4.1.3

案例练习——绘制手表图标通常情况下图标模版尺寸为偶数，例如MaterialDesign图标模版的尺寸为24×24，因此图标中各个图形的宽度或者高度（根据需要的是垂直还是水平居中对齐）多采用偶数。然而，也偶尔存在上图中，使用奇数的图标。单元4面性图标——布尔运算4.1.4拓展练习——图标模版辅助绘制练习目标：尝试使用图标模版辅助图标绘制，并继续练习锚点和曲线的绘制。观察图标，分析其图形和锚点的构成。运用前面章节所学的锚点操作的知识，绘制下列图标，注意图形放置在图标模版中的位置。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.2.1合并运算选中多个图形后，属性栏上方出现布尔运算的选项。默认的布尔运算是“

合并”，点击菜单可以展开所有的布尔运算选项，点击选择需要的布尔运算。单元4面性图标——布尔运算4.2.1合并运算“合并”运算会将多个选中的图形合并为一个形状，同时会创建一个布尔运算组，原图形仍旧保留在新建的布尔运算组中。解散该组后，组中各个图形还原为独立的图层。“取消编组”的快捷键为

Shift+Ctrl

+G，点击右键也可找到“取消编组”（Ungroup）功能。保留原图层单元4面性图标——布尔运算4.2.1合并运算布尔运算组内各个图形的样式，不影响布尔运算后的图形整体。所以如果需要修改布尔运算后图形的颜色、描边等属性，要选中整个布尔运算组进行修改。如右图，即使组内正方形为红色、紫色描边，布尔运算组的图形样式并不会被影响，仍旧为蓝色填充、黑色描边。布尔运算组样式单元4面性图标——布尔运算4.2.1合并运算布尔运算后图形的路径，仍是组内原图形的各自的路径。如果要将图形完全合并，得到整体图形的路径，则需要在布尔运算后，接着使用“拼合”（flatten）功能，对应的快捷键是

Alt+Shift+F

。使用“拼合”（flatten）后，布尔运算组消失，原图形拼合到一个图层内，图形路径线也变为合并图形的外轮廓。拼合图形单元4面性图标——布尔运算4.2.2案例练习——绘制云朵图标观察：观察图标发现，云朵图标可看做三个圆形和一个矩形拼合而成。目标：练习布尔运算的合并功能。单元4面性图标——布尔运算4.2.2案例练习——绘制云朵图标圆形与矩形完美衔接单元4面性图标——布尔运算4.2.3拓展练习——合并运算练习目标：在图标模版的辅助下，绘制并合并图标。观察下列图标，分析其图形的构成。运用前面章节所学的曲线绘制知识，制作下列图标，注意图形放置在图标模版中的位置。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.3.1减去运算多个图形进行减去运算运算会用选中图形中上层图形的面积减去最下层图形的面积。单元4面性图标——布尔运算4.3.2案例练习——绘制月亮图标观察：观察并分析图标图形，可以发现用钢笔直接绘制月亮图形并不容易，但是通过两个圆形相减则简单的多。目标：练习布尔运算的减去功能。单元4面性图标——布尔运算4.3.2案例练习——绘制月亮图标展开“减去”得到的编组，移动组中上方圆形的位置，调整月牙的形状，直至得到满意的效果。单元4面性图标——布尔运算4.3.3

案例练习——绘制鼠标图标观察：观察并分析图标图形，发现鼠标的主体图形是“胶囊形状”，中间的镂空是矩形。所以本图标可以通过圆角矩形减去两个矩形得到。目标：练习布尔运算的减去功能。单元4面性图标——布尔运算4.3.4

案例练习——绘制优惠券图标观察：观察并分析图标图形，可以发现优惠券的主体图形是一个矩形。通过两个半圆、一个五角星与矩形的相减，即可形成优惠券图形。目标：练习布尔运算的减去功能。单元4面性图标——布尔运算4.3.4

案例练习——绘制优惠券图标星形的外框与图形大小不同（此处使用拼合功能，仅为了演示，实际制作图标时，无需拼合）单元4面性图标——布尔运算4.3.5

综合练习——绘制拼图图标观察：观察并分析图标图形后，发现拼图的主体图形是一个正方形，通过4个圆角矩形和正方形的增减，形成了拼图图形。目标：布尔运算合并和减去功能的综合使用。单元4面性图标——布尔运算4.3.6综合练习——绘制头盔图标观察：观察并分析图标图形后，发现头盔的主体图形是圆形和某个特殊形状的组合。圆形绘制简单，左下方的特殊形状像三角形，我们可以通过给矩形加圆角得到。目标：布尔运算合并和减去功能的综合使用。单元4面性图标——布尔运算4.3.7

拓展练习——减去运算练习目标：在图标模版的辅助下，绘制带有镂空的面形图标。观察下列图标，分析其图形的构成。运用前面章节所学的知识，绘制下列图标的基础图形，然后制作镂空。注意图形放置在图标模版中的位置，以及其中镂空部分的对称性。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.4.1交集运算的特点交集”（Intersect）会计算选中图形面积的相交部分。经过“交集”运算后，原有的选中图形就不再显示了，只显示交集的区域，所以如果原有图形还需要继续使用，注意在交集运算前复制一份原有图形，在接下来的练习中将会用到这一点。与“交集”正好相反，“排除”（Exclude）会计算选中图形面积的不相交部分。排除在实际使用中较少，所以本书不做案例练习。单元4面性图标——布尔运算4.4.2案例练习——绘制娃娃头图标观察：观察并分析图标图形，可以发现图标中娃娃的脸和眼睛都是正圆形；两侧的刘海则是圆形的一部分，所以可以使用交集制作娃娃的刘海。目标：练习布尔运算的交集功能。单元4面性图标——布尔运算4.4.3

案例练习——绘制盾牌图标观察：观察并分析图标图形，可以发现盾牌的主体图形可以由六边形得到，盾牌内部的图案分别是两个矩形的一部分。盾牌内部的图案，可以由盾牌图形和两个矩形进行交集运算得到。目标：练习布尔运算的交集功能。单元4面性图标——布尔运算4.4.4拓展练习——交集运算练习目标：在图标模版的辅助下，使用交集绘制不规则图案。观察下列图标，分析其图形的构成。运用前面章节所学的知识，绘制下列图标的基础图形，然后制作图形内部的图案。注意图形放置在图标模版中的位置。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.5.1知识回顾本单元主要讲解了图标模版和布尔运算。其中图标模版可以规范图标的绘制，让一整套图标拥有相近的视觉大小和一致的视觉重心。而布尔运算则通过多个图形面积间的加减乘除，绘制出各种复杂的形状。在之前的章节中，我们学习了曲线、锚点、圆角等方法来绘制复杂图形，本章介绍了三种布尔运算。使用这些方法，大家可以绘制出绝大多数图标。在以后的图标绘制过程中，请同学们认真观察并分析图标的构成，选择最简单、最精确的绘制方法。单元4面性图标——布尔运算4.5.2练习巩固根据本单元的学习内容，请大家使用图标模版绘制上述图标，认真观察图标中的特殊形状，并分析是通过哪些图形的布尔运算得到的。单元4面性图标——布尔运算4.5.3单元训练答案单元4面性图标——布尔运算4.5.3单元训练答案单元4面性图标——布尔运算4.5.3单元训练答案单元4面性图标——布尔运算4.5.3单元训练答案UI图标图形设计FIGMAUI3版单元5面性图标——常用技巧xx学校xx学院xxx专业李炳琰教师概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.1

旋转对称图形图标中经常有旋转对称的图形，是由围绕圆心旋转并复制得到的图形。但是选中对象后，其旋转中心在选中框的正中心且无法修改。所以如果想要绘制围绕圆心旋转的图形，就需要扩大选中对象，让选中对象的旋转中心和圆心重合。接下来我们将通过案例介绍这种绘制思路。单元5面性图标——常用技巧5.1.1案例练习——绘制设置图标观察：这是一个典型的旋转对称图形。观察并分析图标图形后，发现图标由六个梯形和一个空心圆组成。所以需要将梯形进行旋转和复制。目标：练习旋转对称图形的绘制。练习布尔运算的合并功能。单元5面性图标——常用技巧5.1.1案例练习——绘制设置图标编组的两种方法：1.

选中对象，按下

Ctrl

+G，将其编组。2.

选中对象，单击鼠标右键，选择弹出菜单中的“编组”（Groupselection）。取消编组的三种方法：1.

选中对象，按下

Ctrl+Backspace

。2.

选中对象，按下

Ctrl+Shift+G

。1.

选中对象，单击鼠标右键，选择弹出菜单中的“取消编组”（Ungroup）。单元5面性图标——常用技巧5.1.2

案例练习——绘制花朵图标观察：图标由上下两部分组成，其中上半部分是旋转对称图形，下半部分的树叶类似之前娃娃头图标的“刘海”形状。目标：练习旋转对称图形的绘制；练习布尔运算的交集和合并功能。单元5面性图标——常用技巧5.1.3拓展练习——旋转对称图形练习目标：在图标模版的辅助下，绘制旋转对称图标。观察下列图标，分析其图形的构成。运用本章所学的旋转对称图标的绘制技巧以及上一章节学习的布尔运算，制作下列图标，注意图形在图标模版中的位置。概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.2.1轮廓化描边“轮廓化描边（OutlineStroke）“是将图形的描边转换为填充区域，同时图形的路径会随之改变。如图所示，路径从原本的图形形状线变成了围绕填充区域的轮廓线。单元5面性图标——常用技巧5.2.1轮廓化描边填充图形和描边图形的缩放对比单元5面性图标——常用技巧5.2.1轮廓化描边轮廓化描边后拆分图形单元5面性图标——常用技巧5.2.2案例练习——绘制爱心图标目标：学习爱心图标的绘制方法。单元5面性图标——常用技巧5.2.2案例练习——绘制爱心图标调整心形形状单元5面性图标——常用技巧5.2.2案例练习——绘制爱心图标未轮廓化描边心形缩放失真单元5面性图标——常用技巧5.2.3拓展练习——爱心图形的变形练习目标：绘制多种风格的心形图标。观察下列心形图标，分析图形特点。运用本章所学知识，绘制爱心形状并进行变形。注意图形在图标模版中的位置。概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.3

组合图形当图标由多个填充图形组成时，图形之间需要留出缝隙，从而保证图形的清晰。缝隙的粗细是固定的，形状由图形相接处的形状决定。如果是图中规则图形，缝隙制作较为简单。但如果是不规则的图形，则无法直接制作缝隙，需要通过用图形描边来制作。本小节将学习如何制作图形组合中的缝隙，让图形之间能够完美拼合。单元5面性图标——常用技巧5.3.1案例练习——绘制云朵月亮图标观察：本图标是由“月亮”和“云朵”两个图形组合而成，在两个图形接触的位置留有缝隙。其中，月亮是由两个圆形相减而成，而云朵则主要由两个圆形组成。目标：练习图标缝隙的制作；练习布尔运算的合并和减去。单元5面性图标——常用技巧5.3.2

案例练习——绘制饮料汉堡图标观察：观察并分析图标图形后，发现图形由汉堡和饮料图形组成。其中汉堡图形由圆角矩形和矩形组成，饮料由梯形和矩形组成，而且左右两个图形间有缝隙。目标：练习图标缝隙的制作；练习布尔运算的合并和减去。单元5面性图标——常用技巧5.3.3拓展练习——组合填充图形练习目标：绘制带有缝隙的图标。观察下列面性图标，分析图形由那几个图形组成。运用所学知识，绘制下列图标中的各个图形并将其组合、制作图形之间的缝隙。注意图形在图标模版中的位置。概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.4

单元练习请分析并绘制图中图标。前三个图标，需要使用旋转对称图形的绘制技巧。其中，第一个图标，绘制好一圈发光的线段后，删除多余的发光线段。最后一个图标，需要使用组合图形的缝隙绘制技巧，同时需要使用圆角制作曲线和布尔运算。单元5面性图标——常用技巧5.3.3拓展练习——组合填充图形练习目标：绘制带有缝隙的图标。观察下列面性图标，分析图形由那几个图形组成。运用所学知识，绘制下列图标中的各个图形并将其组合、制作图形之间的缝隙。注意图形在图标模版中的位置。UI图标图形设计FIGMAUI3版单元6风格化图标xx学校xx学院xxx专业李炳琰教师6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概览Overview单元6

风格化图标单元6

风格化图标6.1图标风格影响因素基础图标单元6

风格化图标6.1.1风格要素——描边描边粗细：当图标中含有描边时，例如线性图标或线面结合图标，描边粗细影响图标风格。较粗的描边使图标醒目、粗犷，较细的描边让图标显得精致、优雅。单元6

风格化图标6.1.1风格要素——描边当图标中包含描边时，例如线性图标或线面结合图标，断开闭合图形的路径是一种常见的设计风格。通过断开打破原有图形的封闭区域，图标产生透气、轻松的视觉感受。图中的图标就采用了这种断线风格，通过断开图形的一部分，图标呈现出一种开放式的感觉，同时保持了整体的清晰度和辨识度。在断开的同时，也可以通过路径的重新连接来保持图标的完整性，比如图中第一个“铃铛”图形中的红点标记处，既打破了封闭的图形，又确保了图标的整体性。断线单元6

风格化图标6.1.1风格要素——描边需要注意的是，断开的位置应该避免出现在图形的转折点或连接处，如图所示。若断开位置设置在图形转折或连接处，容易导致图形的结构不稳定，造成视觉上的不协调或不完整，从而影响图标的识别度和美感。因此，在设计中，注意断开的位置的选择，并适当进行连接，以保证断线风格图标线条的流畅。断线单元6

风格化图标6.1.2风格要素——填充填充容器仅包含填充属性的图标被称为面性图标。图中的第一行展示了常见的面性图标——这些图标的图形仅包含填充属性。此外，还可以将图标图形放置在统一的‘容器’内。图中的第二行和第三行中，图标的整体形状使用填充属性的圆角矩形和圆形，内部放置填充图形。单元6

风格化图标6.1.2风格要素——填充填充容器除了上述情况，包含填充和描边两种属性的图标被称为线面结合图标。在这种类型的图标中，填充和描边的关系会影响图标的整体风格。图中的第一行展示了常见的线面结合图标——这些图标的图形同时包含填充和描边属性。此外，还可以让图形分别包含描边和填充属性，并通过错位来实现不同的效果。图中的第二行图标，填充图形与图形本身对齐，但与描边有一定的错位；第三行中，填充图形是圆形，并位于描边图形的右上角。单元6

风格化图标6.1.3风格要素——图形造型圆角半径图形的圆角半径数值影响图标的风格，圆角半径数值越大，图标的风格越可爱、友好；圆角半径数值越小、甚至不设置圆角，图标的风格越精致、严谨。不过，目前纯直角的图形使用很少，图标图形倾向于带有一定的圆角，并根据风格需要设置或大或小的圆角半径数值。如图，图标增加了圆角半径后，图标图形变得圆润可爱，风格产生了变化。注意，一套图标内的图形圆角尽量一致。直角带圆角单元6

风格化图标6.1.3风格要素——图形造型圆角半径差异圆角半径可以根据图形大小略微调整，以保证视觉上的一致。图形尺寸越大，圆角半径越大。注意图标本身较小，所以数值差异不会太大。图中的图标中，含有大小两个矩形，为了保持其圆角效果接近，外部大矩形圆角半径数值为6，内部小矩形的数值为4。单元6

风格化图标6.1.3风格要素——图形造型色彩搭配图标可以由一种或者多种颜色组成，一套图标应该使用同一套色彩搭配。图中展示了线性和面形两类图标的双色搭配效果。单元6

风格化图标6.1.3风格要素——图形造型特征元素在图标的基础图形上，增加一致的特征元素可以创造出独特风格的图标。图中的第一行面性图标，在左上角统一增加了代表高光的短线，丰富了图标的细节并增强了立体感。第二行的线性图标统一增加了人物脸部元素，使图标拟人化，从而让图标显得更加生动。单元6

风格化图标6.1.3风格要素——图形造型模版占比模板占比不同的图标，不仅在风格上有所差异，使用时的尺寸也会有所不同，以实现所需的视觉效果。因此，一套图标的模板占比应该在视觉上保持一致单元6

风格化图标6.1.3风格要素——图形造型复杂度通过增加或减少图标图形的细节，可以使图标变得更加繁复或简洁。例如，图中的图标在原有基础上增加了许多细节，使得图标更加复杂。而图中的‘铃铛’图形，则简化了原有图标，使其更加简洁。单元6

风格化图标6.1.3风格要素——图形造型视角与透视常见的图标视角为图形的正视图，不展示透视的立体效果。当图标使用某种视角或者透视时，整套图标要统一。不同的视角单元6

风格化图标6.1.3风格要素——图形造型视角与透视图中展示了一种2.5D图标风格，图标统一使用了2.5D透视。2.5D风格图标单元6

风格化图标6.1.4知识巩固图中是某社区商场的海报，海报上展示了该商场提供的12个服务图标。然而，这12个图标的风格不尽相同。请找出其中的3个不一致之处，并指出哪些图标的风格是相同的。6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概览Overview单元6

风格化图标单元6

风格化图标6.2.1颜色面板介绍①色相：色相指的是具体的颜色种类，例如‘红、橙、黄、绿、青、蓝、紫’等，代表颜色的不同色相。通过左右拖动色相滑块，可以更改色相，调色板中的颜色也会随之变化。②透明度：通过左右拖动透明度滑块或输入数值来调整透明度。当滑块位于最左侧时，透明度为0%，即完全透明；当滑块位于最右侧时，透明度为100%，即完全不透明。③颜色模