超详细！总监出品的B端设计规范指南（一）：布局

 C 端设中，不给车载客户端、手机客户端、电脑客户端设界面，都比较具体的规范需我们学习遵守。

而唯独 B 端设计，或者说网页设计，我们在网上是找不到具体详细规范资料。为论是蚂蚁 AntDesign 是 Element、Clarity 等 B 端设计系统，其规范都是针自己这套品设计说明。

当不使用这些框架，要完成定义计，那新人就完全不知道该怎下。所以，今这篇内容，就是针对 B 端计所需备了解的基本规范进行说。

帮助大家快速和掌握 B 端设计所需的规范识。

B端规范认识导言

B 端设计是 UI 类设计中的一个大类，它包含非常种面向企业、业的客户端类型，包括电脑、手机、平板、大屏等等，针对不同客户端和系统，基础规范有一定的差异。文主要集中在 WEB 端的管理界面设计。

WEB 管界面虽然看起来和一般的页差别很大，但说到，它是页的一种，它遵循页设计的基本原则。我们对规范的解释页基础规范为框架展开，并会入一分 B 端特有的设计元素规范说明。

主包含的规范内包含下面这些模块：

• 布规范
• 色彩规范
• 体规范
• 图标规范
• 控件规范
• 表单规范
• 表格规范
• 动效规范

规范的解释，会涉及到不少网页端制作的知识点，建议立志 B 端行深耕的设师，都掌握 HTML + CSS 这些端知识。

我们过去做过这个系列详解，可以过下链接查看：

要声明，规范结内容，含 “规则” 和 “议” 两类型，规则指是浏览、代码等限制生硬性规范，而议则是我根据自己经验理出来便于大家理解内容。

在的项目中，如果出现 “建议” 无法适应的情况，那完全可以根据实际景来做决策，不需要拘泥于给出的数值和限制。

下面，就开始进正题吧！

B端布局规范

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

在前端 HTML CSS 的知识中，需要定义同 DIV（或它标签）的长宽数值，并将这些大小一的矩形进行列、移、嵌套，来实现界面的视觉样式。

换句说，所有置画面中的元素包含一个矩形的外边框，无论是文字、图标、图、按钮、标签还是符号。

所以，在界面的局中，无论我们使用什么样的内容、字段，对前端的页面来讲只是无数矩形的排列程。我称种局的设计思路为 “矩阵局法”。

矩阵布法是设计方式和前端开发方式的统一，升开发阶实现设计稿的效率和准确性，是每一个专 B 端设计师都需要具备的素养。

此基础，我们还几统一的原则需遵守：

• 数值的使标准
• 固响应尺寸
• 常用界布局

1. 数值使标准

在 UI 领域中，元素尺寸的定义像平面设计大多例或“感觉”来制定，更多是使手输入数值的方法来成。

主流的系统、规范都会建议我们通过网格化参考具辅我们行布局设，比如 Android MD 系统使用的 8*8 网格系统（常用电脑分辨率可以完支持）。

也就，这系统中，元素的外框、间距，都以 8 的倍数设置的。这样无论我们设还发过程中，对于使用的数都会相应的默契。

是，以 8 倍数为基准设计，跨越幅度有太大了，比如个图标，你觉 16px 小时候，那下档 24px 页可能太大了。所以，我议是于相比较复杂项目来说，使用小级 4*4 网格来设计，会更兼顾灵活度和数值统性。

即置素的尺寸、间距的候，都用 4 的倍数来完成，当你觉得素的长或宽不适，就对它进行 4px 的增减，比如下面的案例：

要警惕的是，4px 的基准，是针对素视图边框的值，文字字号、图标栅格等次内容，并不会受该则的响。且该则只是一个计基准的 “建议”，而不是限制，在殊景中可以选择破它。

2. 固定和响应尺寸

使用 4 的倍数完成计，并不能解决 B 端计中的所有尺寸问题。因为在 B 端的实际应用中，会加入响应式的逻辑，即页面素尺寸随浏览器窗的变动而变动。

所以，在设计 B 端界面元素的时，我们要考虑两种场，固定尺寸和响应尺寸。

固定尺寸即管环境发生么变，它的大小是定死的。如图标、标题、LOGO 等元素。而响应尺寸，则是一个 “未知数”，是需要一定的计算规则 “求得” 的。

比如还搜索栏的案例，搜索框响应尺寸，搜索按钮固尺寸，那么不同的宽度下面，它们显示的效果如下：

理解响应式尺寸对应规则，除了了解 CSS 中 Width:auto 属性的使用外，简单的就搞清楚 UI 设软件中的响应式布局功能。

元素响应还固尺寸我们设过程中就后决的，不设完以后再看图话。所以了解固响应尺寸的内，我们义组件的过程中就通过软件的响应式功能行设置，并需后的标注文档中行明。

3. 常用的界面布局

后，就 B 端界面设使用的主流布局形式了。虽然网页因画布比手机得多，设的灵活性高，但 B 端中可以应用的布局形式也不多，只固的几种。因 B 端页面布局中几常用需预留的坑：导航、标题栏、具栏、内区域。

主要使用左右或上下布局两个：

左右布局形，常是左侧作为导航区域，顶部作为工具栏使用。这做法常是为系统内模块较多，需要导航数也多，用户需要经常切换到不模块去，所以左右分栏布局可以很好提升操作效率。

而上下布局中，则是面向一些理景、功能比较简的，导航模块少，且切换的频率不高，主要的操作都集中在内容域的置上，没有边栏的响还能提高操作的专注性和效率。

要使用哪种类型的局，需要根据当前的项目功能做决定。但即使选择其中一类，也并不代表我们的工就结束，还需要在个局的框架下做进一步的规划。

如，我们需要制定容区域多栏设计的例划分、复杂表单填写系统中的容引导栏、列表条目展开的侧边栏形式等等……

每套项目都需要先确定页面的布框架，然后再开始针对具体页面、务容进行设计，保证整套系统操作方式的一致性。

总结

今天先更本系列章的第一篇，之后会陆续上传的容。每篇如果有么了解的，或者的建议，可在留言中交，我们最后会整一个整修订版本。

那么感谢家观看。下篇再贱～

欢迎关注作者微信公众号：「电话亭」