Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

蒙层引导

Coach Marks

加入比较 +

在真实界面上方盖一层半透明蒙层,把某个控件或区域挖空高亮,并在旁边用一两句话和箭头说明它的用途;用户看完关闭蒙层后才回到界面操作。

示意图 · 编辑插画,尚无可操作示例
一张名为 FIELDNOTES 的虚构手机界面示意:整个界面被一层半透明深色蒙层覆盖,只有右下角一个圆形按钮被挖空照亮,旁边一条手绘风格的弯曲箭头指向它,箭头尾端是几条灰色占位文字和一个关闭标记。
一张名为 FIELDNOTES 的虚构手机界面示意:整个界面被一层半透明深色蒙层覆盖,只有右下角一个圆形按钮被挖空照亮,旁边一条手绘风格的弯曲箭头指向它,箭头尾端是几条灰色占位文字和一个关闭标记。

识别特征

  • 半透明蒙层覆盖界面,只把目标控件挖空或高亮
  • 简短文字加箭头或圆圈,直接指向界面上的真实元素
  • 蒙层本身不可操作,关闭后才回到界面

概念边界

蒙层引导是叠在真实界面上的注释,指向的就是用户眼前的那个控件;它不是渐进式披露——渐进式披露把次要内容收起来、等用户需要时再展开,改变的是界面本身给出多少信息,而蒙层引导不隐藏也不展开任何内容,只是对已有控件加注解。它也不是引导教程(onboarding tour):教程是一连串按顺序推进的讲解页或步骤,通常在首次启动时整体播放;单个蒙层引导只解释一处交互,最好在用户即将用到它时出现。把多个蒙层串成一组连续播放,就已经变成了教程,并会带上教程的问题。它也不同于悬停提示(tooltip):tooltip 由用户主动悬停或聚焦触发,不遮挡界面其余部分。

什么时候考虑它

  • 某个手势或控件位置不直观,用户第一次遇到时很可能找不到
  • 界面新增了一个重要功能,需要在不改动布局的前提下指出它
  • 可以在用户即将用到该功能的时刻触发,而不是在启动时统一播放

什么时候慎用

  • 界面本身就需要靠说明才能看懂,应先改设计而不是加注解
  • 一次要解释很多处,蒙层被串成一长串连续步骤
  • 每次打开都重复出现,或关闭后再也找不回来
  • 注解的样子与真实按钮太像,用户试图点击注解本身

取舍

蒙层引导能在不改动布局的情况下把注意力引到一个具体控件上;代价是它打断用户、要求用户先记住说明再去操作,而多数人会尽快关掉它。一次解释的东西越多,记住的就越少,界面也越显得复杂。

条件规则 · 编辑建议

当需要介绍多处交互建议每次只用一个蒙层讲一处,在用户即将用到它的时刻出现,不要串成连续播放的一组。
当蒙层出现时建议提供明显的关闭方式,关闭后不再自动重复,并在帮助入口里保留再次查看的方式。
当设计注解的外观建议让注解在样式上与真实控件明显不同,避免用户把说明当成按钮去点。

相关词条

渐进披露 ↗条件替代 · 界面上有用户暂时不需要、但之后会用到的功能

渐进式披露通过收起与展开调整界面本身的信息量,蒙层引导则保持界面不变、在上面加注解;能用前者让功能自然出现时,通常不必再加一层说明。

空状态 ↗条件替代 · 用户第一次进入一个还没有内容的页面

空状态本身就是解释该页用途、给出第一步操作的位置,不需要再盖一层蒙层去讲同一件事。

认知负荷 ↗提供解释 · 一次要介绍多个功能

用户要先记住说明再去操作,提示越多越难记住,因此每次只讲一处。

持续纠缠 ↗可能误用为 · 蒙层在用户关闭后反复出现,或被用来推广与当前任务无关的功能

解释交互的注解一旦变成反复打断的推广,就成了骚扰式提醒。

来源与支持范围

Nielsen Norman Group · Instructional Overlays and Coach Marks for Mobile Apps (Aurora Harley, 2014-02-16) ↗

该文把 coach mark 描述为常在首次启动时出现、以透明叠层解释界面某部分的 UI 提示;指出用户很少阅读说明,一次展示太多提示会加重记忆负担,连续弹出的提示会让用户更快地关掉它们并觉得应用复杂,提示还可能被误认为可点击的界面元素;建议每条提示只讲一个交互、在合适的时刻逐条出现、以图为主少用文字,并在视觉上与真实界面区分。本词条的定义、适用条件与规则据此转述。

检索日期:2026-10-20 · 快照待确认
Nielsen Norman Group · Onboarding Tutorials vs. Contextual Help (Page Laubheimer, 2023-02-12) ↗

该文区分由系统决定时机推送的"push revelations"(如引导教程)与在用户此刻需要时出现的上下文帮助("pull revelations"),认为教程常被跳过、难以在需要时回忆,并强调帮助必须易于关闭、也易于再次找回,还建议配合渐进式披露、避免要求用户记住多步说明。本词条据此区分单个蒙层引导与引导教程,并给出"在用到时出现、关闭后可找回"的建议。

检索日期:2026-10-20 · 快照待确认

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意,展示蒙层挖空高亮单个控件并附简短注解,不代表已验证的实现。应用到产品前仍须实测关闭后的焦点去向、再次查看的入口,以及注解是否会被误当作可点击元素。

{
  "states": [
    "hidden",
    "shown",
    "dismissed"
  ],
  "a11y": [
    "蒙层出现时焦点移到说明文字上,关闭后回到被高亮的控件",
    "说明内容可被读屏读出,关闭按钮可用键盘触发并支持 Esc",
    "不只依赖箭头与挖空的视觉位置,文字中写明所指控件的名称"
  ],
  "motion": "蒙层淡入淡出即可;尊重减少动态效果的系统设置"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。