跳到主要内容
前端术语库

UI 组件 · 营销

特性网格

Feature Grid

也叫：功能介绍区、卖点网格、功能亮点、Features Section、Benefits Grid、Feature List

官网上介绍产品功能的一块区域：一组图标、小标题和一两行说明，按两列或三列整齐排开，让访客快速扫完主要卖点。

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

怎么跟 AI 说

改成你的业务内容再发

在首屏横幅下面加一个特性网格区块：顶部是 h2 标题（32px）和一行 16px 灰色说明；下面 6 个特性，桌面 3 列、平板 2 列、手机 1 列，间距 32px。每个特性是 40px 的线性图标（同一套图标库）、18px 粗体小标题和两行以内的 15px 灰色说明，不加边框和阴影。特性的标题和说明只用我下面列出的真实功能，没列出的不要自己补：［功能 1：名称 + 一句话说明用户得到什么］……［功能 6］。区块上下留 96px，白色背景，和上下区块的浅灰背景交替。

发给

01判断

你的内容是这样吗？

对照两列，确认特性网格是不是你要找的。

符合这些情况，用特性网格

  • 官网、落地页在首屏之后，需要把产品的几个主要功能一次讲清楚
  • 几个卖点地位相当、没有先后顺序，适合并排扫读
  • 新版本发布页，需要列出这次更新包含的几项改进

是这些情况，换成别的

  • 几条内容有先后顺序（注册、配置、上线）

    改用步骤说明区

  • 要展示几十条同类数据让用户挑选（商品、模板）

    改用卡片网格

  • 后台和工具页面，用户是来干活的，不需要营销介绍

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

02避坑

常见坏用法

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

  1. 01

    堆了十几条特性，每条都一样重，访客扫不完也记不住重点

  2. 02

    小标题写成「高效」「智能」「安全」这种空词，看不出具体能做什么

  3. 03

    把还没上线、只在计划里的功能也写进去，和产品实际不符

03识别

怎么认出它

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

结构

由区块标题和说明、以及 3~6 个并列的特性项组成，每个特性项是图标（或小截图）、小标题和一两行说明，按两列或三列网格排列。

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

识别特征

  1. 1首屏下方一块区域，顶部一个标题，下面几个小块整齐排成两三列
  2. 2每个小块上面是一个图标，下面一行粗体小标题和一两行灰色说明
  3. 3小块之间没有顺序编号，通常也没有按钮

04解释

详细解释

特性网格一般紧跟在首屏横幅后面，回答「这个产品具体能做什么」。区块顶部是一个标题（例如「开店需要的，都在这里」）和一行说明，下面 3~6 个特性按网格排开，每个特性是一个图标、一个短小标题和一两行说明。有的版本会把最重要的一条做大，配一张产品截图。

它和 卡片网格 长得像，但卡片网格装的是同一类数据（商品、文章），可以点进去看详情，数量可多可少；特性网格是一段固定的介绍文案，只有几条，一般不能点。它和 步骤说明区 的区别在顺序：步骤说明区的几块有先后（先注册、再导入、再上线），带序号；特性网格的几条是并列的。和 数据亮点 的区别：数据亮点只摆几个大数字，特性网格讲的是功能。

每条只讲一个功能，写用户能得到什么（「顾客扫码付款，钱直接进你的账户」而不是「高效的支付体系」）。只写产品已经上线的功能，计划中的不要写进去。图标用同一套线性图标，别用 emoji 凑。条数取 3 或 6 这种能排满网格的数，手机上改成一列。

开发者信息
术语 ID
component-feature-grid
DOM 选择器

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

  • section:is([class*="feature" i], [id*="feature" i], [class*="benefit" i], [id*="benefit" i], [class*="why-us" i], [class*="why-choose" i]):not([class*="featured" i])
  • :is(div, ul):has(> :nth-child(1) > :is(svg, i, [class*="icon" i]):first-child + :is(h3, h4)):has(> :nth-child(2) > :is(svg, i, [class*="icon" i]):first-child + :is(h3, h4)):has(> :nth-child(3) > :is(svg, i, [class*="icon" i]):first-child + :is(h3, h4)):not(nav *, aside *, [role="menu"] *)
  • dl:is([class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"]):has(> div > dt svg)
类名关键词

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

  • features
  • feature-grid
  • features-grid
  • features-section
  • feature-section
  • key-features
  • benefits
  • benefits-grid
  • why-us
  • why-choose-us
组件名

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

  • FeatureGrid
  • Features
  • FeaturesSection
  • FeatureSection
  • FeaturesGrid
  • Benefits
结构特征

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

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