定位：后台求效率，前台求转化

同一个团队做的两种产品，设计目标完全相反。

最常见的错误：把后台的信息密度和克制风格直接搬到官网首页——结果页面像说明书，没人往下滚。

一、PC 前台：Landing 页八段结构

1. Hero（首屏）
2. 社会证明（Logo 墙）
3. 核心特性 ×3
4. 产品截图 / 演示
5. 定价
6. 用户评价
7. FAQ
8. 页脚

不是每个都要有，但顺序不能乱 —— 用户的心智路径是「这是什么 → 谁在用 → 能解决什么 → 长什么样 → 多少钱 → 别人怎么说 → 还有疑问吗」。

1.1 Hero（决定 80% 的转化）

必须有四样东西，缺一不可：

① 一句话标题：说清"给谁、解决什么"（不是公司口号）
② 一句副标题：补充怎么做到（≤20 字）
③ 两个 CTA：主（免费试用）+ 次（看演示 / 了解更多）
④ 一个视觉：产品截图 / 动图 / 插画

三条铁律：

1. CTA 不滚动就能看见（1440×900 下必须可见）
2. 主 CTA 只有一个，不要三个并列按钮
3. 标题不要用行业黑话——用用户自己的话

Hero 高度：桌面 min-height: 640px，不要用 100vh（笔记本上会把 CTA 挤出视口）。

1.2 社会证明（Logo 墙）

放在 Hero 正下方，高度 80–120px：

「已有 2,000+ 团队在用」
[ Logo ] [ Logo ] [ Logo ] [ Logo ] [ Logo ]

• Logo 统一灰度或统一高度（不要五颜六色）
• 没有大客户就写数量：「服务 500+ 中小企业」
• 不要编造客户——被查出来是致命的

1.3 核心特性（最多 3 个）

一屏一个主张。 三个特性 = 三个 section，每个 section：

[图标]  特性标题（一句话说收益）
        说明（2 行以内）
        [可选：了解更多 →]

• 图标统一风格（线性或填充，不要混）
• 不要超过 3 个——用户记不住
• 图文左右交替排列，避免单调

判断标准：把每个特性标题连起来读，是不是一句完整的产品介绍？

1.4 产品截图 / 演示

必须真实——用 Figma 画的假界面，用户点进去会失望。

1.5 定价页

页头：一句话 + 计费周期切换（月付/年付，年付省 X%）
方案卡 ×3（推荐方案高亮）
功能对比表
FAQ（3-5 条，聚焦付费疑虑）

1.6 用户评价

「一句话评价（具体到结果）」
—— 张三，某某公司 运营总监
[头像]

• 要具体：「节省了每天 2 小时的核对时间」而不是「很好用」
• 有真实姓名 + 职位 + 公司（可脱敏公司名）
• 3–6 条，可轮播（但默认不自动播）

1.7 FAQ

3–6 条，只回答阻止转化的问题：

• 能免费试用吗？要信用卡吗？
• 数据安全怎么保证？
• 可以随时取消吗？
• 支持多少人协作？
• 有发票吗？

不要放"你们公司什么时候成立"这种——那是关于我们页的内容。

1.8 页脚

产品 | 解决方案 | 资源 | 公司 | 法律
备案号 / 联系方式 / 社媒

• 分栏 ≤5 组
• 备案号、隐私政策、服务条款必须有
• 备案号要能跳工信部查询

二、PC 前台的其它页面

2.1 功能页

每个功能一个 section，图文左右交替：

[截图]  |  功能名
        |  解决什么问题（2 行）
        |  · 要点 1
        |  · 要点 2

每区讲一个具体收益，不要罗列功能清单。

2.2 博客列表

• 卡片网格（2–3 列）
• 封面 aspect-ratio: 16/9，统一比例
• 标题两行截断、摘要两行截断
• 分类筛选在顶部
• 分页（不是无限滚动——SEO 友好）

2.3 文章详情

2.4 联系 / 留资页

