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