史上最全面的-B端设计规范，内有福利哟（二）

时间：2023-09-28 04:42:02 | 来源：网站运营

时间：2023-09-28 04:42:02 来源：网站运营

史上最全面的-B端设计规范，内有福利哟（二）：彩蛋福利：赠送大家“10套大厂组件库源文件”感兴趣的小伙伴可以到文末拿去！

上一篇文章我们聊了设计规范的前三个部分，包括设计规范的基础概述，如何开始整理设计规范，大厂设计规范推荐，那么接下来，我们来聊聊第四章和第五章的B端的设计规范及组件库。

稍微有一点长，请耐心看完，会对刚接触B端的新手们有一定的帮助，也能帮您提高工作效率，节约不少时间的。

目录：

1. 设计规范的概述
2. 如何开始整理设计规范
3. 大厂设计规范推荐
4. B端设计规范
5. 组件库
6. 设计规范如何落地
7. 做好设计规范能给您带来哪些能力提升

B端设计规范

设计师在开始准备设计规范时，首先需要确定设计风格和设计尺寸，页面布局是做居中固定式，还是全屏响应式。如果是全屏响应式的网页设计，那要选择怎么样的屏幕来做效果？等等这些问题。

接下来分别从设计风格 、设计尺寸、页面布局、文字、颜色、表单、图标等等内容来展开说明 。

一、设计风格

1. B端产品的设计风格大致分为三种：

纯白风（网页大背景是纯白色;文字背景是线框，轻淡色（灰）;文字一般用黑色）

轻淡风 (网页大背景是浅灰色;文字背景是白色;文字一般用黑色）；

深色风（网页大背景是深色;文字背景是带有透明度的纯色；文字一般用白色）

我们在开始设计之前，要确定好使用哪种风格，一旦确定下来，后面的所有页面和元件的设计，都得基于这个风格来设计。

据数据显示，目前市面上比较流行的是：轻淡色背景风+全屏响应式的设计风格，也是相对比较保守安全的设计。

2. 页面风格

然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，选择怎么样的屏幕来做效果。

二、设计尺寸

设计规范中，分辨率尺寸的问题，一直以来是我们设计师讨论最多的。目前市面上主流的排在前3的屏幕分辨率为1920*1080，1440*900，1366*768。

决定产品设计尺寸分辨率大小的因素大致包含以下两点：

1、市场占有率（主流）

2、兼容能力。

假如你产品的用户用的设备主要是市面上占有率最高的24寸办公室显示器，也就是1920*1080分辨率的话，那毫无疑问，在选择设计尺寸上，直接选择1920*1080分辨率。

做B端产品时，现在市场上的设计师一般都会采用的是1440*900。为什么不用市场占有率最高的1920*1080和1366*768呢？

1、由于B端产品的特殊性，它的尺寸分辨率大小，是取决于用户使用的电脑设备条件。由于员工电脑显示屏大部分都是统一采购的，尺寸也就大致统一，所以开发适配的分辨率可以按这个统一尺寸进行设计。

2、因为它的兼容能力会比较强，向上适配或者向下适配误差会比较小，不管是市场占比最高的主流1920*1080尺寸，还是一般般的1366*768尺寸，都完全可兼容。

注意：别忘了设计出极端情况（宽度为1280，以及宽度为1920）的效果图，力求前端开发实现的效果和高保真设计图误差最小。

但是如果像我现在做的产品，主要是学校老师使用，那除了移动办公，web基本都是固定办公，学校给老师及管理人员使用的办公设备（电脑）屏幕一般都是台式电脑，那这个时候，我们在设计时就会同时考虑它的占有率和兼容能力。所以我们采用的是：1920*1080分辨率。

所以设计师们在选择尺寸上，一定要脑袋灵光点灵活使用，不能一味的认死理只选择1920 或1440某一尺寸，而是要对您的产品用户的具体情况做好分析，从而得出最适合你们产品的设计稿的尺寸。


注意点：

如果希望设计稿完全还原程度高的话，还特别要考虑浏览器的适配，比如说它的顶部固定区域（当前网址，书签栏等的高度）必须排除在外，剩余的部分才是我们设计稿的真实高度。


拿我们常用的谷歌浏览器举例，如下面公式所示：


设计实际高度=电脑分辨率 -（网址栏+书签栏+页签高度)

三、页面布局

1. 常见的页面框架有以下三种:

第一种：上下布局

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

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

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

第二种：左右布局

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

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

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

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

第三种：其他的布局

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

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

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

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

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

