跳到主要内容
Termlib

UI 组件 · 页头

页头

Page Header

也叫：页面标题栏、内容区页头、标题区、Page Title Bar、PageHeader、Content Header

内容区最上方的一块标题区域，放当前页面的标题、简短说明、面包屑和这一页的主要操作按钮。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在内容区顶部做一个页头：第一行是面包屑「订单管理 / 订单详情」；第二行左侧是返回箭头、页面标题「订单 SO-0918-0032」（20px 粗体，用 h1）和一个「待发货」状态标签，右侧对齐放「打印」「更多 ⋯」两个普通按钮和一个主按钮「发货」；标题下方一行 14px 灰色说明「下单时间 2026-09-18 14:20 · 客户 王小明」。页头下方接「基本信息 / 物流 / 操作日志」标签页，和下方内容之间留 24px。宽度小于 768px 时，按钮换到标题下方单独一行。

发给

01判断

你的内容是这样吗？

对照两列，确认页头是不是你要找的。

符合这些情况，用页头

  • 后台列表页、详情页、编辑页，需要告诉用户当前是哪一页、属于哪个模块
  • 这一页有一两个针对整页的主要操作（新建、导出、发货），需要一个固定显眼的位置
  • 详情页需要在标题旁显示对象的状态、编号等关键信息

是这些情况，换成别的

  • 官网首页要用大标题、大图和号召按钮吸引访客

    改用首屏横幅

  • 全站共用的 Logo、栏目链接、头像，应该放在顶部导航栏

    改用顶部导航栏

  • 对话框、抽屉内部的小标题，用它们自带的标题栏即可

    改用标题

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    页头塞进七八个按钮，标题被挤成省略号，也分不清哪个是主要操作

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    页头和顶部导航栏重复显示同样的标题和按钮，白占两行高度

  3. 03

    标题只写「详情」「列表」这种泛称，看不出是哪个对象的哪一页

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由面包屑（可选）、返回按钮（可选）、页面标题、状态标签或副标题、说明文字和右侧的操作按钮组组成，详情页下方常接一排标签页。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1内容区最上方、导航栏下方的一块区域，左侧是一行大号粗体标题
  2. 2标题上方常有一行灰色小字面包屑，下方有一行灰色说明
  3. 3右侧和标题对齐放一两个按钮，其中一个是深色主按钮

04解释

详细解释

页头位于内容区顶部、导航栏下方，回答「这是哪一页、在这里能做什么」。常见结构是：最上面一行面包屑，中间是页面标题（可带返回箭头和状态标签），标题下方一行灰色说明，右侧和标题对齐放「新建」「导出」这类针对整页的按钮。详情页的页头下面还常挂一排标签页。

它和 顶部导航栏 容易混：导航栏是全站共用的横栏，每页都一样，放 Logo 和栏目；页头属于某一个页面，标题和按钮随页面变化。它也不是 首屏横幅：首屏横幅是官网落地页的大标题、大图和号召按钮，占满第一屏；后台的页头只有一两行高，重在交代信息。

一页只放一个页头，标题用这一页唯一的 h1。按钮最多露出 2~3 个，主要操作放最右边用主按钮，其余收进「更多」。页面很长时可以让页头吸顶，但要压缩成一行，别占掉太多高度。

开发者信息
术语 ID
component-page-header
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-page-header
  • .ant-pro-page-container-warp-page-header
  • .el-page-header
  • .arco-page-header
  • .n-page-header
  • .page-header
  • .content-header
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • page-header
  • page-head
  • page-title
  • page-heading
  • content-header
  • title-bar
  • view-header
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • PageHeader
  • PageTitle
  • PageHeading
  • ContentHeader
  • TitleBar
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • <header>
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30