界面图鉴
Hero 区Hero
Hero 区到底是什么？为什么首页最上面那一大块叫「英雄」？
首屏最上方那块用大标题和行动按钮定调的区域，整个页面的开场白。
01 · 拆开看看
这一块由什么组成
名字借自海报设计里的 hero image——整版最抢眼的主视觉。落到网页上，它就是首屏顶部那块负责「三秒钟说清你是谁」的区域，通常由这几部分组成：
眉标Eyebrow
主标题上方的一行小字，先给个定位，比如「全新 2.0」。
主标题Headline
一句话说清你是谁、给什么，整个页面最大的字。
副标题Subheadline
补一两行细节，字号小一档、颜色淡一档。
行动按钮CTA
最希望访客点的那个按钮，主按钮通常只有一个。
配图Visual
产品截图或插画，撑起另一半画面。
02 · 常见变体
同一个零件，几种摆法
文案居中、按钮在下，适合信息单一的落地页。
文案和产品截图各占一半，最常见的形态。
大图当背景、文字压在上面，氛围感强，注意文字对比度。
03 · 火眼金睛
这个页面里，哪一块是 Hero？
下面是一个虚构产品的首页，每一块都能点。点点看，你能一眼认出 Hero 吗？
点一块试试，看看它叫什么
不是它。导航栏管「去哪儿」，不负责说清价值——它在 Hero 的上面。
就是它！大标题、副标题、主按钮加配图，三秒钟说清这个产品是干嘛的。
不是它。这排灰灰的 logo 是紧跟在 Hero 后面的信任背书区。
不是它。功能明细是后续区块的活，Hero 只负责开场那一句。
04 · 用与不用
什么时候该上它
- 产品或活动落地页的第一屏
- 需要一句话说清价值主张的时候
- 想引导访客做一个明确动作（注册、下载、试用）
- 后台工具和仪表盘——用户要的是直接干活
- 内容列表页——读者要的是列表本身
- 一屏想塞三个以上卖点的时候
05 · 想一想
一道题，检查眼力
访客第一次打开产品官网，需要马上知道「这是什么、对我有什么用、下一步做什么」。哪种首屏组织最有效？
对。Hero 的任务就是这三件事：说清价值、给一个动作、给一点证据。
悬。访客平均只给你几秒钟，开场看不懂，就直接走了。
太挤了。什么都想强调等于什么都没强调，这些内容属于后续区块。
06 · 说给 AI 听
让 AI 改它时，这样说
用名字指代区域，AI 才知道你说的是哪一块，也不会误伤页面的其他部分。
把 hero 的主标题改成「三天上线你的知识库」，副标题缩小一号
hero 改成左文右图的布局，右边放一张产品截图
hero 的主按钮换成品牌橙色，再加一个「查看文档」的次要按钮
手机上 hero 太高了，压缩一下上下留白
最容易踩的坑
Hero 不是仓库：一屏只讲一件事、只放一个主按钮。什么都想强调，等于什么都没强调。