功能展示与排版布局
官网的中段内容主要负责展示产品功能和实际使用流程。本章介绍如何按用户任务组织功能内容，以及如何配合使用卡片、列表、Grid 网格与 Flex 弹性布局。
按使用流程组织功能介绍
介绍产品功能时，应避免直接罗列内部技术名词。围绕用户的实际使用流程来组织内容，更容易被理解。
例如对于作品页生成工具，可以按照以下三个环节展开介绍：
- 整理背景：项目为什么开始，解决什么问题；
- 梳理过程：采用了哪些方案，遇到了哪些难点；
- 呈现结果：最终交付的形态，包含哪些数据与作品截图。
访客按顺序阅读，更容易理解工具的具体使用场景。
整理背景项目为什么开始
梳理过程中间做了什么
呈现结果最后做成了什么
每张卡独立成块，各有图标和说明，适合并列展示。
- 可以先看一个完整示例吗？
- 示例里的素材从哪里来？
- 整理一个项目要多久？
- 生成的页面能自己改吗？
一行一条、上下连贯，适合一口气扫完的连续内容。
卡片与列表的使用场景
在组织内容时，需要根据信息的阅读方式选择合适的容器：
- （Card）：适合承载各自独立、可单独比较或点击的完整内容块。每张卡片通常包含独立的标题、配图或图标、说明文字与操作按钮。例如三项核心能力展示，使用卡片比较直观。
- （List）：适合承载结构一致、需要按先后顺序连续阅读的信息。例如展示操作步骤、清单或条目说明时，列表比卡片更为紧凑、易读。
如果内容不需要对比也不需要单独点击，不需要给每个段落都套上卡片容器，避免页面产生过多的容器嵌套与视觉干扰。
Grid 与 Flex 的布局分工
在排版布局中，Grid 和 Flex 具有清晰的分工：
- （网格布局）：适合外层的多列排布。例如把 3 张功能卡片横排成 3 列，并在屏幕变窄时自动折行成单列。
- （弹性布局）：适合内层的局部对齐。例如单张卡片内部，左边放置图标、右边放置标题，或者底部横排两个标签。
外层使用 Grid 控制卡片之间的行列比例与间距，内层使用 Flex 调整图标、文字和按钮的对齐。
- 对 AI 这样说：“请使用 3 列 Grid 网格展示三项核心能力卡片，卡片之间保持 24px 间距，移动端自动转为单列；每张卡片内部使用 Flex 垂直排列图标、标题和正文。”
整理背景卡片 1
梳理过程卡片 2
呈现结果卡片 3
外层网格决定几张卡片怎么分列、间距多少。
整理背景图标和文字怎样对齐，由 Flex 决定
卡片里面图标靠左、文字靠右排成一排，或换成上下排列。
完整案例的展示要素
在功能卡片下方，可以附带一个真实案例或作品全貌。
一个完整的案例通常包含背景、过程和结果三项要素，帮助访客了解产品在实际场景下的交付形态。
本章总结
本章介绍了按任务流程组织功能的方法、卡片与列表的选择依据，以及 Grid 和 Flex 的布局分工。下一章，我们将组织真实证据、价格表与常见问题（FAQ）。