页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括面包屑、标题、页面操作等内容。

适用范围

当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。

构成解析

结构

image.png
页头包括面包屑、头部、标签组、信息组、Tab选项卡：

  • 面包屑Breadcrumb

    • 面包屑为可选内容，使用原则为
      • image.png
      • 线性关系时，页面层级结构 ≥2 级时使用，允许从当前位置通过点击面包屑路径返回到任一上级，即如 A3 能返回至 A2 或A1 或 A；
      • 平行关系时，页面层级结构 ≥2 级时使用，比如从 A 模块的 A1 页面跳到 B 模块的 B1 页面后，界面上会出现面包屑，B1 处在 B 模块的第 2 级，此时用户可通过点击面包屑的路径返回到 B，点击「头部Header」的返回图标，可返回到 A1；再比如从 A1 跳到 B3，点击面包屑路径可返回至 B2 或 B1 或 B，点击「头部Header」的返回图标，可返回到 A1；

  • 头部Header

    • 左侧
      • 返回（可选）：用户进入第二级甚至更深层级的页面时出现，用户点击「返回」图标可返回上一页，与浏览器的返回效果一致；
      • 标题：必须元素不可省略，标题应清晰传达对话框的内容，当面包屑存在时，需要与面包屑当前的定位保持一致；
      • 状态（可选）：根据业务需要，需要高亮显示流程状态时使用，出现多个字段都有状态时，选其一，其余放于信息组；
      • 「展开/收起」（可选）：有信息组且内容超过3行时出现；
    • 右侧
      • 指引说明（可选）：为当前页面的指引信息，帮助用户理解页面功能、业务等；
      • 页面级操作（可选）：
        • 根据「7±2」法则，原则上页面操作个数需控制在7个以内，即“6个操作+1个更多”；
        • 操作按钮的排序遵循人眼从右往左的阅读顺序，从右往左重要性依次降低，最右侧为主要操作，即页面中最希望引导用户点击的操作；

  • 标签组TabsGroup

    • 可选内容，用于为资源打标签，单独占一行；

  • 信息组 Info

    • 可选内容，为一些页面基本的信息字段，常见于详情页；
    • 内容≤3行时，无「展开/收起」的操作，内容全部展示；
    • 内容＞3行时，最多显示3行内容，第4行及以上的内容被收起，可通过页面标题右侧的「展开」操作查看更多信息；

  • 选项卡 Tabs

    • 可选内容，为页面不同类别数据集合的切换，同时兼顾一定的导航属性；

间距

image.png
其中，信息组每一行分3列，水平等分。

交互行为

返回上级

鼠标移入返回图标热区时，激活返回图标的Hover态，点击后触发返回上一页面的操作，与浏览器的返回效果一致：
image.png

展开/收起

信息组内容＞3行时，最多显示3行内容，第4行及以上的内容被收起，通过点击「展开」查看更多信息，展开后点击「收起」收起更多信息：
image.png

页面级操作

更多的操作通过点击「三个点」图标展开，当操作之间存在关联关系或从属关系时，可对操作进行分组：
image.png

指引说明

此处的指引说明是文字按钮，移入时下方出现 Popover，指引说明的内容格式为「标题+描述+图片」，示例的 Popover 的宽度为440px，实际可根据内容做调整，视觉上要保证平衡：
image.png

避免长篇大论的描述，需要详细的指导描述，可引导用户跳转至新的页面：
image.png

添加标签

点击“添加标签”后，触发浮层，用户：

  1. 可从已有标签列表里选择标签，点击标签后，页面上成功添加一个标签，继续点击标签则继续进行添加标签的操作；
  2. 输入文字后，系统根据用户输入的文字匹配相应结果，用户点击标签完成添加标签的操作；
  3. 输入文字后，无匹配结果时，提示「点击新增“XXX”标签」，用户点击「点击新增“XXX”标签」后，页面上成功添加一个用户新建的标签，对应的标签管理里新增一条新标签的数据；
  4. 点击浮层外部区域，关闭浮层，结束添加标签的操作；

image.png

布局

位置

image.png
页头位于顶部导航的下方，页面内容的上方。