自己的B端（后台管理系统）规范

适配

设计画布尺寸和实际屏幕的宽度是有出入的，主流屏幕分辨率从1920、1440、1366以及小屏幕的1280（超市的收银机）的显示设备，设计的时候，可以根据设计需要设置版心的宽度，在主流屏幕中，可以全部显示数据，其他部分留白或者工作区根据设计的布局动态缩放。

1.左右栏布局

导航栏长度以及位置固定，工作区动态扩展（左导航width:256px，上导航height:64px）

2.上下布局

导航栏上部固定，工作区宽度固定，左右空白间距动态扩展。

统一画板尺寸

后台设计的统一画板尺寸为1440*900，设备为MacBook Pro13寸的，设计软件是墨刀

自由变换区域的分隔方式

采用Element UI的24列；1列 = 1/2gutter + 1column + 1/2gutter；1gutter=24px；此方法解决换行导致的组件无法对齐。

标准字

后台系统通常采用系统默认字体，Windows系统采用中文Microsoft YaHei；Mac系统采用中文PingFang SC;

网页端文字大小，最小文字一般大小为12px，正文为14px。配合16px、20px、24px、30px…使用。

行间距在字体基础上加8px，12px的行间距即为20px。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+8px；

UI元素色

选用logo的颜色或者行业的代表色值

输入框尺寸

输入框的长度可以根据需要调整，但是为了界面的统一，我们以8的模数对高度进行定义，24px、32px、40px。

表格

后台系统设计中，大多数页面是表格设计，注意以下：

对齐方式：文本采用左对齐，数值采用右对齐；

滚动条：表格内容过多时，需展示横向滚动条，序号固定，拖动展示更多内容；

操作按钮：当操作按钮过多时，应进行划分权重，对次级操作进行隐藏；

标题：标题文字过长时，应根据具体情况进行换行或者超过一定字符“…”；

但基本上都是根据Element或者AntD的规范来，看自己开发时候的选择吧，Vue就用Element/iview，React就用AntD，AntD-Vue也不错。

至于其他的按钮，弹框什么的根据开发时所用的前端UI框架走就行，注意主题色的统一