特别要注意

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

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

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

2. 常见布局尺寸：

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

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

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

四、文字

1. B端产品常用的字体

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


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

2. 常用的字体大小

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

注意：

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

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

“行高”根据文字大小和使用场景来定，公式如下，

行高=文字大小+8px（或6px，视情况而定，我常用8）

例如：12号字体的行高=12+8=20px

同一个界面中，一定不要出现多个不同字体。尽量选择用户设备里自带的字体来进行设计，比如说WIN系统默认用系统自带的“微软雅黑”，不能使用特殊字体。

如果必须要用特殊字体，建议用图片替代。如果用户的设备里没有你使用的这些字体的话，会默认显示设备的系统自带字体，最终效果就会和你的设计稿相差很多。

从视觉方面来讲，为了让整体界面更简洁具有美感，体验感更好，在使用字体方面，一般字体种类不超过2种，越少越好。因为页面的层次感主要是靠字号大小及颜色拉开层次，如果字号在变，字体种类也各种变化，整体就会感觉很凌乱，没有统一性。

五、颜色

颜色规范包含“品牌色”、“辅助色”、“中性色、图表色”四部分。

5.1 品牌色系

品牌色系：即产品主色调，主色调的设定直接影响产品气质和直观感受，也是产品的对外的形象。品牌色是根据这个产品的特征和定位、用户群，以及使用场景等综合考虑最后确定的。

品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。

1、品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突，让人误解。但要是被硬性要求必须选暖色系作为主色调，就得格外注意调节好主色调与错误提醒的区别了。

2、注意选的品牌色（主色调）不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼，而产生的视觉疲劳。

5.2 辅助色系

辅助色系：辅助色一般用于“提示”。类似：成功、失败、警告、无效等内容等

5.3 中性色系


中性色系：中性色涵盖黑、白、灰三个不同层级，通常在文本、背景、边框、分割线用到它们。同一色相，只要改变它的透明度就能表现出不同的层级。

B端产品的文字中，一般会有：一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。

为了区分层级，提升用户的阅读体验感，通常会根据具体需求，把字体颜色的深浅，大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，设计师在设计时可以直接作为参考。

5.4 图表色系

图表色：我们常见的后台管理类产品， 像数据可视化、统计图、多个标签的不同配色方案，所以一般还会设定图表的颜色。

六、按钮

按钮是任何用户界面不可或缺的交互元素，B端产品中用到按钮的场景特别多，类似：登录注册，保存，表单，弹窗，导航，提交，确认等等。


1. 按钮的形式

常见的按钮形式包含这六大类：图标文字组合的按钮 ，主按钮，次按钮（线性按钮），按钮菜单，文字按钮，图标按钮。

2. 按钮的交互状态

常见的按钮交互状态包含六种

正常状态、聚焦状态（使用Tab键或方向键来对网页进行访问输入的聚焦状态，在设计时很多设计师都会把这一状态忘记，导致用户无法用方向键控制光标位置，会降低用户的使用体验感）

悬停状态（鼠标正在按钮上，但不点击，需要注意的是平板电脑和移动端设备上不会展示悬停状态，因为手指跟光标不一样，无法在屏幕上进行悬停 ）

激活状态（点击按下状态）

加载状态（等待期间不可操作，在B端产品中Loading状态特别重要，能缓解用户的焦虑情绪）

禁用状态（不可操作状态，置灰显示和透明度（40%）代表不可操作状态）

3. 按钮的圆角

按钮圆角：在开始设计产品之前，设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性，容易分散用户注意力，所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。

但按钮的圆角并不是越大越好，因为在相同尺寸下，按钮圆角小的，操作热区会更大，页面的使用效率也会更高，更容易操作。同时还要特别考虑到下拉菜单的设计，所以圆角大小一般采用偶数：

2px,4px,6px,8px,16px为宜，不宜过大（这里的圆角弧度的值有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。

注意：圆角大小也会跟着按钮尺寸的大小有相应的变化。

4. 按钮的大小

讨论到按钮的尺寸，我们需要大致知道如何设置网格基数。在设计中，我们需要在常用的绘图软件（如：Ps、Sketch）里找到我们的网格功能，设定好一个数为基数，然后按照这个基数来进行按钮的绘制，按钮就相对比较规范了。

那如何用绘图工具设置网格基数呢？方法如下：

在Sketch绘图工具中找到：【视图】-【画布】-【网格设置】- 弹出网格设置对话框进行设置就好了

