英雄区设计
设计用户访问网站时首先看到的屏幕——英雄区。你只有 2-4 秒的时间来传达你是谁、你做什么以及访客为什么要留下。折页线以上的每个像素都是一次转化决策。
决策点
布局模式决策树
首要目标是什么？
├── 品牌知名度/记忆度 → 全出血视觉英雄区
├── 产品清晰度/演示 → 分屏英雄区（左侧文案，右侧视觉）
├── 功能展示/对比 → 居中英雄区，下方功能网格
└── 权威性/可信度建立 → 编辑/不对称英雄区
是否有强大的产品视觉效果？
├── 是（应用截图、仪表盘、演示） → 分屏英雄区
└── 否（API、服务、抽象概念） → 居中英雄区
目标受众是谁？
├── 开发者/技术人员 → 居中、极简（Linear/Vercel 风格）
├── 企业/商业 → 分屏搭配专业视觉效果
├── 消费者/生活方式 → 全出血搭配生活方式图片
└── 创意/设计 → 编辑/不对称布局
内容复杂度？
├── 简单的价值主张（1 行） → 全出血或居中
├── 中等（标题 + 副标题） → 分屏或居中
└── 复杂（多个好处） → 分屏搭配结构化文案
CTA 策略决策树
商业模式是什么？
├── 免费增值/试用 → "免费开始" + "查看演示"
├── 销售驱动 → "联系销售" + "查看价格"
├── 直接购买 → "立即购买" + "了解更多"
└── 潜客生成 → "获取报价" + "案例研究"
用户意图级别？
├── 高意图（搜索品牌名） → 仅直接 CTA
├── 中意图（意识到问题） → 主要 + 次要 CTA
└── 低意图（发现阶段） → 软性 CTA + 聚焦价值的文案
失败模式
1. 轮播混乱
症状： 英雄区内容自动轮播，跳出率 >70% 诊断： 用户无法处理轮播信息，产生决策瘫痪 修复： 替换为单一最强信息；使用静态英雄区并搭配一个清晰的价值主张
2. CTA 被折叠
症状： 尽管流量高但转化率低；移动端 CTA 需要滚动才能看到 诊断： 主要操作在初始页面加载时不可见 修复： 降低英雄区高度或将 CTA 上移；确保在 375px 移动宽度下可见
3. 价值主张不清晰
症状： 跳出率高、互动时间短、用户反馈困惑 诊断： 标题描述了你是什么，而不是你为用户做什么 修复： 以成果/好处开头；使用“交付速度提升 10 倍”而不是“DevOps 平台”
4. 视觉层级混乱
症状： 用户错过关键信息，CTA 点击率低 (<2%) 诊断： 所有文本元素视觉权重相同；没有清晰的阅读顺序 修复： 将标题的字号调整为正文的 2-3 倍；使用颜色/权重引导视线
5. 性能瓶颈
症状： 移动端跳出率高；LCP 分数缓慢 >3 秒 诊断： 过大的英雄区资源阻塞了关键渲染路径 修复： 优化图片（WebP/AVIF）、延迟加载非关键资源、预加载英雄区图片
实际操作示例
示例：SaaS 产品英雄区（分屏布局）
场景： 为面向开发者团队的代码审查工具构建英雄区
第 1 步：布局决策
- 目标：产品演示 ✓
- 强大的视觉效果：是（代码差异截图） ✓
- 受众：开发者 ✓
- 决策：分屏英雄区并搭配产品视觉效果
第 2 步：文案策略
标题：“充满信心地更快交付代码”（聚焦成果）
副标题：“自动代码审查，在用户之前捕获错误”（具体好处）
主要 CTA：“开始免费试用”（免费增值模式）
次要 CTA：“查看工作方式”（面向犹豫用户的演示）
第 3 步：视觉处理
- 左侧：文案 + CTA（40% 宽度）
- 右侧：动画代码差异演示（60% 宽度）
- 背景：微妙的点阵图案，营造开发者美学
第 4 步：移动端适配
- 堆叠：上方文案，下方视觉效果
- 标题从 3rem 缩放至 2.25rem
- CTA 按钮垂直堆叠，间距 1rem
专家 vs 新手：
- 新手：使用通用的“了解更多”CTA
- 专家：使用“查看工作方式”（暗示视觉演示）
- 新手：标题“面向团队的代码审查工具”
- 专家：标题“充满信心地更快交付代码”（用户成果）
质量检查清单
- 主要 CTA 在 375px 移动宽度下无需滚动即可见
- 标题在 10 个词内传达价值主张
- 英雄区 LCP 加载时间 ≤2.5 秒（在限速条件下测试）
- 文本对比度 ≥4.5:1，适用于任何背景
- 移动布局整洁堆叠，无水平滚动
- 存在社交证明元素（标志、指标或用户评价）
- 单一清晰信息（无轮播内容或多个价值主张）
- CTA 点击率 ≥2%（一周后测量）
- 尊重 prefers-reduced-motion 设置
- 英雄区图片使用适当的加载优先级（eager/high）
非适用边界
请勿将此技能用于：
- 完整网站架构 → 使用 web-design-expert
- SEO 内容策略 → 使用 seo-visibility-expert
- 博客文章布局 → 使用 web-design-expert
- 电商产品页面 → 使用 ecommerce-conversion-expert
- 多步骤引导流程 → 使用 user-experience-expert
- 品牌标识/标志设计 → 使用 brand-design-expert
以下情况应委派：
- 客户需要整个网站重新设计 → web-design-expert
- 重点是搜索排名优化 → seo-visibility-expert
- 英雄区是复杂用户旅程的一部分 → user-experience-expert