术语图鉴/UI/UX 设计/页头
←→切换Esc返回

页头 Header

你可能会说

页面顶部区域帮我设计一下:导航栏加大标题横幅。

页面最上方的区域,通常包含导航栏 + 大标题/Banner/搜索框。

页面最上方的区域,通常包含导航栏 + 大标题/Banner/搜索框。是用户第一眼看到的地方。

也常被叫作Header

生活类比

像报纸的头版头条——最重要的信息放最上面,让人一眼抓住重点。

🎮 动手试试

Logo
导航
页面内容区域
选择题选择一个你认为最合适的答案

关于「页头」,以下哪个描述最准确?

你可以这样告诉 AI

帮我设计页头区域:最顶部放导航栏,下面跟一个大标题 Banner 加背景图,整个区域占满首屏高度。

容易混淆?这样区分

页头 Header≠
导航栏 Navbar

页头是页面顶部整个区域(含 Logo、导航、搜索、Banner),导航栏只是页头里面放菜单链接的子部分。

什么时候用

为页面建立品牌感

每个页面顶部需要统一的品牌标识(Logo 加导航加标题区),用页头包装这些元素,让用户一眼识别网站归属。

和 AI 协作时

想让 AI 做页头时,说「页头放 Logo、导航、登录按钮,白底,滚动加阴影」,AI 会生成 Header。

什么时候不用

极简创意展示页

某些极具设计感的作品集页面刻意去掉页头,让用户直接沉浸于内容——页头会打破这种极简美学。

与嵌入式小组件无关

如果做的是可嵌入第三方页面的小组件(如聊天窗口),独立页头会和宿主页面的页面结构产生冲突。

组成结构 · Anatomy

1
核心概念Core

页面最上方的区域,通常包含导航栏 + 大标题/Banner/搜索框。是用户第一眼看到的地方。

2
实际表现In Practice

像报纸的头版头条——最重要的信息放最上面,让人一眼抓住重点。

3
与 AI 的关联AI Context

和 AI 沟通时提到「Header 区域放个大 Banner」,就是做页面顶部的视觉区域。

典型使用场景

设计品牌页头
告诉 AI「页头放导航加全宽 Banner,大标题居中、副标题在下方、渐变背景从蓝到紫,高度 100vh」
想弄懂概念时
告诉 AI「用大白话给我解释什么是页头,举个生活中的例子」

延伸阅读