使用一个虚构案例,逐步确定产品官网的目标用户、页面结构、视觉、内容、表单、手机显示方式和验收步骤。
做产品官网前,先确定官网主要给谁看。知道这个人为什么打开官网,才知道首页应该说什么、按钮应该引导他做什么。
上一章认识了林夏和她的工具。这一章搭页面的骨架:页面上放哪几块内容、按什么顺序排。我们不用自己动手画,学会把结构说给 AI 听就行。
页面顺序已经确定。这一章要固定文字层级、颜色、间距和表面规则,让每个区块看起来属于同一个官网,也让重要内容更容易找到。
页面结构和视觉规则已经确定。这一章为首屏写清产品价值:让用户从标题里认出自己的问题,只保留一个主要行动——查看完整示例。
首屏已经说清工具用途和主要入口。这一章安排页面中段:把功能按用户任务分组,再放一个完整项目示例和补充信息,让用户能顺着读完。
首屏和页面中段的内容位置已经确定,但正式素材、价格和用户反馈还没有确认。这一章给每项说法核对来源,确定证据、价格和 FAQ 的展示边界。
上一章把每项说法都核对过了,页面内容定了下来。这一章处理那些我们眼睛看得到、嘴上却不太会说的问题:文字贴边、卡片挤在一起、菜单被挡住。它们都不需要我们自己动手修,只需要把看到的说成 AI 听得懂的话。
布局、间距和遮挡已经统一,但鼠标移入、键盘聚焦和按下按钮时还缺少清楚反馈。这一章为已有按钮、链接和菜单补上这些状态。
主要入口和次级行动的位置已经确定。这一章把次级行动设计成“加入候补名单”的最小表单:只收邮箱和可选说明,提交前校验,结果出现在表单附近。
桌面上的布局、反馈和表单已经就绪,但窄屏不能只把所有内容缩小。这一章重新安排手机上的导航、区块、图片和固定按钮,同时保持示例信息完整可读。
桌面和手机页面都能打开,还不能说明官网已经可以交付。这一章把前面确定的页面要求写成固定检查步骤,并分别记录通过、失败和待确认的项目。
前面 11 章已经确定了官网面向谁、页面怎样排列、手机怎样显示、表单有哪些结果,以及怎样检查页面。本章把这些已确认的信息整理成一条可以直接发送的修改要求,不新增产品能力。