[發明專利]一種高性能高效率的Sketch組件庫生成和管理方案及系統

在審

• 申請號: 202011085380.5
• 申請日: 2020-10-12
• 公開（公告）號: CN112214218A
• 公開（公告）日: 2021-01-12
• 發明（設計）人: 趙化;金小俊
• 申請（專利權）人: 上海賽可出行科技服務有限公司
• 主分類號: G06F8/36
• 分類號: G06F8/36;G06F8/73;G06F8/34;G06F8/38
• 代理公司: 暫無信息
• 代理人: 暫無信息

1.一種高性能高效率的Sketch組件庫生成和管理方案及系統，其特征在于，該管理方案及系統包括三部分：

第一部分，創建基礎組件庫系統:

基礎組件庫是構成業務組件或頁面設計的基礎和標準控件，基礎組件可以編輯指定的屬性，包括通用公共屬性，文本公共屬性和組件特有屬性，基礎組件庫設計師可以直接使用，避免重復設計，且有效提高組件和設計的標準化程度；基礎組件庫存放于服務器中，以HTML的WEB頁的方式展現在組件庫面板上供設計師選擇和使用，從組件庫面板上拖拽組件至Sketch畫布時，利用HTML2Sketch開源庫實現H5組件元素至Sketch圖層的轉換；選中畫布中的基礎組件Sketch圖層后在插件面板顯示可編輯的屬性列表，調整屬性后重新渲染；

第二部分，創建業務組件庫系統：

業務組件為SKETCH中的Symbol Master對象，為固定樣式、結構的元素，設計師在使用業務組件對象生產Symbol實例后，可以通過軟件提供的web面板對于已選中的業務組件進行樣式選擇，每個樣式采用和Symbol一一對應的方案，選擇不同樣式即選擇不同Symbol對象，在此方案下切換樣式預覽無需重新渲染HTML2SKETCH圖層，只是選擇不同的Symbol文件，顯著提升效率,另外,業務組件可選擇的樣式由命名來決定；

第三部分，組件代碼庫系統：

設計師的UI稿和最終的軟件實現之間還原度在現行模式下需要反復調整和校驗，本方案將基礎/業務組件庫和代碼庫進行結合；每個基礎組件都對應一套代碼模板，軟件根據業務組件的組合及布局屬性進行業務組件代碼模板的生成，UI設計師在輸出設計時同時將配套的代碼輸出，軟件工程師無需再將組件重新實現，直接使用模板代碼，避免實現過程中的還原度誤差；UI設計人員對頁面設計中的UI預覽圖負責，設計所見即所得，APP頁面的呈現由標準模板代碼保證還原度。

2.根據權利要求1所述的一種高性能高效率的Sketch組件庫生成和管理方案及系統，其特征在于，所述組件庫的命名規則為: 組件分類/組件名字/組件樣式A:樣式A的值/組件樣式B:樣式B的值；樣式支持多個樣式的設置，如導航欄/小程序左導航/顏色樣式:白色/尺寸樣式:大尺寸/，通過檢測命名中的冒號，將所有樣式進行抽取以便于后續根據樣式選項進行組件的切換； 業務組件還可以嵌套子組件，子組件的命名以 @子組件開頭，同時屬性面板中會出現對應的子組件配置項； 業務組件可以由設計師根據項目需要生成并加入到組件庫，設計業務組件時選取基礎組件庫的組件進行拼接和疊加，形成新的業務組件，命名時需按照上述命名方式。