一、引言与架构全景：为什么向导流程是中后台高转化率的核心枢纽？

在中后台企业级应用、SaaS 平台以及现代 Web 产品的关键业务路径中，步骤条（Steps） 与 分步向导（Multi-Step Wizard） 承担着拆解复杂业务流程、降低用户认知负荷的核心使命。无论是企业租户开户入驻（Onboarding）、多资产跨币种结算结算流（Checkout）、生产环境发布流水线，还是复杂表单分步填写，步骤条都在界面顶部或侧边充当着引导方向与展示进度的“GPS 导航仪”。

然而，在日常 UI 设计与前端代码交付协作中，步骤条经常出现以下高频痛点：

1. 连接线固定像素拉伸断裂：在横向步骤条中，许多设计师直接使用一条固定长度的直线（Line）或矩形连接两个步骤。当父级画板宽度从 1200px 拉伸至 1440px 或缩紧至 768px 时，连接线无法自适应伸缩，导致线条错位、穿透或截断；
2. 状态流转与视觉语义混乱：步骤节点通常包含“未开始（Wait）”、“进行中（Process）”、“已完成（Finish）”与“异常中断（Error）”四种状态。许多设计稿只绘制了“未激活”与“激活”两态，缺失了对“已完成（绿色对勾）”与“校验失败（红色感叹号）”的明确定义，导致前端随意使用灰色或警告色替代；
3. 纵向与横向拓扑难以无缝复用：复杂向导既需要在顶部作为横向进度指示器，又需要在侧边作为纵向带有详细描述文案的长导轨。缺乏通用架构抽象会导致团队在两个方向上分别维护两套完全割裂的组件资产；
4. 状态机与真实数据联动脱节：交互原型中点击“下一步”往往只是简单切换整页画板，缺乏变量支持，无法根据当前步骤动态校验并切换内容区域，难以进行可交互的可用性测试；
5. Dev Mode 前端属性映射模糊：设计中的步骤序号、图标替换、标题与描述插槽未与 Ant Design Steps 或前端组件的 current、status、items API 严格对齐，增加了研发沟通成本。

为了彻底消除设计与交付之间的摩擦，我们需要将企业级步骤条系统抽象为四层拓扑结构：

+------------------------------------------------------------------------+
|          Figma 步骤条系统（Steps & Wizard Architecture）四层拓扑结构          |
+------------------------------------------------------------------------+
| 1. 步骤节点视觉与插槽层 (Step Node & Slot Layer)                        |
|    - 序号徽标/状态图标 (Number Badge / Checkmark / Error Cross)         |
|    - 文本信息中枢 (Title Slot / Subtitle Slot / Description Block)       |
|    - 可交互点击热区 (Clickable Step Header / Keyboard Focus Ring)        |
+------------------------------------------------------------------------+
| 2. 弹性自适应连接线几何层 (Adaptive Connector Line Layer)                |
|    - 横向导轨弹性伸缩 (Auto Layout Fill Container / Stroke Alignment)   |
|    - 纵向导轨无限贯通 (Vertical Tail Line / Height Hug & Fill)          |
|    - 状态渐变/实线虚线映射 (Solid Primary / Dashed / Muted Grey)         |
+------------------------------------------------------------------------+
| 3. 全局步骤状态机与校验层 (Wizard State Machine & Validation Layer)      |
|    - 步骤索引驱动 (currentStep: 0, 1, 2, 3...)                          |
|    - 状态裁决矩阵 (Wait / Process / Finish / Error)                     |
|    - 分支拦截与表单校验联动 (Validation Guard & Step Blocker)           |
+------------------------------------------------------------------------+
| 4. 语义化 Tokens 与 Dev Mode 前端工程交付层 (Tokens & Handoff Layer)    |
|    - 尺寸与间距 Tokens (steps-icon-size, steps-gap, steps-tail-width)   |
|    - 状态色彩 Tokens (step-color-wait, step-color-process, step-error)  |
|    - Ant Design Steps / React Stepper 生产级规范代码交付                 |
+------------------------------------------------------------------------+

