ISSUE 53 · SaaS网站设计
产品页随便做做就行了？
SaaS官网为什么
都长得那么贵？
Saaspo · Cartesia · Clarasight · Taito.ai
SaaS官网不是展示产品，是替访客走完"从好奇到信任"的那段路。
哈喽，我是大鹏，这里是第二灵感库。
做过官网或者落地页的都知道，SaaS网站是网页设计里最难啃的一类——产品是抽象的、功能是复杂的、受众是挑剔的，你既要讲清楚产品是什么，又不能写成说明书，还得让访客看完就想要注册。
所以SaaS官网几乎是网页设计的"最高战场"：预算给得足、设计卷得狠、每个像素都在为转化服务。看懂一个好的SaaS官网，比看十个普通企业站学到的都多。
今天这期，我挑了1个灵感库+3个标杆SaaS官网，每一个都代表一种打法。不管你是做设计的、做产品的，还是自己有东西要卖，这期都直接抄作业级别的有用。
PART 01
Saaspo
灵感库打法：先建垂直参考库，再动手做设计
网址：saaspo.com
先给灵感库。
Saaspo是一个专门收录SaaS网站设计灵感的画廊，口号很直白——"The best SaaS web design inspiration"。它干的事情很简单：把全网设计最出色的SaaS落地页收集起来，配上高清整页截图，按类型分类，让你一次看个够。
几个好用的点：
● 只收SaaS落地页：不像Awwwards那种大而全，Saaspo垂直在SaaS这一个品类，首页随便刷刷就能看到Calendly、Glide、Gumloop这些知名产品的落地页
● 每个案例都有整页截图：不用一个一个点开原网站，直接在画廊里翻截图，找灵感的效率极高
● 标了"是不是Framer做的"：很多案例直接挂了Framer模板链接，看中哪个设计，理论上你可以买同款模板回来改——这对独立开发和小团队太友好了
● 持续更新：不是死库，隔段时间去逛总有新东西
对设计师的启发是什么？做落地页之前，先建一个自己的"参考库"。Saaspo最聪明的做法是把灵感"结构化"了：按行业、按风格、按建站工具分类，你要找的不是"好看的网站"，而是"跟我产品像的网站"。下次接落地页需求，先来这里翻半小时同类产品的官网，你就知道行业惯例是什么、哪里能做出差异化。
大鹏说：我自己囤设计灵感的习惯很多年了，但SaaS落地页一直是单独一个文件夹——因为它的设计逻辑跟品牌站、作品集完全不一样，一切都是为了转化。Saaspo等于帮你把这个文件夹建好了，而且人家更新得比勤快。
PART 02
Cartesia
叙事打法：AI公司怎么做出"科研级高级感"
网址：cartesia.ai
第一个标杆：AI公司官网怎么做出"科研级高级感"。
Cartesia是做实时语音AI的，他们的Sonic（语音生成）和Ink（语音转文字）模型在语音Agent这个赛道里是头部水平。但今天不聊技术，聊官网。
打开首页，扑面而来的是一种"AI公司少有的质感"：
● 深色科技风但不廉价：很多AI公司也用深色，但只是换个黑背景。Cartesia的深色是配合内容结构来的，金融、医疗、政务三个行业场景在hero区直接轮播切换，画面跟着内容动，不是纯装饰动效
● 场景化叙事：讲语音Agent能力，不放抽象架构图，而是给你一个"实时外呼验证可疑交易"的反欺诈场景——金融风控的人一看就懂，这就是给谁看、解决什么问题
● 研究背景直接亮出来：State Space Models、Mamba、H-Nets，团队把学术论文级别的成果写在官网上，"Frontier research, deployed in every conversation"——研究即卖点
● 部署方案做成分层卡片：Cloud、On-premise、On-device三种部署方式，把企业客户最关心的数据合规问题用一张结构讲明白
对设计师的启发是什么？AI产品官网最容易掉进两个坑：要么堆概念词没人看得懂，要么放一堆通用AI插画风。Cartesia示范了第三条路——用真实场景翻译技术能力。"实时语音模型"是抽象的，"银行打一通电话验证可疑交易"是具体的。你的产品再技术流，也一定能找到一个这样的场景锚点。
大鹏说：这个站的字体和留白特别值得细看，标题字重、行距、深色底上的文字对比度都调得很克制。做深色主题总翻车的朋友，去对着抄。另外它把"我们的研究"做成一级导航，这在toC产品里几乎看不到——toB的信任感就是这么一点点砌出来的。
PART 03
Clarasight
转化打法：B端官网的"转化率教科书"
网址：clarasight.com
第二个标杆：B端官网的"转化率教科书"。
Clarasight是做企业差旅和费用管理的AI平台。说实话，"企业差旅费用管理"是我能想到的最无聊的产品品类之一——但它的官网愣是做得让你想看下去。
拆一下它的转化设计：
● 成果数字前置：$5B（客户差旅花费规模）、99%（洞察与工作流提速）、25%（差旅支出下降）——三个大数字直接砸在首页，不用读一个字的正文你就知道"这东西有效"
● 用例卡片网格：自动化工作流、供应商管理、预算预测、可持续性、政策审批、会议管理，六个用例做成六张卡片，每张卡片一句话痛点+一个加粗结果（"找回90%的时间"）。B端客户自己会"对号入座"
● 信任体系完整：ISO 27001、ISO 27701、SOC 2、GDPR四个合规认证一字排开，再加客户证言——企业客户采购要过安全审查，这些不是装饰，是弹药
● FAQ不敷衍：最关键的问题是"你们是不是要替换我们现有的系统？"，答案直接说No，我们跟现有系统协同——把最大的采购顾虑拆在官网阶段
对设计师的启发是什么？B端官网设计不是"把页面做漂亮"，是替销售回答问题。客户看到第几屏会问"这跟我有什么关系"？会问"数据安全吗"？会问"要不要推翻现有系统"？每一个问题都应该在页面上有对应的区块去接住。Clarasight的页面结构就是一张"销售话术地图"，这个思路比任何视觉技巧都值钱。
大鹏说：我特别推荐去看它的用例卡片——一句话痛点+一个加粗数字的写法，是可以直接套用到任何B端落地页的万能公式。还有那个"90%的时间被自动化找回"，数字具体到不像吹牛，反而可信。做B端设计的都懂：客户要的不是炫，是确定性。
PART 04
Taito.ai
演示打法：AI产品怎么把"看不见的能力"演出来
网址：taito.ai
第三个标杆：AI产品怎么把"看不见的能力"演出来。
Taito.ai是做人力资源自动化的——员工档案、休假考勤、合同、绩效，全部AI自动化。又一个"听起来很无聊"的品类，又是一个做得极其生动的官网。
它的杀手锏是产品演示剧情化：
● Hero区一句话定位："Run people ops on autopilot"——人力资源自动驾驶。六个词讲完产品，一个多余的字都没有
● AI流程直接"演"给你看：页面上有一段完整的Agent工作流演示——输入一句话，系统自动生成合同、发电子签名、配置Slack欢迎消息、安排导师配对、预约1:1、发起第一周反馈收集……每一步都列出来，你能看见AI"思考"的全过程
● 绩效评价也能演出真实感：它甚至演示了AI怎么为一个叫Daniel的员工写Q1绩效评价——引用了真实的数据来源（会议记录、Slack讨论、Linear任务），还标注了"已向Hannah请求跨团队协作的反馈"。真实感拉满
● 本地化细节做成了内容：英国28天年假、瑞典25天、德国30天，三个国家的政策差异直接做成对比模块——既是产品能力展示，也是搜索流量抓手
● Slack原生场景贯穿全站：截图、交互全是Slack里的真实样子，因为目标用户就在Slack里工作
对设计师的启发是什么？AI产品的官网设计有个通用难题：能力是看不见的。你说"自动化"，用户脑子里没画面。Taito的解法是把AI的执行过程做成可阅读的剧本——一步、两步、三步，像看别人打游戏的操作回放。这种"过程可视化"比任何功能列表都更有说服力。做AI产品落地页的，这个手法直接学走。
大鹏说：这个站我看得最久的是那段onboarding自动化演示，因为它不光是展示功能，还顺手回答了"AI会不会瞎搞"的疑虑——每一步都有来源、有确认。AI产品的信任问题，恰恰是要靠这种透明化的过程展示来解决的。另外注意它的案例引用了具体的人名、公司名和原话，这种细节上的"真"，是官网质感的隐形加分项。
LAST PART
4个网站，4条SaaS设计心法
串一下这期的收获：
● Saaspo教的是方法：做落地页之前，先建垂直灵感库，看同类不看全网
● Cartesia教的是叙事：技术能力要用真实场景翻译，深色高级感来自结构与克制
● Clarasight教的是转化：B端官网就是销售话术地图，数字、用例、合规三件套一个都不能少
● Taito.ai教的是演示：AI产品要把看不见的能力"演"成看得见的剧本
一句话总结：SaaS官网的本质，不是展示产品，是替访客走完"从好奇到信任"的那段路。页面每往下滚一屏，都应该有一个疑虑被解决。
这期的4个网站，建议按顺序看：先去Saaspo泡半小时找手感，再挨个拆那三个标杆——看的时候别光顾着说"好看"，拿张纸记一下"它在第几屏、用什么方式、回答了我什么问题"，这个拆法才是真能学到东西的拆法。
所有的"网址资源"我都整理好了一份文档。
#SaaS网站 #网页设计 #落地页设计 #设计灵感 #第二灵感库
觉得有用的话，点赞 + 在看 + 转发三连支持一下
ISSUE 53 · SEE YOU NEXT WEEK