Hero Section
可以先理解为:网页首屏定位与行动入口
Hero Section 像店门口第一眼看到的招牌和入口。用户不需要在这里读完整篇说明,但要立刻知道这个页面是不是和自己有关,以及下一步该继续看、注册、购买还是试用。
关键结构图
左侧是目标用户,中间是标题和价值说明,下方放证据线索,右侧是主 CTA 和次 CTA。
What
Hero Section 是网页首屏用来完成“我是谁、对谁有用、下一步做什么”的定位区域。
Hero Section 是页面首屏中承载定位、价值说明、视觉焦点和主要行动入口的区域。它通常包含标题、副标题、主行动、次行动和少量信任线索。它的边界不是“越大越像 hero”,而是能不能在首屏帮用户建立判断方向。
StructureHero Section = 明确对象 + 核心价值 + 可信线索 + 第一行动
When
当页面承担介绍产品、服务、课程、项目、活动或新功能的任务时,需要认真设计 Hero Section。若用户进入页面后还要猜这个页面做什么,首屏就没有完成工作。
How
先定义目标用户和页面主行动,再写一句可以被读懂的核心价值。随后选择支撑判断的证据,例如使用场景、产品截图、真实数字或客户标识。最后把主 CTA 放在用户理解价值之后能自然点击的位置。
Examples
一个课程页的 hero 写清楚课程对象、能解决的问题和报名入口。用户不用滚动很久,就知道自己是否适合继续看。
一个工具页只放大幅抽象图和一句“重新定义未来”,但没有说明工具做什么,这不是强 hero,而是信息缺席。
来源
类型:设计系统实践 / 转化设计
事实线:Landing page 和产品首页通常用首屏区域承接定位、价值主张和主行动入口,多个设计系统也把首屏视作页面信息架构的关键起点。
依据:常见 landing page 信息架构、NN/g 对首屏和信息气味的可用性原则、产品页面转化设计实践。
边界:适合承接页面定位和第一行动;不适合把所有功能、案例和卖点都塞进首屏。
常见误读:不要把 hero section 理解成一张大图加一句口号。真正重要的是用户能否判断“这是不是给我的”。