对AI描述新手引导组件,要说清4件事
新手引导组件有6种:产品导览、操作指引标注、热点提示、聚光高亮、新手任务清单、情境提示。它们的出现时机、指向目标和推进方式都不一样。
只对AI说“做个新手引导”,AI无法判断你要的是哪一种。向AI描述一个新手引导动画时,需要补充4类信息:
- 何时出现:提示在什么时机触发;
- 指向哪个目标:提示指向界面中的哪个位置;
- 用户如何推进:用户做出什么操作后切换到下一步;
- 完成后怎样:全部结束后保留还是收起提示。
下面逐个拆解这6种组件,并给出可以直接复制给AI的描述。
6种新手引导组件逐个拆解
产品导览:连续带路

- 适用场景:需要带第一次使用的用户连续认识多个关键功能时。
- 交互方式:按步骤逐个定位目标,点击“下一步”后,高亮区域、说明内容和步骤进度一起切换,最后给出完成入口。
可复制给AI的描述
按步骤逐个定位目标;点击下一步后,高亮区域、说明内容和步骤进度一起切换,最后给出完成入口。
按步骤逐个定位目标;点击下一步后,高亮区域、说明内容和步骤进度一起切换,最后给出完成入口。
操作指引标注:单点解释

- 适用场景:只想解释某一个按钮或控件怎么用时。
- 交互方式:将提示气泡固定在目标按钮附近,用箭头清楚指向目标。用户点击“明白了”后收起提示,不遮挡其他操作。
可复制给AI的描述
提示气泡固定在目标按钮附近,用箭头清楚指向;用户点击明白了以后收起,不遮挡其他操作。
提示气泡固定在目标按钮附近,用箭头清楚指向;用户点击明白了以后收起,不遮挡其他操作。
热点提示:轻量提醒

- 适用场景:想让用户注意刚上线但不必立刻学习的功能时。
- 交互方式:在入口旁放一个轻微呼吸的提示点,点击后展开一句说明或快捷操作,读完再消除未读状态。
可复制给AI的描述
入口旁的提示点轻微呼吸;点击后展开一句说明和快捷操作,读完再消除未读状态。
入口旁的提示点轻微呼吸;点击后展开一句说明和快捷操作,读完再消除未读状态。
聚光高亮:强制聚焦

- 适用场景:当前步骤必须让用户只关注一个区域时。
- 交互方式:用遮罩压暗整个页面,只露出目标操作区。用户在高亮区域完成点击后,再把聚光移动到下一个目标,遮罩外暂时不能误触。
可复制给AI的描述
用遮罩压暗页面,只露出当前目标;完成点击后把聚光和说明移动到下一目标,遮罩外暂时不能误触。
用遮罩压暗页面,只露出当前目标;完成点击后把聚光和说明移动到下一目标,遮罩外暂时不能误触。
新手任务清单:任务追踪

- 适用场景:需要把入门过程拆成几项任务时。
- 交互方式:使用可持续查看的清单记录进度。每完成一项,勾选状态、进度条和下一项提示同步更新,全部完成后显示完成反馈。
可复制给AI的描述
每完成一项,勾选、任务状态、进度条和下一项提示同步更新;全部完成后显示完成反馈。
每完成一项,勾选、任务状态、进度条和下一项提示同步更新;全部完成后显示完成反馈。
情境提示:情境触发

- 适用场景:只有用户进入特定状态才需要提醒时(如字段为空或第一次打开某个工具)。
- 交互方式:提示跟着当前操作出现,显示与此刻任务相关的说明,问题解决后自动收起,不做常驻教程。
可复制给AI的描述
用户进入特定状态时显示与当前任务相关的提示;问题解决后自动收起,不做常驻教程。
用户进入特定状态时显示与当前任务相关的提示;问题解决后自动收起,不做常驻教程。
知识小结:6种新手引导组件对比
下表汇总6种组件的功能亮点、触发时机、用户操作、切换方式和定位,方便对比选择。

| 组件名称 | 功能亮点 | 触发时机 | 用户操作 | 切换/结束方式 | 适用场景 | 对比维度 |
| 产品导览(Product Tour) | 连续步骤引导,高亮区域+说明内容+步骤进度同步切换 | 第一次使用需连续认识多个功能时 | 点击“下一步” | 最后给出“完成”入口 | 多步骤功能引导 | 连续带路型 |
| 操作指引标注(Coach Mark) | 提示气泡+箭头精准指向目标,不遮挡其他操作 | 需要解释某一个按钮怎么用时 | 点击“明白了” | 收起提示 | 单个控件解释 | 解释单个控件型 |
| 热点提示(Hotspot) | 轻微呼吸提示点,点击后展开说明或快捷操作 | 刚上线但不必立刻学习的功能 | 点击提示点 | 读完后消除未读状态 | 轻提醒场景 | 轻提醒型 |
| 聚光高亮(Spotlight) | 压暗整个页面,只露出目标操作区,其他区域不可误触 | 必须让用户只关注一个区域时 | 在高亮区域完成点击 | 聚光移动到下一个目标 | 强聚焦场景 | 强聚焦型 |
| 新手任务清单(Checklist) | 可持续查看的清单,记录进度,勾选后进度条和下一项提示同步更新 | 需要把入门过程拆成几项任务时 | 完成一项勾选 | 全部完成后显示完成反馈 | 任务追踪场景 | 任务追踪型 |
| 情境提示(Context Hint) | 提示跟着当前操作出现,问题解决后自动收起 | 用户进入特定状态(如字段为空、第一次打开工具) | 无需额外操作 | 问题解决后自动收起 | 按情境出现场景 | 按情境出现型 |
© 版权声明
THE END

![子比主题 – 文章标题前角标扫光样式[优化版]-小妖客栈](https://xykz.cn/wp-content/uploads/2025/02/20250219161210627-image.gif)









暂无评论内容