UI后台设计规范总结 _UI

后台UI设计其实都趋于相同，除了定义的品牌色以及业务逻辑的不同，整理设计控件和模版，实现组件的复用，从而减少开发的成本。以下是一些规范总结。
布局
统一的布局，会让页面统一，并具有秩序之美。设计是感性的，也是理性的，统一的布局以及统一的模度，让界面有有秩序感和韵律感。
统一画板尺寸
后台设计的统一画板尺寸的宽度为1440，一方面为了不同设计师设计的统一性，另一方面在设计师用笔记本演示的时候是全屏的体验效果。
适配
设计画布尺寸和实际屏幕的宽度是有出入的，主流屏幕分辨率从1920、1440、1366以及小屏幕的1280的显示设备，我们设计的时候，可以根据设计需要设置版心的宽度，在主流屏幕中，可以全部显示数据，其他部分留白或者工作区根据设计的布局动态缩放。
1. 左右栏布局
导航栏长度以及位置固定，工作区动态扩展。
2. 上下布局
导航栏上部固定，工作区宽度固定，左右空白间距动态扩展。
布局栅格化
布局采用 24 栅格体系。以 1440x768 大小的画布，对宽度为 1128 的内容区域进行 24 栅格的划分设置，页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
其中： 1 column，1 gutter=24px，总宽度 = 23列 + 1 column，1 列 = 1 column + 1 gutter

文章插图

文章插图
栅格化之后，在设计中，我们可以对布局进行划分，使整体界面整体有序。

文章插图
网格模数
布局保持了 8 倍数的原则、具备动态的韵律感。在1128的栅格化设计中，column/gutter=24px，即8x3 。
在后续的控件的设计中，大小可以采用32px（8x4），40px（8x5）；
在布局的相对间距可以采用8px，16px（8x2），24px（8x3）。
颜色
颜色有品牌色和功能色之分。
主题色
品牌色是根据已有的颜色进行设计，因为后台一般是与客户端配合使用，可以使用与客户端相匹配的颜色。如果自主重新配色的选择话，建议使用冷色系，比如蓝色。因为我们的品牌色，是橙色系，因此在颜色上采用了橙色和深蓝色（补色），橙色不适合大面积使用，整体界面会很亮，蓝色作为补充使用，可使后台界面整体沉稳，更符合后台界面的调性。

文章插图
功能色
功能色主要有四种：成功、链接、警告、错误四种，用来表示信息以及流程的状态。

文章插图
文字色
title/标题
emphasize/强调
body/正文
secondary/二级文字
disable/不可用文字

文章插图
UI元素色
色值给出参考，如果需要重新定义，可以参考颜色的色相和明度
background/背景色
tableHeader/表单背景色
border/描边
divider/分割线

文章插图
文字
网页端文字大小，最小文字一般大小为12px，正文为14px 。配合16px、20px、24px、30px…使用。行间距在字体基础上加8px，12px的行间距即为20px 。

文章插图
图标
图标基于1024x1024的画板上绘制，留出出血位（切图为位图，像素会有一定的扩展），根据里面的形状进行设计，保证视觉的统一。图标尺寸按照8的倍数进行延展。包括圆角以及线的宽度。图标管理可以使用iconfront建立自己的图标库，方便开发以及多次使用。
详细介绍可以参照：https://ant.design/docs/spec/icon-cn

文章插图
按钮
按钮是用户进行点击操作，分类一般为，文字按钮、线性按钮、填充按钮、虚线按钮。
按钮大小可根据8的模数变化，small、default、big，以填充性按钮为例。
交互态，主要为正常、按压，悬停、不可用。
为了统一样式，对于悬停样式，采用文字改变透明度；按压采用按钮背景色变深（填充色采用添加一层10%的黑色蒙板，线性按钮采用添加灰色背景的填充）；不可用按钮，采用灰色背景。