以下内容主要分成两大部分，第一部分是认识布局设计中的一些常见问题，比如栅格中8的相关数原则，分辨率的选择，以及布局的几种常用方式，因为B端布局是建立B端设计规范的前提。第二部分是结合营销管理后台系统实际案例，去搭建B端设计规范的详细过程，基本库，扩展库的详细展开介绍，基本库和扩展库的搭建也是设计规范中的关键。内容较多，大家可以根据上述目录来选择性阅读。

1.1 如何正确做布局设计

如下图几个常见的布局设计稿，或者当前市场上线的所有B端系统里，仅作为布局大框架来看，都可以分成以下这6种布局框架。

这六种框架里，我们可以发现它们在设计上共性的地方几乎都是左右布局，并且有侧边栏。其中细微的区别就是有的侧边栏宽一些，有的侧边栏窄一些，有一些有顶部的导航栏，有一些有底部的导航栏，还有一些它的侧边栏和顶部导航栏的层叠关系不一样，还有一些只有图标没有文字，整个的布局方式无非就是这六种，所以不管哪种方式总结出来的共性就是左右布局，左边称之为侧边栏，右边称之为操作区。在B端设计中我们都采用这样一种共性的布局方式，有的人想创新不想用这样的布局方式，但不可以，因为经过实验调查发现，从用户体验角度讲，在B端系统中，或者说在电脑的操作环境下，侧边栏方式，这种左右布局的操作在电脑端是非常有普及性和体验性的，也是最容易操作的。

接下来我们继续把这个框架细化一下，如下图，可以分成很多的区域，可以看出，左上角更多的是放一些logo或者放一些项目的名称；在顶部大部分80%左右都会有顶部的导航栏也叫导航区；左边是侧边栏，一般是系统的主菜单导航，可以分到2级或者3级，一般到3级就显得不够友好了，我们一般会分到1级或者2级；然后是底部的状态栏，状态栏不是所有系统都有，这个状态栏代表当前系统运行的状态，比如数据库的读取情况，保存情况；最后是操作区域，类似于我们平时使用的figma软件也操作区域是最大的，在操作区域操作，选择区来选择一些功能。这个就是细分的框架内容，当然这些细分出来的内容也都是有规范的。

比如顶部导航区域，可分为一级导航和二级导航，一级导航64px，二级导航48px，B端系统所有的单位都是像素px（物理像素），在这里补充一个小常识，我们平时在做C端移动端设计的时候，IOS单位是pt（点/逻辑像素），安卓单位是dp，其中1dp=1px，平时UI设计师都是基于IOS设计稿来设计，因为苹果得交互在整个设计规范里是最好的，基于IOS出一版，然后安卓进行微调。所以移动端开发单位用到的是pt。而B端设计中，由于b端系统的技术架构：分c/s和b/s。c/s需要下载客户端，b/s直接通过浏览器打开。所以B端的设计用到的单位一定是px（像素）。因此这里我们提到的一级导航高度和二级导航高度都指的是像素。

然后顶部导航展示类的（放些logo或图片），一级导航高度80px，二级导航高度56px。顶部导航高度的范围是48+8n，侧边栏宽度的范围是200+8n。这里要继续补充一个常识，在B端的设计中，要遵循8的倍数相关值来进行设计，比如在界面设计中我们的间距、边距、高度或者宽度不知道该怎么确定的时候，就可以取8的倍数值来进行确定，8、16、24、32、48等。对比C端来看，由于手机端的栅格化不能体现出特别强的优势来，因为屏幕的范围宽度太小了，最多可设置6列栅格，反而有约束。在手机端如果非要做栅格，可以分成6列栅格和4列栅格。移动端左右安全距离通常都是16pt，在移动端设计中如果间距、留白不知道怎么确定的时候，我们一般会找4的相关值。比如4、8、16、20、24、28、32、40、44，这和IOS的规范是有关系的，其中44是比较特别的值，44是在IOS中设计中是能点到的最小区域，如果放到44以下，在移动端就可能点击不到，而在安卓中是48最小区域。提及这些的目的，说回来，是想让大家加深印象，在移动端不知道怎么预留空间的时候，就按照4得相关值去做，在B端就按照8的相关值去做，就可以做出设计的韵律来。

