写给小公司前端的 UI 规范
大部分小公司前端开发是不是都会有个困扰，一天到晚做的都是后台管理系统，而且百分之 80 都是表格的增删改查，导致领导觉得前端简单的很，所以连个 UI 都没有，但是每次写完页面又被老大吐槽没有审美，而且如果整个系统多个人开发，每个的风格都不一样，导致整个系统看起来很乱，想要统一又不知道从何入手，所以今天我给大家分享一下我们团队的针对后台管理系统的 UI 规范，希望对大家有帮助。
叠个甲：这个只是我们遵循的规范，因为交互和设计这种东西每个人的感受不一样，你觉得你这个规范我觉得不合理，没关系，你可以按照自己的想法来也可以，只要遵循一个原则，那就是整个系统风格保持一致性即可，所以这个规范仅供参考。
大家都知道后台管理主要就是几部分：表格、表单、弹窗，所以我们的 UI 规范也是围绕这三部分来的。
顺便吆喝一句，技术大厂机会，前后端测试捞人，待遇还可以，感兴趣可以试一试。
表格
自适应形式
- 最小页面宽度+自适应的综合运用，最小自适应页面宽度 1366px(小于此宽度则不再自适应，超出页面的内容使用滚动条查看)，单元格字段过长一行展示不下时，不换行并出现省略号，鼠标移入，提示框显示完整字段。
表格内行高
| 场景 | 字号 | 行高 | 适用情况 |
|---|---|---|---|
| 紧凑模式 | 12px | 42px | 数据量大的表格 |
| 标准模式 | 14px | 48px | 默认推荐 |
| 大字号模式 | 16px | 56px | 无障碍/老年版 |
表格内对齐方式
- 表头和文字内容：采用左对齐
- 表头和普通数字：采用左对齐
- 表头和具有比较场景的数字： 采用右对齐
- 表头和操作项： 采用左对齐
分页器
分页器元素：
- 数据总量、单页面展示数量、翻页部分
对齐方式：
- 数据总量左对齐，单页面展示数量&翻页部分右对齐(依次顺序为数据总量、单页面展示数量、翻页部分)
分页器位置:
- 表格为页面全部内容时，表格超出一页分页器固定及底，表格未超出一页分页器跟随表格下方
- 表格仅为页面部分内容时，分页器跟随表格下方
表格操作区
按钮类型:
- 新增数据类按钮 &面向已有数据类的操作按钮(包含可合并类操作按钮)。
对齐方式:
- 操作区居右，主按钮居右。
视觉样式:
- 新增数据类按钮样式-【文字+主色底】或【文字+图标+主色底文字+中性色线框】
- 面向已有数据类的操作按钮样式-【文字+主色底】或【文字+图标+主色底文字+中性色线框】
按钮个数：
- 小于等于 4 个全部展示
- 大于四个时候，最后一个按钮为【更多】按钮，点击【更多】按钮后，下拉展示全部按钮
表格筛选区域
- 一行最多四个筛选条件，不超过四个的时候查询按钮和重置按钮跟在筛选项后
- 超过四个筛选条件时，出现【展示更多】按钮，点击【展示更多】按钮后，下拉展示全部筛选条件，【展示更多】变成【收起更多】按钮
- 如果是时间范围 比如开始时间和结束时间 他独占两个筛选项
- 默认 label 最多四个字 建议两个字或者四个字
- 筛选项的宽度建议 200px
表格滑块
表格为页面全部内容时:
- 内容无超出:滚动不出现
- 横向内容有超出:表格内横向滚动条，且默认固定操作和标题列
- 纵向内容有超出:页面滚动条，表头到达页面顶部，吸顶固定
表格仅为页面部分内容时:
- 表格区最大高度为 10 行数据+分页器，当 10 行数据+分内器超出页面容器时，表格区最大高度将限制为页面容器的 90%
- 内容无超出:滚动不出现
- 横向内容有超出:表格内横向滚动条，且默认固定操作项和标题列
- 纵向内容有超出:表格内滚动条，固定表头&分页器
表单
表单项 Label 与控件的对齐方式&必填标识
- 表单项 Label 和控件对齐方式
- 当表单项 Label 过长(6 个中文字符以上)，采用顶对齐方式布局。当表单项 Label 在 6 个中文字符以内，使用右对齐方式布局。 对齐布局;
- 当表单项在 15 个以下时，采用单列布局方式，当表单项在 15 个以上时，采用多列顶对齐方式布局。
- 表单项 Label 和必填标识对齐方式
- 表单项 Label 右对齐布局时，必填示识放在标题前;
- 表单项 Label 顶对齐布局时，必填示识放在标题后;
提交/取消操作按钮位置&对齐方式
操作按钮统一采用左对齐的方式，表单域未超出一屏时跟在表单项下方，若超出一屏则固定吸底。
表单页自适应方式&lnput 框长度
- 当只有单列时，表单域左对齐且定宽 、输入框&选择框长度为 480px、文本框长度为 640px，支持表单项 Label 顶对齐和右对齐。
- 当出现双列时，表单域左对齐，表单域宽度为页面容器宽度的 80%，自适应布局，仅支持表单项 Label 顶对齐。
- 当出现三列时，表单域占满整个页面容器，自适应布局，仅支持表单项 Label 顶对齐。
弹窗
弹窗尺寸:
- 在未达到弹窗最大尺寸(弹窗最大宽高<页面宽高的 80%)时，弾窗尺寸由内容决定，弹窗内容距离弹窗边距 20px。
- 滚动条出现在弹窗上，不要出现在整个页面上
弹窗位置:
- 页面居中。
操作按钮位置:
- 固定在弹窗底部，整体居左，主按钮在左侧。
总 结
我之前也在小公司待过，能充分了解小公司的现状，别说 UI 了，有的直接是连前端都不要，管你什么 UI，时间长了就麻木了，想进步却找不到方向，所以希望这个规范能帮助到你，让你在 UI 规范方面有所提升。 因为只是我们总结的一套规范，其实还有很多不足，你完全可以在这个基础上，根据自己的需求，进行修改和优化，比如你觉得表格删除按钮必须是红色，弹窗的按钮放在右下角更合理，不喜欢筛选项有什么展开收缩等等这些你都可以根据自己的需求进行修改，还是那句话，整个系统风格保持统一。 如果大家有自己团队的规范，也可以评论区发出来共享一下大家相互学习一下。
——转载自：前端摸鱼杭小哥