YL
HERO SECTION

首屏 Hero UI 设计模式

首屏 Hero(Hero Section)分类收录 10 种常用界面模式:居中英雄区、分栏英雄区、全出血英雄区、极光渐变首屏、便当格首屏、浏览器样机首屏等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

首屏 Hero

Hero Section

10 条

居中英雄区

Centered Hero

居中对称首屏Hero

所有内容沿垂直中轴对齐居中排列:标签、主标题、副文案、按钮。最经典也最不容易出错的首屏形式。

分栏英雄区

Split Hero

分栏左右结构首屏

画面左右两栏切分,左侧文案右侧视觉稿。视觉平衡感强,是 SaaS 产品首屏的主流形态。

全出血英雄区

Full-bleed Hero

满屏沉浸深色首屏

背景铺满整个视口宽度、不留边距,内容叠在深色图上。视觉冲击力最强的一类首屏。

极光渐变首屏

Aurora Gradient Hero

极光光斑深色AI 感

深色底上铺多层高斯模糊的彩色光斑,缓慢漂移,营造出极光般流动的质感。近年 AI 产品最爱的首屏。

便当格首屏

Bento Hero

便当格网格功能总览Bento

把首屏拆成大小不等的圆角方格,像日式便当盒一样拼在一起,每格放一个卖点或数据。

浏览器样机首屏

Browser Chrome Mockup Hero

样机浏览器框截图Mockup

把产品截图套进一个带红黄绿圆点和地址栏的浏览器窗口框里,让画面立刻"像个真产品"。

眉题 + 巨号标题

Eyebrow + Display Headline

大标题排版眉题Kicker

不靠图片、只靠排版层级撑起首屏:一枚小小的眉题 + 一行巨大的标题,其中一个词做渐变强调。

双 CTA 首屏

Dual CTA Hero

CTA按钮组微文案

一个实心主按钮 + 一个描边次按钮并排出现,下面跟一行极小的"降低门槛"微文案。

邮箱招募首屏

Email Capture Hero

邮箱订阅候补Waitlist

首屏只做一件事——收邮箱。输入框和按钮被包进同一个圆角容器里,像一颗胶囊。

视频背景首屏

Video Background Hero

视频播放按钮遮罩氛围

背景播放一段渐隐循环的短视频,正中放一枚带脉冲光环的圆形播放按钮。