第四章 基础绘制工具：矩形、椭圆、线条、箭头、钢笔工具的使用技巧

用户场景

产品经理在低保真原型设计阶段，需要快速搭建页面骨骼结构。典型场景包括：绘制卡片容器（矩形）、圆形头像占位（椭圆）、表单分隔线（线条）、流程跳转指示（箭头）、以及不规则形状（钢笔）。用户期望在5分钟内完成一个页面框架，而非被复杂的矢量编辑拖慢节奏。

业务问题

• 效率瓶颈：初学者频繁在工具栏翻找工具，或使用多边形等不匹配的工具凑合，导致绘制耗时增加40%以上。
• 精度失控：手动拖动矩形大小时偏离标准间距，造成后续对齐与约束失效。
• 版本混乱：箭头与线条混用，交互逻辑表达模糊，评审时需反复解释。

需求拆解

原型表达

矩形与椭圆

• 按 R 激活矩形工具，在画布拖动生成。按住 Shift 拖动生成正方形。
• 选中矩形，右侧属性面板调整圆角半径（Corner radius），推荐 4px / 8px 用于卡片。
• 按 O 激活椭圆工具，按住 Shift 绘制正圆。
• 使用 约束对齐：绘制时按下 Alt（Windows）/ Option（Mac）以中心点为基准扩缩。

线条与箭头

• 按 L 激活线条工具，点击起点并拖动到终点。
• 绘制箭头：按 Shift + L 或在右侧属性面板将线条末端（End arrowhead）设为箭头。
• 连续绘制同类型线条：双击工具图标锁定模式，按 Esc 或再次点击工具解除。

钢笔工具

• 按 P 激活，点击放置锚点，拖动产生贝塞尔手柄。
• 低保真原型中使用钢笔绘制“手写”草图风格：设置描边为 2px，填充透明。
• 闭合路径：鼠标移回起始锚点，光标旁出现圆圈时点击。
• 编辑锚点：使用 直接选择工具（A）拖动单独锚点或手柄。

交互流程

实际设计任务中，工具切换遵循“选择 → 绘制 → 调整参数”三步循环。以下为典型流程：

1. 按 R 绘制页面顶部导航栏矩形（宽375px，高56px）。
2. 按 O 在导航栏右侧绘制用户头像占位（正圆，直径32px）。
3. 按 L 绘制内容区域分隔线（水平线，描边1px）。
4. 按 Shift + L 从卡片指向详情页箭头（起点卡片右侧中点，终点页边界）。
5. 按 P 绘制不规则“推荐”标签（描边路径+填充浅灰）。

指标验证

验收标准

• 矩形：能通过快捷键 R 快速创建，并成功修改圆角半径为 4px。
• 椭圆：按住 Shift 可得到正圆，不出现椭圆误。
• 线条：绘制后端点连接时可吸附至已有锚点（Smart Guides 自动触发）。
• 箭头：末端箭头样式完整，无断开或变形。
• 钢笔：绘制至少3个锚点的闭合路径，每个锚点可独立调节手柄。

交付物模板

本章需产出 工具快捷键速查表，格式如下（用于插入原型团队 Wiki 或 Figma 插件说明）：

{
  "矩形":       { "key": "R", "modifier": null, "type": "shape" },
  "椭圆":       { "key": "O", "modifier": null, "type": "shape" },
  "线条":       { "key": "L", "modifier": null, "type": "line" },
  "箭头":       { "key": "L", "modifier": "Shift", "type": "line" },
  "钢笔":       { "key": "P", "modifier": null, "type": "pen" },
  "直接选择":   { "key": "A", "modifier": null, "type": "edit" }
}