那么这个整体的布局方式，属于layout/容器布局，包括了顶部导航、Header/顶部布局、Sider/侧边栏、Content/操作区、Footer/底部操作栏。

这几个部分有一个顺序关系，大致可以分成三种。第一种如图1，侧边栏是最高的级别，然后顶部导航区、操作区和底部状态栏是保持平等同一个级别。第二种如图2，顶部导航为最高级别，侧边栏为次高级别，然后是操作区域，底部状体栏。第三种如图3，顶部导航栏、操作区和底部状态栏是同一个级别。其中这三种情况常见的就是第一种和第二种，第一种最为常见，第二种图2通栏的导航情况也有。所以我们在设计的时候，选择1和2方案布局就可以。

所以综上我们可以看出，B端就是左右布局来进行设计，而手机端更多采用上下布局的方式来设计。这也是刚才提到的问题，屏幕比例的问题，手机和电脑尺寸的区别。

这里又延伸出一个问题，B端有没有移动端？或者说什么情况下会做B端移动端的设计？其实，并不是所有的B端都有移动端，比如我们常用的一些大量信息的管理，CRM，ERP系统，有一些会有一定的移动端，也是针对一些快捷的操作来设计的，比如在CRM系统中寻找一个客户资料，比如我们在任何办公场景去找一个用户资料的时候，不可能总守着电脑去找，最方便的情况是可以随时用手机去查找，具备这样的业务使用场景的时候，设计师就应该和产品经理商量，是否去增加移动端设计，这也是必要的一步。同样B端有B端的优势，如果涉及到大型的筛选、数据录入的时候，很明显手机端就不支持了，而且体验效果不好，我们一定会用电脑来操作，一般也就是在集中的工作时间和在工位配合鼠标进行，面对大型数据还是电脑端好用，所以电脑端主要是B端承载的方式，这也是布局规范这部分需要了解的知识点。

2.1 必读前言

B端系统设计规范的建立，可以分成四部分，第一先建立基本库，包括色彩系统、字体系统、图标系统、栅格系统、间距系统、布局系统。当建立好几本库后，再根据自己的公司的实际业务，去建立扩展库，扩展库包括导航系统、数据录入、数据显示、反馈系统，这些细分为又有很多组件，具体如下图，并不是每一个都会做，需要结合实际项目去进行扩展库的搭建，也就是缺什么组件就补充到扩展库里。做完扩展库后再继续做方法库和案例库，也就是做这些组件的说明和最佳之间案例，告诉设计同事或者开发人员具体什么时候用，怎么可以正确的去使用，来提高设计效率。我们接下来先了解第一步基本库的建立过程。

2.2 基本库建立详解

2.2.1  Gird-栅格化建立

2.2.1.1  认识栅格系统

在做基本库建立时，基本库建立的第一步是栅格化的建立。栅格化是我们做B端设计规范的第一步，也是做B端组件库的第一步，栅格系统是什么样子决定了我们接下来设计界面会进行怎么样的布局，因为栅格化里也应用到了格式塔原则中的相关性等原理，所以栅格的结果是一定是有规则的。

比如下图是营销系统的栅格规范，我们可以看到，两种情况的栅格，在分辨率1440情况下，一种是24列，间距和边距都是24，另一种是24列，间距和边距都是16。当然我们还可以把界面设置其他情况的栅格，比如16、12列栅格。还有一些列数相对较少的栅格，与其对应的界面是一些布局简单的界面。但话说回来，通常在B端系统中，大家都把栅格做成24列，24列栅格可以做到一些复杂的排版布局，同时在做响应式适配的时候也最方便，小于24栅格或者说栅格列数越少，基本在B端系统中就失去了灵活布局的意义，所以在B端系统，通常情况下，就分成了以24列栅格，不同间距边距的以下两种栅格，这也符合我们公司后台系统的布局，同时可以更好的做响应式适配。

