为什么你的创业公司网站转化率不行

cover

摘要

本期Design Review节目邀请了Framer联合创始人兼CEO Jorn van Dijk（约恩·范戴克），以其专业设计背景评审多款用户提交的Framer网站。Jorn和主持人Aaron逐一分析了五家创业公司的网站——Lumari、Alie、Juicebox、Leaping AI和The Hog，深入探讨了影响网站转化率的关键设计问题。核心教训贯穿始终：展示产品而非抽象概念——访客需要在5-10秒内理解你的产品是什么，而非被模糊的插图或过度动画分散注意力；降低摩擦——让用户尽快体验产品价值（"啊哈时刻"），避免过早设置注册墙；信息层次清晰——标题应直接说明产品，副标题解释细节，行动号召按钮要突出且相关；细节决定信任——间距错误、大小写不规范、引言缺乏公司名称等微小瑕疵会累积成"不对劲"的整体印象；动画服务于功能——好的动画引导注意力、传达信息，差的动画只是干扰。Jorn特别强调，创业公司应让用户在网站上就能试用产品（如Framer首页的提示框、Leaping AI的对话演示），而非要求先注册。在定位方面，视觉风格应与目标客户匹配——面向企业的产品不应看起来像消费级应用，招聘平台不应采用冷峻的军事风美学。最终，简化是改善转化率的最大杠杆——减少噪音，聚焦核心信息，让用户快速理解"这是什么、我为什么要用"。

正文

Lumari：采购AI平台——动画过多，产品缺失

Lumari定位为"采购AI平台"（AI Platform for Procurement），用始终在线的系统监控、协调和执行从采购到交付的供应链操作。

问题诊断：
- 动画过度：页面有大量图标进出、元素移动的动画，信息过载。动画本身不是问题，但很难做好——很容易过度，分散注意力。如果这是你第一次做动画，务必请教有经验的人。
- 行动号召（CTA）不明确：两个"预约演示"按钮被大量橙色元素淹没，不够突出。而且"预约演示"（Book a Demo）作为通用CTA转化率通常不高——访客还不了解产品，不会轻易承诺20分钟的通话。更好的做法是"观看视频演示"或"查看产品外观"。
- 缺乏产品展示：页面充斥着模糊的通用插图，缺少真实的产品截图或视频演示。Jorn直言："我不会在不了解产品长什么样的情况下去预约演示。"
- 标签页内容被隐藏：页面下方的具体功能（统一供应商收件箱、采购订单跟踪、变更管理）放在标签页后——大多数人不会点击标签页。建议将标签页与滚动行为联动，或直接用产品截图替代抽象插图。
- Logo轮播过快：集成工具的滚动效果（Ticker Effect）速度太快，应在悬停时减速，并允许点击查看具体集成详情。

最高杠杆改进：展示产品。截图或短视频演示，让访客理解Lumari能做什么，然后才考虑预约演示。

Alie：AI演示文稿工具——清晰但不够具体

Alie定位为"用AI创建高质量演示文稿"（Create High Quality Presentations with AI）。

优点：
- Hero区域展示了产品的一些界面元素，给人一种对产品功能的初步理解
- 标签页使用计时器自动切换，大字体标题吸引注意
- 底部"免费试用"按钮位置合理
- 有Product Hunt"当日产品第二名"的社会证明

问题诊断：
- 彩虹色背景分散注意力：不够规整的渐变背景让用户难以聚焦
- 定位与展示脱节：声称"高质量"，但展示的输出看起来很模板化。如果定位为"高质量"，那展示内容必须符合所有人的高标准；也许定位为速度和易用性更准确
- 副标题比标题更有信息量：大标题是营销语言（"不再从零开始"），副标题才解释了实际功能，但5秒计时器后就消失了
- 需要更多产品展示：仍缺少让用户快速理解"我到底能做什么"的具体说明
- 注册墙过早：最大的改进机会是在首页放一个提示框（Prompt Bar），让用户直接输入需求看效果——即使用户需要注册才能导出，至少他们已经投入了

关键洞察：你想让用户尽快到达"啊哈时刻"（Aha Moment）——体验产品价值的瞬间。登录或创建账户是最大的障碍。与免费的Google Slides竞争，必须让进入门槛尽可能低。

Juicebox：AI招聘平台——风格独特但体验断层

Juicebox定位为"赢得人才争夺战"（Win the Talent War）——AI招聘平台，集成搜索、CRM和智能体。

