B端基础规范1

一、画布尺寸：

以往设计常用1920*1080作为画布尺寸，后来在实际项目中发现这个尺寸做出的画面会出现滚动条。比如登录页，注册页这种信息较少，一屏即可显示完的，是不需要竖向滚动条的。通过调研系统常用浏览器—谷歌，排除浏览器顶部和windows底部状态栏，我们将画布尺寸修改为1920*937，再也没有出现滚动条的情况啦~

二、常见页面布局及尺寸

今天主要介绍B端常见的一种页面布局

侧边导航宽度，主要考虑二级菜单字段的长度，如果二级菜单不是特别长，或者特别短的情况下，可以设计成208像素。

三、模块间距

模块间距：亲密性原则—通常关联度高的模块会距离近一些，关联度低的模块距离会远一些

常用模块间距为：16px，24px，32px（此处依然是8的倍数）

四、元素间距

元素间距：指文字与组件之间，组件内部元素之间，组件与组件之间的间距

常用元素间距为：4px，8px，16px，24px

以下以单选框、步骤条、下拉菜单为例附图说明：

五、图标规范

图标常用的几种尺寸参考：XS=12*12px / S=16*16px / M=20*20px / L=24*24px / XL=32*32px / XXL=48*48px

六、图标设计

1、图标设计规则包括：画板尺寸、出血位、内容绘制区域、图标线条粗细、图标圆点大小、图标圆角、斜角度、基础图形参考区等。

2、keyline线绘制图标：按照规则绘制通用性图标，能保证图标的大小统一，但有时候需要做视觉上的平衡和微调。

画图标的时候需要注意所有图标最后都要合并路径，便于上传阿里库。

附上keyline线的教程链接：https://baijiahao.baidu.com/s?id=1681239159266631621&wfr=spider&for=pc

附上图标设计的规范，来源iconfont

怕麻烦的小伙伴可以直接去iconfont下载图标设计模板，也是按照keyline线绘制的哦，链接附上

https://www.iconfont.cn/icons/upload?spm=a313x.7781069.1998910419.d7543c323&projectId=2613184

七、圆角规范

B端设计一般偏理性简约，不会用一些大圆角（儿童活泼风格的除外），因此圆角建议2px或者4px。

八、按钮规范

按钮有五种类型：主按钮、次按钮、文字按钮、图标按钮和虚线按钮。如图

按钮高度：常用的按高度可设定为：24px、32px、40px，通常项目中我使用32的尺寸较多。以主按钮、描边按钮、文字按钮为例，如图

最后附上两个B端框架链接，可参考：

https://adminpro.iviewui.com/  （View UI 设计B端框架）

https://preview.pro.ant.design/（Ant Design设计B端框架）