UI图标设计制作教程（Figma UI3）课件 第三单元-线性图标-绘制曲线

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单元训练答