上下布局包括：”顶部菜单栏、主体内容”两大区域。其中顶部菜单栏是固定不变的，主体内容根据不同分辨率进行自适应动态缩放。另外还需要把主体内容左右两边空白区域最小值确定好；

优势：内容区域可操作空间大。

劣势：导航区域限制数量，如果导航选项内容比较多，用顶部横向导航的话，就会显得很拥挤。另外，横向导航一般有“展开”，“折叠”，和“收起”三种状态，加上内容很多的情况下，横向导航就特别难做到尺寸适配。

第二种：左右布局

左右布局包括：”左侧菜单栏、顶部栏、主体内容”三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。

左右布局时，左侧菜单是支持收缩或展开，收缩状态下也需要有固定的宽度。

优势：导航部分可扩展性强，适合导航选项内容都是比较多的情况。且只有“展开“和”收起”两种状态，在不同屏幕情况下，宽度的自适应也能更加得心应手。

劣势：相对内容区域空间变少。

第三种：其他的布局

现在很多后台管理系统采用，”顶部一级导航栏、左侧二级菜单栏、主体内容”三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。

优势：结构更清晰。可承载更多层级内容。更适用于复杂且层级多的产品。

所以，可以得出结论：设计师在选页面布局的时候，要全局考虑产品框架及内容。

1、如果导航选项内容比较多的话，或者不确定有多少内容的情况，从美观和操作难易程度、可用性来评估的话，选择第二种左侧导航是最适合B端产品使用的。

2、如果内容选项确定很少，就没那么多限制，“左侧纵向””顶部横向”都好使

特别要注意：

1、同一个产品需要考虑它的统一性，不能这里使用顶部横向，那里用左侧纵向。

2、如果是个更新迭代的版本，就还得考虑老用户之前的使用习惯，避免引起不必要的麻烦。

在确定好导航的布局后，就基本上能确定整个产品的页面布局了。

3.2 常见布局尺寸：

B端产品，一般会在整个页面的左上角放企业的LOGO，顶部栏高度48 8n，侧边栏宽度200 8n。

我常用的是顶部栏高度：56px或80px，侧边栏宽度：200px，侧边栏收缩状态宽度：56px或80px，右侧的侧浮窗宽度：400px。（具体高度宽度尺寸，设计师可根据具体情况来定，不需要按部就班这么死板）。

同时需要确定好主体内容的上下左右边距，以及主体内容区域中各模块的安全距离，内容超出区域的，通过滚动查阅更多。

4. 文字

4.1 B端产品常用的字体

Windows系统：中文Microsoft YaHei(微软雅黑），英文Arial；

Mac字体：中文PingFang SC（平方字体），英文 Helvetica；

4.2 常用的字体大小

常见的字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶数字号，文字大小12 4n）。

注意：

在设计过程中，设计师对字号应该有一个全局观，在同一个界面内，尽量少用大小太接近的字号。比如一个页面中，如果同时用了12px、13px、14px、15px、16px、18px排版，文字的层级对比会比较弱，没有主次之分，用户阅读困难，视觉效果也显得凌乱。

所以，刚接触B端产品的小白设计师，如果不知道怎么运用不同字号字体的情况下，可以直接以这组字号12px、14px、16px、20px、34px的字号为参考使用，这样的分布会层次明晰，能够有个比较不错的布局结构。