企业官网看起来"简单"，但要按时、按预算、按预期质量交付，靠的不是临场发挥，而是一套被验证过的流程。这篇以我们交付某高校食堂点餐系统配套官网的完整过程为例，把从需求到上线的六个阶段复盘一遍，附上每个阶段的产出物与检查点。
阶段一：需求澄清——把"要一个官网"翻译成可执行清单
客户说"做个官网"，实际要澄清的是九件事：
| 问题 | 影响 |
|---|---|
| 核心目标（品牌展示 / 获客 / 政务合规） | 决定信息架构与首屏重点 |
| 目标访客（客户？政府？求职者？） | 决定文案语气与案例筛选 |
| 内容谁来维护、更新频率 | 决定后台复杂度 |
| 是否有 ICP/公安备案、服务器资质要求 | 决定上线周期，备案要 1~3 周 |
| 是否需要多语言、无障碍适配 | 架构期就要预留 |
| 验收标准（分数？兼容设备清单？） | 避免"感觉不对"式扯皮 |
产出物：一页纸需求清单 + 站点地图（Site Map），双方确认签字后再动工。这一步省下的每一小时，都会在后期放大成十小时返工。
阶段二：原型设计——先定"结构"，再谈"好看"
跳过原型直接做高保真视觉稿，是返工率最高的做法。我们坚持先用 HTML 原型锁定：
- 信息架构：导航层级、页面数量、每屏的核心信息
- 关键交互：表单提交流程、移动端抽屉、轮播行为
- 响应式断点表现：375 与 1440 两端同时做
原型阶段修改成本接近零；视觉稿阶段改结构，成本 ×5；开发后改结构，成本 ×20。
阶段三：设计系统——把"好看"变成可维护的 Token
视觉稿定稿后，第一件事不是切页面，而是抽 Design Tokens：
@theme {
--color-primary: #1d4ed8; /* 品牌主色 */
--color-surface: #f6f7f9; /* 区块底色 */
--radius-card: 12px; /* 卡片圆角 */
--shadow-card: 0 4px 24px rgb(15 23 42 / 8%);
--font-sans: "PingFang SC", "Microsoft YaHei", sans-serif;
}配色的来源要有"意象锚点"而不是"我觉得蓝色好看"——例如制造业官网选工业感深蓝 + 安全黄点缀，餐饮系统官网选暖色 + 食欲橙。所有颜色、字号、间距、圆角、阴影统一入 Token，后续新增页面零争论。
阶段四：开发——组件化与两个铁律
技术选型：Next.js App Router + TypeScript + Tailwind + Prisma。开发期两条铁律：
- 数据流先于样式：先把接口/数据模型跑通（哪怕假数据），再套视觉。反过来做的项目，联调期全是样式返工
- 每个页面交付前自测三端：桌面 Chrome、手机微信、iPad——问题在开发期发现是十分钟，验收期发现是一天
后台管理系统优先把"内容编辑者"的体验做好：所见即所得、拖拽排序、草稿箱。因为官网上线后，最高频用户不是访客，是维护内容的市场部同事。
阶段五：测试与上线——清单驱动，不靠感觉
上线前逐项打钩：
- 功能：所有表单提交真实收到（测试邮件/企微机器人确认）
- 兼容：375/768/1024/1440/1920 五档截图走查
- 性能：Lighthouse 移动端 ≥ 90，首屏图全部压缩预加载
- SEO：TDK/JSON-LD/sitemap/robots 四件套齐备
- 安全：管理后台强密码、接口越权自查、HTTPS 强制
- 备案：ICP 号挂页脚、公安备案链接可达
- 备份：数据库自动备份开启并演练恢复
- 监控：500 错误告警、证书到期提醒接入群机器人
阶段六：上线后——网站的寿命取决于"养"
- 第 1 周：盯访问日志与错误告警，收集首批用户反馈
- 第 1 月：提交搜索引擎收录、修复 Lighthouse 新暴露项
- 长期：内容月更（新闻/案例）、依赖季度升级、每年一次安全复查
很多官网三个月就"死"了——不是代码坏了，而是没人更新内容。把"谁来更新、多久更新一次"写进交付文档，是项目能否长期见效的关键。
复盘：三个我们交过的学费
- 原型确认不签字就开发——中途三次改版导航，损失一周工期。现在原型必须书面确认
- 内容录入留到上线前——客户文案晚了两周才齐，上线延期。现在开工第一周就请客户并行准备素材
- 没做错误监控——上线三天后表单静默失败一周才发现。现在所有项目默认接入告警
小结
企业官网项目的本质是管理预期 + 管理变更：需求清单管预期，原型签字管变更，清单验收管质量，监控告警管寿命。流程不是官僚，是把"凭运气做好"变成"按概率做好"。
