网页交付标准指南
现在"做出一个网页"很容易——AI 半小时能生成一个功能齐全的页面。但"做完"和"能上线"之间隔着一段没人说清的距离：功能全有、页面能开，交付出去用户还是流失。
一个网页能不能上线？ 这份指南用四个门回答：能访问 → 能理解 → 能行动 → 能相信。依次过，全过才能交付；任何一个门不过，回去修。
为什么是四个门？
网页的质量不是一个维度能说清的。学术研究（Morales-Vargas et al., 2023）梳理了 305 篇论文，网站质量评估涵盖 13 个维度、120+ 项指标。但做网页的人不需要 120 项指标——需要一个上手就能用的框架。
四个门之间互不重叠，合起来覆盖网页质量的完整面。 切法不按技术模块（前端/后端/视觉），按用户的完整体验路径：从打开页面到形成判断，每个阶段对应一个门。
| 门 | 用户问自己 | 交付前问自己 | 不通过的表现 |
|---|---|---|---|
| 能访问 | 打得开吗？加载快吗？ | 页面能在目标设备上正常打开吗？ | 白屏、加载超 3 秒、手机端乱掉 |
| 能理解 | 看清楚了吗？看得懂吗？ | 信息架构清晰吗？排版建立层次了吗？ | 扫一眼不知道这页干什么的、标题层级乱 |
| 能行动 | 能找到吗？能完成吗？ | 核心任务能走通吗？交互不出错吗？ | 导航迷路、表单报错不清、关键按钮点不到 |
| 能相信 | 信得过吗？记得住吗？ | 品牌信号到位吗？有辨识度吗？ | "这像 AI 做的"、换了 Logo 就是另一个公司 |
四个门是串行的。能访问不过，不用看理解。理解不过，不用看行动。行动不过，信任无从谈起。
第一门：能访问
用户问自己：打得开吗？加载快吗？
这个门检查页面能不能在目标设备上正常打开和加载。是所有门里最客观的一个——大部分有明确的数字指标。
加载速度
- 首屏内容出现 < 1.8 秒（FCP）
- 最大内容（通常是 Hero 图或大标题）渲染完成 < 2.5 秒（LCP）
- 页面总重 < 1500KB——超过这个数，移动网络用户会明显感知到慢
设备兼容
- 手机（375px 宽）、平板（768px）、桌面（1440px）三种宽度下页面不崩
- 不是"缩小版"，是"适配版"——文字不用缩放就能读，按钮手指能点到
- 暗色模式下页面可读（不是白底黑字直接反相就完事）
基本可达
- 语义正确的 HTML 结构——屏幕阅读器能从标题导航页面
- 所有图片有替代文字（产品图描述内容，装饰图标为空）
- 键盘能走完整个页面——Tab 切换、Enter 确认、Esc 关闭
自检清单
- 三种设备宽度下页面不崩
- FCP < 1.8s，LCP < 2.5s
- 暗色模式可读
- 不用鼠标能走完全页
第二门：能理解
用户问自己：看清楚了吗？看得懂吗？
这个门检查信息有没有传达到。加载再快、适配再好，用户进来扫一眼不知道干什么——前面的功夫全废。
信息架构
- 扫一眼（3 秒以内）能回答三个问题：这是什么、谁做的、我能在上面干什么
- 标题层级不跳——h1 后面是 h2，不会从 h1 直接到 h4
- 导航标签用用户的语言——不是内部术语，是用户搜索时脑子里蹦出来的词
排版层次
- 标题比正文大几倍——不是只大一点点。间距有松有紧——密集区和舒展区节奏不同
- 行距正文 ≥ 1.75（本站约定值）——中文行距太挤，长文读起来最累
- 相关内容靠近，不相关内容隔开——留白不是浪费，是帮用户分组
内容可读
- 一段只讲一件事。一段超过 5 行 → 考虑拆
- 没有 lorem ipsum、没有"此处放内容"、没有假数据
- 按钮上的字告诉用户点了会怎样——不是"提交"，是"创建账号"或"开始免费试用"
自检清单
- 3 秒扫读能回答"这是什么、谁做的、能干什么"
- 标题层级不跳
- 正文行距 ≥ 1.75
- 没有假文案和假数据
第三门：能行动
用户问自己：能找到吗？能完成吗？
这个门检查核心任务能不能走通。前面的门让用户"知道这是什么"，这个门让用户"真干了什么"。
导航
- 用户知道自己在哪——当前页在导航上有标记
- 用户知道能去哪——关键页面从导航能到达，不超过 3 次点击
- 有搜索时，搜出来的结果相关且可操作——不是一堆标题列表
核心任务
- 最重要的用户行为（注册、购买、搜索、联系）不超过 3 步完成
- 每一步有明确的反馈——点了按钮有反应（加载中/已完成/出错了）
- 出错时有可操作的提示——不是"发生错误"，是"邮箱格式不对，请检查后重试"
表单
- 输入框有明确的标签——不是在框内放灰色文字当标签（填进去就看不见了）
- 必填项标注清楚——用户不用提交后才被告知"这里漏了"
- 提交按钮点了之后禁用 + 转圈——防止重复提交
自检清单
- 核心任务 ≤ 3 步完成
- 每个操作有反馈（加载中/完成/出错）
- 错误提示告诉用户怎么修，不是只告诉"错了"
- 提交按钮防重复点击
第四门：能相信
用户问自己：信得过吗？记得住吗？
这个门检查网页有没有建立信任和辨识度。前三个门全过 = 能用。这个门不过 = 能用但没人想用。
品牌信号
- 配色、字体、圆角、间距——每一个视觉选择能说出"为什么这样"。不是"AI 默认"，是"品牌决定的"
- 品牌色在页面中自然出现 ≥ 3 处（链接、按钮、强调元素）——不是到处都是，是处处有依据
- 自己的 Logo 可见、清晰、不小气
数据可信
- 产品图是真实截图——哪怕不够精致，比假图强十倍
- 每个数字有出处——不是"快 10 倍"和"99.9% 稳定"，是"帮某品牌成本降了 34%"
- 社交证明是真人的——有名字、有头像、有具体说了什么
有辨识度
- 换了 Logo 和文案，网页不能原封不动当成另一个公司——有只属于你的东西
- 没有 AI 味——靛蓝 accent、紫蓝渐变、Inter 字体、等宽卡片网格、emoji 图标、编造数据。详见 去AI味网页设计指南
- 至少一处"值得截图"的细节——不是均匀用力，有一处做到 120%
自检清单
- 品牌色在页面中出现 ≥ 3 处
- 产品图是真实截图
- 没有一条 AI 味特征（详见去AI味指南）
- 至少一处"值得截图"
交付前总检
四个门全过，最后看一眼：
- 关了页面重开，扫一眼——还是觉得 ok？
- 给一个没看过的人看，不问"你觉得怎么样"，观察他第一个点哪里
- 每个视觉决策都能说清品牌依据
三条全过 → 可以交付。
Agent 执行门禁
以下供 AI 生成网页后逐项自检。每条对应四个门中的一个。
能访问 — 自动检测
- FCP < 1.8s，LCP < 2.5s（Lighthouse 或 PageSpeed Insights）
- HTML 验证：
<!doctype html>第一行，<meta charset="utf-8">，<meta name="viewport"> - 图片有
width/height属性防布局偏移 - 字体用 WOFF2 格式，
unicode-rangesubset - 无
user-scalable=no（不禁用缩放） prefers-color-scheme: dark适配<html lang>有正确的语言属性- 语义标签：header/main/footer/nav/section
能理解 — 自动检测
- h1-h6 层级不跳号
- 正文
line-height≥ 1.75 - 无 lorem ipsum、无 "此处放内容"、无编造数据
- 按钮文字描述行为（"创建账号"不是"提交"）
能行动 — 自动检测
- 所有可交互元素键盘可达（Tab/Enter/Escape）
- 表单控件有
<label>关联 - 提交按钮点击后
disabled+ spinner - Skip-to-content 链接存在
:focus-visible可见焦点环
能相信 — 自动检测
:root中颜色变量 ≥ 1 个来自品牌色系，非 Tailwind 默认- 无
#6366f1、#4f46e5、#8b5cf6（Tailwind 靛蓝） - 无
background-clip: text渐变文字 - display 字体 ≠ Inter/Roboto/Arial/Geist/system-ui
- 字重跨度 ≥ 500，标题字号/正文字号 ≥ 3
- 无 unsplash/placehold.co/picsum 外部占位
- 无 emoji 做功能图标
修复优先级
| 级别 | 触发 | 动作 |
|---|---|---|
| P0 阻断 | 三设备宽度崩、LCP > 4s、白屏 | 不交付，回炉 |
| P1 必须修 | 表单无 label、键盘不可达、标题跳级、AI 味靛蓝 accent | 修完再交付 |
| P2 建议修 | 行距 < 1.75、焦点环不明显、圆角统一 | 标注，下次迭代修 |