VOCABULARY / 词条
单列布局
Single-Column Layout
把页面内容与表单字段自上而下排成一列，让视线沿单一方向前进；表单研究指出单列比多列更少出现跳过、误读字段与填错。
识别特征
- 一条居中的内容列，左右留白随宽度变化而内容不换列
- 标题、段落、字段、按钮自上而下按同一顺序排列
- 表单标签紧贴在字段上方，主按钮位于列尾
概念边界
指有意选择的单列阅读或任务页面结构，如文章、表单、移动优先页面，而不是主从布局在窄屏上被迫塌缩成的一栏；也不同于分步的线性流程——向导是流程，单列是承载每一步的页面结构。少量逻辑上属于同一实体的短字段（如城市/邮编）并排放在一行，仍算单列表单。
什么时候考虑它
- 长文阅读、说明页或文档，需要稳定的阅读节奏
- 结账、注册、申请等需要逐项填写的表单
- 移动优先或同一模板要跨屏宽复用的页面
什么时候慎用
- 用户需要并排比较多个条目或字段时，表格、主从或网格更合适
- 内容之间有明显主次层级、需要一眼概览时，可考虑 Bento 网格
- 只是把宽屏上互不相关的模块在窄屏机械堆叠，而没有重新排定优先级
取舍
阅读与填写路径清晰，宽窄屏共用一套结构；但页面会变长，需要靠标题、分组与锚点维持可扫视性，宽屏上若不限制列宽则行长过长而难读。
条件规则 · 编辑建议
相关词条
主从靠列表与详情联动，窄屏塌缩成的一栏仍是主从；单列是从一开始就按顺序组织内容。
标签贴近字段、相关字段成组，靠的是接近律，否则单列会退化成一串等距的碎片。
Bento 用块面尺寸表达层级与并列；单列用顺序与留白表达先后。
来源与支持范围
基于多轮可用性测试指出，单列表单比多列表单更少出现跳过字段、误读字段与填错；多列会把注意力引向多个方向；而逻辑上属于同一实体的 2–3 个字段（如日期、城市/州/邮编）并排一行不会造成问题。
检索日期：2026-09-15建议表单保持单列，因为多列会打断向下移动的纵向动量；标签应紧贴字段，移动端与较短的桌面表单把标签放在字段正上方，只有城市/州/邮编这类短且相关的字段可共用一行。
检索日期：2026-09-15指出正文每行约 50–75 个字符较易读，并引用 WCAG 1.4.8 的每行不超过 80 字符；行太宽让眼睛难以定位行首行尾，行太窄则频繁回扫打断节奏；建议用 max-width 约 70ch 或 34em 限制列宽。
检索日期：2026-09-15定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：宽屏下实际行长、字段是否真正单列且标签关联正确、长页面的标题层级与锚点是否足以扫视、以及窄屏堆叠顺序是否按任务重新排定。
{
"states": [
"narrow",
"wide-with-margins"
],
"a11y": [
"DOM 顺序即阅读顺序，标题层级支持跳转",
"每个字段有可见且关联的标签"
],
"motion": "无"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。