我的前端规范系列前言

前言

程序开发&＃8221;变是常态,不变是非常态&＃8221;
只有定好不变的规范,并做得足够好,才能更好的应付变化。

该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。

现主要涉及如下:
图标工程化[好用的图标]
颜色语义化,变化标准化[要变大家一起变]
高清屏适配[按标准来就行]
大小规格化[你要大杯 中杯 还是特大杯]
设计可复用化[给设计发好人卡]
优先字体规范[我为什么就比你好看]
距离产生美[什么才是九头身]
如何优雅的切换项目环境[再也不怕搞错环境了]
如何设计项目目录和文件存放[终于可以想删就删啦]

主要优化场景

问字号，看不出行高

未优化

程序员: 不好意思你这个字号多少?

设计师：标你妹有

程序员[打开标你妹 找到页面]：那行高呢？标你妹看不出来？

设计师： 。。。&＃x1f624;

程序员：随便搞个= =&＃x1f616;

简单优化

程序员：这个是多大字号

设计师: xxs

程序员: 那肯定是12号了

终极优化后

程序员: 咦这个是解释性文字 那肯定是12号字体 18行高

问颜色,看不出透明度，动态变化色

未优化

程序员：不好意思你。。

设计师: 标你妹&＃x1f922;

程序员：。。。变化后的点击色没有啊 算了自己搞个= =&＃x1f910;

终极优化后

程序员： 呀！这就是主题色 #xxx ！ 这个就是警告色 #xxx 那他点击后肯定是加深10% &＃x1f606;

找图标[各种激活,边框，实心,非实心状态]

未优化

程序员: &＃8230;.[还没发问]

设计师: 标你妹

程序员: 这个标你妹还真没有。 。

程序员: 你这个图标在哪里？什么名？

设计师: 额！找找。。

优化后

程序员：啊！这个是
导航&＃8211;
&＃x2795;-&＃8216;激活&＃8217;-&＃8216;非实心&＃8217;-&＃8216;矩形边框&＃8217;

那肯定就是nav-plus ,输入nav试试

IDE: 你要的是

[&＃x2705;]nav-plus-actived-o-squre

[&＃x274c;]nav-plus-o-squre

[&＃x274c;]nav-plus-actived-o

[&＃x274c;]nav-plus-actived

终极优化方案字体图标方案

程序员: nav-plus-o-squre 嗯嗯这个 激活应该是加个主题色 嗯嗯 直接改色&＃x1f606;

改图标,程序员找目录归属

未优化

程序员：不好意思！你这个页面的这个图标要改

设计师：改好了！！给你

程序员：不对额！你这名字对不上 算了自己改下。。呀这文件在哪个目录里呢？？

优化后

程序员:不好意思要改图标 叫nav-plus-actived-o-squre

设计师:哦 在导航那的加号啊 好了给你

程序员:嗯嗯!这个应该就在icon>@2x>com>nav> 啊果然在这里！！我真是太聪明了 &＃x1f606;

终极优化方案字体图标方案

程序员:不好意思要改图标 叫nav-plus-actived-o-squre

设计师:哦 在导航那的加号啊 这份字体图标给你

程序员:直接覆盖 哈哈&＃x1f600;

改图标色系

未优化

程序员: 改一套蓝色色系吧

设计师: 。。。改好了。。。。给你

程序员：我要辞职。。名字全乱了

优化后

程序员: 改一套蓝色色系吧

设计师: 。。。改好了。。。。给你

程序员：还好还好,可以找到相应的目录 &＃x1f62d;不然要辞职了

终极优化方案字体图标方案

程序员: 改一套蓝色色系吧 嗯嗯 直接把主题色一改 &＃x1f606;

IDE: 生成中ok&＃x1f606;&＃x1f606;

图标文字始终对不齐

未优化

程序员: 呀你这个图标切成 长方形了 对不齐啊

设计师: 冷漠脸

程序员: 算了！ 我自己调调

几天后。。。

设计师：换图标了

程序员： xxx 又差几像素 再调下算了&＃x1f621;

优化后

程序员： 图标大小 和 对应字号 一放 咦 刚刚好饿 日了狗了&＃x1f923;

要@X图

未优化

程序员: 少了@1x 少了@2x

设计师：冷漠脸

app程序员: 额 算了 我直接用@3x 放在一般看不出来

web前端工程师: = = 那我怎么办 @3x 文件太大了

优化后

什么都没发生 &＃x1f497;&＃x1f497;

不敢随便删除资源文件

未优化

程序员: 这个文件好像用不到了，要不删掉算了&＃8230;

[被炒鱿鱼]程序员: mmd 我怎么知道你们竟然还用这文件

优化后

程序员: 这张图片是这个组件专用的，那行一起删掉。真是又安全又省心

参考资料

iview
阿里ant-Design标准
移动高清,多屏适配方案
微信上的svg