前端不止：请告诉我，你要什么样的图标

2018-01-12 09:31:05 来源：易采站长用户投稿作者：admin

　　有一个英语成语叫做一绘胜千行(A picture is worth a thousand words)，没有晓得各人有无听过?它是指的是一张静态的图片便可表达一个庞大的观点大概取一个主题相干的图片偶然比起具体的注释，可以更有用的形貌有闭主题。

　　假如我们要用一句话去阐明图标的做用，出有比那个成语更合适的词了。本篇文章，我们便去聊聊闭于图标的一些工作。

　　一个图标的死命周期(事情流程)

　　闭于图标的死命周期，正在我小我私家所阅历的开辟项目中，有以下两种：

　　第一种方法：图标库(挑选阶段) -> 图标利用(开辟阶段)

　　第两种方法：图标设想(设想阶段) -> 图标导出(相同阶段) -> 图标利用(开辟阶段)

　　普通去道，小公司大概自力开辟者会接纳第一种事情流程。而年夜型构造或公司果为具有更完美的团队战资本，普通会采纳第两种方法，可以得到更多自立权战成立企业VI(Visual Identity，企业视觉辨认)的才能。

　　但不管哪一种方法，皆包罗两个脚色：设想师战Web开辟。只是正在第一种事情方法中，设想师是不成睹的。

　　图标的设想战利用

　　设想阶段凡是是由没有理解Web开辟的设想师们去完成的，他们会按照产物的需求，画出满意需供的图标，然后交给Web开辟职员利用。

　　(ThoughtWorks民网“Contact with us”图标)

　　为何要先引见图标的利用，而一笔跳过导出历程呢?本果很简朴，果为我们需求先晓得效劳的工具是谁，才晓得怎样准确的为它效劳。

　　常睹的三种图标的利用方法

　　1. 利用图片

　　间接将设想师绘好的图标，以PNG格局的图片一个个别离导出，那是最曲不雅的图标挨包方法。

　　(FlatIcon图标)

　　它的长处是：

　　可以利用彩色的图标

　　可以撑持年夜部门阅读器

　　缺陷是：

　　图标巨细是牢固的(不克不及按照场景自在缩放)

　　Retina屏幕需求两倍图

　　开辟职员拿到那样的图标，凡是需求先将其分解为一张图片，以便利造做雪碧图，那个历程能够由开辟职员本人完成，也能够由设想师去做(设想师能够按照源文件中间导出一张包罗一切图标的PNG文件造做)。

　　造做雪碧图的东西有许多，我比力经常使用的正在线雪碧图东西是：Sprite Cow，大概是NodeJS仄台下的构建东西插件，如：webpack-spritesmith。

　　2. 间接利用svg

　　利用SVG(可缩放矢量图形)，W3C尺度是最被看好的Web端图形处理计划。它能供给如裁剪途径、Alpha通讲、滤镜结果等庞大衬着才能，具有传统图片出有的矢量功用，借能够被记事本等浏览器、搜刮引擎会见。

　　设想师能够沉紧的正在设想画图硬件(AI，PS)的协助下导出SVG格局的图标/图片。

　　但今朝，海内svg借出有被十分普遍的利用，本果正在于兼容性不敷，不克不及够很好的兼容旧的IE版本战一些Android本死阅读器。

　　(Can I use svg?)

　　上图为百度对2017年前三个月的阅读器利用停止的统计，今朝海内借有超越20%的用户仍正在利用IE8，9以至是IE7。

　　3. IconFont

　　IconFont是今朝最为盛行的图标处理计划，望文生义，它便是字体文件，您能够用任何一个字体编纂东西翻开它，假如您翻开某一个检察，便会发明它便是一些途径，那些途径能够用AI，PS，Sketch等硬件去画造。

　　IconFont的长处正在于可以用CSS掌握款式，有限缩放而没有得实，撑持IE7+，统筹屏幕浏览器，不外缺陷是不克不及撑持彩色图标(具有多种色彩的图标)。得到IconFont的方法也很简朴，设想师将图标经由过程AI/PS转成SVG文件，然后由开辟职员经由过程东西(正在线大概当地)转换为IconFont，好比：外洋的icomoon.io，海内的iconfont.cn，开源构建东西插件有gulp-iconfont等等。

　　发生合适Web开辟的图标

　　“发生合适Web开辟的图标”是我们本篇文章要存眷的重面。

　　1. 利用图片的方法

