官网和落地页的常用组件
落地页只有一个目标：让陌生访客看懂产品并点主按钮。认识首屏横幅、卡片网格、页脚等常用组件。
官网和落地页是给第一次来的陌生人看的，目标只有一个：让对方看懂产品是做什么的，然后去点那个主要按钮。
先认识整体布局
- 落地页：围绕一个核心目标（注册、购买、预约）从上到下讲卖点，每一屏只说一件事。
- 顶栏+内容：官网常用的整体结构。顶部导航栏放 Logo、不超过七个栏目和一个醒目的按钮。
再认识常用组件
- 首屏横幅：第一屏，用一句话说清产品价值，配一个主按钮和一张产品截图。标题别写「赋能增长」这类空话；文字压在图片上时注意对比度，否则看不清。
- 按钮：整页只用一种最醒目的主按钮样式，其他操作用次要样式，访客才知道该点哪个。
- 卡片网格：用三列或四列卡片介绍功能特点、客户案例，每张一个图标或配图加两三行文字。
- 轮播图：只适合轮流展示几张同等级的活动横幅。每张都很重要的内容不要藏进轮播，平铺成卡片网格更好。
- 图片：固定宽高比，防止加载时把下面的内容挤下去；首屏以外的图片用懒加载，大图要压缩。
- 折叠面板：常见问题一问一答，用户只展开自己关心的几条。
- 页脚：放版权、备案号、隐私政策和次要链接，内容不满一屏时也要贴在页面底部。
- 悬浮按钮：长页面可以放一个「回到顶部」或客服入口，别在右下角堆好几个。
整体上要注意视觉层级：标题、正文、按钮的大小和颜色要有明显的主次。还要做响应式：手机上导航收成汉堡菜单，多列卡片变成单列。
怎么跟 AI 描述
做一个记账 App 的落地页，整体用顶栏+内容。顶部导航栏：Logo、功能、价格、常见问题，右侧一个「免费试用」主按钮。首屏横幅：标题「每一笔花销，三秒记完」，一句副标题，一个主按钮，右侧放 App 截图。下面依次是：三列卡片网格介绍三个核心功能、客户评价、用折叠面板做的常见问题、页脚。
整页只保留「免费试用」一种主按钮样式；首屏以外的图片使用懒加载；宽度小于 768px 时卡片改为单列。