上个月我所在的项目进行了一次大的ui改造，
以下是我在此次改造过程中，
关于设计图风格前端复原的一些体验和总结。
一、整体把控
当我们拿到设计图的时候，不应该从某个页面开始直接改css，
可以先带着以下几个疑问，查看整个项目的整体是怎样的，
1、在更改全局性的顶栏、底栏、侧边栏时，是否有相关联的元素位置会跟着同步改变？
2、是否有全局性的固定定位和相对定位的元素？
3、全局性的content内的内容是否已经配置了自适应响应？
在了解项目整体后，再着手进行开发，
能够避免的在开发后期发现比较大的框架问题，保持比较好的开发进度。
二、颜色替换
颜色是用户对界面优化最直观的感受，
我们在还原设计图颜色时可以从以下两个方面入手
1、使用全局 css 文件，更改 ui 框架 的默认 颜色
以ipm使用的ant-design-vue为例：
2、根据 接口 出参渲染的常用 颜色 ， 封装 方法统一使用
三、细节调整
1、边距 padding / margin
边距是我们在进行ui改造时最容易忽略的部分，
所以我们在开发的过程中要通过对padding, margin的缩小，
还原新设计图的元素内边距、外边距、行距、元素之间的距离，（更多边距详见文件结尾的参考书籍）
才能最大限度的还原到设计图风格。
2、 圆角 border-radius
在多个文本元素叠加显示时，圆角的大小对风格有不同的影响
3、阴影 box-shadow
某些页面为了元素过度自然，会需要删除元素自身的边框，改用阴影实现类似边框的效果。
4、快速 开发
如果ui设计师使用的是蓝湖之类的设计软件，
开发可以在蓝湖上点击元素，直接获取部分样式，可以提高开发效率。
但不推荐直接全部使用蓝湖中的所有样式，代码会冗余。
四、结语
总之，设计图风格的还原，可以根据以上的几个方面，
由整体到分部，从浅层到深层，在不影响到原本的使用功能的条件下，进行前端样式的改造。
当然具体的改造重点，还是要根据项目内用户使用频率来进行调整。
无论怎样的设计，都要在用户好的体验感的前提下去实现。
参考书籍：
写给大家看的设计书（罗宾·威廉姆著）
配色设计原理（日本奥博斯科编辑部著）