自己的B端(后台管理系统)规范
基于1440*900尺寸下的设计规范,可在MES、CMS、WMS,ERP、SASS等应用界面应用
适配
设计画布尺寸和实际屏幕的宽度是有出入的,主流屏幕分辨率从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框架走就行,注意主题色的统一









































































