将页面依据交互行为区分层级，每层都具备特有特性和意义，让所有层上的功能和内容搭建出来的视图结构能符合用户认知。分层可以用来指导搭建一套合理的页面信息层级，每一个层级作为一个容器，每个容器内需要区分视觉层级，还可搭建出满足用户清晰认知的UI页面。

B端页面分层

从全局性来看，按照交互形式将B端界面分为背景层、内容层、遮罩层、临时层。

背景层：固定样式，永远置于页面最底部。

内容层：视图结构中最核心和复杂的一层，主要承载当前场景的用户需要获取的核心页面信息以及辅助核心任务的操作流程。直接平铺显示产品业务信息呈现，包括全局控制导航和直接页面两种类型。

遮罩层：通过黑色或白色降低不透明度的设计，控制阻断遮罩下面内容层不可操作，而让用户更加聚焦处理遮罩层上方的信息内容。

临时层：当前任务或者内容相关的临时出现层，优先级高于内容层，一般承载当前需要临时显示的信息、处理的任务或者需要接受的反馈等。以侧边滑出或者弹出的形式在当前页面场景化呈现，包括内容层不可操控和内容层可操作两种类型模态。

层级的前后顺序为，临时层>遮罩层>内容层>背景层，顺序不可更改。

1.背景层

背景层固定样式，永远置于页面底部，方便凸显和聚焦内容层。

层的颜色为中性背景色居多；也有使用纯白色背景色，进而信息模块划分则通过加大间距或线条；甚至可以在背景层融入辅助肌理图形，保证页面信息识别性的前提，也提高了B端产品的视觉表现力。

2.内容层

视视图结构中最核心和复杂的一层，主要承载当前场景的用户需要获取的核心页面信息以及辅助核心任务的操作流程。

直接平铺显示产品业务信息呈现，包括全局控制导航和直接页面两种类型。全局控制导航用于对整个网站的控制以及导航功能，展示环境和上下文位置。比如顶部导航、左侧导航。直接页面则是可置入承载页面信息等所有组件。比如列表、表单等各类型组件的合集呈现页面信息。

2.1 全局控制导航

例1: 顶部导航

用于对整个网站的控制以及导航功能，展示环境和上下文位置。比如顶部导航、左侧导航。

2.2 直接页面

例1:数据图表页

用于对整个核心内容信息的呈现，具体可看典型页面类型。可包括列表、表单、数据图表等各类型组件形成的直接页面内容。

3.遮罩层

通过黑色或白色降低不透明度的设计，控制阻断遮罩下面内容层不可操作，而让用户更加聚焦处理遮罩层上方的信息内容。
遮罩本身是一个基础通用的样式，具体什么情况使用遮罩，还是得视情况而定，根据产品自身特性，定义遮罩的具体规则，使用说明。

4.临时弹出层

当前任务或者内容相关的临时出现层，优先级高于内容层，一般承载当前需要临时显示的信息、处理的任务或者需要接受的反馈等。

以侧边滑出或者弹出的形式在当前页面场景化呈现，包括内容层不可操控和内容层可操作两种类型模态，一种是内容层不可操控，被蒙版遮罩禁用，比如需要较为聚焦的分支流程对话框弹窗、抽屉式等。另一种内容层可以操作，无蒙版遮罩界面中出现的叠层，比如轻量级的新手引导、气泡确认框、下拉菜单（当下拉菜单为缩起状态时，属于全局控制导航；点击展开时，属于临时层）、全局提示反馈等（反馈提醒的优先级在此层中最高）。

4.1 内容层不可控

例1: 对话框弹窗

对话框是一种临时窗口，通常在不想中断整体任务流程，但又需要为用户展示信息或获得用户响应时，在页面中打开一个对话框承载相应的信息及操作。

例2: 抽屉式

抽屉常通过单击临近的按钮控件，从屏幕边缘（上、下、左、右）滑入的浮层面板，又称半屏弹窗。

4.2 内容层可操作

例1: 新手引导

逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。

例2: 气泡确认框

气泡确认框通常用于不会造成严重后果的二次确认场景，其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层，点击确认框以外的区域即可关闭。

Powered by Froala Editor