自己的B端(后台管理系统)规范

南京/产品设计师/5年前/3959浏览
自己的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框架走就行,注意主题色的统一

33
Report
|
91
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
B端管理系统
B端管理系统
B端管理系统
B端管理系统
作品收藏夹
后台
后台
后台
后台
作品收藏夹
后台设计
后台设计
后台设计
后台设计
作品收藏夹
后台
后台
后台
后台
作品收藏夹
学习-后台管理
学习-后台管理
学习-后台管理
学习-后台管理
作品收藏夹
UI/UE设计
UI/UE设计
UI/UE设计
UI/UE设计
作品收藏夹
大家都在看
Log in