本文相关论文《基于Sketch设计平台的智能化组件图标研究与应用》被录用并发表于《工业控制计算机》2022年第3期（3月25日出版）。此处内容仅供交流。与本文相关的结果已发表于《JINGWHALE Sketch 插件V3.2.1?》。原子设计是一种设计方法，其中原子、分子、组织、模板和页面协同工作以创建更高效??的用户界面系统。图标作为设计体系中的基本分子结构，一般会做成设计图标组件库，与Iconfont等平台字体图标库一一对应，方便产品设计人员和开发人员协同使用。原子设计的原子和分子的可重用组件化更能体现原子设计的理论思维。主流设计平台都有组件化机制。在Sketch设计平台中，通过“将图层转换为可重用控件”，可以将icon图层icon转换为可重用组件Symbol。Sketch设计平台的IconSymbolization只是简单地将设计层构建为一个Symbol组件，无法满足通过选择颜色层共享样式（主流网页设计系统的标准颜色格式）来改变图标颜色的需求，也不能满足导出页面的需要。标注时自动导出图标名称，方便开发方便易用的图标。因此，需要更加智能的图标组件来满足现代网页产品页面设计对图标的需求。1、Sketch设计平台智能组件图标方案研究在Sketch设计平台中，借助Sketch插件功能机制，使用相应的API（JavaScriptAPI）对设计图层数据进行相应的功能操作，并通过图层数据改变图标的??符号可视化功能，可以实现智能图标的需求。具体方案架构如下：图标数据层：在Sketch中，图标层数据通常是单个shapePath或者多个shapePath通过布尔运算（顶层的并、交、差、减）生成的形状层数据).一个完整的图标层会在一个图层组Group中。图标层数据可以基于Sketch图形创建，也可以通过Iconfont等平台图标的svg格式导入。插件应用层：借助Sketch插件功能机制，使用相应的JavaScriptAPI实现对智能图标的需求。首先，通过Sketch层相关的属性，将图标层做成可修改的图层共享样式。其次，通过图层相关的属性方法设置导出格式，使图标图层成为导出图层；导出页面注释时，可以自动导出图标和图标名称。最后，通过创建Symbol方法将图标层构建为图标Symbol组件。Sketch服务层：Sketch设计平台是一款基于OBJ-C语言开发的macOS系统软件。官方提供并维护Sketch的原型JavaScript库SketchJSAPI；Sketch社区提供了一套基于SketchJSAPI的SketchUtilities工具集，方便插件开发者使用JavaScript语言开发Sketch插件。页面视图层：Sketch设计平台的可编辑可视化层。通过上述架构方案，可以实现可扩展、可维护的智能图标和智能图标组件库，满足现代web产品开发对智能图标的设计开发需求。2.智能组件图标在Sketch设计平台上的应用2.1Sketch智能组件图标功能模块分析，更新智能图标组件两个模块。两个模块的需求如下：1)创建一个智能图标组件模块。iconfont图标图层可以批量构建为智能图标符号，可以修改图层样式颜色，自动导出图标和图标名称；还可以导入Iconfont图标库数据，创建智能图标组件库。2)更新智能图标组件模块。可以修改和删除生成的智能图标Symbol；还可以导入新的Iconfont图标库数据，自动修改删除生成的智能图标Symbol库，同步新的Iconfont图标库图标。2.2Sketch智能元件图标的实现2.2.1智能元件图标的建立智能元件图标的建立功能可以将Iconfont图标图层批量生成为可以修改图层样式和颜色的智能图标，并可以自动导出图标和图标名称图标象征。通过智能组件图标建立的智能图标Symbol与原始图标数据层的对比如下：组件图标。建立单个智能组件图标的主要算法思路如下：首先，为图标下的所有图标形状（或shapePath）层创建一个图形组Group；通过SketchJSAPI的sharedStyleId属性方法赋值，使图标图形组Group图层成为可修改的图层共享样式。其次，通过SketchJSAPI的exportFormats属性方法设置导出格式，使图标图层组Group成为导出图层。最后通过SketchJSAPI的newSymbolMaster()方法将图标层构造为图标Symbol组件，并根据规则修改图标Symbol组件的组件名称。为了便于对图标进行分类，组件名称图标一般由图标前缀和图标名称组成。图标前缀一般包括图标线和面两种，如图3中智能图标check-circle的命名：Icon/Common/Lineline/check-circle。创建单个智能组件图标的主要实现代码：varIconPreName="icon";//默认图标名称前缀constIconSymbolSize=16;//默认图标大小为16*16px//设置图标组大小Icon.frame={x:0,y:0,width:IconSymbolSize,height:IconSymbolSize};//设置图标组的图层为图层共享样式Icon.sharedStyleId="A1EC2CEE-B389-48BB-9D52-1E5A14A47BFE";//如果是Iconfont，可以去除背景矩形层，只保留图形层//设置图标组导出格式Icon.exportFormats=['svg'];//锁定图标组Icon.locked=true;//创建图标SymbolvarIconSymbol=newSymbolMaster();//设置图标Symbol名称IconSymbol.name=IconPreName+"/"+Icon.name;//一般需要自定义IconPreName//设置图标符号大小IconSymbol.frame={x:Icon.frame.x,y:Icon.frame.y,width:IconSymbolSize,height:IconSymbolSize};导入Iconfont图标库制作智能组件图标，需要分析Iconfont图标库的图标层数据。导入Iconfont图标库创建智能组件图标的主要思路是：首先解析iconfont.js中的svg数据，获取图标图层数据；然后，循环调用单个智能组件图标创建的函数，构建智能组件图标。iconfont.js中解析svg数据的主要实现代码：varIconData=[];for(vari=0;i
