Astryx Tour组件实战三步搞定产品新手引导之旅【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一款完全可定制、面向 Agent 的开源设计系统其中的 Tour 组件专为产品新手引导Onboarding / NUX 引导而生它像一个聚光灯控制器把用户一步步带到页面上的关键元素旁配上方言式的提示气泡让新用户 3 步就能上手你的产品。本文将带你快速学会如何用 Tour 组件搭建一个专业、简洁的产品引导之旅。为什么用 Astryx Tour 做产品引导新手引导做不好用户流失率会悄悄上升做得太重用户又会直接跳过。Astryx Tour 的官方定位是「引导式产品 tourNUX / Onboarding」它自带三类实用能力 聚光灯高亮Spotlight当前步骤的目标元素保持点亮其余区域变暗用户视线被自然聚焦轻量 Coachmark 模式关闭背景遮罩后只用光环圈住目标元素适合单点功能提示步骤控制与进度自带 上一步 / 下一步 / 关闭 控件可选显示「第 2 步 / 共 5 步」的进度文案组件定义在 Tour.tsx 与 TourStep.tsx属于 Astryx 的实验组件包lab——API 仍在快速迭代适合在可接受 canary 版本的项目中尝试。第一步认识 Tour 与 TourStep 的协作关系Tour 组件本身不渲染任何可见界面它只是一个控制器管理当前激活的是哪一步负责前进、后退、完成、关闭这些状态流转通过 React Context 把状态共享给声明式嵌套在内部的 TourStep 子组件而TourStep才是真正看得见的部分它把高亮环画在一个独立覆盖层上目标元素本身从不会被改动样式并借助 Astryx 核心的 Popover / Layer 能力把提示气泡锚定在目标元素旁边。 这种控制器 步骤的分离设计意味着步骤顺序直接由你在 JSX 里写的先后顺序决定无需再维护一个容易和界面脱节的步骤数组。第二步三步写出一个可用的新手引导核心只有三步以 Storybook 示例 Tour.stories.tsx 为参照1️⃣ 用 ref 标记要引导的元素const saveRef useRefHTMLButtonElement(null); Button ref{saveRef} labelSave /2️⃣ 用 Tour TourStep 声明引导步骤Tour isActive{isActive} hasBackdrop isStepCountShown onDismiss{() setIsActive(false)} TourStep targetRef{saveRef} heading保存你的工作 改动会自动保存到云端。 /TourStep TourStep targetRef{shareRef} heading与团队分享 从这里邀请队友并管理权限。 /TourStep /Tour3️⃣ 用一个状态开关控制启停isActive是受控属性为false时什么都不渲染且步骤会重置回第一步——下次开启即可从头再走一遍天然适合每个用户只引导一次的场景。关键属性速查表属性组件作用isActiveTour引导是否进行中必传受控onDismissTour任何退出都会触发携带原因backdrop / escape / close / skip / complete可据此区分完成与中途跳过hasBackdropTour是否开启聚光灯遮罩默认关闭isStepCountShownTour是否显示「第 2 步 / 共 5 步」进度targetRefTourStep指向目标元素的 ref需为 button 类元素placementTourStep气泡方位above/below/start/endalignmentTourStep气泡对齐start/center/end让引导更专业的 4 个最佳实践根据官方文档 Tour.doc.mjs 中的建议保持简短只放几个高价值步骤长引导注定被跳过自己持久化已看过组件只通过onDismiss上报结果请在其中写入本地存储避免用户每次访问都看一遍目标元素要稳定可见确保某一步激活前目标已在屏幕内不要用引导替代清晰的设计关键信息应直接内联在界面上引导只是补充另外Tour 完全跟随主题高亮环的颜色取自当前主题的 accent 令牌你可以在任意Theme作用域内获得与品牌一致的引导视觉 总结何时该上 Tour 组件✅ 新功能上线想让用户一眼注意到入口✅ 新用户首次进入需要用 3~5 步讲清核心流程✅ 想用一个轻量的 coachmark 圈出某个按钮⚠️ 它目前位于实验包 packages/lab仅以canary版本发布请在可接受 canary 更新节奏的项目中使用掌握 Tour 的控制器 步骤思路后你的产品引导之旅只需要标记目标 → 声明步骤 → 控制启停。三步之后新用户就能被温柔地领到正确的位置。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
