基于Sketch設計平台的智能化元件圖示研究與應用

本文相關的論文《基于Sketch設計平台的智能化元件圖示研究與應用》錄用并在《工業控制計算機》2022年第3期（3月25日出刊）上發表。此處内容僅做交流使用。

本文相關的成果已釋出在《JINGWHALE Sketch 插件》。

- - - - - -  START  - - - - - -

原子設計是一種由原子、分子、組織、模闆和頁面共同協作以創造出更有效的使用者界面系統的一種設計方法。圖示作為設計系統中的基礎分子結構，一般做成與Iconfont等平台字型圖示庫一一對應的設計圖示元件庫，便于産品設計者和開發協同使用。将原子設計的原子、分子等進行可複用元件化，能更好的展現原子設計理論思想。

主流的設計平台都有元件化機制，在Sketch設計平台中，可以通過“轉化圖層為可複用控件”将圖示圖層圖示轉化為一個可以複用的元件Symbol。Sketch設計平台圖示Symbol化隻是簡單的将設計圖層建構為Symbol元件，并不能滿足通過選擇顔色圖層共享樣式（主流Web設計系統的規範顔色格式）改變圖示顔色的需求，也不能滿足在導出頁面标注時自動導出圖示名稱便于開發便捷使用圖示的需求。

是以，需要更智能化的圖示元件才能滿足現代Web産品頁面設計對圖示的需求。

01

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産品研發對于智能圖示的設計與開發需求。

02

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;
           

通過以上算法可以實作更新智能化圖示元件子產品的需求。

03

結束語

本文通過對現代Web産品設計中對智能化元件圖示的使用需求以及Sketch設計平台圖示相關的機制研究，提出了智能化圖示解決方案：在Sketch設計平台中，借助Sketch插件功能機制，使用相應的JavaScript API對設計圖層資料進行相應的功能操作，通過圖層資料改變圖示Symbol的可視化功能。依據智能化圖示的研究方案，研發Sketch Icon Symbol智能化圖示系統，實作了智能化圖示元件的建構與更新，進而實作了批量化生成圖示元件Symbol、圖示元件Symbol執行個體的共享顔色樣式顔色修改、以及自動導出圖示名稱智能化操作；提高了Web設計師使用與維護圖示的靈活性，以及開發使用圖示的效率。