　　假如开辟职员间接利用图片，则相对简朴，设想师只需求针对一般屏幕战Retina屏幕筹办两套图(单倍图战两倍图)。

　　以海内某出名的中文小道浏览网站为例，会针对差别的装备利用差别倍数的logo图片，以包管正在如Retina屏幕下的明晰度。

　　.logo-wrap .logo a {

　　display: block;

　　width: 219px;

　　height: 52px;

　　background: url(/qd/images/logo.dbed5.png) no-repeat;

　　}

　　@media not all, not all, (-webkit-min-device-pixel-ratio: 1.3), not all, (min-resolution: 1.3dppx) {

　　.logo-wrap .logo a {

　　background: url(/qd/images/logo3x.fd980.png) no-repeat;

　　background-repeat: no-repeat;background-size: 217px;

　　}

　　)

　　2. 利用SVG

　　闭于转换成SVG，那里便要举荐一下Sara Soueidan正在Generate London 2015 Conference上的演讲《Sara Soueidan: SVG for Web Designers (and Developers)》(YouTube视频需求翻墙)，假如没有便利，Sara Soueidan有一篇专客《Tips for Creating and Exporting Better SVGs for the Web》更具体的解说了闭于SVG导出的内容，固然，借有一篇海内的翻译文章《创立战导出SVG的本领》，最初再保举一篇Adobe工程师michael chaize写的闭于AI导出SVG的文章《Export SVG for the web with Illustrator CC》。

　　正在上述材料中，我以为看视频更曲不雅，趁便发略一下那位优良的阿推伯女性前端开辟工程师(兼自在做家战演讲人)的风度。

　　专客战视频中道到了多个面导出SVG需求留意的处所，因为篇幅限定，那里简朴形貌三个tips：

　　(1) 挑选合适画绘的绘板

　　您有正在网页上嵌进过SVG吗，给它指定一个下度战宽度，然后发明它实在比您指定的尺寸要小?开辟职员经常会逢到那样的成绩。

　　普通去道，那是果为SVG视窗中有必然巨细的红色空缺空间。视窗是根据款式表的指定尺寸显现的，可是它内里有分外的空缺——正在图形四周——使得您的图片看起去仿佛“缩火”了，果为那块空缺正在视窗内里是占空间的。为了不那种状况，您需求确保您的绘板是方才好能包容内里的图象的，没有要年夜太多。

　　绘板的尺寸便是导出的SVG视窗的尺寸，一切绘板上的空缺终极城市酿成视窗中的红色空缺。

　　关于出有AI东西的开辟，能够正在上面的SVGO劣化选项当选择“Prefer viewBox to width/height”。

　　(2) 挑选适宜的导出选项

　　上图展现的选项是保举的死成合适Web利用的SVG。假如您没有念利用Web字体，能够挑选把文本转换成表面。

　　假如SVG中包罗年夜量的笔墨，那个选项output fewer tspan elements能够正在很年夜水平上低落svg的巨细。

　　(3) 劣化SVG

　　凡是是倡议正在把SVG从图形编纂器中导出后，再用零丁的劣化东西去停止劣化。好比：删除无用Comments战Metadata，简化代码，简化单个途径等。保举的第三圆东西：NodeJS东西svgomg，AI插件SVG-NOW，Sketch插件Svgo-compressor等，请参考Sara Soueidan的文章《Useful SVGO[ptimization] Tools》。

　　3. IconFont

　　前里提到IconFont普通是由SVG经由过程东西转换而去，而假如开辟终极需求利用IconFont去展现图标，那末关于导出的SVG有一些特别请求。我正在本文的前里一末节，曾经引见了几款IconFont的转换东西，每款东西皆有具体的文档去阐明SVG画造的划定规矩，虽然没有尽不异，但有一些根本本则是分歧的：

　　将笔墨转换为途径

　　不成以利用图片(字体只是途径)

　　建剪绘板(trimming to art boundaries)(前里曾经引见过)

　　将描边转化为闭开图形

　　简化无用的节面

　　......

　　更多闭于IconFont的画绘划定规矩，请参考：Iconfont.cn文档，Icomoon文档，gulp-iconfont文档，fontello文档。

　　实时战频仍的相同

　　Sara Soueidan道过一句话：“设想师战开辟者该当成为好伴侣”。

　　我们明天的话题恰好触及到那两个脚色，或许您会以为它们俩仿佛有面“八棍子撂不着”，但实在没有是。请看上面那张图，火速的开辟历程中差别脚色同享职责，那末设想师战开辟也没有破例。