页头Header
官网常用区块把品牌、导航和账号等顶部内容组织在一起
也常被叫作网站页头站点页头Site Header
页头（Header）是网站页面顶部的完整区域，通常包含品牌标识、顶部导航栏 Navbar、搜索、登录或注册入口，也可以带公告条。不同网站需要的内容并不相同；先按重要程度安排，再为窄屏决定哪些保留、哪些收进菜单。只有一排导航入口时，更准确的名称是顶部导航栏，而不是整个页头。
◆ VibeUI
容易混淆？这样区分
页头Header≠顶部导航栏Navbar
页头 Header 是页面顶部的完整区域，可以包含品牌、搜索、登录等内容；顶部导航栏 Navbar 是其中专门放置主要导航入口的部分。
什么时候用
- 页面顶部需要同时放置品牌、主要导航和账号入口时，用页头统一组织◆ 品牌产品定价搜索 · 登录
- 文档站或商城需要在顶部加入搜索，搜索属于页头的一部分文档中心⌕ 搜索文档登录
- 为手机单独安排优先级：保留品牌和关键操作，把次要入口收进菜单◆ 品牌
- 把临时公告放在页头上方，同时保持公告与导航的职责清楚
什么时候不用
- 把所有页面入口和操作都挤进页头，导致用户找不到重点品牌 产品 方案 客户 价格 文档 博客 活动 招聘 搜索 登录 注册
- 固定页头做得过高，滚动时持续遮挡和挤压正文固定页头占据近半屏
- 没有品牌或返回首页的入口，用户难以确认当前网站产品价格帮助登录
- 只有一排导航链接却把它当成整个页头；这部分更准确地叫 顶部导航栏 Navbar产品价格文档
组成结构 · Anatomy
◆ 品牌产品 定价 文档搜索 登录
1品牌入口Brand显示网站身份，通常可以点击返回首页
2主要导航Navbar放置最重要的页面入口，也就是顶部导航栏
3辅助入口Utilities搜索、语言、登录和账号等辅助功能
常见变体 · Variants
单行页头Single Row
内容较少的大多数官网
双层页头Two Rows
包含公告、分类导航或大型搜索时
移动端页头Mobile
窄屏上保留品牌和菜单入口
典型使用场景
SaaS 官网页头
◆ Nimbus产品 价格 客户免费开始
文档站搜索页头
文档中心⌕ 搜索文档v2.4
商城双层页头
移动端折叠页头
◆ Nimbus