# 圈出重点（Circle Annotation）

镜语 · 特效与转场 / 标注与数据

- 别名：画圈标注、手绘圈、红圈标注
- 口语：「用红笔把画面里那支笔圈出来」「在截图上画个圈告诉大家看这里」
- 一句话：一圈手绘线沿画面中的目标画一圈，再弹出说明
- 是什么：圈出重点用一条手绘线围绕画面中的目标画一圈，常略微不闭合或超出起点，模仿真人用笔圈画。圈完通常配一条引线和说明标签
- 缺了就不像：围绕目标画一圈；线条逐步画出；圈出画面中的具体物体或位置
- 加了更像：手绘不规则；结尾超出起点；配引线和标签
- 适合用在：vlog、好物分享中标出同款物品；带货视频圈出价格、赠品或细节；教程或截图讲解中圈出要点击的位置
- 看哪里：红线从钢笔右上方起笔，绕一圈后越过起点一点才停；圈画完以后才出现连接线和价格标签
- 注意：圈住的范围太大，观众不知道具体看哪里；目标在画面中移动而圈不跟随时会穿帮；颜色与背景太接近（例如红圈压在红色物体上）
- 描述示例：在视频画面中用红色手绘线把人物写字时手里的钢笔圈出来，线条像笔画一样约 1 秒画完，结尾略超过起点；随后从圈边引出一条短线，弹出白色小标签「同款钢笔 ¥59」；画面本身不变
- 易混：
  - [箭头指引](https://idea.ameng.dev/terms/arrow-pointer.md)：箭头指示方向和目标位置；圈出强调目标的范围
  - [下划线绘制](https://idea.ameng.dev/terms/underline-draw.md)：下划线作用于文字，圈出多用于画面中的物体
  - [圆形开合](https://idea.ameng.dev/terms/iris-transition.md)：圈形转场会遮住画面其他部分，圈出重点不改变画面
- 相关：[描边生长](https://idea.ameng.dev/terms/trim-path.md)

## 来源与延伸阅读

- [GSAP · DrawSVG 路径显现](https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/)
- [NN/g · 动画在界面中的作用](https://www.nngroup.com/articles/animation-purpose-ux/)

网页版（含演示）：https://idea.ameng.dev/terms/circle-annotation