适合小公司前端的 UI 规范

适合小公司前端的 UI 规范

大部分小公司前端开发是不是都会有个困扰，一天到晚做的都是后台管理系统，而且百分之 80 都是表格的增删改查，导致领导觉得前端简单的很，所以连个 UI 都没有，但是每次写完页面又被老大吐槽没有审美，而且如果整个系统多个人开发，每个的风格都不一样，导致整个系统看起来很乱，想要统一又不知道从何入手，所以今天我给大家分享一下我们团队的针对后台管理系统的 UI 规范，希望对大家有帮助。

叠个甲：这个只是我们遵循的规范，因为交互和设计这种东西每个人的感受不一样，你觉得你这个规范我觉得不合理，没关系，你可以按照自己的想法来也可以，只要遵循一个原则，那就是整个系统风格保持一致性即可，所以这个规范仅供参考。

大家都知道后台管理主要就是几部分：表格、表单、弹窗，所以我们的 UI 规范也是围绕这三部分来的。

表格

自适应形式

最小页面宽度+自适应的综合运用，最小自适应页面宽度 1366px(小于此宽度则不再自适应，超出页面的内容使用滚动条查看)，单元格字段过长一行展示不下时，不换行并出现省略号，鼠标移入，提示框显示完整字段。  

表格内行高

场景字号行高适用情况紧凑模式12px42px数据量大的表格标准模式14px48px默认推荐大字号模式16px56px无障碍/老年版 

表格内对齐方式

表头和文字内容：采用左对齐 表头和普通数字：采用左对齐 表头和具有比较场景的数字： 采用右对齐 表头和操作项： 采用左对齐  

分页器

分页器元素：

数据总量、单页面展示数量、翻页部分  对齐方式：

数据总量左对齐，单页面展示数量&翻页部分右对齐(依次顺序为数据总量、单页面展示数量、翻页部分)  分页器位置:

表格为页面全部内容时，表格超出一页分页器固定及底，表格未超出一页分页器跟随表格下方 表格仅为页面部分内容时，分页器跟随表格下方 

表格操作区

按钮类型:

新增数据类按钮 &面向已有数据类的操作按钮(包含可合并类操作按钮)。  对齐方式:

操作区居右，主按钮居右。  视觉样式:

新增数据类按钮样式-【文字+主色底】或【文字+图标+主色底文字+中性色线框】 面向已有数据类的操作按钮样式-【文字+主色底】或【文字+图标+主色底文字+中性色线框】  按钮个数：

小于等于 4 个全部展示 大于四个时候，最后一个按钮为【更多】按钮，点击【更多】按钮后，下拉展示全部按钮  

表格筛选区域

一行最多四个筛选条件，不超过四个的时候查询按钮和重置按钮跟在筛选项后 超过四个筛选条件时，出现【展示更多】按钮，点击【展示更多】按钮后，下拉展示全部筛选条件，【展示更多】变成【收起更多】按钮 如果是时间范围 比如开始时间和结束时间 他独占两个筛选项 默认 label 最多四个字 建议两个字或者四个字 筛选项的宽度建议 200px  

表格滑块

表格为页面全部内容时:

内容无超出:滚动不出现 横向内容有超出:表格内横向滚动条，且默认固定操作和标题列 纵向内容有超出:页面滚动条，表头到达页面顶部，吸顶固定  表格仅为页面部分内容时:

表格区最大高度为 10 行数据+分页器，当 10 行数据+分内器超出页面容器时，表格区最大高度将限制为页面容器的 90% 内容无超出:滚动不出现 横向内容有超出:表格内横向滚动条，且默认固定操作项和标题列 纵向内容有超出:表格内滚动条，固定表头&分页器  

提交/取消操作按钮位置&对齐方式

操作按钮统一采用左对齐的方式，表单域未超出一屏时跟在表单项下方，若超出一屏则固定吸底。

表单页自适应方式&lnput 框长度

当只有单列时，表单域左对齐且定宽 、输入框&选择框长度为 480px、文本框长度为 640px，支持表单项 Label 顶对齐和右对齐。 当出现双列时，表单域左对齐，表单域宽度为页面容器宽度的 80%，自适应布局，仅支持表单项 Label 顶对齐。 当出现三列时，表单域占满整个页面容器，自适应布局，仅支持表单项 Label 顶对齐。  

弹窗

弹窗尺寸:

在未达到弹窗最大尺寸(弹窗最大宽高<页面宽高的 80%)时，弾窗尺寸由内容决定，弹窗内容距离弹窗边距 20px。 滚动条出现在弹窗上，不要出现在整个页面上  弹窗位置:

页面居中。  操作按钮位置:

固定在弹窗底部，整体居左，主按钮在左侧。