如何搭建B端设计规范

UI设计中经常会遇到B端类产品设计，不同于C端类产品用户较为单一，B端产品则面向复杂的用户角色，其更注重业务逻辑和交互的便利性，主要以容易使用，操作方便为主，为企业降本增效。
提到B端设计就一定离不开设计规范，而设计规范是一个庞大复杂的工程且占有非常重要的一环。那为什么要制定设计规范？设计规范如何制定？我们接着往下看～

一、 设计规范的作用
对内：多人协作的情况下保持设计风格统一，提升产品的一致性，提高团队协作率；避免开发工程师重复开发，提高开发效率，提高设计还原度，降低沟通成本；放便产品迭代，产品经过市场的投放和用户的反馈需要进行调整是可对控件进行调整后应用于整个项目，方便快捷。
对外：统一的设计原则，品牌特征，会加深用户的印象与记忆，帮助用户更好的熟悉产品从而增加信任。

二、 如何制定设计规范

1. 明确设计原则

明确产品设计的边界和风格，产品想要传递给用户的特征，如平台的行业特征是安全感，严肃活泼，那设计规范可制定小圆角，方正的图形，微微圆角的按钮等设计规范。设计原则明确后继续进行下一步～
2.设计图画布尺寸
PC 常见的设计分辨率尺寸有：1920*1080、1440*900、1366*768、1280*800、
1024*768.通常我们会选可以兼容上下游的显示器分辨率1440*900,以这 个尺寸为基础。设计时还要考虑浏览器头部的高度在100-130px之间，电脑底部的工具栏60px左右。

3. 页面框架

页面框架分为左右布局，上下布局。
左右布局：左边菜单和顶部菜单固定不动，左侧菜单可向左收起展开，其它内容根据显示器动态缩放。
上下布局：顶部菜单栏为固定不动，中间留有安全距离，两侧空出留白区域，其它内容根据显示器动态缩放。

4. 栅格布局

确定好页面框架后，我们来确定产品的栅格布局。
栅格可以让我们的页面布局更加规律，也能解决自适应和响应式的要求。页面中去掉顶部导航和侧边导航，左右边距，剩余区域为栅格区域，栅格栏数一般定 12栏 或者 24 栏，因 B 端产品功能大都比较复杂，建议采用 24 栏即可。

5. 色彩规范

通常界面中的颜色分为:主色、功能色、中性色。
主色为产品主要颜色使用范围多，一般选取品牌色或冷色系，若品牌色为暖色系时应尽量选择冷色系，因为B端系统中会有警告和错误等重要提示，而这些都为暖色系，所以为了避免冲突主色系尽量选用沉着冷静商务的冷色系。
功能色为产品中警告，成功，表浅色等颜色，通常选用高亮的颜色作为功能色。
中性色主要应用于产品的文字，分割线，背景，边框等。 合理地选择中性色能够使页面层级更加分明。中性色选取黑色到灰色的色彩范围的时候，尽量向 蓝色区域靠一下，这样的视觉效果会纯净明亮一些。

6. 文字规范

文字规范包括字体、字重、字号、行高。字体使用不超过2种。
字体：windows系统—中文：微软雅黑 英文：Arial
苹果系统—中文：苹方 英文：Sanfrancisco
字重：windows系统—400 500 600
苹果系统—Regular Medium Semibold
字号：字号尽量使用偶数14px、16px、18px 、20px 等自号大小。
辅助文案/小段文本：12px
正文/小标题：14px
大标题：16px-20px
注释/英文：9-11px

工作中经常会遇到有的电脑页面字体显示与设计稿差距较大的情况，通常我们会做多种字体设定供网页的基础 CSS 样式表调用，优先使用各操作系统默认的字体，其次是备用的开源字体，若备用字体没有则显示默认字体。
行高：行高控制在字号的 1.2-2 倍之间，然后根据自己需要和实际效果做决定即可。

8.图标规范

图标的设计要保持大小统一，粗细统一，圆角统一，透视统一。
通常保持一套图标的大小统一需要注意图标的物理尺寸与视觉尺寸，因为几何图形具有视觉的欺骗性，所以为了保持大小统一我们设计图标的时候需要有一个固定的尺寸。在这个尺寸内进行图标设计，图标实际的占位尺寸并不代表实际的图标尺寸。

图标现在是制作完成导出SVG格式后，上传到阿里巴巴的字体图标库中。方便前端调用进行颜色和大小调整。在制作图标时，图标尺寸以偶数尺寸为准。最小尺寸为 16px，最大使用以不超过 48px 为准。

9. 按钮

按钮作为UI设计中必不可少的元素之一，在交互方面也很重要。后台界面的按钮主要有主要按钮、次要按钮、线性按钮、文字按钮、警示按钮。
按钮的样式五种样式：主按钮、默认按钮、线性按钮、文本按钮、链接按钮、禁用按钮。
按钮的四种状态：常规、悬停、选中、点击、禁用。
按钮尺寸定义：宽度一般定义最小按钮尺寸，宽度根据文字适应，高度可设置3-4种尺寸。
按钮摆放位置：从右边到左阅读时——主要按钮放置于次要按钮右侧，从右到做阅读时——主要按钮放置于次要按钮右侧。

10. 表单

表单是由表头、行、列、单元格这些元素构成的，常规的表单控件包括单选、多选、下拉选择、输入框、时间选择、开关选择、图片附件上传等众多控件。
表头文案最多输入8个字符，纵向滚动表格时，表头应保持固定方便用户查看信息。
列数默认展示3-8列，若超出可固定重要列，剩余列滚动条展示交互设计。
列表的宽度：宽度自适应，但根据字段的重要性显示，重要字段优先完整显示。
表格某部分无数据时用 “-” 来填充显示，数据的单元格填 0 即可。
列常见对齐方式一般有左对齐与右对齐，通常情况下建议采用左对齐方式，以便用户高效阅读。两种情况下可采用右对齐方式，一是涉及比较数据大小时，二是位于尾列操作列可采用右对齐。至于居中对齐由于视觉动线曲折，通常不建议在表格中运用。

写在最后：

设计规范的落地需要内部评审进行落地，我们需和开发同事进行规范的沟通。真正按照业务需求执行设计的时候，一定会遇到复杂的界面。当然设计规范的制定是为了在复杂业务中寻求平衡，帮助团队高效完成任务，有些内容适合强制规定，有些内容适合规范一个范围边界，有些内容适合制定一种规律方法，当出现特殊情况时需要重新审视和不断完善灵活使用但是只要我们清楚底层的空间布局、适应方式、再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。