我的前端范例系列--媒介

媒介

顺序开辟”变是常态,稳定黑白常态”
只要定好稳定的范例,并做得足够好,才更好的敷衍变化。

该系列文章会把日常平凡事情中常碰到的题目场景抛出并供应解决计划,重要来自本身的进修和整顿。

现重要触及以下:
图标工程化[好用的图标]
色彩语义化,变化规范化[要变人人一同变]
高清屏适配[按规范来就行]
大小规格化[你要大杯 中杯 照样特大杯]
设想可复用化[给设想发大好人卡]
优先字体范例[我为何就比你悦目]
间隔发作美[什么才是九头身]
怎样文雅的切换项目环境[再也不怕搞错环境了]
怎样设想项目目次和文件寄存[终究能够想删就删啦]

重要优化场景

问字号,看不出行高

未优化

顺序员: 不好意思你这个字号若干?

设想师:标你妹有

顺序员[打开标你妹 找到页面]:那行高呢?标你妹看不出来?

设想师: 。。。😤

顺序员:随意搞个= =😖

简朴优化

顺序员:这个是多大字号

设想师: 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

    原文作者:好炫
    原文地址: https://segmentfault.com/a/1190000018757889
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