【经验】B端后台产品UI设计——页面布局

框架布局

这里一般采用栅格布局。说到栅格，有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍，如果之前不是很了解栅格的，拿个小本本记下来，要考~~

栅格布局能够适应各种屏幕尺寸及分辨率，确保整体布局的一致性。

栅格建议使用 1、2、3、4、6 切分布局，可以进行多种布局组合，并在整个设计中保持布局的结构的一致性。

·页面中一般采用 24 列自适应网格，你可以使用它为各种屏幕尺寸创建灵活的布局。

·边距 Margins、列 Columns、间隔 Gutters 分别是什么？

· 边距 Margins：边距是内容与左右边缘之间的空间。控制台内容区的边距选用 8 的倍数为设定值，一般采用 16/24px 的居多。

·需要注意的是：

·· 减去 margin 后，列在页面区域均分，保证每列的宽度是一致的；

·· 在区域有 margin 的情况下，划分列的区域不能包含 margin。

·列 Columns：在电脑端列的数量是个常量（24列），每一列宽度的尺寸随屏幕大小进行自适应调整。

·间隔 Gutters：间隔是列与列之间的空隙，控制台产品 gutter 使用固定值也要是 8 的倍数，一般采用 16/24px。

·需要注意的是：

·· 布局的左右两边的分界线 gutter 可以为 0；

·· 必须保证 column 的宽度是一致的。

·边距 Padding：padding 指一个元素的内容和其边界之间的空间，padding 最小值是 4px，然后其余均为 8px 的倍数，建议值为 8/16/24px。

总结

每一个设计规范都是有灵魂的，规范是为了更好的做设计，而不是限制设计师双手的枷锁。

设计规范也不是一成不变的，他在落地使用的时候多少都会有问题，需要慢慢的去反复检验规范的合理性，发现不合理的及时更正。