刚才分成的那两种栅格，有人会产生疑惑，画这么多条线是干什么的呢？那么接下来最佳案例实践来了，通过第三个案例图就可以看出。我们可以使用4列的方式来进行布局，各占25%；也可以使用2列各占50%，或者75%和25%分；也可以占全列；也可以各占三分之一。所以用这样的方法去指导我们使用，我们很容易按照这样的方式去拍版布局的，我们也可以使用更多，但推荐这么多，再多可能就不好看了。

包括移动端的栅格系统，我们怎么去使用，比如做金刚区的时候，分成四列的金刚区各占25%。所以为了更好的灵活布局，我们就能做这样的栅格布局的规则。

补充知识点1: 栅格中Col指的是列，都分成为24列，Gutter指列间距也叫沟槽为24，Margin指两边边距为24。

所以关于栅格，B端设计中，左侧是固定的，只需把右侧操作区域做成栅格就可以，全屏栅格是没有意义的，比如现在的宽度是这么宽，有可能换了电脑使用的情况下浏览器的宽度会拉的很宽。

我们就会看到如下图，当右侧拉伸了，同时右侧响应区域的栅格也变宽了。

这里就有了推荐的设计尺寸模板，在1440尺寸下的两种设计，第一种是最常用的，也是我们这次设计的尺寸，第二种有部分系统需要尺寸变宽的时候，就需要这样的设计。

2.2.1.2  为什么选用1440*900分辨率设计

通过调查发现，我们使用的电脑显示器尺寸和分辨率大部分是1920*1080px这个主流分辨率，那其余的主流分辨率还有1440*900，1466*768等等。（tips：像素是指照片的点数单位是px，表示照片是由多少点构成，分辨率是指照片像素点的密度，是用单位尺寸内的像素点，一般用每英寸多少点表示，单位是dpi，也就是分辨率越高图像就越清晰。）我们也可以去京东电脑屏幕销量的排行来看，销量最高的也就是主流分辨率，大部分销量在23～27英寸的显示器，比例为16:9，分辨率就是1920*1080px，所以我们在设计的时候一定要满足大部分人使用的屏幕分辨率。但是我们也不能按照1920*1080px尺寸来设计，因为这只是市场买卖的情况，作为B端工作者或者真正的用户，这不是一个绝对的数据。通过对百度流量研究院数据的调查，B端中实际用户更多采用的设计分辨率是1440*900px，所以我们作为设计师通常是以这个尺寸下来进行设计的，我们选择一个1440*900px的分辨率它不是最高，也不是最低分辩率，属于中间值，原因就是可以做到更好的向上和向下兼容适配。

前面我们提到，B端栅格化遵循8像素8的倍率来进行设计韵律。如图，列了五个B端主流的分辨率，如果用这些分辨率除以4、6、8、12这些随机的偶数，就发现，其中1920*1080都可以整除显示为绿色点，由于它是最大的分辨率，我们不考虑选用，继续往下看，除不尽的为红点表示，可以直观的看出除不尽的点数占比最少的就是1440*900的分辨率，而1440*900又是众多分辨率中居中的一个值容易兼容适配最高和最低分辨率，且遵循了8的倍数设计原则，容易做栅格化设计。所以我们通常会选择1440*900这样的分辨率来进行做B端的设计界面。

在没有得到数据支撑的时候就按照行业惯例1440*900来进行设计，这样做肯定没有错，但如果做的系统可以确定只是少部分人进行使用，那我们应该做一些适当的调研，去获知更合适的尺寸分辨率，比如公司集体办公配备的统一尺寸是多少，经常在这个电脑下查看工作的话，我们就应该用这个尺寸去设计，如图，我们就应该按照如图顺序进行调研选择合适的分辨率。

