跳到主要内容
前端术语库

UI 组件 · 营销

步骤说明区

How It Works

也叫：使用流程、三步上手、流程说明、How It Works Section、Steps Section、Process

官网上用 3~4 个编号步骤说明「怎么开始用」的区域，每步一个序号、小标题和一句说明，让访客知道上手要做哪几件事。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在特性网格后面加一个步骤说明区：h2 标题「三步开始使用」（步数按实际流程写），下面 3 步横向等宽排开，用 ol 列表。每步顶部是 40px 的圆形序号（深色底、白字），序号之间用一条 1px 虚线连接；序号下方是 18px 粗体、动词开头的小标题和两行以内的 15px 灰色说明。步骤内容按我提供的真实上手流程写：［第 1 步］［第 2 步］［第 3 步］，不要为了凑成三步合并或省略必要的步骤。最后一步下方放一个「免费试用」主按钮。手机上改为纵向排列，序号在左、文字在右。

发给

01判断

你的内容是这样吗？

对照两列，确认步骤说明区是不是你要找的。

符合这些情况，用步骤说明区

  • 官网、落地页需要告诉访客「开始使用要做哪几步」，降低尝试的顾虑
  • 服务类产品（预约、寄修、开户），需要说明从下单到完成的流程
  • 活动页说明参与方式，例如报名、提交作品、等待评选

是这些情况，换成别的

  • 表单或下单流程里显示用户当前做到第几步

    改用步骤条

  • 几条并列、没有先后的卖点

    改用特性网格

  • 真正需要用户分几步填写信息

    改用分步向导

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    实际要十几步的配置硬写成「三步搞定」，访客真去用时才发现很复杂

  2. 02

    步骤没有编号也没有连线，看起来和特性网格一样，分不出先后

  3. 03

    做成可以点击、会高亮的步骤条样子，访客以为能点进去操作

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由区块标题和 3~4 个按顺序排列的步骤组成，每步是序号或图标、动词开头的小标题和一两行说明，步骤之间常有连线或箭头，末尾可接一个开始按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一排三四个带大号数字 1、2、3 的块，数字常在圆圈里
  2. 2数字之间有连线或箭头，每个数字下面是小标题和一两行说明
  3. 3在官网页面中部，末尾常有一个开始按钮

04解释

详细解释

步骤说明区通常在特性网格前后，标题类似「三步开好你的店」。下面 3~4 步横向排开，每步有一个大号序号（或图标）、一个动词开头的小标题（「上架商品」）和一两行说明，步骤之间常有连线或箭头；也有纵向排列、每步配一张截图的写法。最后一步后面常接一个开始按钮。

它和 步骤条 名字像，作用完全不同：步骤条是表单、下单流程里的进度指示，显示用户做到第几步，会随操作变化；步骤说明区只是官网上的一段说明，不记录进度，也不能点。它和 特性网格 的区别在顺序：特性网格的几条是并列的卖点，步骤说明区的几步有先后，必须编号。和 分步向导 的区别：分步向导是真正让用户一步步填写的页面。

按产品真实的上手流程写，步骤不超过 4 步，每步一个动作；实际要十几步时，不要硬压成「三步搞定」误导访客。小标题用动词开头，说明写清这一步大概要多久、要准备什么。序号用 ol 列表，手机上改为纵向排列。

开发者信息
术语 ID
component-how-it-works
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • section:is([class*="how-it-works" i], [id*="how-it-works" i], [class*="howitworks" i], [class*="how_it_works" i], [class*="steps-section" i], [class*="process-section" i], [class~="process"], [id="how" i], [id="steps" i], [id="process" i])
  • :is([class*="how-it-works" i], [id*="how-it-works" i], [class*="howitworks" i], [class*="how_it_works" i]) :is(ol, ul, div[class*="steps" i]):not(li *, [class*="steps" i] *)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • how-it-works
  • howitworks
  • steps-section
  • process-section
  • step-by-step
  • three-steps
  • simple-steps
  • how-to-use
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • HowItWorks
  • HowItWorksSection
  • StepsSection
  • ProcessSection
  • SimpleSteps
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
  • 网格排列
  • 重复子项
优先级
4 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30