個人前端規範系列--前言

前言

程序開發"變是常態,不變是很是態"
只有定好不變的規範,並作得足夠好,才能更好的應付變化。

該系列文章會把平時工做中常遇到的問題場景拋出並提供解決方案，主要來自本身的學習和整理。

現主要涉及以下:
圖標工程化[好用的圖標]
顏色語義化,變化標準化[要變你們一塊兒變]
高清屏適配[按標準來就行]
大小規格化[你要大杯 中杯 仍是特大杯]
設計可複用化[給設計發好人卡]
優先字體規範[我爲何就比你好看]
距離產生美[什麼纔是九頭身]
如何優雅的切換項目環境[不再怕搞錯環境了]
如何設計項目目錄和文件存放[終於能夠想刪就刪啦]

主要優化場景

問字號，看不出行高

未優化

程序員: 很差意思你這個字號多少?
設計師：標你妹有
程序員[打開標你妹 找到頁面]：那行高呢？標你妹看不出來？
設計師： 。。。😤
程序員：隨便搞個= =😖

簡單優化

程序員：這個是多大字號
設計師: 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