所以在认识了栅格包括建立了栅格布局后，接下来就是色彩系统。

2.2.2  Color-色彩

2.2.2.1 如何正确确定系统主色和辅助色

在设计中色彩占了很大一部分，首先要确定主色，主色只要一个就够了。主色往往和行业和企业的VI色要有关联度，同时主色要和其他的颜色脱引而出要有强调感，通常我们根据行业属性和企业VI可以大致确定主色的色相范围，但不知道怎么去精确色值，这时可以借助Antdesign中的色板来找精确色值，比如上品的VI品牌色为橙色，可以对应找到Antdesign中色板“火山”模块儿，在这组色阶中我们通常会选择中间“色阶6”的色值作为最佳色值，因为色阶6的颜色更饱和更纯净，可以上下进行兼容色值。所以我们就确定了主色为“色阶6”，色值为#fa541c。

当设置完主色后再建立辅助色。辅助色的原则是要和主色能够搭配起来，也就是说几种辅助色放在一起，我们看起来要统一和谐而不是比较奇怪感受起来给人不协调的感觉。比如我确定了三个辅助色，由于上品VI色中提及了辅助色为青色，所以我以青色来延展其他的辅助色，青色、紫薇、粉色，当这三种颜色放在一起，它们看起来还是比较和谐的，为什么会看起来比较和谐？我们通过观察拾色器中辅助色色值的位置可以看出，他们几乎都在同一个位置，或者他们除了色相不同外，他们几乎都在同一个纬度，保持在同一个区间，所以他们看起来才比较协调，这也是配色的一个小技巧，通过在拾色器中同一纬度下去更改色相来达到颜色之间的统一协调。那有人会问，如果企业VI没有确定可延展的辅助色怎么办？同理，调色的方法和刚才提到的方法是一样的，以主色的拾色器色值维度，来更改出不同的色相，直到自己感觉彼此搭配协调为止，这个方法屡试不爽，经过多次验证，可以快速找到我们适合的配色。

2.2.3  Space-标准间距

所有的基本库第一做栅格，第二做色彩，第三步就是间距，间距一般和栅格是可以同时做出来的，因为栅格遵循了8得倍数原则来建立得，所以我们可以看到间距也取得是8得相关值，最小是4，接下来是8，16，24，32，48，64，所以现在只是确定了我们B端排版时间距的这样的一个设计韵律，如果以后有的页面模块儿间距是128，那就把128这个间距加进去，加到间距规范里。

2.2.4  Typography-字体

当做出色彩后，接下来重要的就是字体规范。在B端字体中文用PingFangSC（也可以是思源黑体或者微软雅黑，B端中字体比较受限制，也就这三种字体可用，这里我选择PingfangSC），英文用SF，常规数字用PingFangSC，涉及到特殊数字比如一些数据信息用DIN字体。这里的字体尺寸规范，常用的一般就是正文，小标题，标题都是14px，和注释的字号为12px，所以最小字号12px，14px，18px，这样的字号大小选择。字重一种是常规体，一种是加粗。至于H1，H2, H3这些，H标签也叫Heading标签，HTML语 言里一共有六种大小的heading 标签，是网页html 中对文本标题所进行的着重强调的一种标签，UI中一般用不上，虽然很少用到，但需要定义到。

同时字体有它的色彩规范，字体的尺寸规范对应的是字体的色彩规范，我们可以看到很多界面标题字，小标题，正文字有不同的大小，同时有不同的字体颜色，这种对比的使用，这些细节的使用才会使界面看起来正确和谐。比如它的副标题和描述用的就是比较淡的颜色。如果有颜色的区别，就把它放进去，这个色彩我们称之为中性色，它不偏色彩，偏的是灰，但这里字体的颜色用的是偏蓝灰色，偏蓝的颜色，不仔细看还是趋向于灰色，这种蓝灰色可以让界面看起来更灵动一点。同样字体可以定义它的色阶，透明度20%去递减选择不同位置不同的字体颜色。