把网格基数设置为【4】的原因：它是谷歌Material Design绘制小组件的规范，模块之间定义的基数就是【8】。

假设我们定这个基数为4，那采用的尺寸数值就需要是基数4的倍数。比如B端产品中，常用的按钮高度尺寸有：24px、32px、36px 、40px、48px，这些都是可以整除基数4的值。例如：32/4=8，40/4=10，这里的4为基数。

按钮的宽度尺寸，一般是确定好文字到边框左右两边的距离（例如如图Padding值为12px)后，开发会根据文字内容的多少自适应的。

按钮间距，按钮之间的间距也遵循基数为4的倍数，比如：16，24，32，40，48等。这里的基数定为偶数（一般为4或8）

七、表单

B端产品中，表单几乎在所有类型的的网页都会出现，它是由多个列表项构成的比如：登录注册、搜索、信息录入、选择器等都能看到表单。

而列表项又是由：标签和输入框组成，常见的表单有“输入框、单选框、复选框、普通按钮、开关按钮、下拉菜单”等控件，而且都会有自己的一套逻辑和顺序。

如图：一个输入框通常包含：标签名称（英文：label）、提示信息（英文：placeholder，输入信息后提示文字消失）、初始值（英文：value， 需手动删除）。如果是必填的表单，一般会在标签的前面，加上红色*号。

