个人前端规范系列--前言

前言

程序开发"变是常态,不变是很是态"
只有定好不变的规范,并作得足够好,才能更好的应付变化。

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

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

主要优化场景

问字号，看不出行高

未优化

程序员: 很差意思你这个字号多少?
设计师：标你妹有
程序员[打开标你妹 找到页面]：那行高呢？标你妹看不出来？
设计师： 。。。😤
程序员：随便搞个= =😖

简单优化

程序员：这个是多大字号
设计师: 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