首屏Hero

你可能会说

网站最上面那块太空了,想要大图加大字那种,一眼知道我们是干嘛的。

网页开头用来说明页面重点并引导下一步的主要区域Hero 通常紧接在 Header 或 Navbar 下面。它可以由标题、补充说明、主要行动和产品画面组成,但没有固定组件清单;真正要看的是这些内容是否共同说明当前页面最重要的价值。客户标志、功能列表和定价通常属于后续区块,不因为靠近首屏就都算 Hero。
新 · AI 建站助手 把想法变成网页,只需一句话

描述你想要的页面,AI 帮你生成、修改和发布。

免费开始观看演示 →

这个网页里,哪一块是 Hero?

点击网页中的一个区域。选择后会显示它的名称,并说明它与 Hero 的区别。

先观察整个页面Hero 通常紧接在顶部导航下面,是当前页面最主要的介绍区域。
你可以这样告诉 AI Agent

帮我修改这个 Hero。只调整标题、说明、按钮和产品画面,其他区域不要动。改完后告诉我具体改了什么。

组成结构 · Anatomy
把想法变成网页,只需一句话 描述你想要的页面,AI 帮你生成、修改和发布。 免费开始 →
说明当前页面最重要的价值
补充适用对象、问题或使用方式
页面需要用户行动时,给出清楚的下一步
用产品截图或插画帮助理解
常见变体 · Variants
居中型Centered
内容较少,重点是一个主要行动
左文右图Split
需要同时说明价值和展示产品画面
产品截图型Screenshot
产品界面本身能帮助用户理解
典型使用场景
SaaS 产品官网首屏
新 · AI 数据分析 让每一份报表,自己开口说话

上传表格,AI 自动生成图表和结论,减少重复整理。

开始免费试用预约演示 →
个人作品集开场
你好,这是一份个人作品集

独立产品设计师 · 专注 SaaS 与效率工具,展示产品设计和协作过程

App 下载落地页
山行 · 记录每一次出发

离线地图、轨迹记录、海拔曲线,徒步爱好者的口袋向导。

App Store ▶ Google Play
活动报名页头部
活动日期 · 举办地点 · 参与方式 Vibe Coding 创作者大会 用一句话说明活动主题、适合人群和主要内容。
查看议程与嘉宾
延伸阅读 · 权威出处