基于Sketch设计平台的智能化组件图标研究与应用

​ 本文相关的论文《基于Sketch设计平台的智能化组件图标研究与应用》录用并在《工业控制计算机》2022年第3期（3月25日出刊）上发表。此处内容仅做交流使用。

本文相关的成果已发布在《JINGWHALE Sketch 插件V3.2.1 》。

原子设计是一种由原子、分子、组织、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。图标作为设计系统中的基础分子结构，一般做成与Iconfont等平台字体图标库一一对应的设计图标组件库，便于产品设计者和开发协同使用。将原子设计的原子、分子等进行可复用组件化，能更好的体现原子设计理论思想。

主流的设计平台都有组件化机制，在Sketch设计平台中，可以通过“转化图层为可复用控件”将图标图层图标转化为一个可以复用的组件Symbol。Sketch设计平台图标Symbol化只是简单的将设计图层构建为Symbol组件，并不能满足通过选择颜色图层共享样式（主流Web设计系统的规范颜色格式）改变图标颜色的需求，也不能满足在导出页面标注时自动导出图标名称便于开发便捷使用图标的需求。

所以，需要更智能化的图标组件才能满足现代Web产品页面设计对图标的需求。

1、Sketch设计平台智能化组件图标方案研究

在Sketch设计平台中，借助Sketch插件功能机制，使用相应的API（JavaScript API）对设计图层数据进行相应的功能操作，通过图层数据改变图标Symbol的可视化功能，能实现智能化图标的需求。具体方案架构展示如下：

图标数据层：在Sketch中图标图层数据通常是单个shapePath或者由多个shapePath通过布尔运算（联集、交集、差集、减去顶层）生成的shape图层数据，一般一个完整的图标图层会在一个图层组Group中。图标图层数据可以依据Sketch图形建立，也可以通过Iconfont等平台图标的svg格式导入。

插件应用层：借助Sketch插件功能机制，使用相应的JavaScript API实现智能化图标的需求。首先，通过Sketch 图层相关的属性方法，使图标图层变成可以修改的图层共享样式。其次，再通过图层相关的属性方法设置导出格式，使图标图层变为导出图层；在导出页面标注时，可以自动导出图标以及图标名称。最后，通过创建Symbol方法将图标图层构建为图标Symbol组件。

Sketch服务层：Sketch设计平台是基于OBJ-C语言开发的macOS系统软件，官方提供并维护了Sketch的原型JavaScript库Sketch JS API；Sketch社区提供了基于Sketch JS API的Sketch Utilities工具集，便于插件开发者使用JavaScript语言进行Sketch插件的研发。

页面视图层：Sketch设计平台可编辑的可视化图层。

通过以上的架构方案，可以实现可拓展与可维护的智能图标以及智能图标组件库，满足了现代Web产品研发对于智能图标的设计与开发需求。

2、Sketch设计平台智能化组件图标应用

2.1 Sketch智能化组件图标的功能模块分析

基于智能化组件图标研究方案以及Sketch设计平台相关的机制，Sketch Icon Symbol智能化图标系统可以分为创建智能化图标组件、更新智能化图标组件两大模块。两大模块需求如下：

​

1）、创建智能化图标组件模块。可以批量将Iconfont图标图层构建为可以修改图层样式颜色、可以自动导出图标以及图标名称的智能化图标Symbol；也能导入Iconfont图标库数据进行创建智能化图标组件库。

2）、更新智能化图标组件模块。可以修改、删除已经生成的智能化图标Symbol；也能导入新的Iconfont图标库数据，对已经生成的智能化图标Symbol库进行自动修改、删除，同步新的Iconfont图标库图标。

2.2  Sketch智能化组件图标的实现

2.2.1 智能化组件图标的建立

智能化组件图标的建立功能，可以批量将Iconfont图标图层生成为可以修改图层样式颜色、可以自动导出图标以及图标名称的智能化图标Symbol。通过智能化组件图标的建立的智能化图标Symbol和原始图标数据图层对比图如下：

​

智能化组件图标的一般创建和导入Iconfont库的创建，都是基于单个智能化组件图标建立的基本功能。单个智能化组件图标建立的主要算法思路是：

首先，将图标下所有的图标shape（或者shapePath）图层建立图形组Group；通过Sketch JS API的sharedStyleId属性方法进行赋值，使图标图形组Group图层变成可以修改的图层共享样式。

其次，通过Sketch JS API 的exportFormats属性方法设置导出格式，使图标图层组Group变为导出图层。

最后，通过Sketch JS API 的new SymbolMaster()方法将图标图层构建为图标Symbol组件，并按照规则修改图标Symbol组件的组件名称。为便于图标分类，组件名称图标一般由图标前缀和图标名称共同组成，图标前缀一般包含图标线、面2种类型的区分，如图3中智能化图标check-circle的命名：Icon/Common通用/Line线/check-circle。

单个智能化组件图标建立的主要实现代码：

var IconPreName = "icon"; // 默认图标名称前缀
const IconSymbolSize = 16; //默认图标尺寸为 16*16 px

//设置图标组尺寸
Icon.frame = {x:0,y:0,width:IconSymbolSize,height:IconSymbolSize};

//设置图标组图形图层为图层共享样式
Icon.sharedStyleId = "A1EC2CEE-B389-48BB-9D52-1E5A14A47BFE"; //如果是Iconfont，可以将背景矩形图层移除，仅保留图形图层

