页头Header
你可能会说
最顶上那条怎么排？logo、导航、登录按钮都得塞进去。
网页顶部集中放置品牌、导航、搜索和账号入口的区域例如，产品官网的页头可以放 Logo、顶部导航栏、搜索和登录。顶部导航栏只是其中负责带用户去不同页面的部分；在简单页面里，两者可能看起来是同一行。
也常被叫作网站页头站点页头Site Header
容易混淆？这样区分
页头Header≠顶部导航栏 Navbar
页头 Header 是页面顶部的完整区域，可以包含品牌、搜索、登录等内容；顶部导航栏 Navbar 是其中专门放置主要导航入口的部分。
什么时候用
- 页面顶部需要同时放置品牌、主要导航和账号入口时，用页头统一组织◆ 品牌产品定价搜索 · 登录
- 文档站或商城需要在顶部加入搜索，搜索属于页头的一部分文档中心⌕ 搜索文档登录
- 为手机单独安排优先级：保留品牌和关键操作，把次要入口收进菜单◆ 品牌
- 把临时公告放在页头上方，同时保持公告与导航的职责清楚
什么时候不用
- 把所有页面入口和操作都挤进页头，导致用户找不到重点品牌 产品 方案 客户 价格 文档 博客 活动 招聘 搜索 登录 注册
- 固定页头做得过高，滚动时持续遮挡和挤压正文固定页头占据近半屏
- 没有品牌或返回首页的入口，用户难以确认当前网站产品价格帮助登录
- 把页头和 顶部导航栏 Navbar 当成互斥结构；应按顶部容器与导航职责分别理解产品价格文档
组成结构 · Anatomy
◆ 品牌产品 定价 文档搜索 登录
显示网站身份，通常可以点击返回首页
承担站点主要导航职责，可与页头视觉上重合
搜索、语言、登录和账号等辅助功能
常见变体 · Variants
单行页头Single Row
内容较少的大多数官网
双层页头Two Rows
包含公告、分类导航或大型搜索时
移动端页头Mobile
窄屏上保留品牌和菜单入口
典型使用场景
SaaS 官网页头
◆ Nimbus产品 价格 客户免费开始
文档站搜索页头
文档中心⌕ 搜索文档v2.4
商城双层页头
移动端折叠页头
◆ Nimbus
延伸阅读 · 权威出处