布局

概述

产品线种类的丰富，为了使产品保持一致性Chery Design从视觉系统中定义布局系统。Chery Design的布局是使用统一的元素和间距来保持各个平台的体验的一致性。
统一屏幕尺寸的间距和跨平台的设计模式给用户带来沉浸式的体验。保证画布尺寸的一致 · 统一的网格单位 · 统一的栅格系统 · 视觉元素的统一。

设计规则

画板尺寸

为了减少布局设定时的沟通与拆分计算成本，基于中后台主流屏幕尺寸，我们将设计团队的标准画板宽度定为 1440px。

布局组成

布局中可以包含以下 3 种区域。
头部区域（Header）：位于页面顶部，通常用于放置头部导航。
侧边区域（Sider）：位于主体内容一侧，通常用于放置侧边菜单。
内容区域（Content）：通常用于放置主体内容。
固定区域（Fix）：部分内容区域固定宽度，不随屏幕尺寸变化。

各尺寸适配

1024px，侧面菜单收起，只显示图标；
1280px、1440px及以上侧边菜单默认展开，内容区域按栅格撑满。

内容多模块布局

对于首页、数据监控、管理页等，页面内容比较复杂且模块间相对独立，我们提供几种页面分割方式，间距固定为16px,每个模块宽度自适应。

使用方法

以纵向三等分或四等分为最小单位，结合横向分割，可以灵活组合出不同布局。