2.2.5  Icon-图标

接下来是图标，可以使用Antdedign的icon，因为Antdesign的icon是开源的，这里用的是IBM carbon的图标，也是开源的图标，但设计师在平时还是建议去自己画图标，用户经历C端的视觉冲击的洗礼，对视觉的品味越来越高，慢慢慢慢B端C化只是时间问题，用户对B端的视觉要求也会越来越高，所以我们还需要多练习设计自己的图标，B端能体现设计师视觉功底的的地方一般也就图表的设计和图标的设计，其他就是表单之类的很难体现视觉方面的东西。所以设计好后放到图标库里，这里只是一个占位，如果想快速出图，那用这些开源的图标也是没有问题。

在实际操作的时候，可以在栅格里直接画，也就是在这个大小范围内直接画，或者先画完再放到栅格里调整大小，线宽，圆角等细节。

做到这一步，栅格、色彩、字体、图标，我们的基础的模板就已经做完了，也就是基本库，接下来就需要做扩展库。扩展库包含了各种组件和按钮。并不是所有项目都会用到按钮，开关，滑动条这些组件，所以扩展库根据我们需要去建立，接下来我们详细了解一下营销系统案例扩展库的建立方法。

2.3.1  Button-按钮

比如扩展库里的按钮，按钮是这个主色， 有很多情景需要我们去建立，按钮有三种样子小的、中号、大号的，其实它们代表着不同的情景；按钮有三种状态，通常、悬停、禁用；包括按钮的类型，有文字按钮，图标+文字按钮在左，图标+文字按钮在右，只有图标按钮；包括按钮在功能样式上的分类，有主要按钮、次要按钮、形状按钮、全圆角按钮，这些分类，对应的状态形状都罗列了出来，这些种类一定会在我们的界面中不同地方体现，所以具体界面中用到的，到时候把这内容再补全，补到我们的按钮规范中，下次再使用的时候具体放什么样式，长什么样子就可以直接使用。

2.3.2  Navigation-导航菜单

接下来扩展库里的导航菜单，和表单的详细制作方法都在后面的案例图中有详细制作步骤和过程，这里就不一一展开介绍了，大家可以根据如下图结合自己业务进行响应设计规范的建立。实际难度其实在figma的正确使用上，比如创建组件，母组件和子组件的结合应用，自动布局（shifr+A）的规范使用等，重在多做练习，实际动手操作。

2.3.2.1  Menu 导航菜单

2.3.2.2  Tabs  标签导航

2.3.2.3  Breadcrumb 面包屑

2.3.2.4  Pagination 分页导航

2.3.2.5  Dropdowns 下拉菜单

2.3.3  Form-表单

2.3.3.1  Input 输入/查询表单

2.3.3.2  Checks & Radios & Switches 多选框 & 单选 & 开关

以上为B端设计规范基本库和扩展库的建立思路，其中基本库里的色彩或者字体、栅格规范等等，根据常用分辨率设备的调研，和企业品牌VI关联色，我们都可以很轻松的定义出来。其实设计规范的搭建核心在于组件库的搭建，举个例子，比如Iput输入框规范，我们需要先定义一个输入框的高度，以及文字与输入框的间距，线框的颜色，文字大小，文字颜色，这些是定义一个输入框组件规范的关键，我们会发现当规范的做图做好这个输入框的时候，也就是确定了它的组件规范，做好后，我们就需要把这个输入框形成组件，为了方便后面界面中进行复用，我们就可以把它创建组件。因为是组件嘛，他要方便在不同场景下使用，会需要拉伸，所以就需要把文字与输入框加上自动布局（shift+A）进行调整。有了之前提到的整体设计规范建立思路，再结合刚才提到的基本的设计规范操作步骤，就形成了以上自己业务系统的设计规范落地，以上内容供大家参考，感谢阅读，thanks～