中后台设计总结
后台设计规范规律总结
写在前面
设计是有规律和规范可循，后台因为组件可复用性也很高。从接触后台以来，最开始走过很多弯路，跌跌撞撞算是摸到一些门道。本文旨在总结后台大方向的把控，也算是对自己工作一年半的总结，希望对你能少走一点弯路，对自己能不断进步。
全局把控
1.设计尺寸
当我们拿到一个后台需求的时候，我们首先应该了解下这个后台所对应的客户群体，了解主要的屏显分辨率，这样更好确定我们的设计尺寸；现在主流的后台设计尺寸都是1440*900，这个尺寸向上向下兼容性都比较好。当然其实你可以选择你主流客户群体的尺寸做设计，比如我做的是HIS后台，面向的客户群体比较定向单一，刚好他们的电脑也是1440这个尺寸，我就直接选择了1440*900这个尺寸设计。
2.栅格系统
就上图来看，4是整除率最高的一个原子，接下来依次是8、10、6、12。一般的中后台都是选用的8来做栅格系统的原子单位，8的整除率是除了4以外最高（80%）的，以8像素作为一个步进单位的变化，我们视觉上也是能感受到较为明显的差异，因此选取整除率最高的8做为栅格系统的原子单位。而4作为基本原子实在过于小了，太小的步进单位将导致我们决策成本的增加，因为我们将元素间间距增加4px或者减小4px视觉感受到的差异并不明显；而8的整除率是除了4以外最高（80%）的，以8像素作为一个步进单位的变化，我们视觉上也是能感受到较为明显的差异，因此选取整除率最高的8做为栅格系统的原子单位。但是对于需要紧凑型的后台来说4作为原子单位是很好的，比如我做的his系统，以及erp这种数据量庞大的系统，而间距可以设置为4的倍数或者根据实际情况调整为偶数。
3.确定开发用的框架规范
必须跟开发确定所要用的规范，使用框架规范，代码比较规范且能直接引用，节省开发成本。我们做设计及时跟开发沟通使用的规范，我们可以在保证视觉的前提下，尽量向规范中的组件靠拢，节约开发时间。目前国内的框架规范主要是饿了么的element规范（https://element.eleme.cn/#/zh-CN/component/button）和蚂蚁金服的ant design规范（https://ant.design/index-cn），国外比较值得研究的是谷歌MD规范（https://www.material.io/resources
）。
4.使用软件
后台元素复用性比较高，所以最好都能将其组件化，提高设计效率和设计的统一规范性。目前主流软件有三款，如果你是Windows电脑，你可以使用Adobe公司出品的XD，如果你是Mac本，你可以使用sketch这款软件，sketch在设计中应该比较主流，各大设计规范对Mac相对友好，都有sketch的组件插件，易用性比较高。最近兴起的另一款软件也比较流行，那就是Figma,这款软件是一款首次提出网页版的软件，它不挑剔电脑的系统，而且可以同时好几位编辑者对同一画布里的设计进行编辑，设计图存在网页里，无论何时何地都可以修改；当然这款软件也有客户端。而这款软件的缺点在于他们的服务器在国外，网页端的国内网不太稳定，还有一点在于它是英文版，让本不识字的我雪上加霜，网页版是有汉化包的，客户端没有（PS：国内最近大厂都在推这款软件，加之蓝湖收费和不稳定，我们公司也已经转向这款软件了）
全局样式
1.色彩
根据自己所做项目属性确定主色系和辅助色，这样有助于为自己设计的产品提供一致的外观视觉感受。比如ant design的色彩样式规定：
2.布局
根据自己项目实际确定布局，以方便适配和最大空间利用。目前主要有两种布局，一种是左右结构，一种是上下结构。左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。比较适用于中台
上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
上下布局适用于内容相对复杂的后台。我们的后台都是基于全屏做的，左右两边没有进行留白。
3.字体
对于字体进行统一的规范，力求在各个系统展示最佳的效果。由于字体比较容易涉及到侵权，且后台数据逻辑复杂，使用外部字体比较难以加载，一般都是使用电脑自带的字体，也会有一个免费商用字体作为备用。
4.图标
制作统一的图标和风格可以提升整体的设计感和韵律美。Ant design 和MD对于图标的绘制都讲的比较细致和规范，有兴趣可以去研究下。规范的图标是在轮廓线里面绘制的，这样可以保证图标视觉上的大小统一。
5.按钮
在一个系统里面，按钮有主有次，还有功能按钮，是否带有图标，或者纯文字按钮，这里不在赘述
按照以上的步骤是应该算是一个后台好的开始，可以开始制作页面，然后不断完善整个项目的设计规范，这样方便与开发平滑对接，保证项目的统一。至于里面的细节和要注意的实在很多。以上是我对自己做后台项目以来的一点小总结，希望能不断进步。
