SuperAPI AI 工具集

wizard

前端与建站

查看项目

更新于 10-16 04:15

技能介绍

Wizard / Stepper 用于多步骤表单与流程,是多步骤交互的界面模式。

【用途与解决的问题】 该模式帮助团队建立一种可靠方式,把冗长流程拆分为有序步骤,并带有可见的进度与评审检查点。它在团队需要引导与设置(onboarding and setup)时最为有用。相较于相邻模式,它应在不隐藏用户继续推进所需的状态、规则或恢复路径的前提下减少摩擦。

【适用场景】

  • 引导与设置(Onboarding and setup)
  • 结账与申请流程(Checkout and application flows)
  • 多步骤内部工具(Multi-step internal tooling)

【不适用场景】

  • 当产品面仍然较小时,使用更简单的可见导航或单页流程。
  • 如果团队无法很好地支撑其状态复杂度,避免使用高级交互模式。
  • 在朴素路径已经足够强之前,不要引入隐藏的高级用户行为。

【实现流程】

  1. 在复制示例前,先确认该模式与问题和约束匹配。
  2. 从 references/pattern.md 中的结构与示例开始,然后选择最小的可行变体。
  3. 在叠加视觉打磨之前,先应用无障碍、性能和交互保障。
  4. 使用测试指南验证键盘、屏幕阅读器、响应式与失败场景下的行为。

【无障碍保障】 键盘交互:

  • 验证 Wizard / Stepper 可以仅用键盘完成。
  • 当模式打开、更新或显示额外 UI 时,保持焦点顺序合理。
  • 保留在高缩放级别下仍然可读的可见焦点状态。 屏幕阅读器支持:
  • 优先使用语义元素,仅在语义不足时添加 ARIA。
  • 在正确的位置以正确的礼貌程度播报错误、加载或完成等状态变化。
  • 在有用时,通过 aria-describedby 或结构化标题连接标签、提示与状态文本。 视觉无障碍:
  • 不要仅依赖颜色来传达严重程度、完成情况或选中状态。

【常见错误】

  1. 只设计顺利路径:模式在加载、空和失败状态下才显得不足。修复方式是在默认状态之外明确完整生命周期,避免实现阶段临时发挥。
  2. 让交互与内容脱节:当控件、状态与支持信息感觉割裂时,用户需要付出更多努力。修复方式是让模式的信息架构贴近交互模型。
  3. 把无障碍当作最后一步:交互固定后再处理键盘、播报和阅读顺序问题代价高昂。修复方式是在首次实现时就纳入语义、焦点行为和播报。

【相关模式】

  • https://uxpatterns.dev/patterns/e-commerce/checkout
  • https://uxpatterns.dev/patterns/forms/form-validation
  • https://uxpatterns.dev/patterns/user-feedback/progress-indicator

完整实现细节、示例与测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/advanced/wizard