首屏Hero
你可能会说
网站最上面那块太空了,想要大图加大字那种,一眼知道我们是干嘛的。
网页开头用来说明页面重点并引导下一步的主要区域Hero 通常紧接在 Header 或 Navbar 下面。它可以由标题、补充说明、主要行动和产品画面组成,但没有固定组件清单;真正要看的是这些内容是否共同说明当前页面最重要的价值。客户标志、功能列表和定价通常属于后续区块,不因为靠近首屏就都算 Hero。
这个网页里,哪一块是 Hero?
点击网页中的一个区域。选择后会显示它的名称,并说明它与 Hero 的区别。
先观察整个页面Hero 通常紧接在顶部导航下面,是当前页面最主要的介绍区域。
你可以这样告诉 AI Agent
帮我修改这个 Hero。只调整标题、说明、按钮和产品画面,其他区域不要动。改完后告诉我具体改了什么。
组成结构 · Anatomy
把想法变成网页,只需一句话
描述你想要的页面,AI 帮你生成、修改和发布。
免费开始 →
说明当前页面最重要的价值
补充适用对象、问题或使用方式
页面需要用户行动时,给出清楚的下一步
用产品截图或插画帮助理解
常见变体 · Variants
居中型Centered
内容较少,重点是一个主要行动
左文右图Split
需要同时说明价值和展示产品画面
产品截图型Screenshot
产品界面本身能帮助用户理解
典型使用场景
SaaS 产品官网首屏
新 · AI 数据分析
让每一份报表,自己开口说话
上传表格,AI 自动生成图表和结论,减少重复整理。
开始免费试用预约演示 →
个人作品集开场
你好,这是一份个人作品集
独立产品设计师 · 专注 SaaS 与效率工具,展示产品设计和协作过程
App 下载落地页
山行 · 记录每一次出发
离线地图、轨迹记录、海拔曲线,徒步爱好者的口袋向导。
App Store
▶ Google Play
活动报名页头部
延伸阅读 · 权威出处