哈喽，我是大鹏，这里是第二灵感库。
做SaaS产品的落地页，你有没有这种感觉：
设计稿做得很漂亮，老板也说好看，但一上线，注册率低得离谱。
后来我研究了几十个优秀的SaaS落地页，发现它们并不是"好看"，而是每一个元素都在为用户体验和产品价值服务。
今天就拆解6个真实的SaaS产品落地页，看看它们是怎么把"访客"变成"注册用户"的。
01 Linear｜极简到极致，只做一件事
网址：https://linear.app/
一句话介绍：AI时代的产品开发系统，服务于世界级产品团队。
设计风格
Linear的落地页，整个首屏只有1个核心价值主张和1个行动按钮。
没有导航栏，没有多余文案，没有干扰元素。极简到极致，但每一处都经过精心设计。
配色方案
-
主色： #5E6ADB（Linear蓝） -
背景： #FFFFFF（纯白） -
按钮： #5E6ADB -
文字： #000000（纯黑） -
强调色： #F5A623（橙色，用于强调）
蓝色传达"专业"、"可靠"，橙色用于CTA按钮，形成视觉焦点。
字体选择
-
标题：Inter, -apple-system, sans-serif（现代、清晰） -
正文：Inter, -apple-system, sans-serif
布局特点
单栏布局，视线只有一个方向：从上到下。
-
顶部：Linear Logo（简洁，强化品牌） -
中间：大标题"The product development system for teams and agents"（黑色，加粗） -
下方：副标题"Purpose-built for planning and building products. Designed for the AI era."（灰色，软化） -
再下方："Get Started"按钮（蓝色，醒目） -
底部：产品截图（动态，展示实际界面）
用户不需要做任何决策，只需要理解价值主张。
交互细节
-
页面滚动：固定顶部导航，随时可以点击"Get Started" -
按钮悬停：背景色变深，轻微放大效果 -
产品截图：滚动到视口时触发淡入动画，体验流畅 -
客户Logo墙：灰度显示，悬停时变彩色，增加趣味性
运用的设计理论
① 希克定律（Hick's Law）
选项越多，决策时间越长。
Linear把落地页的选项减少到只剩1个：理解价值主张，然后点击"Get Started"。
没有"查看价格"、"阅读文档"、"观看Demo"这些分散注意力的链接，先让用户理解产品价值。
② 视觉层级（Visual Hierarchy）
用户的视线应该按照你设定的路径移动。
Linear的视觉路径：
Logo（确认品牌）
↓
标题（核心价值主张）
↓
副标题（补充说明）
↓
按钮（行动指令）
↓
产品截图（实际体验）
每一步都顺理成章，没有跳跃。
③ 格式塔原理 - 相似性（Similarity）
相似的元素会被用户归为一类。
Linear的页面元素风格高度一致：
-
所有按钮都是圆角矩形 -
所有图标都是线性风格 -
所有截图都是深色模式
用户一眼就能识别出"这是同一个产品"。
最值得抄的3个设计亮点
① 消除所有干扰元素
普通落地页：有导航栏、有页脚、有"已有账号？登录"链接、有第三方登录按钮……
Linear：什么都没有，只有1个核心价值主张和1个行动按钮。
适用场景：任何需要用户完成单一目标的产品落地页（注册、下载、购买）。
② "Get Started"比"Sign Up"效果好
❌ 普通设计："Sign Up"（注册） ✅ Linear："Get Started"（开始使用）
"Sign Up"是平台视角的功能描述，"Get Started"是用户视角的利益描述。
③ 产品截图用"动态展示"，不用"静态截图"
普通落地页：放一张静态截图，用户看不出产品怎么用。
Linear：用GIF或视频展示产品实际操作流程，用户一看就懂"这个产品是干什么的"。
02 PostHog｜"为产品经理和开发者打造"的价值主张
网址：https://posthog.com/
一句话介绍：为产品工程师打造的开发工具平台，包含分析、功能开关、会话录制等。
设计风格
PostHog的落地页，核心就一句话："The new way to build products"。
整个页面都在回答一个问题："PostHog能帮你做什么？"
配色方案
-
主色： #F5A623（PostHog橙） -
辅色： #1D1D1F（深灰） -
背景： #FFFFFF -
按钮： #F5A623 -
文字： #1D1D1F
橙色传达"活力"、"行动"，深灰传达"专业"、"可靠"。
字体选择
-
标题：Inter, -apple-system, sans-serif -
正文：Inter, -apple-system, sans-serif
布局特点
首屏三要素齐全：
-
大标题："The new way to build products"（价值主张） -
副标题："Product development used to mean manually writing code..."（问题陈述） -
按钮："Get started - free"（明确利益 + 消除顾虑）
关键信息放在按钮旁边："No credit card required"（无需信用卡）。
交互细节
-
按钮悬停：背景色变深，加轻微阴影，立体感增强 -
页面滚动：顶部固定导航栏，随时可以点击"Get started" -
产品功能展示：滚动到视口时触发淡入 + 上移动效 -
客户Logo墙：灰度显示，悬停时变彩色
运用的设计理论
① 锚定效应（Anchoring Effect）
人们做决策时，会过度依赖第一个接触到的信息。
PostHog首屏的第一个信息是"free"（免费）——这是用户的"锚点"。
后续看到付费套餐时，用户会想"我已经免费用了，付点钱继续用很合理"。
② 损失厌恶（Loss Aversion）
"免费"本身不是最强的驱动力，"失去免费机会"才是。
PostHog的文案：不是"有免费版"，而是"Get started - free"——"开始"暗示"如果你不行动，这个机会就没了"。
③ 视觉层级（Visual Hierarchy）
用户视线应该按照你设定的路径移动。
PostHog的视觉路径：
标题（价值主张）
↓
问题陈述（你有这个问题吗？）
↓
解决方案（我们用这个方法帮你）
↓
按钮（最终转化）
最值得抄的3个设计亮点
① "Get started - free"比"Sign Up"效果好10倍
❌ "Sign Up"（注册） ✅ "Get started - free"（开始使用 - 免费）
后者把"行动"和"利益"绑定在一起，用户点击按钮的时候，心里想的是"我要开始免费试用了"。
② "No credit card required"要放在"按钮旁边"，不要放在"页脚"
普通设计：把"无需信用卡"放在页脚，用户填邮箱的时候看不到。
PostHog：放在按钮下方，用户点击按钮的那一刻就能看到。
③ 客户Logo墙要"有名气"的，不要"没听过"的
普通设计：放一堆用户没听过的公司Logo，等于没放。
PostHog：放OpenAI、Vercel、Hasura这种"地球人都知道"的品牌——信任传递才有效。
03 Miro｜"AI创新工作空间"的视觉化展示
网址：https://miro.com/
一句话介绍：AI创新工作空间，团队和AI代理一起思考、规划、构建。
设计风格
Miro的落地页，不是让你"读文字"，而是让你"看演示"。
首屏就是一个动态的产品演示视频，用户一眼就能看懂"这个产品是干什么的"。
配色方案
-
主色： #FFD02C（Miro黄） -
辅色： #050038（深紫） -
背景： #FFFFFF -
按钮： #FFD02C -
文字： #050038
黄色传达"创意"、"活力"，深紫传达"专业"、"深度"。
字体选择
-
标题：Inter, -apple-system, sans-serif -
正文：Inter, -apple-system, sans-serif
布局特点
首屏：产品演示 + 价值主张
-
顶部：Miro Logo + 导航栏 -
中间：动态产品演示视频（展示实际使用方法） -
下方：大标题"The collaboration layer your AI tools are missing"（价值主张） -
再下方："Get started"按钮（黄色，醒目）
关键：不是"描述产品功能"，而是"展示产品使用方法"。
交互细节
-
产品演示视频：自动播放，循环展示，用户一眼就能看懂 -
按钮悬停：背景色变深，加轻微阴影 -
页面滚动：固定顶部导航栏，随时可以点击"Get started" -
客户案例展示：滚动到视口时触发淡入动画
运用的设计理论
① 认知流畅性（Cognitive Ease）
信息越容易处理，用户越容易产生好感。
Miro用产品演示视频展示产品使用方法，比"文字描述"容易处理100倍。
对比：普通落地页写"我们的产品可以帮你做XXX"，用户看着就累了。
② 社会认同（Social Proof）
用户看到"已经有100M+人在用Miro"，会默认"这个产品靠谱"。
Miro在首屏下方就展示了"100M+ people collaborating on Miro"——在用户还在犹豫的时候，就给出信任背书。
③ 视觉层级（Visual Hierarchy）
重要信息应该在"不需要滚动"的位置展示。
Miro的"100M+ people"数据，在首屏下方就能看到——无论用户滚动到哪个位置，都能看到。
最值得抄的3个设计亮点
① 首屏放"产品演示视频"，不用"产品截图"
普通落地页：放一张静态截图，用户看不出产品怎么用。
Miro：用视频展示产品实际使用方法，用户一看就懂"这个产品是干什么的"。
适用场景：任何需要展示"产品使用方法"的SaaS产品。
② "100M+ people"比"我们是最好的"效果好100倍
❌ "我们是最好的协作工具" ✅ "100M+ people collaborating on Miro"
后者用数据说话，前者只是"自卖自夸"。
③ 按钮文案用"Get started"，不用"Sign Up"
"Sign Up"是平台视角的功能描述，"Get started"是用户视角的利益描述。
04 Framer｜"AI网站构建器"的即时体验
网址：https://framer.com/
一句话介绍：AI网站构建器，为专业网站而生。
设计风格
Framer的落地页，核心就一句话："Design with agents. Refine on the canvas. Ship with your team."
整个页面都在展示"AI代理怎么帮你构建网站"。
配色方案
-
主色： #0066FF（Framer蓝） -
辅色： #000000（纯黑） -
背景： #FFFFFF -
按钮： #0066FF -
文字： #000000
蓝色传达"技术"、"可靠"，黑色传达"专业"、"极致"。
字体选择
-
标题：Inter, -apple-system, sans-serif -
正文：Inter, -apple-system, sans-serif
布局特点
首屏：AI代理演示 + 价值主张
-
顶部：Framer Logo + 导航栏 -
中间：AI代理工作原理的演示（展示"输入提示词 → 生成设计"） -
下方：大标题"Design with agents"（价值主张） -
再下方："Get started"按钮（蓝色，醒目）
关键：不是"描述AI功能"，而是"展示AI怎么工作"。
交互细节
-
AI代理演示：实时展示，用户输入提示词，AI立即生成设计 -
按钮悬停：背景色变深，加轻微阴影 -
页面滚动：固定顶部导航栏，随时可以点击"Get started" -
客户案例展示：滚动到视口时触发淡入动画
运用的设计理论
① 认知流畅性（Cognitive Ease）
信息越容易处理，用户越容易产生好感。
Framer用AI代理演示展示"AI怎么帮你构建网站"，比"文字描述"容易处理100倍。
② 视觉层级（Visual Hierarchy）
用户视线应该按照你设定的路径移动。
Framer的视觉路径：
Logo（确认品牌）
↓
AI代理演示（核心功能展示）
↓
标题（价值主张）
↓
按钮（行动指令）
③ 格式塔原理 - 闭合性（Closure）
人们倾向于把不完整的信息补充完整。
Framer的AI代理演示只展示关键步骤，用户会自动脑补"完整的工作流程"。
最值得抄的3个设计亮点
① 首屏放"AI代理演示"，不用"产品截图"
普通落地页：放一张静态截图，用户看不出"AI怎么帮我"。
Framer：用演示展示AI实际工作原理，用户一看就懂"这个AI代理是干什么的"。
适用场景：任何有AI功能的产品。
② "Design with agents"比"AI网站构建器"效果好
❌ "AI网站构建器" ✅ "Design with agents"（与AI代理一起设计）
后者强调"协作"，前者只是"描述功能"。
③ 客户案例用"Before & After"对比，不用"单独展示"
普通设计：只展示"使用后"的效果，用户看不出"提升了多少"。
Framer：用Before & After对比，用户一眼就能看出"用了AI代理后，效率提升了多少"。
05 Mastra｜"TypeScript AI框架"的开发者友好设计
网址：https://mastra.ai/
一句话介绍：Modern TypeScript框架，用于构建AI驱动的应用和代理。
设计风格
Mastra的落地页，核心就一句话："Build more capable agents"。
整个页面都在回答一个问题："Mastra能让你的AI代理做什么？"
配色方案
-
主色： #7C3AED（Mastra紫） -
辅色： #000000（纯黑） -
背景： #FFFFFF -
按钮： #7C3AED -
文字： #000000
紫色传达"创新"、"技术"，黑色传达"专业"、"极致"。
字体选择
-
标题：Inter, -apple-system, sans-serif -
正文：Inter, -apple-system, sans-serif
布局特点
首屏：代码演示 + 价值主张
-
顶部：Mastra Logo + 导航栏 -
中间：代码演示（展示"如何用Mastra构建AI代理"） -
下方：大标题"Build more capable agents"（价值主张） -
再下方："Get started"按钮（紫色，醒目）
关键：不是"描述框架功能"，而是"展示代码怎么写"。
交互细节
-
代码演示：语法高亮，实时展示，开发者一看就懂 -
按钮悬停：背景色变深，加轻微阴影 -
页面滚动：固定顶部导航栏，随时可以点击"Get started" -
客户案例展示：滚动到视口时触发淡入动画
运用的设计理论
① 认知流畅性（Cognitive Ease）
信息越容易处理，用户越容易产生好感。
Mastra用代码演示展示"怎么用Mastra构建AI代理"，比"文字描述"容易处理100倍。
② 开发者友好（Developer Friendly）
开发者喜欢"看代码"，不喜欢"读文档"。
Mastra首屏就展示代码，开发者一看就懂"这个框架是怎么用的"。
③ 视觉层级（Visual Hierarchy）
用户视线应该按照你设定的路径移动。
Mastra的视觉路径：
Logo（确认品牌）
↓
代码演示（核心功能展示）
↓
标题（价值主张）
↓
按钮（行动指令）
最值得抄的3个设计亮点
① 首屏放"代码演示"，不用"产品截图"
普通落地页：放一张静态截图，开发者看不出"代码怎么写"。
Mastra：用代码演示展示实际使用方法，开发者一看就懂"这个框架是怎么用的"。
适用场景：任何开发者工具类产品。
② "Build more capable agents"比"TypeScript AI框架"效果好
❌ "TypeScript AI框架" ✅ "Build more capable agents"（构建更强大的代理）
后者强调"结果"，前者只是"描述技术栈"。
③ 客户案例用"开发者评价"，不用"公司Logo"
普通设计：放一堆公司Logo，开发者不买账。
Mastra：放开发者的评价（"我们用Mastra构建了XXX，效果很好"），开发者更信任。
06 V7 Labs｜"AI for Private Equity & Finance"的专业感设计
网址：https://v7labs.com/
一句话介绍：AI驱动的投资情报平台，为私募股权和金融行业打造。
设计风格
V7 Labs的落地页，核心就一句话："Investment intelligence"。
整个页面都在传达"专业"、"可靠"、"高端"的感受。
配色方案
-
主色： #1D1D1F（深灰） -
辅色： #F5A623（橙色） -
背景： #FFFFFF -
按钮： #1D1D1F -
文字： #1D1D1F
深灰传达"专业"、"可靠"，橙色用于CTA按钮，形成视觉焦点。
字体选择
-
标题：Inter, -apple-system, sans-serif -
正文：Inter, -apple-system, sans-serif
布局特点
首屏：数据展示 + 价值主张
-
顶部：V7 Labs Logo + 导航栏 -
中间：数据展示（"1024 funds across 120 GPs"） -
下方：大标题"Investment intelligence"（价值主张） -
再下方："Get started"按钮（深灰色，醒目）
关键：不是"描述产品功能"，而是"展示数据实力"。
交互细节
-
数据展示：动态数字滚动，从0滚动到目标数字，体验流畅 -
按钮悬停：背景色变深，加轻微阴影 -
页面滚动：固定顶部导航栏，随时可以点击"Get started" -
客户案例展示：滚动到视口时触发淡入动画
运用的设计理论
① 认知流畅性（Cognitive Ease）
信息越容易处理，用户越容易产生好感。
V7 Labs用数据展示展示"我们有多专业"，比"文字描述"容易处理100倍。
② 权威背书（Authority）
用户不信任"你说的话"，但信任"数据"。
V7 Labs在首屏就展示了"1024 funds across 120 GPs"——在用户还在犹豫的时候，就给出权威背书。
③ 视觉层级（Visual Hierarchy）
重要信息应该在"不需要滚动"的位置展示。
V7 Labs的"1024 funds"数据，在首屏就能看到——无论用户滚动到哪个位置，都能看到。
最值得抄的3个设计亮点
① 首屏放"数据展示"，不用"产品截图"
普通落地页：放一张静态截图，用户看不出"这个产品有多专业"。
V7 Labs：用数据展示展示实力，用户一看就懂"这个产品是靠谱的"。
适用场景：任何需要展示"专业实力"的产品。
② "1024 funds"比"我们是最好的"效果好100倍
❌ "我们是最好的投资情报平台" ✅ "1024 funds across 120 GPs"
后者用数据说话，前者只是"自卖自夸"。
③ 按钮文案用"Get started"，不用"Sign Up"
"Sign Up"是平台视角的功能描述，"Get started"是用户视角的利益描述。
6个SaaS落地页的共同设计趋势（2026年）
分析完这6个案例，我发现它们都在用同一套逻辑：
趋势1：首屏只做一件事
Linear首屏：只让你理解价值主张。
PostHog首屏：只让你看到"免费"。
Miro首屏：只让你看产品演示。
Framer首屏：只让你看AI代理演示。
Mastra首屏：只让你看代码演示。
V7 Labs首屏：只让你看数据展示。
共同点：首屏只有1个核心信息，不让用户做选择题。
趋势2："消除顾虑"比"展示功能"更重要
6个案例都在首屏或次屏展示了"消除顾虑"的信息：
-
Linear：没有"消除顾虑"的信息（因为它的极简本身就是"消除顾虑"） -
PostHog："No credit card required" -
Miro："100M+ people"（社会认同） -
Framer："Free"（免费试用） -
Mastra："Open Source"（开源，降低顾虑） -
V7 Labs："1024 funds"（权威背书）
共同点：用户最大的障碍不是"不知道你的功能"，而是"担心被坑"。
趋势3：按钮文案用"用户视角的利益"，不用"平台视角的功能"
共同点：按钮文案不是在"描述功能"，而是在"描述用户点击后的结果"。
互动时间
你做过SaaS产品的落地页吗？遇到过什么坑？
评论区告诉我，我挑3个典型问题详细解答。