1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 用户体验 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

构建方便统一的icon体系--九分科技

时间:2020-06-05   分类:用户体验    作者:网络   来源:网络整理   点击:168

构建方便统一的icon体系--九分科技

copyright 9fen.net

在很久以前,icon还没有统一的概念,设计师喜欢利用他们天马行空般的想象力在需要的地方画出自己喜欢的icon,这个时候前端的工作就是:
step1:在效果图上找到icon,切割图片

copyright 9fen.net

step2:上传icon至服务器

九分网络

step3:做为img元素或者背景来实现效果 九分网络

……

www.9fen.net

在以前,大家开始意识到icon作为网站中路标性质的东西理应统一,杂乱的icon不仅使用户茫然,还使得网站的开发、维护成本大大增加。于是就有了全站统一的icon以及与之配套的使用规范: copyright 9fen.net

这个时候前端做的是:

内容采集来自9fen.net

step1:找到需要使用的icon,获得线上url

九分网络

step2: 做为img元素或者背景来实现效果 内容采集来自9fen.net

……

九分网络

相比很久以前,这种方法统一了icon,统一了icon地址,不需要再为更改某个icon而抓狂。但是却给css sprite带来了一个问题!因为每个icon的url都分开,加载页面时会有N多的http请求,一下子使原本牛B的页面变成牛D甚至牛E。于是大家都开始把这个唯一的url作为获取icon的简便途径,icon图片本身还是合并在页面整体的背景图里面。但这样一来,icon的维护成本有高了。

www.9fen.net

思考:既然网站已经开始统一icon,那何不将所有icon合并在几张背景图上来方便调用呢? 本文来自九分网络

尝试开始:

九分网络

已有规范1:中文站目前绝大多数的icon是12px和16px两种,其中12px的icon是指高度为12px,宽度12px左右(不一定12px),见上图说明,16px的icon宽高都为16px;

copyright 9fen.net

已有规范2: 中文站目前主要正文字号就12px和14px两种;

内容采集来自9fen.net

已有规范3:中文站目前行高主要是1.5倍和1.8倍两种;

www.9fen.net

已有规范4:中文站目前的间距是8px; 内容采集来自9fen.net

基于以上规范,我们把全站的icon分成3类,按照一定的规律排布在3张不同的背景图片上,每张图片大小不超过15k,如下图所示: www.9fen.net

www.9fen.net

每个icon都有12px和16px两个版本,两个版本排在一行上, 上下每行间距40px。纵向第一排icon都是12px大小的,每个icon的中心对齐在距图片左边14px的线上,纵向第二排icon以416px中心线对齐。==,这些数字是怎么来的? 内容采集来自9fen.net

首先、40px和400px只是经验值,熟悉css sprite的人都知道给icon留空隙用的,对于目前的中文站来说这些预留的空隙可以满足绝大多数的需求。

九分网络

其次、14px的由来是因为已有的规范1和规范4,icon宽度12px左右同时间距为8。即指icon距文字起始处8px,和文字的间距也是8px(从这里开始–8px–假设为12px的icon–8px–文字文字)。所以icon的中心一定是在8px+8px+12px/2=14px,16px同理为8px+8px+16px/2=16px。这样就可以保证icon在横方向的对齐。 www.9fen.net

最后、icon在纵向上的对齐则在预设的css中完成,根据已有的规范2和规范3,我们可以为每个icon设置两种class,分别对应行高为16px(12px*1.5)和22px(12px*1.8)的情况。 copyright 9fen.net

这样一来,我们就可以通过预设class的方式把网站的icon全部整理完毕。调用时只需要将相应文本display属性设为block,然后根据情况为他添加2个class名即可:

copyright 9fen.net

调用示例: 本文来自九分网络

1 2 3 4 5   <ul> <li>我是一个icon</li> <li>我是一个icon</li> <li>我是一个icon</li> </ul>  

class名说明:

九分网络

copyright 9fen.net

class名说明1、第一个class(如”icon-a”),需要使用的icon所在的背景图。icon-a:箭头相关的icon集合;icon-n:数字相关的icon集合;icon-b:品牌相关的icon集合;icon-c:通用普及类icon

内容采集来自9fen.net

class名说明2、第二个class(如”p120222″)指明了具体使用的icon和对应的文本的行高。由”p”+”6位数字组成”。6位数字的前2位指明了该icon的大小。有12和16两种可选;中间2位数字指明了该icon在背景图中的纵向位置;最后2位表示所处文本的行高,有18,21,22,26四种可选。 九分网络

class名说明3、所有的icon以背景图的形式存在于已合并的4张icon图片中。如果需要使用的文本的行高不在已经预先定义的行高中则需要自行设置背景图片的background-position。 九分网络

icon及class对照表:

九分网络

最后一步的工作简单而重要,我们需要把每个icon和他的class名一一对应起来做一个方便查阅的表:

copyright 9fen.net

构建方便统一的icon体系--九分科技

内容采集来自9fen.net

www.9fen.net

搞定! 内容采集来自9fen.net

这样一来,前端的工作流程将变成: 九分网络

step1:在表中找到需要的icon 本文来自九分网络

step2:填写class名 九分网络

简单粗暴,快速提高前端的开发效率,符合我们的特色,呵呵。

内容采集来自9fen.net

标签: 用户体验

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----