跳到主要内容
前端术语库

UI 组件 · 营销

常见问题

FAQ Section

也叫：FAQ、常见问答、问题解答、Frequently Asked Questions、Q&A

把访客最常问的问题和答案集中列出来的区域，官网上通常是一组可以点开的问题，放在价格表后面、页脚前面。

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

怎么跟 AI 说

改成你的业务内容再发

在价格表下面加一个常见问题区块：左侧 1/3 宽是 h2 标题「常见问题」和一行说明「没找到答案？联系我们」（链接到联系页）；右侧 2/3 宽是折叠问答列表，每个问题一行 17px 粗体、右侧 ＋ 图标，点击展开答案（15px 灰色、行高 1.7），图标变成 −，可以同时展开多个，问题之间用 1px 分隔线。用 details / summary 实现，键盘可操作。问题和答案用我提供的内容：［问题 1 + 答案］［问题 2 + 答案］……；退款、试用、发票这类政策我没写到的，不要自己编。手机上标题和列表改为上下排列。

发给

01判断

你的内容是这样吗？

对照两列，确认常见问题是不是你要找的。

符合这些情况，用常见问题

  • 官网、价格页，回答访客下单前常问的取消、退款、数据安全等问题
  • 同样的问题客服经常被问到，需要在页面上直接说清楚
  • 活动页、报名页需要说明规则、时间、参与资格等细节

是这些情况，换成别的

  • 几十上百条问题、需要搜索和分类时，应该做成帮助中心

  • 只有一两条说明，直接写成正文段落更好找

  • 操作步骤的说明，用步骤说明区或文档，不要硬写成一问一答

    改用步骤说明区

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

02避坑

常见坏用法

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

  1. 01

    把价格、限制条件这些关键信息只藏在折叠答案里，大部分访客根本不会点开

  2. 02

    问题写成「我们的优势是什么」这种自夸，不是访客真正关心的问题

  3. 03

    答案里写了实际没有的政策，比如「7 天无理由退款」

03识别

怎么认出它

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

结构

由区块标题（可带「联系我们」入口）和一组问答组成，每个问答是一行问题和一段答案，问题多时用折叠面板收起答案，也可以两列平铺。

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

识别特征

  1. 1页面靠后的一块区域，标题写着「常见问题」或 FAQ
  2. 2下面一行一行的问句，每行右侧有加号或箭头
  3. 3其中一两行展开，露出一段灰色的答案文字

04解释

详细解释

常见问题区块回答访客下单前的顾虑：「可以随时取消吗」「数据安全吗」「支持开发票吗」。常见写法是一个区块标题，下面 5~10 个问题，每个问题一行，点开后展开答案；也有两列平铺问答的写法。区块结尾常放一行「没找到答案？联系我们」。

它是一个内容区块，里面常用 折叠面板 来实现，但折叠面板只是交互形式，设置页、筛选条件里也会用；常见问题指的是「这一组问答内容」。它和帮助中心不同：帮助中心是一整套文档，有搜索和分类；官网上的常见问题只挑最影响购买的几条。和 客户评价 的区别：客户评价是别人说好，常见问题是打消顾虑。

答案是产品和政策事实（退款、试用、数据保存多久），要和实际一致，没确认的不要写。问题用访客的口吻（「我可以……吗」），答案第一句先给结论。别把价格这类最关键的信息只藏在折叠里。问答用 details / summary 或带 aria-expanded 的按钮实现，键盘能操作；想让搜索引擎认出来，可以加 FAQPage 结构化数据。

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

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

  • [itemtype*="FAQPage" i]
  • section[class*="faq" i]
  • :is(section, div)[id*="faq" i]:not([id*="faq" i] *)
  • :is(section, div)[class*="faq" i]:has(details, [aria-expanded], .accordion, [data-slot="accordion"]):not([class*="faq" i] *, [id*="faq" i] *)
  • dl:has(> div > dt button[aria-expanded], > dt button[aria-expanded])
类名关键词

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

  • faq
  • faqs
  • faq-section
  • faq-list
  • faq-accordion
  • faq-grid
  • faq-items
  • frequently-asked-questions
  • common-questions
组件名

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

  • Faq
  • FaqSection
  • FaqList
  • FaqAccordion
  • FrequentlyAskedQuestions
结构特征

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

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