前言程序开发"变是常态,不变是非常态"只有定好不变的规范,并做得足够好,才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。现主要涉及如下:图标工程化[好用的图标]颜色语义化,变化标准化[要变大家一起变]高清屏适配[按标准来就行]大小规格化[你要大杯 中杯 还是特大杯]设计可复用化[给设计发好人卡]优先字体规范[我为什么就比你好看]距离产生美[什么才是九头身]如何优雅的切换项目环境[再也不怕搞错环境了]如何设计项目目录和文件存放[终于可以想删就删啦]主要优化场景问字号，看不出行高未优化程序员: 不好意思你这个字号多少?设计师：标你妹有程序员[打开标你妹 找到页面]：那行高呢？标你妹看不出来？设计师： 。。。????程序员：随便搞个= =????简单优化程序员：这个是多大字号设计师: 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