前言
最近这一个多月工作比较忙碌，因为我们组的项目进展到了较为深入的阶段，不再处于前期的功能堆砌阶段，因此也需要更加精细化并且有针对性地去优化项目，在这其中的一个优化点就是针对UI样式和优化。
但是又因为项目前期开展的时候时间较紧，所以一些必备工作并没有进行，以及后续在项目中对UI样式的放飞自我，导致最近在不停地重复地进行UI修复，大大地降低了工作效率。
问题描述和产生的原因
-
问题描述
-
设计图不一致
首先就是设计图上的问题， 每次版本所设计出来的相同功能的模块样式不统一，比如下面两张图:
三个星期前的版本
三个星期后的版本，字体变小颜色变浅，间距拉大
很明显就能看出来同样是副标题，前后间隔了几个星期出的版本设计样式就是不一样，这个例子是一眼就能看出来问题的。而有些就不一定了，又比如下面这两张图:
image.png
image.png
这是不同的版本相同模块间的字体颜色变化，而这个变化并不是通过某些规则制定出来的，纯粹的就是拿了个看起来类似的颜色就这么往上放了。
而这个问题还不是在一两个版本间产生的，每一次的设计图都会有一些非常细微但是又没有经过商讨的变化出现，包括但不限于字体大小，字体颜色，背景色，间距，边框粗细等。
这样做就导致了下面一个更大的问题。 - 前端放飞自我
大家都知道在现代的前端开发流程中我们会使用一些css的预处理器，例如sass，less等，而这些预处理器都包含有样式变量的功能，因此我们凭借功能来制定一些样式变量，然后在个个需要的地方引入这些变量， 例如下图的字体大小变量:
字体大小变量
这样做的好处是以后要修改某些样式的话只需要修改这个变量即可。
这一步我们前端开始进行项目搭建的时候是有执行的，但是后来因为第一个问题(设计图样式不统一)，导致后来又变回了每个颜色都单独去写一遍，前期设定的变量基本作废。
这样做的后果就是样式难以维护，最近很大的一部分时间都花在一个一个样式的修改上了。 - 没有UI审核流程
这个问题其实一直都有，只是因为项目当时还处于功能堆砌阶段，对UI样式的重视程度不足，所以也一直没有进行审核，有时候在某些地方少了一两个像素也不一定看得出来。而等到项目进入精耕细作阶段，开始重视UI时， 就会发现做出来的应用每个模块单看还是可以的，但是一放到整体来看就会有不对称、别扭等问题的产生。 - 每个人对UI样式的理解不同而导致前端重复工作
这个问题纯粹就是由流程不规范导致的，表现为在UI设计图出来后，前端着手工作，因为在做出来成平之前其他职能并不了解设计图是怎么样的， 所以等成品出来后大家一看就觉得这也不对那也不好，然后设计师再出图，前端再做。这回导致很多无用功，大量的时间被浪费，而且会削弱积极性。
-
-
问题产生的原因
其实上面三个问题的产生都是基于一个原因的，就是在项目初期阶段，并没有针对UI样式和交互方式制定一个统一标准，这样会导致设计师在设计产品图的时候处于一种无头苍蝇的状态(有时候是直接copy之前设计的样式，有时候又是自己再写一份样式)，然后我们不难发现这是一个连锁反应:
没有制定统一的UI样式标准 -> 设计师设计产品图没有基点 -> 样式设计不统一 -> 前端干活放飞自我 -> 不停地返工
解决方案
在项目现阶段功能堆砌基本完成的情况下再去制定UI标准，时间花费上肯定比在项目初期就制定要长很多，但是整改UI又是当前马上就要做的事，所以在和设计，产品等职能讨论后得出了比较适合当前阶段的解决方案:
-
标准制定
因为时间上的紧迫，所以我们决定先制定一些基础的标准，例如颜色字体等标准，如下图:
image.png
然后再将项目分割成几个大的模块，每一块再制定相应的标准(间距，表现形式，交互等)，最后等到每个模块的标准都制定完成，项目的UI整改也告一段落后，再将每个模块的标准进行统一。
- 流程规范
在现有开发流程中设定UI评审和UI审核阶段，从设计出图到前端完成都需要进行，流程大致如下:
产品需求会 -> 设计师出图 -> UI评审(所有相关人员参与) -> 前端接手 -> UI审核(设计师进行审核，类比于测试)
后记
发现并解决问题是一名程序员最根本的工作，目前我们项目组已经开始实行上述的解决方案， 并且得到了一定成效。 但是又因为在工作流中新的步骤加入，也产生了其他的一些问题: 比如时间上太紧不能很好执行等，并且在可预见的未来，随着包含但不限于UI样式的各种标准的制定并统一，这些标准的维护成本肯定也会越来越高，所以依然是任重而道远，目前在这些新出现的问题上也还没有想到什么更好的办法，只能是在后续见招拆招了。
网友评论