这门课程带你从零开始制作一个完整的产品官网,逐步确定目标用户、页面结构、视觉规则、内容布局、表单校验、手机适配以及验收步骤。
制作产品官网的第一步,是确定页面包含哪些区块,以及每个区块负责展示什么内容。分清页头、导航栏、首屏和内容区块的标准职责后,我们可以按模块向 AI 说明修改要求,避免整页频繁重写。
官网的视觉秩序主要依靠清晰的文字层级和统一的样式变量。本章介绍如何根据产品类型确定风格,梳理字阶层级,并使用设计令牌管理颜色、间距与圆角,让全站样式保持一致。
首屏(Hero)是访客打开网页后首先看到的区域。本章介绍如何提炼清晰的产品价值主张、撰写简洁有力的辅助文案,并设计指引明确的主行动按钮(CTA)。
官网的中段内容主要负责展示产品功能和实际使用流程。本章介绍如何按用户任务组织功能内容,以及如何配合使用卡片、列表、Grid 网格与 Flex 弹性布局。
了解了产品功能后,访客通常需要进一步确认可靠性、价格方案和使用限制。本章介绍如何组织真实的用户证据、透明的定价对比以及常见问题解答(FAQ)。
在网页排版中,文字贴边、内容截断和浮层被遮挡是常见的布局问题。理解盒模型、内边距、溢出机制和层叠层级,可以帮助我们向 AI 准确定位并修正这些问题。
控件的操作反馈和表单交互直接影响用户的填写体验。本章介绍鼠标悬停、键盘聚焦与按下状态的处理,以及候补表单的字段设置、输入校验与结果展示。
手机屏幕宽度较小,桌面端的多列排版在移动端通常需要转换为单列流。本章介绍响应式布局的单列重排、抽屉式导航菜单、内容溢出排查,以及底部吸底操作栏的安全区处理。
页面制作完毕后,需要在不同设备上进行走查验证。后续借助 AI Agent 迭代页面时,按组件拆分需求并明确约束条件,可以减少回归问题。本章整理了上线走查清单与 AI 协作建议。