12 · 规划首页、工具页与内容页

本页为文字教程；视频与配套媒体仍以实际发布状态为准。

返回课程总览 · 返回模块

本课交付：网站结构图与页面责任卡

本课把上一课的意图组变成页面，不开始写真实业务代码。示范站仍是英文商品介绍生成工具：输入产品事实，生成可编辑初稿，再由用户核对。你要交付的结构图应说明用户从哪里来、每页解决什么、完成后去哪里，而不仅是一棵好看的目录树。

可以先用纸、普通文档或自己熟悉的原型工具。选择不影响验收，重要的是结构能够被独立阅读。不要为了制作结构图先购买复杂设计服务，也不要把示例中的所有页面视为第一版必须建设的功能。

跟做一：为首页设定有限责任

首页帮助第一次来的人判断适不适合自己，展示真实可实现的结果，并提供明确入口。它可以包含一句价值主张、一份示范、适用限制与开始按钮，不必放下全部教程。若用户从具体关键词直接进入工具页，也应能理解产品，因此首页不能成为唯一的背景说明。

为首页写一张责任卡：主要人群、一个核心疑问、应展示的证据、主要行动与不包含内容。以本项目为例，核心疑问是“我提供商品事实后能得到怎样的初稿”。如果答案必须读完十屏宣传，说明重要信息还没有放到合适的位置。

跟做二：为工具页画出可执行区域

工具页最重要的是事实输入、生成状态、结果、编辑与复制。解释只服务完成这条路径，不用大段品牌口号把输入框推到页面底部。需要说明的信息包括输入要求、不能自动确认的事实、失败后如何重试，以及是否保存资料。

MDN 的 HTML 基础说明结构化元素用于表达网页内容。Basic HTML syntax | MDN 在结构图中，可以先写出标题、表单、说明、状态区和结果区的语义关系，而不是只画矩形。这样后续开发能把它们做成真实可操作的元素，避免原型漂亮但输入没有标签、按钮无法用键盘找到。

跟做三：给内容页独立的任务

教程页可以解释如何准备产品事实，示例页展示同一份输入如何变成初稿，并指出需要人工核对的地方。它们都应能独立被理解，不要求读者先回首页看产品故事。每页保留相关的下一步，避免所有链接都泛泛指向根页面。

Google 的链接最佳实践说明可抓取的链接通常需要真实 href。Link best practices for Google 因此，结构图中的导航与目录应对应正式地址，不只写“点击后切换卡片”。例如，准备事实的教程链接到工具，工具在输入不足时链接回具体说明。相关路径应由任务触发，而不是为了增加浏览页数而让用户绕路。

跟做四：判断哪些页面随数据更新

为每张页面卡增加“数据来源”和“更新方式”。公开帮助文档可能在构建时生成；后台经常修改的课程或示例，可能需要请求时读取；个人结果需要身份与私有缓存策略。Astro 的按需渲染文档解释了构建预渲染和请求时生成的差别。On-demand rendering | Astro Docs 你不必立刻决定具体代码，但必须知道内容更新后是否需要重新部署。

如果你希望后台一处修改各端更新，结构图上应只有一个权威内容来源，不能把同一份教程同时维护在前端常量、服务器文件和后台表单里。不同端可以用不同排版，但标题、正文、状态与顺序应来自统一数据。离线缓存则需要另行说明刷新条件与旧版本状态。

跟做五：走三条不同入口

第一条从首页开始，判断适用性后生成初稿；第二条从搜索进入准备事实教程，再去工具；第三条从别人分享的示例页进入，核对演示后尝试自己的输入。每条都写出需要的背景、下一步入口和可能离开的原因。

若某条路径必须先注册才能知道能得到什么，就要解释为什么账户在此时不可缺少。若首版没有保存历史，可以推迟注册；若要跨设备保存，则说明相应责任。这不是规定所有工具都免登录，而是要求每一个额外步骤都有用户与业务理由。

常见错误：把结构复杂当成完整

首版不一定需要独立定价中心、用户社区、积分商城和十个分类。每增加一个入口，都要维护内容、状态和返回路径。结构图中可以用“候选”标记后续能力，正式导航只显示已经有交付的页面，不让待制作的入口通向空白页。

同样，支持、数据说明和错误反馈不应因为不属于营销页面就被省略。它们帮助用户处理失败，也是你维持服务的入口。简单网站可以页面少，但不能让用户在出错时无处可去。

加练：用页面责任解决导航争论

假设团队有人想把全部教程放首页，另一个人希望首页只留输入框。不要先投票选审美风格，而用责任卡判断首次用户还缺哪项信息、直接进入工具的人在哪里获得同样说明。可以让首页提供一个简短范例，深入解释留在独立教程，并在工具输入区给出精准帮助入口。

再检查一条跨页返回路径：用户从输入错误进入教程，阅读后怎样回到原任务，已填事实是否仍在。结构图如果没有考虑这个返回，就可能让一个帮助链接变成丢失工作的出口。暂时无法保存状态时，应明确提示并选择更适合的打开方式。

这些决定都写进责任卡，而不是只保留最终截图。后续实现或更换设计者时，能够看见取舍依据，才不会把同一个问题重新争论一遍。

独立作业与验收

提交一张结构图和至少三张核心页面责任卡，标注正式与候选节点、数据来源、更新方式和三个入口路径。再请一个没有参与规划的人用图回答：在哪里准备事实、在哪里生成、失败后去哪、如何联系支持。如果他需要你不断补充说明，先修图和责任卡，再进入下一课流程设计。