• 左侧：价值说明 + 信任元素（客户 Logo、响应时间承诺）
• 右侧：表单，字段 ≤5 个
• 只留：姓名、公司、邮箱、需求（不要强制手机号）
• 提交后明确下一步：「我们会在 1 个工作日内联系你」

三、移动端前台

3.1 底部导航（Tab Bar）

高度 49–56px + env(safe-area-inset-bottom)
图标 24×24 + 文字 10–12px
Tab 数量 3–5（超过 5 个用「更多」）

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 49px;
  padding-bottom: env(safe-area-inset-bottom);   /* ★ 必须 */
}
.page { padding-bottom: calc(49px + env(safe-area-inset-bottom)); }

3.2 拇指区（最重要的布局约束）

手机上拇指自然覆盖的区域是屏幕下半部分：

┌─────────────┐
│  难触达      │  ← 顶部 30%：放标题、返回、次要操作
│             │
│  可触达      │  ← 中 40%：放内容
│             │
│  最容易触达   │  ← 底部 30%：放主 CTA、导航
└─────────────┘

主 CTA 必须在拇指区（底部固定栏），不要放屏幕中上部。

3.3 单列布局

移动端永远单列（除了商品网格这种天生双列）。

3.4 内容卡片（Feed）

[封面图 16:9 或 1:1]
标题（最多 2 行）
摘要（最多 2 行）
[头像] 作者 · 3 小时前 · 12 赞

图片必须有 aspect-ratio，否则加载完整个流跳动。

3.5 无限滚动 vs 加载更多

移动端默认用「滚动到底自动加载 + 回顶按钮」，但列表页（订单、商品）用「加载更多按钮」——用户需要知道"还有没有"。

回顶按钮：滚动超过 2 屏后出现在右下角，尺寸 40×40。

3.6 底部固定操作条

商品详情、表单提交这类页面：

.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #f0f0f0;
}
.content { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

主次按钮并排：主按钮占 60% 宽，次要按钮 40%（如「加入购物车」+「立即购买」）。

3.7 手势

左滑删除不能是唯一方式——用户不知道有这个手势。

四、转化优化的六条

五、常见反模式

六、验收清单

PC 前台

• Hero 有：一句话标题（说清给谁/解决什么）+ 副标题 + 主次双 CTA + 视觉
• 1440×900 下 CTA 不滚动可见
• 主 CTA 只有一个，文案是动词+收益
• Hero 不用 100vh，min-height 640 左右
• 社会证明在 Hero 下一屏，Logo 统一灰度/高度
• 核心特性 ≤3 个，图文交替
• 定价 3 个方案，推荐方案高亮，价格字号 ≥32
• 评价具体到结果，有姓名/职位
• FAQ 只回答阻止转化的问题
• 页脚有备案号、隐私政策、服务条款
• 正文宽度 680–760，行高 1.75
• 留资表单字段 ≤5，不强制手机号

移动端前台

• 底部 Tab ≤5，有 env(safe-area-inset-bottom)
• 主 CTA 在拇指区（底部固定栏）
• 单列布局，页面边距 16px
• 图片有 aspect-ratio，加载不跳动
• 无限滚动有回顶按钮；列表页用加载更多
• 左滑删除同时有可见按钮
• 输入框高度 ≥48、字号 ≥16
• 没有只靠手势的操作

七、反面清单

1. ❌ 官网首页用后台的信息密度
2. ❌ Hero 标题是公司口号
3. ❌ 首屏 3 个并列 CTA
4. ❌ Hero 用轮播图
5. ❌ CTA 文案「了解更多」「提交」
6. ❌ 移动端主 CTA 放屏幕中部
7. ❌ 底部固定栏不做 safe-area
8. ❌ 唯一交互是左滑删除
9. ❌ 无限滚动用在订单列表
10. ❌ 编造客户 Logo 与评价
11. ❌ 自动播放带声音的视频
12. ❌ 移动端正文 14px（低于 16 会触发 iOS 放大）