//设置图标组导出格式
Icon.exportFormats = ['svg'];

//锁定图标组
Icon.locked = true;

//创建图标Symbol
var IconSymbol = new SymbolMaster();

//设置图标Symbol名称
IconSymbol.name = IconPreName+"/"+Icon.name; //一般情况下，需要依据具体的情况自定义IconPreName

//设置图标Symbol尺寸
IconSymbol.frame = {x:Icon.frame.x,y:Icon.frame.y,width:IconSymbolSize,height:IconSymbolSize};

导入Iconfont图标库创建智能化组件图标，需要解析Iconfont图标库的图标图层数据。导入Iconfont图标库创建智能化组件图标的主要思路是：首先，解析iconfont.js内的svg数据获得图标图层数据；然后，循环调用单个智能化组件图标建立的功能构建智能化组件图标。

解析iconfont.js内的svg数据的主要实现代码：

var IconData = [];
for(var i=0;i<IconfontData.length;i++){
    var iconString = IconfontData[i];
    var flagIndex = iconString.indexOf('<path');
    var need1 = iconString.substring(1,flagIndex);
    var need2 = iconString.substring(flagIndex);
    var need1json = need1.split(" ");
    var name = need1json[0].split("=")[1];
    var pureName = name.split('"')[1];
    var svgString = '<symbol> id="'+name+'" viewBox='+'"0 0 1024 1024">'+need2;

    var icon = {
      name: pureName,
      svg: svgString
    }

    IconData.push(icon);
}

通过以上算法可以实现创建智能化图标组件模块的需求。

2.2.2 智能化组件图标的更新

当图标Symbol创建后，可以对智能化组件图标Symbol进行更新才能满足产品设计业务图标变动的需求。

当已建立的图标Symbol的图形或者图标名称需要更新时，使用智能化组件图标创建中相应的算法功能对图标Symbol图形图层、名称做对应的更新。当已建立的图标Symbol需要删除时，可以在Sketch 的控件页中直接删除对应的图标Symbol，也可以调用Sketch JS API相对应的Symbol移除方法进行删除。

当导入新的Iconfont图标库更新智能化组件图标时，解析完Iconfont图标库的图标图层数据后，需要判断Iconfont图标库新图标的更新类型（添加、更新、删除、不变），然后调用相应的方法进行自动更新操作。其中，添加、删除更新类型可以按照本节上述的方法更新。

对于已存在的图标图形更新类型，需要对已存在的图标图形进行更新检测。按照已存在图标更新的相关操作，将已存在图标图形更新的类型定义为替换、修改、不变三种。名称相同图标图形更新检测的主要算法思路是：

​

第一步，进行图标图形组的frame检测，检验新旧图标图形组的frame是否相同，相同则进行第二步检测，不相同则判定此Iconfont图标为替换更新类型；

第二步，进行图标图形组图形的path检测，检验新旧图标图形组各个图形的path是否相同，如果全部path完全相同，判定此Iconfont图标为不变类型；如果全部path不完全相同，判定此Iconfont图标为修改更新类型；如果全部path完全不相同，判定此Iconfont图标为替换更新类型。

名称相同图标图形更新检测算法的主要实现代码：

var newIconFigure = newIcon.layers; // 获取所有新的图标图形shapePath，如为shape则获取shapePath
var oldIconFigure = oldIcon.layers;  // 获取所有新的图标图形shapePath，如为shape则获取shapePath
var actionType = ""; // 新图标的更新类型:replace、modify、same

// 进行图标图形组的frame检测
if((newIconFigure.frame.width == oldIconFigure.frame.width) && (newIconFigure.frame.height == oldIconFigure.frame.height)){
  //进行图标图形组图形的path检测
  var itemSameCount = 0;
  for(var i=0;i<newIconFigure.length;i++){ 
    var newItemPath = newIconFigure[i].getSVGPath();
    var itemPathSameCount = 0;
    for(var j=0;j<oldIconFigure.length;j++){
      var oldItemPath = oldIconFigure[j].getSVGPath();
      if(newItemPath==oldItemPath){
        itemPathSameCount += 1;
      }
    }
    if(itemPathSameCount==0){
      isAllSame = false;
      newIconFigure[i].hasSame = flase;
      break;
    }else{
      newIconFigure[i].hasSame = true;
      itemSameCount += 1;
    }
  }

  if(itemSameCount==0){
    actionType = "replace"
  }else if((itemSameCount>0)) && (itemSameCount<newIconFigure.length))){
    actionType = "update"
  }else if(itemSameCount == newIconFigure.length){
    actionType = "same"
  }
}else{
  actionType = "replace"
}

return actionType;

通过以上算法可以实现更新智能化图标组件模块的需求。

3、结束语

本文通过对现代Web产品设计中对智能化组件图标的使用需求以及Sketch设计平台图标相关的机制研究，提出了智能化图标解决方案：在Sketch设计平台中，借助Sketch插件功能机制，使用相应的JavaScript API对设计图层数据进行相应的功能操作，通过图层数据改变图标Symbol的可视化功能。依据智能化图标的研究方案，研发Sketch Icon Symbol智能化图标系统，实现了智能化图标组件的构建与更新，从而实现了批量化生成图标组件Symbol、图标组件Symbol实例的共享颜色样式颜色修改、以及自动导出图标名称智能化操作；提高了Web设计师使用与维护图标的灵活性，以及开发使用图标的效率。