优点：
- 独特鲜明的视觉风格——小巧紫色按钮、角落翻盖设计、整体Brutalist美学
- "赢得人才争夺战"标题引人注目，精准触达感到人才竞争压力的人群
- 顶级公司Logo（Cursor、Cohere、Perplexity）证明产品被前沿AI公司使用
- 首页提示框让用户直接输入需求（如"为Framer设计团队招聘AI视频营销人员"）
- 产品博客展示频繁更新（10月2日、3日、21日、11月12日），证明产品持续迭代
- 集成展示视觉效果吸引人

问题诊断：
- 提示框后直接设墙：用户输入查询后被带到注册页面，而非直接看到结果。更好的做法是先显示模糊化的候选人资料片段，再要求注册查看详情
- 品牌与产品脱节：名为"Juicebox"（果汁盒），但视觉风格冷峻、黑白为主，更接近Anduril或Palantir的军事风——这与招聘"人"的产品属性不太匹配，页面上几乎没有人的面孔
- 通知式弹窗过多：不断弹出的小卡片让人感到压力而非获取新信息
- "工作原理"部分不清晰：展示的是产品的隐喻而非实际UI
- 底部CTA应包含提示框：不要只用通用的邮箱注册，加上提示框获取用户意图

整体评价：审美现代、AI前沿、品牌令人难忘。但视觉风格与"招聘人"的产品定位存在脱节。

Leaping AI：语音AI呼叫中心——最佳动画示范

Leaping AI定位为"用语音AI自动化你的呼叫中心"（Automate Your Call Center with Voice AI）——类人AI语音代理替代整个复杂呼叫中心。

优点：
- 现场可交互的AI对话演示：点击"Click to Answer"按钮即可与AI代理实时对话，无需注册——这是最佳实践
- 动画使用得当：脉冲背景引导用户点击互动按钮，滚动时界面扩大变紫，沉浸感强
- 展示多个AI代理而非单一界面，更符合企业级定位
- 客户证明：大学呼叫中心自动化50%通话
- 企业级安全认证信息，与定位一致

问题诊断：
- 视觉风格与定位不匹配：页面展示的是iPhone上单个人物，但声称面向"大型呼叫中心"——应展示多个电话/多个场景
- 互动入口不够明显："Click to Answer"按钮不够直觉，应加上脉冲紫色光晕或更明显的电话图标提示
- AI对话可改进：AI应主动引导到客户的具体痛点（"告诉我关于你的呼叫中心"），而非泛泛提问

核心启示：这是动画为功能服务的优秀范例——动画引导注意力、传达产品功能，而非仅仅为了视觉效果。整体看起来现代且专业。

The Hog：AI增长营销平台——信息过载的典型

The Hog定位为"增长即服务"（Growth as a Service）——用AI代理研究、规划和执行GTM策略，解锁完整销售和营销团队的能力。

问题诊断：
- 品牌认知混乱："The Hog"是"Head of Growth"的缩写，但页面上没有解释，大多数访客无法理解这一关联。"The Hog gives you GAS"（Growth as a Service）的双关也不直觉
- 排版问题严重：花体字难以阅读、字间距错误（两格间距vs一格）、句号前有空格——这些微小瑕疵累积成"不够专业"的印象
- 内容过载：一个超长落地页承载了过多信息——产品介绍、功能展示、定价、客户评价、招聘信息全部挤在一起。可以使用多个页面
- 视觉层次不清：文本过宽难以阅读，缺少最大宽度限制；图标快速移动难以辨认
- 社会证明不可信：客户评价没有公司名称、每个单词首字母大写（正常人不会这样写），让人质疑引用真实性，进而质疑所有数据的真实性
- 交互组件不一致：同一页面上的"登录/请求演示"组件在Hero区域和定价区域表现不同（一个链接到登录页，一个看起来像月/年切换），造成困惑
- 产品与服务的混淆：顶部说"增长即服务"，暗示是人工服务；但实际是SaaS产品

最高杠杆建议：简化。把现有页面放到一边，新建一个页面——只允许放置帮助用户理解"这是什么"的内容，然后在20个不了解该产品的人身上测试，问他们"你觉得这是什么？"从那里再扩展为更完整的落地页。

贯穿所有评审的核心原则

展示产品：截图、视频演示、交互式Demo——比任何插图或动画都更有说服力
降低摩擦：让用户在注册前就能体验产品价值；提示框优于注册表单
5-10秒法则：访客在5-10秒内必须理解"这是什么、为谁做的"
动画服务功能：好的动画引导注意力和传达信息，差的动画是干扰
细节即信任：间距、大小写、引言来源——微小瑕疵会累积损害可信度
视觉风格匹配定位：企业级产品要有企业级外观，招聘产品要有人味
简化：减少噪音，聚焦核心信息——这是改善转化率的最大杠杆