先做一个能介绍产品、收集邮箱、展示截图的静态页面，再谈复杂功能。
- 学习结果
- 完成一个包含标题、说明、截图、表单入口和联系方式的产品介绍页。
- 时长
- 2-4 小时
- 难度
- 零基础
- 核验
- 尚未进入本轮核验
正文
介绍页只需要完成一个明确动作。候补名单页用来收集愿意试用的联系方式，不必同时卖课、招商和介绍团队。首屏回答给谁用、解决什么、下一步做什么：“为自由设计师整理每周项目工时”，按钮“申请试用”，比抽象效率口号更易理解。
HTML负责语义和内容顺序。标题用h1，章节用h2，跳转用链接，提交用按钮；输入框要有可见标签。关闭样式后，产品说明、示例结果、适用条件、申请入口仍应按顺序排列。placeholder不能代替标签，图片中的小字也不能代替正文。
CSS控制空间而不是删掉信息。正文限制最大宽度，图片不超出容器，小屏采用单列；按钮文字增长时允许换行。不要给正文固定高度来追求对齐，长内容会被裁切。在320像素宽度下，读完页面不应依赖横向滚动。
截图展示当前能力。尚未实现的功能可以用明确标为“设计示意”的界面图解释，不能暗示已经可用。给图配一句具体说明，例如“按项目汇总本周工时”，重要限制和申请方式仍写在网页文字中。客户姓名与账单必须脱敏。
表单必须有实际接收路径。静态HTML不会自动保存申请，需要连接表单服务或后端。先用自己的邮箱提交并确认后台收到，再检查重复提交、无效邮箱和网络失败。失败时保留输入，成功时说明已收到及后续联系方式。
隐私与发布也是页面的一部分。只需要邮箱就不要额外收手机号；说明用途和删除方式，不把申请记录提交到公开仓库。部署后从另一台设备检查图片、按钮与表单，让五位目标用户描述页面用途，而不是只问是否好看。
学习步骤
- 先写清楚页面要回答的四个问题：这是什么、给谁用、解决什么问题、下一步做什么。
- 准备页面素材：产品名、一句话定位、三条价值点、一张截图或占位图、一个 CTA。
- 让 AI 帮你起草静态页面结构，再逐段检查文字是否像真人写的。
- 补上移动端样式，确保手机上标题、按钮和图片不会挤在一起。
- 部署到一个可访问链接，再把链接发给 5 个真实用户收反馈。
场景拆解
搭建工时工具申请页
你能手动提供工时汇总报告，但自动同步功能尚未开发。页面需要展示脱敏样例，并通过表单接收试用申请，清楚说明当前交付限制。
- 首屏只保留申请试用动作和具体人群描述。
- 展示真实报告，注明当前手动交付而非自动同步。
- 用测试邮箱确认后台记录后，再请五位设计师阅读。
申请代表试用兴趣而非已验证收入。下一步比较报名者是否真的使用报告；页面的成功反馈必须和接收端记录一致，不能只是按钮变绿。
补充材料
思维导图、练习、清单和参考资料可按需展开。
01 思维导图和离线文件
适合读完后下载到自己的知识库里继续整理。
介绍页如何承接用户行动
- 标题：产品是什么
- 定位：为谁解决什么问题
- 截图：展示实际结果
- CTA：明确下一步动作
- 表单：收集试用或联系意向
首个网页的组成
- HTML：内容与结构
- CSS：布局、颜色与移动端适配
- 截图与价值点：支撑产品说明
- 部署链接：让真实用户访问
页面验证的边界
- 空泛形容词不能替代具体用途
- 没有 CTA 就难以观察转化
- 本地能打开不代表公网可访问
- 桌面布局不代表手机布局可用
02 实践练习
根据文章内容记录自己的判断与依据。
搭建工时工具申请页
完成一个诚实描述手动工时服务的申请页，检查语义结构、窄屏布局与表单真实接收，区分视觉完成和交付完成。
练习场景
你能手动提供工时汇总报告，但自动同步功能尚未开发。页面需要展示脱敏样例，并通过表单接收试用申请，清楚说明当前交付限制。
准备材料
- 准备脱敏报告和接收申请的表单。
- 确认图片与素材的使用许可。
检查点
- 只看首屏十秒，用户能否说清现在能得到什么？
练习步骤
01 / 写语义结构
时间： 20-30 分钟
目标： 让页面不依赖样式也可读
操作：
- 写一个主标题和服务说明。
- 给表单、链接、图片加准确名称。
参考结果： 按钮：申请手动周报试用。
预期产出： 有顺序的页面结构。
检查： 标题、样例、申请入口按顺序可读。
02 / 检查窄屏
时间： 20-30 分钟
目标： 避免图片和文字挤出容器
操作：
- 以320像素宽度观察长标题和按钮。
- 移除造成正文裁切的固定高度。
参考结果： 按钮完整显示申请动作。
预期产出： 窄屏截图。
检查： 页面无横向溢出，按钮文字完整。
03 / 核对提交
时间： 20-30 分钟
目标： 确认真实保存而非假成功
操作：
- 提交测试邮箱并查接收端。
- 模拟断网和无效邮箱。
参考结果： 断网显示失败并保留邮箱。
预期产出： 成功与失败记录。
检查： 成功提示与后台记录一致。
完成检查
- 标题、样例、申请入口按顺序可读。
- 页面无横向溢出，按钮文字完整。
- 成功提示与后台记录一致。
03 清单、模板和关键词
用于项目记录和自查。
项目记录
产品名：____一句话定位：____价值点：____截图：____CTA：____邮箱收集：____移动端：____部署链接：____
页面内容单
产品：工时周报；人群：自由设计师；问题：月底难以回忆项目用时；交付：手动汇总表；样例：脱敏周报；动作：申请试用；限制：暂不读取第三方日历。定位、截图和按钮应讲述同一个服务。
表单验收单
字段：邮箱；用途：联系本次试用；成功提示：已收到申请；失败提示：暂未提交成功；后台记录时间：；重复申请处理：；删除方式：；手机端隐私说明：。断网后保留输入，不能显示虚假成功。
关键概念
- 产品名
- 一句话定位
- 价值点
- 截图
- CTA
- 邮箱收集
- 移动端
- 部署链接
容易误判
- 首页写得像公司官网而不是验证页
- 没有明确下一步动作
- 只在自己电脑上看不部署
- 文字全是空泛形容词
04 工具和参考资料
本篇涉及的工具和参考链接。
可参考工具
- Astro
- Cloudflare Pages
- Tally
- Figma
- Codex