B端产品设计规范
开篇说：
上一篇，我写过一篇综合类的设计规范和适配。
这一次我想重点写一下：网页PC端产品设计规范和组的设计拆解，对项目的设计效率提升，有一定价值和意义。
分析项目设计中的组件，设计元素，设计规范与设计稿到开发的最后，尽可能保证产品设计还原的一致性。
思考项目设计的实际场景，团队来调整优化产品设计整体方案和设计细节、优化产品交互和设计的一个过程。
在这个团队协作的过程中，团队包括产品经理、体验设计师及开发程序员等测试人员，都要积极的参与讨论，多方并行参与到最后形成一套可以落地执行，满足用户体验设计和产品设计的规范和组件化设计。
一. 接下来具体思考，作为B端产品设计，为什么需要建立设计规范？
1、保证设计的一致性
对内部： 多个设计师合作，依然能保证设计风格的统一，提高设计的效率。
对用户： 提高用户体验，提高操作效率，加深对产品的记忆。
2、提高开发效率和还原度
与前端有效沟通的工具，提高设计的还原度，降低对接成本。
开发可以建立公共组件库，极大的提高了开发效率。
按照设计规范建立他们自己的控件库，提高复用率。在设计规范的指导下，开发部门在搭建全局共用控件时，产品设计规则就会更加清晰明了，如：产品设计中的按钮、间距、字体大小、颜色、列表等元素的设计明确。
3、方便产品迭代，辅助设计和开发更好的完成设计的协作
随着产品设计的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷，同时大家遵循设计规范，辅助设计师高效的理解业务，方便了开发查看文档，大家可以更好的进行团队协作。
B端产品，为什么需要建立设计规范的总结，如下图所示。
二. 如何做好 B 端产品设计的规范 ？
对于项目设计评审前，建议产品设计师，先理解功能逻辑和产品设计思维，构思产品设计解决业务的方案。在项目还没开始之前，设计师尽量参与到前期的产品调研和竞品分析等头脑风暴中。换位思考，角色扮演的方式，与我们的上游产品经理沟通，公司产品服务的用户人群是谁、年龄的大致范围和我们的产品设计，解决了用户的具体问题是什么等思考点。
做设计规范要遵循一定的设计规则，具体如下：
对于落地实现，我们需要清楚开发适配的分辨率的尺寸，对于后台系统的分辨率，一般基于1440x900来做设计尺寸，然后做其他尺寸的屏幕适配。如下图所示。
我们了解公司项目背景后，我们就开始定位产品的设计风格，根据产品原型出几张符合产品风格的设计稿，
主要包括项目的主界面的设计风格，包括界面设计的颜色、按钮、表格、表单、弹框等元素样式的设计。
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的布局 是使用统一的元素和间距来保持各个平台的体验的一致性。
统一屏幕尺寸的间距和跨平台的设计模式，给用户带来更好的体验感。
设计思考，有如下几点：
1.保证画布尺寸的一致性原则。
2.统一的网格单位。
3.统一的栅格系统。
4.视觉元素的统一和对齐等。
目前显示器分辨率主要有：
16:9 的有：1920×1080 、1600×900 、1366×768
16:10 的有：1920×1200 、1680×1050、 1440×900
一个完整的web页面必须由以下三部分构成:
头部区域header 、主体区域main、底部区域footer。如下图所示。
边距