共计 1613 个字符，预计需要花费 5 分钟才能阅读完成。
前言
程序开发 ” 变是常态, 不变是非常态 ” 只有定好不变的规范, 并做得足够好, 才能更好的应付变化。
该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。
现主要涉及如下: 图标工程化 [好用的图标] 颜色语义化, 变化标准化 [要变大家一起变] 高清屏适配 [按标准来就行] 大小规格化 [你要大杯 中杯 还是特大杯] 设计可复用化 [给设计发好人卡] 优先字体规范 [我为什么就比你好看] 距离产生美 [什么才是九头身] 如何优雅的切换项目环境 [再也不怕搞错环境了] 如何设计项目目录和文件存放[终于可以想删就删啦]
主要优化场景
问字号，看不出行高
未优化
程序员: 不好意思你这个字号多少? 设计师：标你妹有程序员[打开标你妹 找到页面]：那行高呢？标你妹看不出来？设计师：。。。???? 程序员：随便搞个 = =????
简单优化
程序员：这个是多大字号设计师: xxs 程序员: 那肯定是 12 号了
终极优化后
程序员: 咦这个是解释性文字 那肯定是 12 号字体 18 行高
问颜色, 看不出透明度，动态变化色
未优化
程序员：不好意思你。。设计师: 标你妹???? 程序员：。。。变化后的点击色没有啊 算了自己搞个 = =????
终极优化后
程序员：呀！这就是主题色 #xxx！这个就是警告色 #xxx 那他点击后肯定是加深 10% ????
找图标[各种激活, 边框，实心, 非实心状态]
未优化
程序员: ….[还没发问]设计师: 标你妹程序员: 这个标你妹还真没有。。程序员: 你这个图标在哪里？什么名？设计师: 额！找找。。
优化后
程序员：啊！这个是导航 -➕-‘ 激活 ’-‘ 非实心 ’-‘ 矩形边框 ’ 那肯定就是 nav-plus , 输入 nav 试试 IDE: 你要的是[✅]nav-plus-actived-o-squre [❌]nav-plus-o-squre[❌]nav-plus-actived-o[❌]nav-plus-actived
终极优化方案字体图标方案
程序员: nav-plus-o-squre 嗯嗯这个 激活应该是加个主题色 嗯嗯 直接改色????
改图标, 程序员找目录归属
未优化
程序员：不好意思！你这个页面的这个图标要改设计师：改好了！！给你程序员：不对额！你这名字对不上 算了自己改下。。呀这文件在哪个目录里呢？？
优化后
程序员: 不好意思要改图标 叫 nav-plus-actived-o-squre 设计师: 哦 在导航那的加号啊 好了给你程序员: 嗯嗯! 这个应该就在 icon>@2x>com>nav> 啊果然在这里！！我真是太聪明了 ????
终极优化方案字体图标方案
程序员: 不好意思要改图标 叫 nav-plus-actived-o-squre 设计师: 哦 在导航那的加号啊 这份字体图标给你程序员: 直接覆盖 哈哈????
改图标色系
未优化
程序员: 改一套蓝色色系吧设计师:。。。改好了。。。。给你程序员：我要辞职。。名字全乱了
优化后
程序员: 改一套蓝色色系吧设计师:。。。改好了。。。。给你程序员：还好还好, 可以找到相应的目录 ???? 不然要辞职了
终极优化方案字体图标方案
程序员: 改一套蓝色色系吧 嗯嗯 直接把主题色一改 ????IDE: 生成中 ok????????
图标文字始终对不齐
未优化
程序员: 呀你这个图标切成 长方形了 对不齐啊设计师: 冷漠脸程序员: 算了！我自己调调几天后。。。设计师：换图标了程序员：xxx 又差几像素 再调下算了????
优化后
程序员：图标大小 和 对应字号 一放 咦 刚刚好饿 日了狗了????
要 @X 图
未优化
程序员: 少了 @1x 少了 @2x 设计师：冷漠脸 app 程序员: 额 算了 我直接用 @3x 放在一般看不出来 web 前端工程师: = = 那我怎么办 @3x 文件太大了
优化后
什么都没发生 ????????
不敢随便删除资源文件
未优化
程序员: 这个文件好像用不到了，要不删掉算了 …[被炒鱿鱼]程序员: mmd 我怎么知道你们竟然还用这文件
优化后
程序员: 这张图片是这个组件专用的，那行一起删掉。真是又安全又省心
参考资料
iview 阿里 ant-Design 标准移动高清, 多屏适配方案微信上的 svg
