跳到主要内容
前端术语库

UI 组件 · 营销

数据亮点

Stats Band

也叫：数字亮点、数据条、成绩展示、Stats Section、Key Numbers、By the Numbers

官网上一整条横向区域，并排放三四个大号数字和一行说明（例如「正在营业的店铺」），用有来源的具体数字说明产品的规模或效果。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在客户评价前面加一条数据亮点：整宽深色背景，上下内边距 72px，内容最大宽度 1080px；里面 4 组数字等宽排开（手机上 2 × 2），每组是 44px 粗体数字（单位用 20px 跟在后面）和下面一行 14px 浅灰说明，组与组之间用 1px 竖线分隔，不要卡片边框，也不要涨跌箭头。数字用我提供的真实数据：［数字 + 单位 + 说明 + 统计口径］× 4；我没提供的先写「待补充」，不要自己编。区块底部一行 12px 小字写「数据截至 ×××× 年 ×× 月，来源：……」。

发给

01判断

你的内容是这样吗？

对照两列，确认数据亮点是不是你要找的。

符合这些情况，用数据亮点

  • 官网、落地页需要用规模或效果数字（服务店铺数、平均节省的时间）增加可信度
  • 年度回顾页、里程碑公告页，集中展示几项可以核实的成绩
  • 活动页展示报名人数、覆盖城市等有据可查的数据

是这些情况，换成别的

  • 后台仪表盘里给用户看的实时业务指标，用统计数值（指标卡）

    改用统计数值

  • 数字需要看趋势、做对比

    改用图表

  • 没有真实、可核实的数据时，不要为了好看硬放

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

02避坑

常见坏用法

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

  1. 01

    编造「10 万+ 用户」「99.9% 满意度」这类没有来源的数字

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    数字没有单位和统计口径，看不出是注册人数还是活跃人数、截至什么时候

  3. 03

    一排放了七八个数字，还加上卡片框和涨跌箭头，做成了后台仪表盘的样子

反例示意，对应第 01 条

03识别

怎么认出它

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

结构

由整宽的背景条和 3~4 组并排的数字组成，每组是大号数字（带单位）和一行说明，可带区块标题和底部的统计口径说明。

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

识别特征

  1. 1官网页面中间一条整宽的深色或浅灰色带，里面几个特别大的数字并排
  2. 2每个数字下面一行小字说明，没有卡片边框和涨跌箭头
  3. 3上下是首屏横幅、特性介绍、客户评价这类官网区块

04解释

详细解释

数据亮点是落地页里的一条整宽区块，常用深色或浅灰背景和上下内容隔开。里面 3~4 组数字并排，每组是一个很大的数字（40px 以上，带单位，例如「3 分钟」「98%」）和下面一行说明，组与组之间常用细竖线分隔。有时加一行标题，底部一行小字写统计口径和截止时间。

它和 统计数值（指标卡）最容易混：指标卡在后台仪表盘里，给正在用的人看实时业务数据，一般一个数字一张卡片，带涨跌和对比；数据亮点在官网上，给第一次来的访客看，是几条固定的宣传数字，没有卡片框、没有涨跌箭头，所在页面还有首屏横幅、特性网格这些官网区块。它和 特性网格 的区别：特性网格讲功能，数据亮点只摆数字。它和 Logo 墙 都是背书，一个用数字，一个用客户标志。

每个数字都是产品事实，必须有真实来源，并写清口径和时间（「截至 2026 年 6 月，近 30 天有订单的店铺」）；拿不到数字就不做这个区块，不要编「10 万+ 用户」「99.9% 满意度」。数字不超过 4 个，单位跟在数字后面，统一千分位。数字从 0 滚动到目标值的动画可以有，但要支持减弱动态效果（prefers-reduced-motion），并保证最终值清楚可读。

开发者信息
术语 ID
component-stats-band
DOM 选择器

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

  • body:not(:has(aside, [class*="sidebar" i], [class*="dashboard" i])) section:is([class*="stats" i], [id*="stats" i], [class*="numbers" i], [class*="counters" i]):not([class*="card" i], [class*="item" i])
  • body:has([class*="hero" i]) :is(section, div)[class*="stats" i]:not([class*="stats" i] *, [class*="card" i], [class*="item" i])
  • dl:has(> div > dd:is([class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"])):not(:has(> :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .shadow, .shadow-sm, .shadow-md, .border, .ring-1)))
  • body:has([class*="hero" i], h1:is(.text-5xl, .text-6xl, .text-7xl)) :is(section, div, dl):has(> :nth-child(3) > :is(.text-4xl, .text-5xl, .text-6xl):is(.font-bold, .font-extrabold, .font-semibold)):not(:has(> :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .shadow, .shadow-sm, .shadow-md, .border, .ring-1)))
类名关键词

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

  • stats-band
  • stats-section
  • stats-bar
  • stats-strip
  • stats-banner
  • key-numbers
  • by-the-numbers
  • numbers-section
  • impact-numbers
  • counter-section
组件名

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

  • StatsBand
  • StatsSection
  • StatsBar
  • StatsStrip
  • KeyNumbers
  • ByTheNumbers
  • NumbersSection
结构特征

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

  • 大号数字
  • 网格排列
  • 标题开头
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30