常见问题页
FAQ Page
别名:常见问题常见问题页问答页帮助问答疑难解答帮助中心问答你问我答
这是什么
把用户反复提出的问题按主题归组、可逐条展开的页面:用问题式标题降低查找成本,配合锚点、搜索或分类让答案自解释,并把仍未解决的人引向人工支持。它用内容替代重复的客服沟通。
交互实验室
试一试,再决定怎么用正在加载实验室…
✓ 适用场景
- 用户咨询集中在少数常见问题
- 需要减少重复的客服工单
- 售前选型、计费与账号政策需要自助解答
✕ 不适用场景
- 每个问题都需要个性化排查
- 内容随版本频繁变更(用文档站更合适)
- 已有完整知识库或社区问答
常见形式
折叠问答
Accordion
问题作标题,答案点击展开,一屏容纳更多
分类问答
Categorized
先按主题分组或分段切换,再逐条展开
可搜索问答
Searchable
顶部搜索即时过滤问题,适合条目很多时
页面结构
- 01
标题与引导
一句说明这里能解决什么,并提示找不到时去哪。
- 02
搜索
即时过滤问题标题,空结果给出人工入口。
- 03
分类导航
按账号、计费、功能等主题分段或切换。
- 04
问题列表
问题式标题,可逐条展开,展开状态可分享锚点。
- 05
答案内容
先给结论,再给步骤,控制段落长度并链接相关条目。
- 06
人工入口
页尾提供联系支持或提交工单,承接未解决的问题。
实现要点
flexgridscroll-margin-topcontent-visibility: automax-width: 72ch问题列表用 max-width 72ch 控制阅读行宽,分类用 grid 自适应排列。展开项给 scroll-margin-top,锚点跳转不被吸顶导航遮挡; 长列表可加 content-visibility auto 省渲染。手风琴用 button 加 aria-expanded 与 aria-controls,不要用纯 div 点击。
相关概念
由多个可折叠区块组成的垂直列表:点击标题展开内容、再点收起,可互斥(同时只开一项) 也可多开。用于在有限空间里收纳成组内容,让用户按需展开。
组件包含组件用一条带边框的水平输入区收集单行文本,是表单的基本单元。 占位符提示期望格式,聚焦时高亮边框引导视线,校验失败时切换错误色 并附提示文案;可内嵌前后缀图标与清除按钮,受控管理输入值。
组件包含组件集中承载筛选条件的面板,常驻列表侧边或以抽屉、浮层唤起:复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数,并支持已选条件回显与一键清除。
组件包含组件把信息分层呈现:先给最常用、最必要的部分,把次要细节藏到"展开""下一步""显示更多"后面, 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担,让界面入门简单,同时保留深度供高级用户按需取用。
交互模式使用模式以阅读为中心的长驻内容页面:一侧是可折叠的文档树导航,正文栏承载标题层级、段落、 代码块与提示框,宽屏下再加页内目录(TOC)标示当前阅读位置。页面靠永久链接与 上一页/下一页串联成站,搜索是第一入口,结构稳定到可以背下来。
页面相似概念