mcpField
U
ux-onboarding

ux-onboarding

github.com/uxcel-lab设计与 UI36100 次安装17 周前更新
代码仓库

关于 ux-onboarding

面向 UX 设计的生成式技能,帮助判断产品是否需要引导,并依据产品和用户设计首次使用体验。强调轻量指导、减少必要之外的请求,并通过审查技能验证方案。

主要功能

  1. 01判断是否需要新手引导
  2. 02选择演示、提示或清单形式
  3. 03减少问题和权限请求
  4. 04设计可跳过且显示进度的流程
  5. 05衔接审查技能进行验证

适用场景

  1. 01规划复杂应用的首次使用指导
  2. 02仅收集必要的设置资料
  3. 03在适当时机请求权限

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/uxcel-lab/product-skills --skill ux-onboarding

安装后在 Claude Code 中输入/ux-onboarding确认已加载。

详细介绍

入门流程技能

此技能的行为方式(请先阅读)

这是一项生成式技能,而入门引导很容易陷入过度设计:常见的本能做法是设计多屏导览(没人会读),再加上一大堆事先提问和“启用所有权限”的提示——这会主动阻碍用户使用产品,并导致用户流失。经验教训很直接:**大多数应用不需要教程;用户会在使用中学习。**因此,此技能设有严格的门槛:

  1. **第一道门槛:这真的需要入门引导吗?**很多时候,答案是“几乎不需要”——最好的入门引导,是以最轻量的方式帮助用户获得价值。
  2. 应用始终适用的核心原则——适用于任何首次使用体验的原则。
  3. 审慎选择方式和提问内容——说明取决于具体情境的决策及其权衡;不要默认采用 6 屏轮播。

然后移交给各项审查——尤其是 dark-patterns(强制索要权限、要求启用通知以及骚扰朋友的情况,在入门引导中最为集中)。


步骤 0 — 明确情境,从判断门槛开始

**门槛 — 是否需要入门引导?**根据经验教训,主要在以下情况下才有必要进行入门引导:

  • 应用很复杂(在用户接触功能时进行说明,而不是一开始就讲解),或
  • 确实需要数据才能运行(例如银行应用),或
  • 工作流独特或不熟悉,或
  • 用户预期会有教程(例如手机游戏)。

如果这些情况都不符合,那么建议采用最轻量的方式——空状态引导和情境提示——而非导览。然后收集以下信息:

  • 产品复杂度——适合边用边学,还是确实需要说明。
  • 开始使用真正必需的内容——所需的最少数据或权限(如有)。
  • 受众——新手还是专家;一个用户画像还是多个(决定是否按用户画像分支)。
  • 平台——移动端(系统权限提示、空间有限)还是 Web。

如果在没有答案的情况下继续,请说明假设。


始终适用的核心原则(适用于任何入门引导)

  • **优先展示价值;尽早带来一次成功体验。**先展示好处,再提出要求。Duolingo 会在入门引导结束时让用户练习两个真实句子。尽早取得成功有助于提高留存率。
  • 保持简短。最多约 4–5 个屏幕;大多数用户期望入门引导用时不超过 60 秒。如果感觉像在上课,用户就会跳过。
  • **只询问必要信息,并说明原因。**信任尚未建立前,不要用问题轰炸用户。每个字段或权限都需要清楚说明“为什么现在要提供”;如果无法证明其在启动时的必要性,就留待之后在适当情境下收集。
  • **一次只介绍一件事。**每次只提供一条情境提示;按照用户接触功能的节奏逐步介绍。少即是多。
  • **采用渐进式披露。**优先展示主要和最常用的功能;用户提出需求时再显示高级选项。层级不超过 2 层。
  • **始终允许跳过,并显示进度。**告知用户总共有多少步骤以及当前所在位置;允许用户退出。绝不要把用户困在导览中。
  • **利用空状态和成功状态。**空白屏幕也是开展入门引导的机会(提供教育内容和清晰的行动号召);尽早呈现成功状态能建立积极的第一印象。
  • 以清晰且相关的行动号召结束——引导用户采取合乎逻辑的下一步(“开始购物”“创建你的第一个项目”)。
  • **不要重复展示已完成的入门引导。**跟踪完成状态;完成后再重复提示会造成阻碍。

需结合情境判断的决策(展示选项,不要自动应用)

逐项说明权衡,并提供与步骤 0 相关的建议。默认采用“完整引导 + 事事都问”是错误做法。

