给后端同学的前端页面结构指南：一个网页到底是怎么拼出来的

你写过 API搞过数据库部署过服务。但现在老板说你顺便把产品首页也做了吧或者你想给自己的开源项目搭个展示页面打开编辑器发现无从下手。不是你不会写代码而是你不知道一个网页应该长什么样、由哪些部分组成。这篇文章就解决这一个问题把一个典型的产品页面拆开告诉你每一块叫什么、干什么、长什么样。看完之后你至少能说出我需要一个 Hero Features Pricing Footer而不是对着空白页面发呆。一、先建立一个直觉网页是积木拼的​ 后端同学习惯从架构角度看系统数据库层、服务层、接口层各司其职。前端页面其实也一样一个页面不是一整块画布而是由多个独立的区块组件从上到下拼接而成的。​ 想象你在搭乐高。你不会从零开始造每一块积木而是从盒子里挑选合适的模块按顺序拼起来。前端页面就是这个逻辑。​ 这张图展示了一个典型产品页面的完整结构。每个彩色区块就是一个独立的组件它们像积木一样从上到下堆叠。你在 21st.dev 这类组件库里看到的分类Hero、Features、Pricing……就对应这些区块。二、逐个拆解每个区块是什么2.1 Navigation导航栏​ 页面最顶部的那一条放 Logo、菜单链接和登录按钮。后端类比相当于 API Gateway所有请求用户点击的入口决定用户去哪里。典型元素左侧Logo 或产品名中间几个页面跳转链接首页、功能、定价、文档……右侧登录 / 注册按钮你需要知道的导航栏通常是固定在顶部的术语叫 sticky页面往下滚动时它不会消失。这是因为用户随时可能想跳转到其他页面。2.2 Hero首屏​ 打开网站第一眼看到的大区域占满整个屏幕用来传递我们是谁、我们做什么。后端类比相当于 README.md 的第一段用最短的文字让人决定要不要继续往下看。典型元素一个大标题一句话说清产品价值一段副标题稍微展开说明一到两个按钮“免费试用”“了解更多”可选产品截图、背景动画、渐变效果为什么它最重要研究表明用户在 3 秒内就会决定要不要继续浏览。Hero 区块就是这 3 秒的战场。这也是为什么 21st.dev 上 Hero 组件数量最多284大家在这个区块上花的心思最多。​ 同样是 Hero 区块设计风格可以千差万别。基础款功能够用但缺乏记忆点主流款是目前大多数 SaaS 产品的选择炫酷款适合技术型产品。你不需要自己做这些设计决策在组件库里挑一个喜欢的风格剩下的交给 AI。2.3 Features功能展示​ 用几张卡片或图标展示产品的核心功能和卖点。​ Features 区块的核心目标是扫一眼就知道产品能做什么。三列卡片适合功能点多且独立的场景左图右文适合需要配图深入说明的场景。告诉 AI 你有几个功能点它会自动选择合适的布局。后端类比相当于 API 文档里的 Endpoints 列表告诉用户我能做哪些事。典型布局三列卡片最常见每张卡片一个图标 标题 简短描述左图右文或反过来适合需要配图说明的功能大数字 说明适合展示量化的成果“提速 10 倍”“节省 80% 时间”常见数量3 个、4 个或 6 个功能点。为什么不是 5 个或 7 个因为这些数字在常见的 2 列、3 列网格中排版最整齐。这类布局细节你不用操心组件已经帮你处理好了。2.4 Testimonials用户评价​ 展示真实用户的评价和推荐建立信任感。​ Testimonials 的说服力来自真实感真名、真职位、真评价。一句具体的话“接入只花了 10 分钟”比一段模糊的赞美“非常好用的产品”有效十倍。如果暂时没有用户评价宁可不放也别编——用户对假评价的嗅觉比你想象的灵敏。后端类比相当于 GitHub 上的 Stars 和 Issues 里的正面反馈——别人说好比你自己说好更有说服力。典型元素用户头像用户名和职位/公司一段引用文字评价内容可选评分星标、公司 Logo设计要点评价内容要短一两句话最好。如果你没有真实用户评价可以先跳过这个区块放假评价比没有评价更糟糕。2.5 Pricing定价​ 并排展示不同的价格方案让用户选择适合自己的档位。一个常见套路三列定价左边是免费版中间是推荐的专业版高亮右边是企业版。这个套路你在几乎所有 SaaS 网站上都能看到。不是因为大家没创意而是因为用户已经习惯了这种模式改了反而让人困惑。​ 三列定价是前端世界的设计模式就像后端的 MVC 一样不是唯一正确的做法但经过无数产品验证、用户也最习惯。中间列高亮 上浮是标准操作目的是用视觉引导用户选择你最希望他们买的那个方案。后端类比相当于一个配置对比表不同的套餐对应不同的功能权限。典型布局2~4 列卡片每列一个方案每张卡片包含方案名、价格、功能清单、购买按钮中间列通常是推荐方案会用高亮边框或不同背景色突出2.6 CTACall to Action行动号召​ 页面接近底部时再给用户一次行动的理由通常是一个大按钮或注册框。​ CTA 区块的设计原则是简单直接一句话打动人 一个按钮接住行动。不要在这里堆功能说明或价格信息用户已经在上面看完了这里只需要临门一脚。背景色通常和页面其他部分形成反差让用户在滚动时注意到这里需要我做点什么。相当于重试机制用户看完整个页面还没下单在最后再推一把。为什么不只在 Hero 里放按钮因为用户的决策是线性的。他们先看 Hero知道你是谁→ 看 Features知道你能做什么→ 看 Testimonials知道别人怎么评价→ 看 Pricing知道多少钱。到这一步犹豫的用户需要一个最后的推力——这就是 CTA 区块的作用。2.7 Footer页脚​ 页面最底部放版权信息、联系方式、各种链接。​ Footer 看起来不起眼但它是页面完整感的关键。一个没有 Footer 的页面就像一篇没有句号的文章——内容都对但总觉得没说完。深色背景是 Footer 的主流选择和页面主体形成自然的视觉分界告诉用户到底了”。相当于 health check 端点和 docs 链接。不是核心功能但少了会很不专业。典型元素产品 Logo 一句话描述多列链接分组产品、资源、公司、法律社交媒体图标版权声明© 2026 XXX. All rights reserved.实用建议Footer 是最不需要花心思设计的区块但不能没有。一个没有 Footer 的页面会让用户觉得页面没加载完或者这个产品不靠谱。三、不同类型的页面区块组合不同​ 并不是每个页面都要把上面所有区块堆上去。不同目的的页面组合方式不同页面类型推荐区块组合说明产品首页Nav Hero Features Testimonials Pricing CTA Footer最完整的组合适合对外展示的主页开源项目展示Nav Hero Features Footer不需要定价和评价重点展示功能个人作品集Nav Hero Features改成项目展示 FooterFeatures 区块放自己的项目文档/博客首页Nav Hero简化版 Footer首屏放搜索框或最新文章不需要太多营销区块内部工具Nav Features Footer不需要 Hero 营销直接展示功能入口​ 不同场景需要不同的区块组合。最常见的误区是越多越好一个内部工具的页面放了 Testimonials 和 Pricing只会让同事觉得你在开玩笑。选区块就像选 API 的返回字段需要什么返回什么多了就是噪音。四、技术栈速览这些区块怎么实现的​ 如果你只是想用 AI 帮你生成页面这一节可以跳过。但如果你好奇这些区块在技术上是怎么回事这里用后端同学熟悉的方式简单说一下。4.1 三个层次​ 一个前端页面由三层组成和后端做类比前端做什么后端类比HTML定义页面结构和内容数据库 Schema定义有什么CSS定义样式和布局配置文件定义长什么样JavaScript定义交互和逻辑业务逻辑定义怎么动4.2 框架是什么​ 你可能听过 React、Vue、Svelte 这些名字。它们都是 JavaScript 框架核心做的事情是一样的把页面拆成可复用的组件方便管理和拼装。​ 用后端的话说框架就像 Spring Boot 或 Django你不用裸写 HTTP 处理框架帮你封装好了路由、状态管理、组件生命周期。选哪个框架不影响页面最终长什么样就像选 Java 还是 Python 不影响 API 返回的 JSON 格式。4.3 Tailwind CSS 是什么​ 传统的 CSS 写法是单独写样式文件然后在 HTML 里引用。Tailwind CSS 换了个思路把样式写成一个个小标签直接贴在 HTML 元素上。!-- 传统 CSS --buttonclassprimary-button点击/button!-- 需要在另一个文件里定义 .primary-button 的样式 --!-- Tailwind CSS --buttonclassbg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600点击/button!-- 样式直接写在标签上不需要额外文件 --​ 看起来有点啰嗦但好处是看到代码就知道长什么样不用在多个文件之间跳来跳去。对于 AI 生成代码来说Tailwind 特别友好。AI 不需要维护额外的样式文件所有信息都在一个地方。4.4 你真正需要知道的​ 说了这么多对于想用 AI 写前端的后端同学真正需要记住的就一点​你不需要学这些技术。告诉 AI “用 HTML CSS 写一个三列定价页面”或者用 Vue 写一个导航栏它都能做。你的工作是决定要什么区块、什么风格技术实现交给 AI。五、总结一张速查表区块用一句话说必须有吗Navigation顶部导航放 Logo 和菜单是Hero首屏大横幅3 秒内传递核心价值产品页必须内部工具不需要Features功能/卖点展示通常是多列卡片是Testimonials用户评价建立信任有真实评价就加没有别硬编Pricing定价方案对比有付费方案就加CTA最后一次推动用户行动产品页推荐其他可选Footer页脚版权和链接是​ 记住这张表下次让 AI 帮你写前端时你就不再是帮我写个网页这种模糊指令了而是能说出帮我写一个产品首页包含导航栏、首屏区块渐变背景 两个按钮、三列功能展示、三列定价方案中间列高亮、footer。描述越具体AI 的输出越好。而这篇文章给你的就是把模糊的写个网页变成具体的区块清单的能力。