一次失败的UI规范制定
前言
在公司中，前端使用了统一的组件element-ui，但是有一些页面大家并没有达成共识，造成了不同的团队开发出来的页面不同，公司决定在24年8月的迭代进行统一调整。在这个中间，我遇到了很多意料之外的问题，希望未来的你遇到了类似的问题，可以尽量避免
为什么会产生这个问题
这个问题我也思考过，大概有以下原因
- 我们有4个产品经理，每个人负责不同的模块，都有各自的风格，造成页面不统一
- 没有一个严格的UI规范，前端开发和测试并没有一个可以参考标准页面
- 22年至今，项目都在疯狂的迭代功能，并没有人停下来看看之前做的功能有哪些问题，我们该怎么去优化
项目背景
参与人：UI设计师、前端开发、产品（主要负责审核，并没参与讨论）、测试
牵头人：UI设计师
职责：找出问题点，整理为在线文档
解决者：前端
职责：整理问题点、改公告组件、输出文档
主要问题如下
- 弹窗（Dialog）组件大小不一。宽度有400px、700px、800px、940px、1250px、50%、60%等，用户在操作的时候，会感觉到页面时大时小，不统一
- 表格样式很多（Table)。搜索的列未对齐、分页码数未统一、表格后的操作栏千奇百怪、表头的标题有的进行了换行等
- 颜色的乱用。颜色有很多，有各种颜色的红色
- 弹窗表单的按钮位置不同。有的取消在左，有的取消在右面。
- 等等一些小问题就不一一列举了
弹窗组件大小不一
弹窗大小不统一部分截图
800px
600px
1180px
解决方案
我们在私服中clone了一份element-ui，直接修改了源码
默认制定了三个尺寸的size，small(600px), medium(900px),large(1200px)，满足基本的需求。当需要支持特殊组件的时候，也可以直接设置Width满足需求
表格不统一
部分截图
上方的截图有几个问题
- 搜索条件（查找人员）没有和新增按钮对齐
- 离职和删除的按钮是比较敏感的操作，但是夹在了一堆按钮中间
- 操作按钮有的有icon，有的没icon，看着些许的混乱
进行修改后效果如下，页面看着更加的工整
解决方案如下
- 搜索条件的第一个在组件内直接进行计算宽度，防止业务端进行二次修改，如果是自定义的搜索条件，并且设置了宽度，需要手动进行修改
- 一些危险的操作：比如离职、删除统一放在最后，并且每个操作按钮都要有icon
表格按钮的调整
调整前
调整后
解决方案如下
表格后的按钮去除所有的icon，直接在组件内进行拦截，默认展示三个按钮，多余的放在dropDown内，当然也支持业务端设置显示几个按钮
核心部分代码如下
分页数据不统一
调整前
调整后
解决方案
分页条数统一改为（20，50，100）
考虑的因素为：之前的页面有15一页的。当页面过高的时候，会撑不满一个页面，造成table的页面空白，不太美观
弹窗中，下方的操作栏的按钮位置不统一
调整前
调整后
解决方案
所有的按钮都是取消在左，保存在右面，同时，confirm组件，在element-ui的代码中直接修改调整位置，减少业务端工作量
颜色的乱用
部分截图
解决方案
在主应用的根节点 使用css变量，在每个子应用的页面直接使用根节点的样式，避免子应用的颜色出现各种奇奇怪怪的颜色。
使用的地方
等等
当然还有一些基础颜色的修改、按钮最小宽度的修改、一些表格间距的调整等。这些和设计师、产品达成共识后，进行修改就行了，也就不一一列举了
交付给测试
- 我这边开发的差不多了，输出了一个文档，别的前端开发按照着文档进行开发。
- 测试按照文档进行编写测试用例
不好搞了
测试这边疯狂提bug。
还有一个小小的背景
测试这边其实是有一个绩效考核：bug提的越多，绩效越高
但是，我们这边项目上线的时候，其实还有一个要求，bug不能超过9个
这个UI规范制定，到这个功能的提测，只有10天就项目上线了。
有的功能并没有做，但是测试觉得不合理，就提了这个bug（比如表单的label也没有对齐，但是这个迭代并没有去做修复），造成我们前端开发这边bug超级多
同时，开发这边也会有绩效考核，bug越多绩效就会越低，会扣除工资，大家心态崩溃了，改的速度根本赶不上提的速度。
当然，也有部分功能是我这边测试不充分，造成业务端不好去实现
找领导协助
这个过程是个很折磨人的过程， 开发同事在抱怨测试乱提、测试也在提本次优化范围外的bug，内心也很着急
- 重新定义了测试的范围，超过范围的问题可以先记着，不再提bug，方便后续进行修改
- 前端开发的bug都先指派给我，我看看能否从底层解决，我解决后再转给研发经理（研发经理没有此项的考核），当底层解决不了，业务端解决后，也指派给我，这样前端的开发就没有这么暴躁了
如果再来一次UI规范的升级我会怎么做
- 先在每个团队中找一个人配合我，先升级页面后，进行灰度测试
- 在决定我们这个页面要成什么样子的时候，一定要拉上产品。设计师在做设计稿的时候，虽然每次都说了找产品的领导确认过了，但是领导还是比较忙， 并没有很多精力来做这件事情，可以找他们组内的一个资历比较深的产品一起讨论下。开发、UI设计师站的角度不同，一定要需要产品来参与讨论，做的页面才会更加的易用
- 限制测试的范围。 测试测着测试着会发散思维，导致改不完的bug，最终会导致开发没有了心态
- UI标准的功能，越早出来越好，越大后期需要投入的人力越多
来源：juejin.cn/post/7456685819047608355