决策适用情况避免/调整情况默认建议
是否引导(以及引导力度)应用复杂、需要数据、用户不熟悉,或用户预期会有教程简单、适合边用边学的应用以能让用户体验到价值为准,尽量轻量;优先采用空状态 + 情境提示,而非导览
方式(分步引导/交互式导览/情境提示/清单/空状态引导/权限预告)按需求选择:交互式导览适合动手学习,清单适合多步骤设置,情境提示适合帮助用户发现功能首次启动时使用静态滑动轮播(通常会被跳过)优先采用交互式或情境式方式,而非静态方式;见下方方式说明
个性化/用户画像问题答案确实会改变体验(例如熟练程度、自由职业者还是企业用户)询问不会用到的信息,或在首次启动时询问视觉自定义选项只有在答案会改变引导流程时才询问,并说明原因;否则延后
权限/通知时机在恰当的情境、用户即将体验价值时请求,并进行权限预告(在系统提示出现前说明好处)一开始就请求所有权限/“启用所有通知”结合情境并预先说明——绝不强迫用户全部启用(→ 暗黑模式)
注册时机用户体验到价值之前确实需要账户在用户看到任何内容之前就强制注册逐步引导用户参与——先让用户预览/试用(延后注册可使注册量提升约 29%)
功能/说明型引导独特功能或新发布的功能;用户确实不熟悉的工作流用户首次启动一个一目了然的应用时在恰当情境中介绍新功能,而不是在启动教程中介绍
方式说明(供选择的菜单)
  • 交互式导览 — 在恰当情境中触发,让用户动手学习。
  • 情境提示 — 只在需要时一次提供一条简短提示。
  • 清单 — 引导用户完成设置并显示进度;适合多步骤产品,能带来良好的成就感。
  • 空状态引导 — 由屏幕本身教会用户如何执行第一个操作;最轻量。
  • 权限预告 — 在系统权限对话框之前显示说明价值的屏幕。
  • 分步引导(静态屏幕) — 仅在必要时使用;≤4–5 个屏幕,聚焦最令人兴奋/最重要的少数内容。

验证结果(编排)

交接时以可安装技能的 name 标明每个审查视角。只有在该技能已安装时才调用;如果未安装,本技能的核心规则已涵盖这些要求,因此请继续,不要因此阻塞。

生成或修订后,请将结果交给各审查视角审核,而不是直接宣布完成。这些都是候选审查视角——具体要求由 docs/orchestration-policy.md 规定,或者将整个流程交由 ux-design-review 处理。此处,dark-patterns、heuristics 和 microcopy 属于 Tier A(自动运行);accessibility 和 aesthetics 属于 Tier B(可选)——在现有设计系统下,aesthetics 审查会被抑制,accessibility 审查则会缩小到使用层面。如果用户调用此技能是为了处理某个具体事项,请遵守该范围。

  • ux-dark-patterns-audit(Tier A)——新手引导中的特定陷阱:强制或提前索要权限、“启用所有通知”、通过访问通讯录骚扰好友、用羞辱性文案让用户放弃跳过选项。新手引导应尊重用户自主权(用心设计新手引导)。
  • ux-aesthetics-audit(Tier B — 可选;使用设计系统时抑制)——提示、覆盖层或引导页是否造成杂乱,或掩盖了主要操作?
  • ux-heuristics-audit(Tier A)——用户控制权(可跳过)、可见性(进度、成功状态)、识别,以及帮助和文档。
  • ux-accessibility-audit(Tier B — 可选;使用设计系统时缩小范围)——工具提示和覆盖层是否可通过键盘和屏幕阅读器访问;整个流程是否可以不用鼠标跳过。
  • ux-microcopy-audit(Tier A)——新手引导文案(提示、CTA、空状态/成功状态)是否清晰、以行动为导向,并符合品牌语气。

如果审核指出流程负担过重或包含强制操作,请以关卡机制为准进行调整:采用能让用户获得价值的最轻量流程。


常见的应做与不应做模式

❌ 不要✅ 应该
因为每个应用都有教程就添加教程先评估是否需要——许多应用只需要空状态和情境提示
首次启动时设置 6 个或更多静态引导页控制在 4–5 页以内,或跳过轮播,改为情境式引导
一开始就询问所有问题/请求所有权限只提出最低限度的请求;在用户即将获得价值时提前说明权限用途
不展示任何内容就强制注册逐步引导用户参与——先预览/试用
在带来价值之前就解释功能让用户尽早获得一次成功体验
在引导流程中阻止用户离开始终允许跳过,并显示进度
将空状态/成功状态留白借此引导用户完成首次操作,并鼓励早期成功
完成后仍不断显示提示记录状态,不要重复显示
为了提高用户回访率而要求“启用所有通知”提供情境相关且理由充分的选择性启用选项(→ 暗黑模式审核)
未经检查就发布交由暗黑模式、审美、启发式和无障碍审核

经验来源(Uxcel)

评论

支持 Markdown