表单的边框和圆角 ：由于B端产品一般比较正式和严谨，所以我们在设计表单输入框时，边框线为1px，圆角弧度一般不大于4px (常为2px）。

表单内容一般为左对齐的多，但也会根据具体情况，有别的排版方式，比如标签字符多的话，标签会统一右对齐等排版方式。

另外，表单的输入框也需要校验功能，页面中尽量避免出现过多弹出框提示，避免影响用户体验。当输入有误时，可以直接对输入框设计不同状态下显示默认状态、选中状态、错误状态、成功状态，不可编辑状态等。另外，说明文字一般显示在输入框或选项的左边下方靠近表单。

八、表格

表格在整个B端产品比较常见的，它的地位是相当重要的，我们在设计表格时需要注意一下几点：

1. 表格内的文字内容：一般以左对齐为准。与左边表格边距尽量保持在10px以上的间距。（特别注意：金额和操作的标题和内容需要右对齐）

2. 表格的列数：默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展展示出来。

3. 表格列表的宽度：宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。

4. 表头每列标题文字字数：字符不要多，最多可输入8个。如果文字太多，就需要做文字信息精简化。

5. 滚动条使用场景：表格内容超过一屏，就需要显示竖向滚动条，注意：表头需要固定，但表格内容可滚动展示。

6. 表格无内容：表格的某些单元格无数据内容时，需要用“—”表示，需要区别于“0”。

7. 表格标题栏和内容栏高度尺寸：标题栏高度（标准高度为56px）；内容栏（标准高度为56px，偏大的标题栏高度为80px），内容区和标题栏水平居中对齐。

8. 表格内容对齐方式：

列的对齐方式（垂直方向）除了需要始终保持“右对齐”的：金额，最右侧操作列内容外，其他的内容可自行左对齐或右对齐。行的对齐方式（水平方向）

当表格栏的高度尺寸小于80px 时，一般只有一排内容，内容水平需要居中对齐。当表格栏的高度尺寸大于80px时，如果是有两排内容，所有的内容需要顶对齐；但是如果既有一排内容 又有多拍内容的话 ，内容水平则需要居中对齐。

9. 自适应规则

表格中的内容，会根据字段的长短定义所占的百分比，完成表格占比，从而达到希望实现的最佳效果。

10. 滚动条：滚动条分为横竖两种，当表格内容超过一屏时，就需要显示滚动条。竖向滚动条时， 需要固定表头标题栏和页码。只需滚动表格内容部分即可。横向滚动条时， 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。

11. 进度条状态：通常分为“加载中，成功和失败” 三种状态（例如‘上传图片’的进度条等）。

九、反馈

1. 弱反馈

仅提示用户相关内容，不需要用户做任何交互动作。类似：

toast弱提示通知提示等弹窗（（一般3-5秒会自动消失：包含普通信息，成功信息，失败信息，警告信息）。

另外还有，鼠标经过的时候即可出现而不用点击的弹窗（这个弹窗通常会设计一个浮动带有阴影效果的框，不需要遮罩）。比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。


2. 强反馈

第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。

例如弹出的列表，详情，表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理，例如添加上一层有透明度（例如30%，50%都可以）的黑色/白色，给下一层页面的内容做模糊滤镜等等；


在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失，弹窗弹出状态等等相关的交互规范。

十、其他

缺省页是互联网中常见的场景，当遇到网络不好、页面中没有内容数据、暂无资料等等情况，所导致的空白页面。

大致分可为：系统类缺省页，信息类缺省页，空白类缺省页。

遇到这些情况时，设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作，以缓解用户的焦虑情绪。（也就是我们常说的情感化设计的一种方式）

组件库

设计规范很大一部分是组件库，所以就把组件库单独拎出来聊聊。

一、组件库是什么？

做一个比喻，组件库相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个页面，而设计规范就相当于搭建的“说明书”。

通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。

而对于B端产品和C端产品，二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验，因此需要考虑视觉、性能、实现、兼容性，另一方面，C端会根据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。对于B端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。

二、组件库的原子理论

1. 原子设计/拆分

在业务已经发展到一定体量情况下，需要将项目中具备复用性及拓展性的模块进行拆解，对于B端产品来说筛选的时候会依据之前迭代的版本内容，把页面一一罗列出来，将可替换与相似的模块提取，并利用思维导图的方式统一归纳，并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换，避免了线上组件不一致导致体验问题。以我们现在的产品为例：依据产品类型将组件拆分为：基础组件 、业务组件、数据可视化组件、常用模块。2.2原子设计

将产品拆分后，此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面

• 原子（元素、要素）
• 分子（组件）
• 组织（模块）
• 模板（原型）
• 页面（填充内容）

从原子开始重新依据定好的视觉规范进行更改，再由原子组成新的分子。

三、盒子理论

盒子box

在与开发沟通设计规范制定的过程中，常提到他们写CSS样式的时候是采用盒子（box）去写的。通过一个个盒子填充来将我们的组件元素放入其中，最终形成前端展示的页面。

走查时使用浏览器我们也可以看到开发写的盒子，了解盒子也可以方便我们走查时知道问题在哪。

四、如何搭建组件库

1.确定组件库内容

对于新产品来说，业务体量较小，较难抽取共性，组件也不全面，因此较好的方式是参考大厂的组件库确定要做哪些组件，它们的相对成熟，参考价值较高。

对于已经成熟的产品来说，我们可以直接全面体验查看页面，找出所有用到的组件，除基础组件外，提炼出复用率高的业务组件进行结构化和组件制定。

2.搭建每一个组件库以提示弹窗为例，演示单个组件的建立方法。

1. 定义组件：根据业务定义提示弹窗使用场景，用于重要信息的提醒，且需要用户自己关闭操作。

2. 拆分组件：这一步是将组件拆分为元件。对提示组件进行拆分后得到如下：

3. 重组输出根据业务场景，我们把各个元件重组为组件，建成组件集，并定义各种组件的使用规则。

3.输出文档并替换到产品中

在组件库建立完成后，只有在日常设计中真正使用组件库，提高组件库在设计稿中的覆盖率，才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档，在团队中进行推广，加强设计团队的公用意识。设计团队内部可以直接维护一套组件库，设计师设计时直接调用公共组件库组件使用。

另外，我们还要与开发工程师配合逐步完成现有页面的组件替换。

4. 定期维护组件库

组件库的内容并非一成不变，而是在不断地更新，以保证所包含的组件都是最新和有用的。与其他数据一样，组件也会有增删改。我们需要定期对组件库进行维护。

增加：当有新的组件产生时，我们需要通过判断它的拓展性和复用率，以确定是否将它入库。

删除：随着产品的不断升级迭代，如果某个组件已经不用或复用率很低时，我们可以考虑是否要将它删除。

改：不可避免的，组件会随着业务而进行升级，我们可以通过数据埋点和A/B test的方式来确定某个组件是否要进行改动。




由于篇幅过长，我将文章分成三个部分，有兴趣的朋友可以关注我们，期待最后一期吧！

最后一期，我们一起来聊一聊，关于设计规范如何落地，以及在推广设计规范期间，可以提升设计师的哪些个人能力？


感谢你的阅读支持 · 欢迎留言互动

彩蛋福利：赠送大家“10套大厂组件库源文件”感兴趣的小伙伴可以都拿去！

领取方式如下：

大厂设计规范百度链接地址。

链接: https://pan.baidu.com/s/1Kefrq6zs8B60tuqebjXJ1g 密码: 25jw

请您收下吧！

感谢你的阅读支持 · 欢迎留言互动




在快节奏的浮躁的时代中，我们需要保持设计的初心，做有灵魂的设计，我们下篇再见~