定义

全局交互框架对整个系统中框架的分层和其中所承载的内容&功能进行了规范和定义，同时也约定了新内容的展示方式。

框架层级

用于解决和处理复杂业务的问题，将页面依据交互行为来分层定义，每层都具备特有特性和意义，让所有层上的功能和内容搭建出来的视图结构能符合用户认知。
为了能更清晰的理解系统设计系统，对页面的框架层级做了如下的梳理：即背景层、内容层、全局控制层、临时层，层级的前后顺序不可更改。
image.png

背景层

背景层作为最底层承载整个页面的背景，衬托内容层的信息。

  • 背景颜色：#fill1-2（填充色_常规）

    内容层

    内容层作为系统中核心信息内容的展示层，主要承载页面栅格、内容、控件。

  • 内容卡片：无阴影，

  • 控件相关的悬浮态/临时唤起态：阴影1_扩散

  • 整张卡片可交互hover态/拖拽态：阴影2_扩散

    全局控制层

    全局控制层是对整体页面的操作和控制功能操作层，能直接影响内容层的展示信息，包括左侧导航，Header，全局操作区。可以置入按钮，搜索，选择器，标签等控件。

  • 左侧导航：阴影2_右

  • Header：默认无阴影，触发内容滚动悬浮后阴影2_扩散
  • 底部按钮组：阴影2_上
  • Toolbar：阴影2_左

  • 悬浮电梯、全局Step：默认无；悬浮时阴影2下

    临时层

    临时层默认隐藏，优先级高于内容层，一般承载当前需要临时处理的任务或者需要接受的反馈等。
    以抽屉侧滑或者弹框的形式在当前页面场景化呈现，包括两种类型模态：1、阻碍式：内容层不可操控，被蒙层遮罩禁用，需要较为聚焦的分支流程，主要包括弹窗、抽屉、展开的导航；2、非阻碍式：不需要蒙版遮罩，点击内容层后临时层消失，包括弹窗、指向性弹窗、抽屉、轻量级的tips

  • 蒙版：色值为#000000，透明度40%

  • 抽屉(阻碍式\非阻碍式)：阴影3_左
  • 弹窗\指向性弹窗(阻碍式\非阻碍式)：阴影3_扩散

    新内容展示

    在当前场景中需要展示新的内容时，主要有三种方式：打开弹窗、打开抽屉以及跳转页面。

    弹窗

    用于中断用户当前操作对其作出补充，或中断用户当前操作对其作出反馈，弹框包括蒙版、主内容、操作按钮（如确认、取消、关闭等）。
    规则：
  1. 禁止二层弹窗，当前页面只允许出现一次弹窗
  2. 关闭弹窗后显示原背景页面
  3. 弹窗位于页面上下左右居中

  4. 弹窗包含模态和非模态两种

    抽屉

    用于中断用户当前操，需要一个附加面板来控制当前页面内容，页面承载信息较长，或出创建、预览等附加内容时，抽屉统一从右侧呼出。
    规则：

  5. 抽屉上可再叠加一层弹窗或抽屉，最多两层抽屉再叠加一层弹窗

  6. 关闭当前弹窗或抽屉时返回到上一层抽屉

  7. 第二层抽屉可宽于第一层抽屉(完全覆盖)

    跳转页面

    当触发行动点后，显示页面承载内容过多时，需进行页面跳转，分为本窗口打开、新开页面。
    规则：

  8. 本窗口打开：查询结果、修改(列表编辑)等操作在本窗口打开。

  9. 新窗口打开：各类新增、修改(详情编辑)、详情、预览页面等无关联页面采用新窗口打开。