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