产品的空间及布局是产品设计的骨架和基础，合理的布局结构，不仅可以使用户希望留在页面上，同时在信息浏览上有很好的引导作用，极大的减少用户的认知负荷。

构成

从结构分层来看，把页面分成背景层、全局控制层、内容层、临时层。
image.png

  • Z-Index：Z 轴从低到高分别为背景层 → 全局控制层 → 内容层 → 临时层；
  • 全局控制层：为常置于页面的功能，包括顶部导航、产品导航、侧边导航；
  • 内容层：为内容模块，即展示层，如表格、仪表盘等页面内容；
  • 临时层：为动态出现的顶层，始终叠加在内容层之上，处于所有分层的最上方，弹窗、抽屉处于该层；

页面框架

采用“ T 型”布局，设计稿基准为 1366 × 768px， Windows10 系统下，由于 Chrome 浏览器高度占 110px（包含书签栏），任务栏高度占 40px，所以实际可视区域为 618px：

有侧边导航：
image.png

无侧边导航：
image.png