---

二、横向与纵向双拓扑 Auto Layout 几何架构

步骤条在界面布局上主要存在两种形态：横向步骤条（Horizontal Steps） 与 纵向步骤条（Vertical Steps）。

1. 横向步骤条（Horizontal Steps）的弹性伸缩模型

横向步骤条是顶部导航的核心形态，要求其在任意宽度的父容器下均能均分宽度或自适应拉伸。

• 单个步骤项（Step Item）结构：
  • 外层容器：宽度设为 Fill container，高度设为 Hug contents；
  • 采用水平 Auto Layout，包含两大部分：左侧步骤内容区（Step Content） 与 右侧自适应连接线（Connector Line）；
  • 连接线自适应技巧：连接线图层设为 Fill container，高度为 1px 或 2px，垂直对齐方式设置为与步骤图标垂直居中。对于末尾最后一个步骤（Last Item），右侧连接线通过 Figma 的 Boolean Property（如 hasTail: false）隐藏，确保最后一个步骤不拖尾巴；
• 图标与文字排版模式：
  • 水平内联模式（Inline Mode）：图标与标题处于同一基线水平排列，适合宽度充裕的紧凑导航；
  • 垂直居中模式（Stacked Mode）：图标在上、标题与描述在下居中对齐，适合视觉层级较高的大型向导页面。

2. 纵向步骤条（Vertical Steps）的无限贯通模型

纵向步骤条常用于侧边导航、审批进度流转或系统更新时间线（Timeline），其核心难点是连接线必须严格贯通相邻两步的图标中心：

• 左侧导轨中枢（Rail Column）：
  • 采用垂直 Auto Layout，宽度固定为图标尺寸（如 32px）；
  • 顶部为步骤图标（固定宽高 32px * 32px）；
  • 底部为垂直连接线（Line Tail）：宽度设为 2px，居中对齐，纵向高度设置为 Fill container。当右侧文字由于长文本产生多行折叠时，左侧垂直连接线会自动纵向拉长，始终紧密连接至下一个步骤；
• 右侧文本中枢（Content Column）：
  • 包含主标题（Title）、子标题（Subtitle）以及长文本描述（Description）；
  • 文本宽度设置为 Fill container，确保当侧边栏宽度变动时长文本自动折行。

3. 三种步骤条拓扑选型对比表

拓扑类型	视觉布局特征	适用业务场景	空间占用特点
横向常规型 (Horizontal)	水平铺展，图标与标题并排或堆叠，连接线向右延伸	全屏入驻向导、电商分步下单、SaaS 初始配置向导	占用顶部横向全宽，垂直高度紧凑（约 60px~80px）
纵向详情型 (Vertical)	垂直向下延伸，左侧连续贯穿导轨，右侧大段富文本	工单审批流转、运维变更流水线、长表单多阶段保存	占用左侧固定宽度（如 260px），垂直高度随内容伸缩
迷你点状型 (Inline Dot)	用微型圆点（8px）替代数字图标，极度轻量化	弹窗微型向导（Dialog Wizard）、移动端引导轮播	空间极度集约，仅指示进度概览，不承载过多文本

布局技巧可参考 Auto Layout 自动布局 与 画布与网格系统。

---

三、四态流转矩阵与组件属性（Component Properties）解耦

每个步骤在生命周期中都会经历严格的状态转移：从待处理，到当前正在编辑，再到校验通过完成，或因表单校验错误被中断。

1. 步骤节点 4 态流转矩阵

