# 布局
页面布局是体系化视觉设计的起点，我们基于ERP客户的业务诉求提炼了六种布局，形成了 Design 的界面布局方式，为设计者方案的制定创造了布局选择的条件。
# 统一的画板尺寸
现在中后台主流的页面适配宽度为 1920、1600、1366、1440 和少量的 1280。常见B端设计稿尺寸建议采用 1440x820，因为去除浏览器顶部页签以及地址栏高度 80px ，因此高度上为820px。
# 网格单元
栅格系统可以帮助我们更好的设计布局,由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位“网格”的大小。我们利用4点网格法来制定产品中的间距，建立4点为一个单位的网格，使用4的倍数来定义模块的间距与元素的尺寸。
# 栅格
基于 4 点网格法 Honeycomb Design 在 PC 上采用 24 栅格体系，根据 1440x820 的屏幕分辨率为基准,内容区域宽度1208。栅格的总宽度是 23 列 +1 小列 = 总宽度，而页面中的列会随着页面尺寸的变化而变化，唯一不变的是页面中的间隙，间隙在栅格中始终保持 12 px。 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
● 模块布局分布
1440 * 820左侧导航固定宽度,最小单位4，内容区域宽度1208，栅格24，页边距12，水槽12 栅格24等分可以更多样性的布局排版，适合不动产应用更加复杂的场景。
● 实践应用
# 间距
最小单元设定为4 , 间距系统采用4点倍数,形成5个常用的间距参数。
# 布局规则
页面布局是体系化视觉设计的起点，我们基于不动产应用的业务诉求提炼了六种布局，形成了 Design 的界面布局方式，为设计者方案的制定创造了布局选择的条件。
登录