✏️ 02 - 形状与矢量
形状是UI设计的原子——按钮是圆角矩形、头像圆形、图标是矢量路径、分割线是线条。Figma提供了丰富的形状工具和矢量编辑能力，从基础矩形到复杂贝塞尔曲线，本课将全面讲解。
📌 本课要点
- 基础形状工具：矩形、椭圆、线条的绘制与属性调整
- 多边形与星形：参数化调整边数和内半径
- 钢笔工具：锚点、手柄、贝塞尔曲线的精确控制
- 布尔运算：Union、Subtract、Intersect、Exclude组合形状
- 矢量编辑：路径操作、锚点增删、手柄调整
- 实战案例：从零绘制一个APP图标
一、基础形状工具
1. 矩形工具（Rectangle）
矩形是UI设计中最常用的形状——卡片、按钮、输入框、导航栏，到处都是矩形。
1绘制矩形：按 R 激活矩形工具，在画布上拖拽即可绘制。拖拽时按住 ⇧ 可以绘制正方形。松开鼠标完成绘制，自动切回选择工具。
2圆角矩形：绘制矩形后，在右侧属性面板的 Corner radius 输入圆角值。常用值：按钮 8px、卡片 12px、对话框 16px。点击四个角的独立设置图标，可以为每个角设置不同的圆角——这是设计气泡箭头等不规则形状的关键。
3数值输入技巧：在尺寸输入框中，可以直接输入算式。例如输入 375/2 得到187.5，输入 24+8 得到32。这在需要精确计算尺寸时非常方便。
💡 快捷创建法：按 R 后不要拖拽，直接在画布上点击——Figma会弹出尺寸输入框，输入精确的宽高后回车，创建精确尺寸的矩形。这对于创建特定尺寸的画板、容器非常高效。
2. 椭圆工具（Ellipse）
椭圆工具用于创建圆形和椭圆形，常见于头像、图标背景、装饰元素、进度指示器等。
1绘制椭圆：按 O 激活椭圆工具，拖拽绘制。按住 ⇧ 绘制正圆。
2创建圆环：绘制一个圆，在右侧属性面板将填充(Fill)关闭，添加描边(Stroke)，设置描边宽度（如4px）。切换描边对齐方式为Center，就得到一个圆环。这在设计进度环、单选按钮时常用。
3半圆/扇形：选中圆形，在右侧属性面板找到 Arc 设置（在Fill下方），可以设置起始角度和结束角度，快速创建饼图扇区或进度弧。
3. 线条工具（Line）
线条看似简单，但在UI设计中频繁使用——分割线、下划线、连接线等。
📏 线条属性设置
| 属性 | 常用值 | 说明 |
|---|
| 描边宽度 | 1px / 2px | 分割线1px，强调线2px |
| 端点样式 | Round / Butt | Round圆角端点更柔和 |
| 虚线 | Dash: 4, Gap: 4 | 在Stroke设置中开启虚线模式 |
| 颜色 | #E5E7EB / 边框色 | 通常使用低饱和度的灰色 |
1绘制线条：按 L 激活线条工具，拖拽绘制。按住 ⇧ 约束为水平、垂直或45度线。
2线条变箭头：选中线条，在右侧Stroke设置中，将 Stroke cap（端点）设为Arrow，线条末端自动添加箭头。可以选择单端箭头或双端箭头。
二、多边形与星形
长按矩形工具图标，可以看到更多形状选项。
⬡ 多边形
可设置边数（3-12），常用于：
- 三角形：方向指示、播放按钮
- 六边形：功能图标底板
- 八边形：停止图标
属性面板调整 Point count 改变边数
⭐ 星形
可设置角数和内半径比例，常用于：
- 五角星：评分图标
- 六角星：装饰元素
- 爆炸形：促销标签
调整 Inner radius 比例改变尖锐程度
⬜ 圆角矩形
预设圆角的矩形，常用于：
直接设置四个角的独立圆角值
💡 快速创建常用形状：按 ⇧+R 绘制圆角矩形（默认8px圆角），比先画矩形再设圆角更快。也可以通过菜单 Insert → Shape 快速选择。
三、钢笔工具：矢量绘制的核心
钢笔工具是Figma中最强大的绘制工具。它可以创建任意形状的路径，是绘制自定义图标、插画、复杂形状的必备工具。虽然学习曲线较陡，但一旦掌握，你将获得极大的设计自由度。
1. 锚点与路径基础
🎯 锚点类型
| 类型 | 特征 | 操作方式 | 示例 |
|---|
| 角点（Corner） | 无手柄，尖锐转折 | 点击不拖拽 | 正方形顶点、锯齿形 |
| 平滑点（Smooth） | 对称手柄，光滑曲线 | 点击并拖拽 | 圆形、水滴形 |
| 半平滑点 | 一侧手柄，一侧直角 | 拖拽后按⌥调整单侧手柄 | 圆角矩形、心形 |
1绘制直线段：按 P 激活钢笔工具，点击画布创建第一个锚点，移动鼠标再次点击创建第二个锚点——两点之间自动连线。继续点击创建折线路径，双击或按 Esc 结束绘制。
2绘制曲线段：点击并拖拽创建平滑锚点——拖拽方向和距离决定曲线的弧度和方向。拖拽时出现的蓝色手柄就是贝塞尔控制柄。手柄越长，曲线弧度越大。
3闭合路径：将鼠标移回第一个锚点（光标变为连接图标），点击即可闭合路径。闭合路径才能添加填充色。开放的路径只有描边，没有填充。
4混合直线与曲线：在绘制过程中，可以交替使用点击（角点）和拖拽（平滑点），创建同时包含直线段和曲线段的路径。这是绘制大多数UI图标的常用方式。
2. 编辑路径
绘制完成后，双击路径进入编辑模式（或选中路径按 Enter），可以看到所有锚点。
✏️ 路径编辑操作
| 操作 | 方法 | 说明 |
|---|
| 移动锚点 | 拖拽锚点 | 改变形状的轮廓 |
| 调整曲线 | 拖拽手柄端点 | 调整曲线弧度 |
| 断开手柄 | ⌥+拖拽手柄 | 让两侧手柄独立运动 |
| 添加锚点 | 点击路径线段 | 在两点之间插入新锚点 |
| 删除锚点 | 选中锚点按 Delete | 删除后路径自动重新连接 |
| 角点↔平滑点 | ⌥+点击锚点 | 在角点和平滑点之间切换 |
| 弯曲工具 | 选中路径，点击工具栏弯曲图标 | 可视化地弯曲直线路径段 |
3. 钢笔工具实战：绘制一个搜索图标
1创建画布：按 F 创建一个24×24的Frame（图标标准尺寸）。
2绘制圆环：按 O 绘制一个16×16的正圆，放在Frame左上角。设置描边2px，无填充。这就是放大镜的镜片部分。
3绘制手柄：按 P 激活钢笔工具，从圆的右下方开始，向右下45度绘制一条约8px的斜线。设置描边2px，Round端点。这就是放大镜的手柄。
4调整位置：将手柄的起点对齐到圆环的右下弧线上，使图标看起来像一个完整的放大镜。微调位置直到视觉上自然协调。
✅ 设计原理：图标设计遵循"一致描边"原则——同一图标中所有描边宽度保持一致（通常2px或1.5px）。端点样式统一使用Round，使线条末端自然柔和。尺寸遵循8的倍数网格：16、20、24、32、48px。
四、布尔运算：组合形状的魔法
布尔运算是将多个简单形状组合成复杂形状的核心方法。就像搭积木一样，用基本形状通过加减交集运算构建任意形状。
四种布尔运算
➕ Union（并集）
将多个形状合并为一个形状。重叠区域融合在一起。
快捷键：选中多个形状 → 右键菜单 → Union Selection
典型应用：
- 合并形状创建不规则轮廓
- 加号图标（横+竖矩形Union）
- 地图区域合并
➖ Subtract（差集）
用顶层形状从底层形状中"挖掉"区域。
快捷键：选中多个形状 → 右键菜单 → Subtract Selection
典型应用：
- 镂空效果（如钥匙孔）
- 减去图标（横竖矩形Subtract）
- 创建凹槽、缺口
✖️ Intersect（交集）
只保留所有形状重叠的区域。
快捷键：选中多个形状 → 右键菜单 → Intersect Selection
典型应用：
- 裁剪图片为特定形状
- 创建菱形、十字等交集形状
- 提取重叠区域作为独立元素
⊖ Exclude（异或）
保留不重叠的区域，重叠部分被挖空。
快捷键：选中多个形状 → 右键菜单 → Exclude Selection
典型应用：
- 创建环形（两个圆Exclude）
- 镂空标签、徽章
- 棋盘格等交叉图案
1布尔运算操作流程：选中两个或多个形状（注意选择顺序——先选底层的，后选顶层的），右键选择 Boolean → 对应运算，或使用顶部工具栏的布尔图标。运算后，图层面板中会出现一个布尔组，包含参与运算的所有子形状。
2编辑布尔结果：布尔运算是非破坏性的——展开图层面板中的布尔组，仍然可以单独选中子形状进行修改。修改后布尔结果自动更新。这是Figma的一大优势。
3展平布尔：如果确定不再需要编辑子形状，可以右键布尔组 → Flatten（⌘+E），将结果转化为单一矢量路径，减小文件体积。但操作不可逆！
⚠️ 选择顺序很重要：Subtract运算中，最后选中的形状是"刀"（用来减），先选中的形状是"被减物"。选择顺序不同，结果完全不同。对于Union和Exclude，顺序不影响结果。
布尔运算实战：绘制一个位置图标
1创建外轮廓：绘制一个20×20的正圆（填充深色）。
2添加方向指针：绘制一个三角形，放在圆形下方，尖端朝下。三角形与圆形有部分重叠。
3Union合并：选中圆形和三角形，执行Union运算，得到一个带尖角的方向图标外形。
4添加中心圆点：在中心绘制一个小圆（8×8），填充白色或更深的颜色。
五、矢量编辑进阶技巧
1. 路径偏移（Offset Path）
选中一个矢量路径，在右侧属性面板点击 ... 更多选项 → Offset path，输入正值向外扩展、负值向内收缩。常用于创建描边变体、等距扩展形状。
2. 描边轮廓化（Outline Stroke）
选中一个有描边的路径，右键 → Outline stroke（或 ⌘+⇧+O），将描边转化为闭合填充路径。这样可以对"线条"进行填充和布尔运算。例如：先将一条弧线Outline Stroke，再和其他形状做Intersect。
3. 混合模式（Blend Modes）
🎨 常用混合模式
| 模式 | 效果 | UI设计用途 |
|---|
| Normal | 默认，无混合 | 普通元素 |
| Multiply | 正片叠底，颜色变深 | 阴影、暗色叠加 |
| Screen | 滤色，颜色变亮 | 高光、发光效果 |
| Overlay | 叠加，暗更暗亮更亮 | 纹理叠加 |
| Pass through | 穿透（默认Group模式） | 保持组内元素独立混合 |
4. Flatten vs Outline Stroke
Flatten（⌘+E）
将布尔运算结果展平为单一矢量路径。同时也会将多个选中元素合并为一个路径。减少图层复杂度，但失去可编辑性。
Outline Stroke（⌘+⇧+O）
将描边转化为填充形状。一个4px描边的圆会变成一个圆环形状。常用于需要对"线条"做进一步布尔运算的场景。
六、实战案例：绘制一个音乐APP图标
让我们综合运用本课知识，从零绘制一个音乐播放器图标。
1创建画板：按 F，在右侧选择 iOS App Icon（1024×1024），创建标准iOS图标画板。
2绘制圆角背景：按 R 绘制一个覆盖整个画板的矩形。设置圆角为 224px（iOS图标的超级椭圆近似值），填充渐变色：从 #8b5cf6 到 #ec4899（紫色到粉色的渐变）。
3绘制音符形状：用钢笔工具绘制一个音符的路径——一个倾斜的竖线（音符杆）加底部椭圆（音符头）。使用 P 工具，先点击创建杆的顶端角点，拖到下方创建底端，再拖拽创建音符头的弧线。
4用布尔运算完善：如果需要更复杂的音符形状，可以画一个椭圆和一个矩形，用Union合并成音符头。画一条细长矩形作为音符杆。所有形状填充白色。
5添加效果：给音符添加Drop Shadow（x:0, y:4, blur:12, 颜色:rgba(0,0,0,0.25)），增加层次感。可以再添加一个Inner Shadow增加质感。
6检查像素对齐：放大到100%视图，检查图标边缘是否清晰锐利。如果发现模糊，可能是小数像素导致的——选中所有元素，在右侧属性面板将坐标和尺寸都取整。
七、形状设计的设计原理
📐 形状设计三大原则
- 一致性原则：同一项目中，圆角、描边宽度、间距应保持一致。例如所有卡片12px圆角、所有按钮8px圆角、所有描边2px。建立规范比每次随意设置更专业。
- 8px网格原则：UI设计通常使用8px基准网格。尺寸、间距、圆角都是8的倍数（8、16、24、32、40、48...）。小元素可以用4px。这确保设计的一致性和开发实现的精确性。
- 简化原则：能用基础形状解决的，不用钢笔工具。能用布尔运算的，不用手绘路径。越简单的路径越容易维护和调整。优先考虑：基础形状 → 布尔运算 → 钢笔绘制。
💡 像素完美技巧：按 ⌘+'（Mac）或 Ctrl+'（Win）切换像素网格显示。当缩放级别≥400%时可以看到像素网格。确保所有形状的坐标和尺寸都是整数，避免半像素渲染模糊。
八、总结与练习
✅ 本课知识检查
- 绘制正方形和正圆分别需要按住哪个修饰键？
- 如何为矩形的四个角设置不同的圆角值？
- 钢笔工具中，角点和平滑点的区别是什么？如何相互转换？
- 布尔运算的四种类型分别是什么？Subtract运算中选择顺序为什么重要？
- Flatten和Outline Stroke的区别是什么？各自的使用场景？
🎯 练习：绘制一套基础图标
运用形状和矢量工具，绘制以下5个常用UI图标（每个24×24px）：
- 搜索图标：圆环+斜线手柄（使用椭圆+线条工具）
- 关闭图标：两条交叉的45度线（使用线条工具）
- 加号图标：横竖两条交叉线（使用矩形工具）
- 心形图标：两个圆形+一个三角形Union合并（布尔运算练习）
- 铃铛图标：使用钢笔工具绘制铃铛轮廓，底部加小圆点
设计规范：描边统一2px，端点Round，颜色#1F2937
进阶挑战：将5个图标创建为Component，排列在一个Frame中
✏️
第二课完成！
你已经掌握了Figma形状和矢量绘制的核心技能。下一课我们将学习文字排版——让设计不仅好看，还要好读。