状态名称 (Status)	节点图标与底色表现	连接线样式 (Tail Line)	标题与描述文字样式	交互含义与操作行为
Wait (待处理)	浅灰空心圆 (#D9D9D9)，深灰数字	浅灰色实线 (#F0F0F0)	弱化次级正文色 text-secondary	后续未开始步骤，用户不可点击或置灰只读
Process (进行中)	品牌主色实心圆 (#1677FF)，白色数字	浅灰色实线 (#F0F0F0)	粗体强调主色 text-primary	当前聚焦编辑步骤，带有外圈半透明呼吸光环
Finish (已完成)	绿色或品牌色实心圆，白色对勾 Check	品牌主色实线 (#1677FF)	正常正文色 text-primary	前置已成功完成步骤，支持点击跳回重新编辑
Error (异常错误)	警示红色实心圆 (#FF4D4F)，白色感叹号/叉	红色或浅灰线	红色警告色 text-error	当前步骤校验未通过，必须修复后方可继续前进

2. 组件属性（Component Properties）降维构建

为了避免为 4 种状态和 3 种拓扑生成冗余变体（Variant Explosion），我们使用组件属性进行解耦：

• Variant - Status：wait | process | finish | error
• Variant - Direction：horizontal | vertical
• Text Property - StepNumber：1, 2, 3...
• Text Property - Title：步骤标题文本
• Text Property - Description：步骤补充说明文本
• Boolean Property - HasTail：是否渲染尾部连接线（末尾节点设为 false）
• Instance Swap - CustomIcon：可选自定义行业业务图标插槽

关于组件解耦的最佳实践，详见 组件与变体系统。

---

四、基于 Figma Variables 的步骤流程状态机与动态交互原型

为了让向导原型具备真实的翻页流转能力，我们通过 Figma Variables 变量系统 配置受控状态机。

1. 状态机变量定义表

变量名 (Variable Name)	数据类型	初始值	作用描述
currentStepIndex	Number	1	当前激活的步骤序号（1: 身份认证, 2: 企业资质, 3: 账号设置, 4: 完成）
totalSteps	Number	4	流程总步数
isStepValid	Boolean	true	当前步骤表单是否通过校验
step1Status	String	"process"	第一步的动态状态
step2Status	String	"wait"	第二步的动态状态
step3Status	String	"wait"	第三步的动态状态

2. “下一步”与“上一步”按钮交互表达式

在底部的操作控制栏中，配置以下交互条件：

[用户点击 "下一步 (Next)" 按钮]
  ├─ Condition: isStepValid == true
  │    ├─ Set currentStepIndex = currentStepIndex + 1
  │    ├─ Set step1Status = "finish"
  │    └─ Set step2Status = "process"
  └─ Else:
       └─ Set step1Status = "error" (触发红色警示态并弹出 Toast 提示)

[用户点击 "上一步 (Prev)" 按钮]
  ├─ Condition: currentStepIndex > 1
  │    ├─ Set currentStepIndex = currentStepIndex - 1
  │    └─ 更新对应步骤的状态标识

结合 Figma 的动态组件层级切换（Conditional Frame / Component Set），用户可以在单一画板内顺畅体验步骤流转，极大降低原型文件体积并提升评审质感。进阶交互技巧可参考 高级交互与原型制作。

---

五、Design Tokens 语义化定义与无障碍色彩适配

为了确保步骤条在明暗主题与多品牌设计系统中平滑迁移，需将尺寸与色彩规范固化为 Design Tokens：

// ---------------------------------------------------------------------------
// Steps Design Tokens 规范定义
// ---------------------------------------------------------------------------
@steps-icon-size-md: 32px;
@steps-icon-size-sm: 24px;
@steps-icon-font-size: 14px;
@steps-line-thickness: 1px;
@steps-title-font-weight: 600;

// 状态语义色彩 Tokens
@step-color-wait-icon-bg: transparent;
@step-color-wait-icon-border: var(--color-border-secondary, #D9D9D9);
@step-color-wait-text: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
@step-color-wait-tail: var(--color-border-tertiary, #F0F0F0);

@step-color-process-icon-bg: var(--color-primary-500, #1677FF);
@step-color-process-text: var(--color-text-primary, rgba(0, 0, 0, 0.88));
@step-color-process-ring: rgba(22, 119, 255, 0.2);

@step-color-finish-icon-bg: transparent;
@step-color-finish-icon-border: var(--color-primary-500, #1677FF);
@step-color-finish-text: var(--color-text-primary, rgba(0, 0, 0, 0.88));
@step-color-finish-tail: var(--color-primary-500, #1677FF);

@step-color-error-icon-bg: transparent;
@step-color-error-icon-border: var(--color-error-500, #FF4D4F);
@step-color-error-text: var(--color-error-500, #FF4D4F);
@step-color-error-tail: var(--color-border-tertiary, #F0F0F0);

更详细的设计系统工程规范可参阅 Design Tokens 设计令牌规范 与 样式与设计系统。

---

六、Dev Mode 前端工程代码交付（React / Ant Design）

在 Dev Mode 开发模式 下，前端工程师可以直接映射组件状态，完成生产级代码的落地。

1. Ant Design (React) 受控步骤向导标准化实现

import React, { useState } from 'react';
import { Steps, Button, message, theme } from 'antd';

const { Step } = Steps;

interface WizardStep {
  title: string;
  description?: string;
  content: React.ReactNode;
}

const stepsData: WizardStep[] = [
  {
    title: '企业身份认证',
    description: '填写统一社会信用代码与法务主体信息',
    content: <div className="step-content">第一步：企业基础资料表单</div>,
  },
  {
    title: '资质文件上传',
    description: '上传营业执照原件扫描件及开户凭证',
    content: <div className="step-content">第二步：附件材料上传队列</div>,
  },
  {
    title: '管理员安全绑定',
    description: '配置双因子 MFA 认证与手机号码',
    content: <div className="step-content">第三步：安全鉴权设置</div>,
  },
];

export const EnterpriseWizard: React.FC = () => {
  const [current, setCurrent] = useState<number>(0);
  const [stepStatus, setStepStatus] = useState<'process' | 'error'>('process');

  const handleNext = () => {
    // 模拟表单校验规则
    const isFormValid = true; 
    if (!isFormValid) {
      setStepStatus('error');
      message.error('当前表单校验未通过，请检查必填字段！');
      return;
    }
    setStepStatus('process');
    setCurrent(prev => prev + 1);
  };

  const handlePrev = () => {
    setCurrent(prev => prev - 1);
  };

  return (
    <div className="wizard-container" style={{ maxWidth: 840, margin: '0 auto', padding: 24 }}>
      <Steps current={current} status={stepStatus}>
        {stepsData.map((item, index) => (
          <Step key={item.title} title={item.title} description={item.description} />
        ))}
      </Steps>

      <div className="steps-body" style={{ margin: '32px 0', minHeight: 200 }}>
        {stepsData[current].content}
      </div>

      <div className="steps-actions" style={{ display: 'flex', gap: 12 }}>
        {current < stepsData.length - 1 && (
          <Button type="primary" onClick={handleNext}>
            下一步 (Next)
          </Button>
        )}
        {current === stepsData.length - 1 && (
          <Button type="primary" onClick={() => message.success('流程全部完成，提交成功！')}>
            提交审核 (Submit)
          </Button>
        )}
        {current > 0 && (
          <Button onClick={handlePrev}>
            上一步 (Previous)
          </Button>
        )}
      </div>
    </div>
  );
};

2. 研发走查与无障碍（A11y）验收清单

在向导组件联调上线前，必须核查以下核心体验细节：

1. 移动端响应式折叠策略：在宽度小于 576px 的移动端设备上，横向步骤条必须支持自动响应式降级为纵向步骤条（direction="vertical"）或迷你圆点进度条，杜绝横向撑出视口；
2. 连接线像素对齐检查：在 Retina 高清屏幕与普通屏幕切换缩放比例时，连接线与图标外圆切线必须严密居中对齐，不可出现 0.5px 的锯齿错位；
3. 故障排查诊断决策：关于连接线断裂、反向跳步逻辑混乱等常见问题，请参考 Figma 常见报错与疑难故障诊断手册。