前言：今天讲述的B端产品规范，重点是网页PC端产品设计规范和组的设计拆解，对项目的设计效率提升，有一定价值和意义。同时我们平时做的一些后台管理界面，也适合参考这个B端产品设计规范来进行设计。

在这个团队协作的过程中，团队包括产品经理、体验设计师及开发程序员等测试人员，都要积极的参与讨论，多方并行参与到最后形成一套可以落地执行，满足用户体验设计和产品设计的规范和组件化设计。

一. 接下来具体思考，作为B端产品设计，为什么需要建立设计规范？

对内部：多个设计师合作，依然能保证设计风格的统一，提高设计的效率。

对用户：提高用户体验，提高操作效率，加深对产品的记忆。

2、提高开发效率和还原度

与前端有效沟通的工具，提高设计的还原度，降低对接成本。

开发可以建立公共组件库，极大的提高了开发效率。

按照设计规范建立他们自己的控件库，提高复用率。在设计规范的指导下，开发部门在搭建全局共用控件时，产品设计规则就会更加清晰明了，如：产品设计中的按钮、间距、字体大小、颜色、列表等元素的设计明确。

3、方便产品迭代，辅助设计和开发更好的完成设计的协作

随着产品设计的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷，同时大家遵循设计规范，辅助设计师高效的理解业务，方便了开发查看文档，大家可以更好的进行团队协作。

B端产品，为什么需要建立设计规范的总结，如下图所示。

二. 如何做好 B 端产品设计的规范 ？

对于项目设计评审前，建议产品设计师，先理解功能逻辑和产品设计思维，构思产品设计解决业务的方案。在项目还没开始之前，设计师尽量参与到前期的产品调研和竞品分析等头脑风暴中。换位思考，角色扮演的方式，与我们的上游产品经理沟通，公司产品服务的用户人群是谁、年龄的大致范围和我们的产品设计，解决了用户的具体问题是什么等思考点。

做设计规范要遵循一定的设计规则，具体如下：

对于落地实现，我们需要清楚开发适配的分辨率的尺寸，对于后台系统的分辨率，一般基于来做设计尺寸，然后做其他尺寸的屏幕适配。如下图所示。

我们了解公司项目背景后，我们就开始定位产品的设计风格，根据产品原型出几张符合产品风格的设计稿，

主要包括项目的主界面的设计风格，包括界面设计的颜色、按钮、表格、表单、弹框等元素样式的设计。

1 确定产品设计的优先级

2 确定设计规范的书写

3 逐步对单个规范进行整理与书写，原则上一条说明附加一个界面示例

下图是具体的设计规范和设计规则的思考：如下图所示。

接下来先看网页端通用的设计规则：如下图所示。

主色调的选择，根据用户群、使用场景及产品定位来思考。对后台设计的系统来说，系统可做皮肤功能的扩展，给用户一个基础色，然后做配色好的皮肤，让用户自由选择。客户都想要根据自己品牌色来做自己的设计系统，拥有多套可选择的方案，比如：百度网盘皮肤的多套方案设计。

建议设计时，整体色彩不宜超过 3 种，并遵循其对比原则，突出色彩的层次感。整套界面的色彩尽量少、思考不同用途的颜色意义。如下图所示。

中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，正确的使用中性色能够让界面信息具备良好的主次关系，提升用户好的阅读体验。下方中性色板一共包含了从白到黑的 8 个颜色。如下图所示。

在 CSS 中，所有颜色都以 16 进制色值来进行书写，如:#a0a0a0

这里以时间轴为例，思考色彩的含义：如下图所示。

-绿色表示已完成、成功状态；

-红色表示警告或错误状态；

-蓝色表示当前进行中或其他默认状态；

-灰色表示未完成或失效状态；

标准字的选择，如下图所示。

后台系统在字体选择，中文：微软雅黑；英文：Arial即可。

标题类一律用Medium，以突出层级关系，让信息更清晰。

原因：字重 Medium 兼容性更强，在用微软雅黑这种字体时也能较好的显示正文。

当需要强调的时候，建议使用 Medium 和颜色等设计处理；

另外考虑到数字和西文字体本身面积较小，建议使用 Semibold，使得中西文混排时更加舒适美观。

字体以不超过 2 种字体为准，特殊情况除外。
字体大小号的选择以14px、16px、18px 等偶数字体大小为准。
中文采用标准字体:“微软雅黑”、“宋体”，英文采用“Arial”，不能使用特殊字体(如 隶书、草书等，特殊情况广告图可用图片替代)，来保证用户的阅读体验。

控件里的文字，尽量使用大小统一的字体属性。

“微软雅黑”为主，“宋体”为辅的使用原则，用加粗的方式表达加强突出效果。

菜单标题字体大小:最小取 16px，最大取 20px。

正文标题字体大小:最小取 24px，最大取 32px。

一般情况下，正文字体大小以 14px 为准，特殊情况下可以加粗或取 16px 大小的字体。

所有字体样式颜色组合需要尽量通过 3:1 的 WCAG AA 标准。

图标的思考：如下图所示。

图标现在是制作完成后，上传到阿里巴巴的字体图标库中。前端调用起来更方便，调整图标的大小和颜色就好。

在制作图标时，尺寸以偶数尺寸为准。
为保证图标的显示效果，最小尺寸为 16px。

为保证 Web 页面的整体效果，图标的最大使用以不超过 48px 为准。

滚动图片的动画则使用多张 png、jpg格式图片即可。

图片文件大小的控制(单位 KB)：

为保证图片的浏览速度，图片大小以保证图片质量的前提下越小越好。

图片大小上限以 100kb 为准，超出 100kb 的，可考虑分成多张图片显示。

图片分辨率：统一为 72 像素。

以居中或居左对齐为准，同一内容区域内的图片要做到大小统一，对齐方式统一。

我们在设计过程中，需要考虑我们基于什么样的尺寸进行基础设计。划分哪些区域需要固定尺寸、哪些需要做适配等。据统计，使用中系统的用户的主流分辨率主要为 1920、1440 和 1366。

我们一般基于1440设计。

比如：zan design的布局是使用统一的元素和间距来保持各个平台的体验的一致性。

统一屏幕尺寸的间距和跨平台的设计模式，给用户带来更好的体验感。

设计思考，有如下几点：