B端设计那些事儿 - 布局篇

B端布局规范

首先，我们来解析一下 B 端布局的规范，即界面排版应该遵守的基本原则。

在前端与设计的配合中，往往前端实现时会用一个一个的div来进行画页面，而我们设计师通常也会根据前端的写法进行设计；我们称这种布局的设计思路为 “矩阵布局法”。

      这种方法的主要的目的就是设计方式和前端开发方式进行了统一，提升开发阶段实现设计稿的效率和准确性，也是大家双方合作愉快的开篇；

在此基础上，我们还有几个统一的原则需要遵守：

*数值的使用标准（在数值的制定下通常使用4的倍数及8的倍数进行延展）

*固定和响应尺寸以及固定+自适应

（固定尺寸即不管环境发生什么变化，它的大小是定死的。比如图标、标题、LOGO 等元素。而响应尺寸，则是一个 “未知数”，是需要一定的计算规则 “求得” 的。固定+自适应则是页面发生尺寸变化时，页面中的元素随一定的规则进行变化；样式位置不会发生变化）而在平时的设计中，布局的规范有任何变化则需要详细与开发进行说明；不然最后落地出来的效果可真的就变成了，设计效果- 范彬彬，落地效果-翠花了了了；哈哈哈哈哈

*常用的界面布局

1：主要分为：上下布局及左右布局

2：那么上下布局则是：顶部导航+内部区域（导航模块较少）

而上下布局中，则是面向一些处理场景、功能比较简单的平台，导航模块少，且切换的频率不高，主要的操作都集中在内容区域的设置上，没有边栏的影响还能提高操作的专注性和效率。

3：左右布局则是：侧边导航+内部区域（导航模块较多；7+）提升效率工作台的形式、

因为系统内模块较多，需要的导航数也多，用户需要经常切换到不同模块中去，所以左右分栏的布局可以很好的提升操作效率。