发布时间：2023-2-26 分类： 行业资讯
有一种英文成语称为A图片胜过千言万语。你知道你是否听说过吗？它指的是可以表达复杂概念或主题的静态图片。在描述相关主题时，图片有时比详细解释更有效。
如果我们想用句子来解释图标的作用，那么就没有比这个成语更合适的词。在本文中，我们来谈谈有关图标的一些事情。
图标（工作流程）的生命周期
关于图标的生命周期，我个人经历过两种开发项目：
第一种方式：图标库（选择阶段） - >图标使用（开发阶段）
第二种方式：图标设计（设计阶段） - >图标导出（通信阶段） - >图标使用（开发阶段）
通常，小公司或独立开发人员使用第一个工作流程。由于大型组织或公司拥有更好的团队和资源，他们通常采用第二种方法，可以获得更多的自主权和建立企业VI（视觉识别）的能力。
无论哪种方式，它包括两个角色：设计师和Web开发。只有在第一种工作方式中，设计师才是隐形的。
图标设计和使用
设计阶段通常由不了解Web开发的设计人员完成。他们将根据产品的需求绘制满足需求的图标，然后将其交给Web开发人员。
（ThoughtWorks官方代购源码网站< ;;与我们联系” icon）
为什么要首先引入图标的使用，并跳过导出过程？原因很简单，因为我们需要知道服务是谁，然后知道如何正确地提供服务。
如何使用三个常用图标
1.使用图像
直接绘制设计者绘制的图标，并将它们以PNG格式分开。这是打包图标的最直观方式。
（FlatIcon图标）
它的优点是：
能够使用彩色图标
能够支持大多数浏览器
缺点是：
图标大小是固定的（不能根据场景缩放）
Retina屏幕需要两倍的地图
开发人员得到这样的图标，通常需要将它们合成到一张图片中以方便Sprite的制作，这个过程可以由开发人员自己完成，也可以由设计人员完成（设计人员可以根据源文件中心导出一个包含所有的PNG文件图标）。
制作精灵有很多工具。更流行的在线Sprite工具是：Sprite Cow，或NodeJS的构建工具插件，例如webpack-spritesmith。
2.直接使用svg
使用SVG（可缩放矢量图形），W3C标准是最有前途的Web端图形解决方案。它可以提供复杂的渲染功能，如剪切路径，alpha通道，滤镜效果等。它具有传统图片所没有的矢量功能，也可以被记事本和搜索引擎等读者访问。
设计人员可以借助设计绘图软件（AI，PS）轻松导出SVG格式的图标/图片。
但是目前国内的svg还没有被广泛使用，因为兼容性不够，而且它与旧的IE版本和一些Android原生浏览器不兼容。
（我可以使用svg吗？）
上图显示了百度2017年前三个月浏览器使用情况的统计数据。目前，中国超过20％的用户仍使用IE8,9甚至IE7。
3. IconFont
IconFont是目前最受欢迎的图标解决方案。顾名思义，它是一个字体文件。您可以使用任何字体编辑工具打开它。如果您打开一个视图，您会发现它是一条路径。这些路径可以与AI，PS一起使用。 ，Sketch和其他软件绘制。
IconFont的优势在于它可以用CSS控制样式，无失真变焦而不失真，支持IE7 +和屏幕阅读器，但缺点是它不能支持颜色图标（多种颜色的图标）。获得IconFont的方法也很简单。设计师通过AI/PS将图标转换为SVG文件，然后开发人员通过工具（在线或本地）将其转换为IconFont，例如：foreign icomoon.io，domestic iconfont.cn，开源构建工具插件具有gulp-iconfont等。
生成适合Web开发的图标
“生成适合Web开发的图标”是我们文章的重点。
1.如何使用图像
如果开发人员直接使用图像，则相对简单，设计者只需要为普通屏幕和Retina屏幕准备两组图片（单张和双张）。
以中国着名的中文小说阅读代购源码网站为例，不同的设备将使用不同的标识，以确保屏幕的清晰度，如Retina。
.logo-wrap .logo a {
显示:块;
宽度: 219px;
高度: 52px;
背景: url（/qd/images/logo.dbed5.png）no-repeat;
}
@media不是全部，不是全部，（-webkit-min-device-pixel-ratio: 1.3），不是全部，（min-resolution: 1.3dppx）{
.logo-wrap .logo a {
背景: url（/qd/images/logo3x.fd980.png）no-repeat;
背景重复:无重复;背景大小: 217px;
}
}
）
2.使用SVG
关于转换为SVG，有必要在2015年伦敦生成大会《Sara Soueidan: SVG for Web Designers (and Developers)》上介绍Sara Soueidan的演讲（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时需要注意的许多要点。由于篇幅限制，这里有三个提示：
（1）选择适合绘画的绘图板
您是否曾在网页上嵌入SVG，为其指定高度和宽度，然后发现它实际上小于您指定的大小？开发人员经常遇到这样的问题。
通常，这是因为SVG窗口中存在一定量的空白区域。窗口根据样式表的指定大小显示，但它有额外的白色——图表周围——使你的图像看起来像“缩小”，因为这个空白在窗口它是空间。为避免这种情况，您需要确保您的画板足以将图像保持在内部，而不是太多。
画板的大小是导出的SVG窗口的大小，画板上的所有空白最终将变成窗口中的白色空白。
对于没有AI工具的开发，您可以选择“首选视频框宽度/高度”。在下面的SVGO优化选项中。
（2）选择适当的导出选项
建议使用上面显示的选项生成用于Web使用的SVG。如果您不想使用Web字体，可以选择将文本转换为轮廓。
如果SVG包含大量文本，则此选项输出的tspan元素较少，可以大大减小svg的大小。
（3）优化SVG
通常建议从图形编辑器导出SVG，然后使用单独的优化工具对其进行优化。例如：删除无用的注释和元数据，简化代码，简化单个路径，等等。推荐的第三方工具：NodeJS工具svgomg，AI插件SVG-NOW，Sketch插件Svgo压缩器等，请参考Sara Soueidan的文章《Useful SVGO[ptimization] Tools》。
3. IconFont
如前所述，IconFont通常由SVG通过工具进行转换。如果开发最终要求IconFont显示图标，则导出的SVG有一些特殊要求。我在本文的上一节中介绍了几个IconFont转换工具。每个工具都有详细的文档来说明SVG绘图的规则。虽然不完全相同，但有一些基本原则是一致的：
将文本转换为路径
不能使用图像（字体只是路径）
修剪艺术界限（如上所述）
将笔画转换为闭合图形
简化无用的节点
......
有关IconFont绘画规则的更多信息，请参阅：Iconfont.cn文档，Icomoon文档，gulp-iconfont文档，fontello文档。
及时和频繁的沟通
Sara Soueidan说了一句话：“设计师和开发者应该是好朋友”。
我们今天的主题涉及这两个角色。也许你认为他们似乎都有点“所有八卦”，但事实并非如此。看看下面的图片。在敏捷开发过程中，不同的角色分担责任，因此设计人员和开发人员也不例外。
（敏捷开发中的不同角色分担责任）
在ThoughtWorks工作，您会发现很多设计师都了解HTML，CSS，甚至是如何使用Chrome查看元素，许多开发人员也对设计有很大的研究和兴趣。我们的设计师和开发人员将坐在同一张桌子上完成工作，以确保及时和频繁的沟通与合作。
至于“设计师和开发者应该是好朋友”，作为开发者，我是很多设计师的朋友（至少我是这么认为的）。
为了更好地沟通和分担责任，一个新的（相对较新的）角色UI Dev已经出现，如下所示。但是，关于这个角色的定义有很多不同的意见，我们在此不再讨论。
（UI开发人员 - 来自Stack Overflow Answers的参考资料）
结束
在本文中，我们讨论了三种使用图标的方法：图像，SVG，IconFont，它们只是图标冰山的一角。虽然长度很短，但确保团队中的设计人员和开发人员能够轻松地协同工作并找到满足团队需求的解决方案尤为重要。
