---
category: Layouts
order: 1
title: Structure
---

页面布局，即给将要出现在页面中的所有元素进行定位，是决定页面精彩与否的重要因素之一，也决定了一个应用的整齐度，关系着内容的编排和页面的排版。它直接影响着页面信息浏览的流畅度及页面美感的体现，通过合理的分配空间，把页面完美的呈现给用户，提高用户体验度。

## 页面尺寸

为了尽可能减少沟通与理解的成本，团队内部统一画板尺寸宽度为1366px；一屏高度为768px。

## 页面结构

页面主要可分为顶栏、侧边栏、内容区三个部分。

- **顶栏**：顶栏是构成网页的重要元素之一，位于页面的最顶部，是网站频道入口的集合区域，可放置主菜单、企业logo、个人中心等。顶栏高度计算公式为48+4n，最高不超过80，太窄不利于信息的展示，过高则占据太多页面空间。


- **侧边栏**：主要是页面菜单的位置，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。少数也可以代替顶栏的功能，放置企业logo、个人中心等。  侧边栏一般只设一层，内可有1-3级菜单，不建议超过三级，菜单复杂情况下可以设定两层侧边栏。侧边栏可收起，方便内容区信息展示。单级侧边栏宽度计算公式为180+4n，最大不超过240，不宜过宽，太宽会影响内容区信息的展示，还会分去内容区的视觉关注，影响用户专注度。


- **内容区**：用户的主要使用和关注区域，放置页面的主要内容和操作信息。

![](../pic/结构层级/GroupCopy.png)

页面主要的布局结构可分为上下结构和左右结构，每种结构配置不同可以有多种变化：

- **上下结构**：特点是顶栏通栏，将页面切割成上下两个部分。一般用在前台页面。

![](../pic/结构层级/Group.png)

实例：

页面采取上下结构，顶栏高度48px，内容区左右边距140px。

![](../pic/结构层级/Group8.png)

- **T型结构**：特点是顶栏通栏，将页面切割成上下两个部分，导航下左侧配置侧边栏。一般用在后台页面。

![](../pic/结构层级/GroupCopy.png)

实例：

页面采取T字结构，配置侧边栏，顶栏高度48px，侧边栏宽度180px。

![](../pic/结构层级/Group7.png)

### 内容区布局

- **瀑布式**：将页面主要文字、列表、图片、段落、按钮等从上而下直接排在内容区背景层上，常用于详情页面。

![](../pic/结构层级/Group18Copy.png)

实例：

页面自上而下依次是标题区，操作区，内容区。

区域高度按照导航栏高度划分，标题区跟随导航栏的标题区高度设为68px，操作区依据导航栏行高设为48px，操作区以下为内容区。

![](../pic/结构层级/Group22.png)

- **纸片式**：在背景层之上，利用一个纸片容器，承载页面主要内容，所有内容自上而下排列在卡片容器中。纸片无圆角，多用于详情页。

![](../pic/结构层级/Group9.png)

实例：

页面布局按照上下结构分标题区、内容区两个部分，标题放置在卡片外，与内容区分离。

页面左上角，标题前配置“返回”按钮，方便用户返回上一级页面。

区域高度按照导航栏高度划分，标题区跟随导航栏的标题区高度设为68px，标题区以下是内容区。

![](../pic/结构层级/Group10.png)

- **卡片式**：将页面信息分成几个部分，分别放置在不同的卡片中，卡片圆角2px，多用于概览页面。

![](../pic/结构层级/Group11.png)

实例：

概览页面采用多卡片式布局，多个卡片容器放置不同的内容。每个卡片又分标题区和内容区，标题区同样放置在卡片外面，整个网站保持同一风格。

标题区同样跟随导航栏的标题区高度设为68px，标题区以下为内容区。卡片间距为24px。

![](../pic/结构层级/Group12.png)

### 页面层级

几何体系中，Z轴垂直于X轴和Y轴。平面通过Z轴上的层层叠加，展现出几何空间感。网页同样可以利用Z轴，在视觉上表述图层之间的关系，展现网页的层次感，构建更完美的设计系统，更灵活，更直观。页面的层级存在于Z轴上， 是垂直于屏幕的深度，定义各种信息层级和常用状态的表达方式，利用 Z 轴优先层级引导用户的行为，把最重要的功能摆在 Z 轴层级的最顶层，聚焦用户注意力。

页面可以分为六个层级，从上到下依次是：

- **模态窗口层**：页面的最顶层，展现前最需要的信息和最需要的操作，如：弹窗。


- **蒙版层**：将重要内容托起，聚焦蒙版之上的东西，蒙版之下不可操作。有全局蒙版和局部蒙版之分。


- **浮动层**：浮动面板承载层，浮动的高低（由面板阴影展现）决定了面板的优先级，如：文字提示，气泡，下拉选项等。


- **导航层**：页面的导航菜单，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用，又分顶部导航和侧边导航两部分。


- **内容层**：展现页面内容的一层，用户的主要操作层，视觉关注度极高，主要信息、表单、表格等存在于该层之上。


- **背景层**：页面的最底层，像盘子一样承载页面的所有东西。

![](../pic/结构层级/Group2.png)

实例：

![](../pic/结构层级/Group4.png)

![](../pic/结构层级/Group3.png)