UI图标设计制作教程（Figma UI3）课件 第二单元线性图标-锚点操作

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

案例练习——绘制开关图标连续添加锚点的连线效果注意：圆形的开口制作完成后