用网站参考写清页面需求

做网页之前，先写清需求

把几个喜欢的网站发给 AI，再补一句“做得高级一点”，通常还不足以说明你要什么。更有用的输入是一页设计简报：页面给谁看、要解释什么、按钮点到哪里、怎样判断做完了。

这篇带你完成这份简报。你只需要会浏览网页、保存文字；整理时可以使用熟悉的聊天助手，也可以自己填写。下文的“一页计划”是虚构教学产品，用来演示交接方法。

1. 用五句话定义页面

先填写这些内容，再开始找参考：

产品：一页计划，一张整理选题与下一步行动的清单。
读者：经常有内容想法，却不知道先做哪一件的独立创作者。
页面目的：让读者看懂清单包含什么、怎样使用。
主要动作：点击“查看样例”，跳到本页的样例区域。
这次范围：只做介绍页，不提供账号、下载、付款或数据保存。

把“点击了解更多”具体到一个位置。如果那个位置还不存在，就先安排可用的样例或说明区。这样可以避免页面做好之后，每个按钮都需要临时找去向。

2. 从参考里找答案

选两三条与你的任务接近的页面就够了。看参考时，留意它怎样解释用途、组织内容，以及读者看完能做什么。

网站灵感库可以帮助发现候选页面：Lapa Ninja、Landbook、Site of Sites。点进原网站再做记录，图库截图无法证明按钮现在仍然可用。

这里有三个实际可查的内容例子。本文只核对了公开页面的文字和链接目标，未检查其移动布局、账号功能或转化效果。

• Notion 首页：用途说明后提供开始使用和申请演示的入口。练习页也可以在解释用途后给出下一步；没有账号服务，就让读者查看样例。
• Trello 首页：页面介绍工作用途，并提供 产品导览。借鉴的是用具体场景解释产品，不必照搬它的功能数量。
• Todoist 首页：记录任务、安排任务等用途都有说明，页面还列出模板入口。抽象功能有了具体任务作解释，自己的页面也可以用三条原创样例来展示。

研究者 Huei-Hsin Wang 在 NN/g 的 首页设计文章 中也强调清楚表达用途、展示内容示例与引导行动。这是设计参考；它不能证明某种布局一定提高你的网站转化率。

用下面的格式记录，不需要专业设计术语：

参考名称和原站链接：
我查看的范围：公开文字 / 实际页面 / 图库存档。
它解决的问题：怎样让第一次来的读者理解用途？
我采用的原则：给一句用途说明，再给能查看的样例。
我自己的实现：主链接跳到本页 sample 区域。
我不采用的部分：账号入口、品牌素材、没有依据的用户评价。
仍需检查：手机布局、实际点击与键盘操作。

如果让 AI 协助，先把你实际看到的内容粘进去，让它逐条对应需求。没有打开页面的助手不能替你确认页面现在的样子。

3. 把形容词换成检查条件

• 想要“高级”，先写清浅色背景、深色正文和一个强调色。标题分清层级，段落间距保持一致。
• 手机窄屏下，内容按阅读顺序展示，正文和主要动作都要完整显示。
• 信任感可以来自一份能查看的样例。不要编造用户数量、合作品牌或效果数字。
• 主要动作点下去，应到达写好的位置，让读者看到承诺的内容。

描述偏好时，仍然可以说“高级”“好看”，但具体需求得另写清楚。

4. 整理成一份可交接简报

换成自己的产品内容，就可以交给设计者或 AI 编程工具。

项目：一页计划，原创虚构的静态介绍页练习。
读者：需要整理内容选题与下一步行动的独立创作者。
页面用途：解释清单是什么、包含什么、怎样使用。
主要动作：“查看样例”跳到 sample 区域。
次要动作：“看使用步骤”跳到 workflow 区域。

内容顺序：
1. 顶部：产品名，样例、步骤、常见问题导航。
2. 开头：一句用途，短说明，主要动作。
3. 使用情境：收集选题、明确行动、记录回顾。
4. 样例：三条原创任务，注明“示意内容，不会保存”。
5. 步骤：写选题、定行动、做回顾。
6. 常见问题：是否下载、是否登录、是否保存数据。
7. 页尾：说明练习范围，提供返回顶部的链接。

样例文字：
选题“整理工作台” → 下一步“拍一张当前桌面的照片”。
选题“介绍一个常用工具” → 下一步“写下三个实际用途”。
选题“复盘一次创作” → 下一步“记录一个需要改进的环节”。

样式：浅色背景、深色正文、蓝色强调、系统字体。
素材：原创文字与 CSS 装饰，不用第三方图片或品牌标识。
交付：index.html 与 styles.css，保存在同一练习目录。
业务范围：没有登录、付款、下载、表单和数据保存。

检查方式：
开头能解释读者、用途和下一步。
每个导航及主要动作到达对应内容，不能用空链接。
在 320、375、768、1280 CSS 像素宽度检查布局。
用 Tab 键能依次到达链接，并看清当前焦点。
测量普通正文的文字与背景对比度，目标至少 4.5:1。
不存在未经证实的价格、评价或效果保证。