本發(fā)明涉及數(shù)據(jù)處理，尤其涉及一種基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法及系統(tǒng)。

背景技術(shù)：

1、ui組件庫是一個集成了各種用戶界面元素的集合，用戶界面元素被設(shè)計用于快速構(gòu)建和定制軟件產(chǎn)品或應(yīng)用的界面。它通常包含了一系列預(yù)先設(shè)計好的、可復(fù)用的ui組件，如按鈕、輸入框、導(dǎo)航欄等。開發(fā)者可以通過使用組件，以及根據(jù)項目的具體需求對它們進行組合和修改，來高效地創(chuàng)建出既美觀又功能完善的用戶界面。ui組件庫的存在極大地提高了開發(fā)效率，使了界面的一致性和用戶體驗的連貫性。

2、design?token（設(shè)計令牌）是一種抽象的可重用的設(shè)計元素，在設(shè)計系統(tǒng)中被用作設(shè)計變量。設(shè)計令牌通過語義化的命名方式，使得設(shè)計參數(shù)更加易于理解和拓展，同時也能夠使視覺上的一致性。簡單來說，design?token就像是設(shè)計領(lǐng)域中的“變量”，設(shè)計令牌代表了一系列具有特定含義和用途的設(shè)計屬性值，如顏色、字體、間距等，設(shè)計令牌的屬性值可以在整個設(shè)計系統(tǒng)中被統(tǒng)一管理和使用。

3、基于設(shè)計令牌的ui組件在實際的使用過程中，存在如下技術(shù)痛點，現(xiàn)有的ui庫開發(fā)過程復(fù)雜，面對復(fù)雜的ui設(shè)計需求，在實現(xiàn)動態(tài)主題切換以及ui組件管理方面的數(shù)據(jù)處理一致性較差，維護成本高。為解決此技術(shù)問題，本發(fā)明提供一種基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法及系統(tǒng)。

技術(shù)實現(xiàn)思路

1、針對現(xiàn)有技術(shù)不足，本發(fā)明提供一種基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法及系統(tǒng)，解決ui庫開發(fā)過程復(fù)雜，面對復(fù)雜的ui設(shè)計需求，在實現(xiàn)動態(tài)主題切換以及ui組件管理方面的數(shù)據(jù)處理一致性較差，維護成本高的問題。

2、為解決上述技術(shù)問題，本發(fā)明的具體技術(shù)方案如下：

3、第一方面，本發(fā)明提供一種基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法，包括：

4、步驟s101，獲取設(shè)計數(shù)據(jù)以及ui組件庫需求信息，根據(jù)ui組件庫需求信息從設(shè)計數(shù)據(jù)中提取出ui組件庫特征，ui組件庫特征包括圓角特征、色彩特征、文字特征、間距特征以及陰影特征；

5、步驟s102，根據(jù)ui組件庫特征提取出語義化的組件變量，構(gòu)建變量之間的調(diào)用關(guān)系，得到ui組件庫內(nèi)組件與變量的調(diào)用關(guān)系；

6、步驟s103，基于步驟s101和s102中提取的變量，形成設(shè)計令牌庫，設(shè)計令牌庫包括多組設(shè)計令牌，多組設(shè)計令牌包括顏色令牌、字體令牌、間距令牌以及尺寸令牌，接收設(shè)計令牌庫配置，設(shè)計令牌庫加載設(shè)計令牌庫配置；

7、步驟s104，將設(shè)計令牌庫與設(shè)計工具進行集成，將設(shè)計令牌封裝成對象模型，根據(jù)ui組件庫內(nèi)組件與變量的調(diào)用關(guān)系對設(shè)計令牌庫以及設(shè)計工具建立設(shè)計令牌變量關(guān)系，將設(shè)計令牌變量關(guān)系以及設(shè)計令牌封裝成對象模型；

8、步驟s105：接收實時設(shè)計變量，將實時設(shè)計變量在設(shè)計令牌封裝成對象模型中進行配置，得到實時設(shè)計令牌封裝成對象模型，將用戶操作需求代入至實時設(shè)計令牌封裝成對象模型，實時設(shè)計令牌封裝成對象模型輸出設(shè)計結(jié)果。

9、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法，所述步驟s102，包括：

10、數(shù)據(jù)處理單元接收從前端或設(shè)計工具發(fā)送的ui組件庫特征數(shù)據(jù)，服務(wù)器解析ui組件庫特征數(shù)據(jù)提取出信息，服務(wù)器根據(jù)解析后的組件庫特征數(shù)據(jù)，提取出語義化的組件變量；

11、數(shù)據(jù)處理單元對每個變量進行語義定義檢測，對沒有語義定義的變量生產(chǎn)待補充語義定義變量信息；

12、數(shù)據(jù)處理單元根據(jù)組件變量之間的邏輯關(guān)系，構(gòu)建變量調(diào)用關(guān)系；

13、數(shù)據(jù)處理單元接收前端或設(shè)計工具查詢組件變量及其調(diào)用關(guān)系的請求，當(dāng)前端或設(shè)計工具需要引用或修改組件變量時，通過服務(wù)器的接口獲取最新的變量信息和調(diào)用關(guān)系。

14、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法，所述步驟s103，包括：

15、服務(wù)器收集從步驟s101和s102中提取的變量數(shù)據(jù)，變量數(shù)據(jù)包括顏色、字體、間距、尺寸語義化的組件變量；

16、對變量數(shù)據(jù)進行整理，服務(wù)器根據(jù)整理后的變量數(shù)據(jù)，構(gòu)建設(shè)計令牌庫，設(shè)計令牌庫以結(jié)構(gòu)化的形式存儲包括多組設(shè)計令牌，多組設(shè)計令牌包括顏色令牌、字體令牌、間距令牌以及尺寸令牌；

17、設(shè)計令牌庫構(gòu)建單元接收來自前端或配置管理工具的設(shè)計令牌庫配置信息，設(shè)計令牌庫配置信息包括令牌庫的版本、更新頻率以及訪問權(quán)限；

18、對象模型生成單元解析設(shè)計令牌庫配置信息，將設(shè)計令牌庫配置信息轉(zhuǎn)換為內(nèi)部可識別的格式，并存儲在配置文件中，對象模型生成單元根據(jù)解析后的配置信息，加載設(shè)計令牌庫，加載設(shè)計令牌庫包括從數(shù)據(jù)庫或文件系統(tǒng)中讀取令牌庫數(shù)據(jù)，并在內(nèi)存中構(gòu)建相應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

19、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法，所述步驟s104，包括：

20、接收設(shè)計令牌庫api接口信息，服務(wù)器根據(jù)設(shè)計令牌庫api接口信息對設(shè)計工具訪問設(shè)計令牌庫進行數(shù)據(jù)接口匹配，api接口用于提供查詢、獲取和更新設(shè)計令牌；

21、對象模型生成單元將設(shè)計令牌封裝成對象模型，對象模型包括設(shè)計令牌的屬性及調(diào)用關(guān)系；

22、對象模型生成單元監(jiān)控ui組件庫內(nèi)組件與變量的調(diào)用關(guān)系變化，并實時更新設(shè)計令牌庫中的信息；

23、當(dāng)設(shè)計令牌庫或ui組件庫發(fā)生更新時，模型生成單元自動同步變化到設(shè)計工具中，模型生成單元還用于處理設(shè)計工具中用戶對設(shè)計令牌的修改請求，將用戶對設(shè)計令牌的修改同步回設(shè)計令牌庫。

24、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法，所述步驟s105，包括：

25、服務(wù)器通過api接口接收來自前端或設(shè)計工具的實時設(shè)計變量，實時設(shè)計變量包括顏色代碼、字體大小以及間距值；

26、服務(wù)器將接收到的實時設(shè)計變量在設(shè)計令牌封裝成的對象模型中進行配置，用于更新對象模型中的相應(yīng)屬性值和調(diào)用關(guān)系；

27、服務(wù)器解析用戶操作需求，用戶操作需求包括修改設(shè)計元素、應(yīng)用新主題或調(diào)整布局；

28、服務(wù)器根據(jù)用戶操作需求，對實時設(shè)計令牌封裝成的對象模型進行處理；

29、服務(wù)器將處理后的實時設(shè)計令牌封裝成的對象模型轉(zhuǎn)換為設(shè)計結(jié)果，并通過api接口返回給前端或設(shè)計工具；

30、設(shè)計結(jié)果包括更新后的設(shè)計圖稿、css代碼、json配置數(shù)據(jù)。

31、第二方面，本發(fā)明提供的一種基于設(shè)計令牌的ui組件數(shù)據(jù)處理系統(tǒng)，應(yīng)用如所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理方法，包括：

32、數(shù)據(jù)獲取單元，獲取設(shè)計數(shù)據(jù)以及ui組件庫需求信息，根據(jù)ui組件庫需求信息從設(shè)計數(shù)據(jù)中提取出ui組件庫特征，ui組件庫特征包括圓角特征、色彩特征、文字特征、間距特征以及陰影特征；

33、數(shù)據(jù)處理單元，根據(jù)ui組件庫特征提取出語義化的組件變量，構(gòu)建變量之間的調(diào)用關(guān)系，得到ui組件庫內(nèi)組件與變量的調(diào)用關(guān)系；

34、設(shè)計令牌庫構(gòu)建單元，基于步驟s101和s102中提取的變量，形成設(shè)計令牌庫，設(shè)計令牌庫包括多組設(shè)計令牌，多組設(shè)計令牌包括顏色令牌、字體令牌、間距令牌以及尺寸令牌，接收設(shè)計令牌庫配置，設(shè)計令牌庫加載設(shè)計令牌庫配置；

35、對象模型生成單元，將設(shè)計令牌庫與設(shè)計工具進行集成，將設(shè)計令牌封裝成對象模型，根據(jù)ui組件庫內(nèi)組件與變量的調(diào)用關(guān)系對設(shè)計令牌庫以及設(shè)計工具建立設(shè)計令牌變量關(guān)系，將設(shè)計令牌變量關(guān)系以及設(shè)計令牌封裝成對象模型；

36、結(jié)果輸出單元：接收實時設(shè)計變量，將實時設(shè)計變量在設(shè)計令牌封裝成對象模型中進行配置，得到實時設(shè)計令牌封裝成對象模型，將用戶操作需求代入至實時設(shè)計令牌封裝成對象模型，實時設(shè)計令牌封裝成對象模型輸出設(shè)計結(jié)果。

37、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理系統(tǒng)，所述數(shù)據(jù)處理單元，還用于：

38、數(shù)據(jù)處理單元接收從前端或設(shè)計工具發(fā)送的ui組件庫特征數(shù)據(jù)，服務(wù)器解析ui組件庫特征數(shù)據(jù)提取出信息，服務(wù)器根據(jù)解析后的組件庫特征數(shù)據(jù)，提取出語義化的組件變量；

39、數(shù)據(jù)處理單元對每個變量進行語義定義檢測，對沒有語義定義的變量生產(chǎn)待補充語義定義變量信息；

40、數(shù)據(jù)處理單元根據(jù)組件變量之間的邏輯關(guān)系，構(gòu)建變量調(diào)用關(guān)系；

41、數(shù)據(jù)處理單元接收前端或設(shè)計工具查詢組件變量及其調(diào)用關(guān)系的請求，當(dāng)前端或設(shè)計工具需要引用或修改組件變量時，通過服務(wù)器的接口獲取最新的變量信息和調(diào)用關(guān)系。

42、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理系統(tǒng)，所述設(shè)計令牌庫構(gòu)建單元，還用于：

43、設(shè)計令牌庫構(gòu)建單元收集從數(shù)據(jù)獲取單元和數(shù)據(jù)處理單元中提取的變量數(shù)據(jù)，變量數(shù)據(jù)包括顏色、字體、間距、尺寸語義化的組件變量；

44、對變量數(shù)據(jù)進行整理，服務(wù)器根據(jù)整理后的變量數(shù)據(jù)，構(gòu)建設(shè)計令牌庫，設(shè)計令牌庫以結(jié)構(gòu)化的形式存儲包括多組設(shè)計令牌，多組設(shè)計令牌包括顏色令牌、字體令牌、間距令牌以及尺寸令牌；

45、設(shè)計令牌庫構(gòu)建單元接收來自前端或配置管理工具的設(shè)計令牌庫配置信息，設(shè)計令牌庫配置信息包括令牌庫的版本、更新頻率以及訪問權(quán)限；

46、對象模型生成單元解析設(shè)計令牌庫配置信息，將設(shè)計令牌庫配置信息轉(zhuǎn)換為內(nèi)部可識別的格式，并存儲在配置文件中，對象模型生成單元根據(jù)解析后的配置信息，加載設(shè)計令牌庫，加載設(shè)計令牌庫包括從數(shù)據(jù)庫或文件系統(tǒng)中讀取令牌庫數(shù)據(jù)，并在內(nèi)存中構(gòu)建相應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

47、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理系統(tǒng)，所述對象模型生成單元，還用于：

48、接收設(shè)計令牌庫api接口信息，服務(wù)器根據(jù)設(shè)計令牌庫api接口信息對設(shè)計工具訪問設(shè)計令牌庫進行數(shù)據(jù)接口匹配，api接口用于提供查詢、獲取和更新設(shè)計令牌；

49、對象模型生成單元將設(shè)計令牌封裝成對象模型，對象模型包括設(shè)計令牌的屬性及調(diào)用關(guān)系；

50、對象模型生成單元監(jiān)控ui組件庫內(nèi)組件與變量的調(diào)用關(guān)系變化，并實時更新設(shè)計令牌庫中的信息；

51、當(dāng)設(shè)計令牌庫或ui組件庫發(fā)生更新時，模型生成單元自動同步變化到設(shè)計工具中，模型生成單元還用于處理設(shè)計工具中用戶對設(shè)計令牌的修改請求，將用戶對設(shè)計令牌的修改同步回設(shè)計令牌庫。

52、進一步地，本發(fā)明提供所述的基于設(shè)計令牌的ui組件數(shù)據(jù)處理系統(tǒng)，所述結(jié)果輸出單元，還用于：

53、結(jié)果輸出單元通過api接口接收來自前端或設(shè)計工具的實時設(shè)計變量，實時設(shè)計變量包括顏色代碼、字體大小以及間距值；

54、結(jié)果輸出單元將接收到的實時設(shè)計變量在設(shè)計令牌封裝成的對象模型中進行配置，用于更新對象模型中的相應(yīng)屬性值和調(diào)用關(guān)系；

55、結(jié)果輸出單元解析用戶操作需求，用戶操作需求包括修改設(shè)計元素、應(yīng)用新主題或調(diào)整布局；

56、結(jié)果輸出單元根據(jù)用戶操作需求，對實時設(shè)計令牌封裝成的對象模型進行處理；

57、結(jié)果輸出單元將處理后的實時設(shè)計令牌封裝成的對象模型轉(zhuǎn)換為設(shè)計結(jié)果，并通過api接口返回給前端或設(shè)計工具；

58、設(shè)計結(jié)果包括更新后的設(shè)計圖稿、css代碼以及json配置數(shù)據(jù)。

59、本發(fā)明的有益效果：

60、本發(fā)明通過抽象化設(shè)計要素并形成design?token庫，設(shè)計師可以更方便地引用和管理設(shè)計變量，從而提高設(shè)計效率。design?token庫的使用提升了設(shè)計參數(shù)的一致性，使得不同設(shè)計師或在不同階段的設(shè)計工作能夠保持界面風(fēng)格的一致。

61、本發(fā)明通過一系列自動化的數(shù)據(jù)處理流程，簡化了ui庫的開發(fā)過程，減少了手動配置和調(diào)整的工作量。設(shè)計變量和組件的集成變得更加順暢，提高了整個開發(fā)流程的自動化程度。

62、還通過將設(shè)計變量發(fā)布成可被前端開發(fā)調(diào)用的包或模塊，并在ui組件庫的開發(fā)過程中引用變量，實現(xiàn)了動態(tài)主題切換的功能。這使得應(yīng)用界面能夠根據(jù)用戶的偏好或環(huán)境變化自動調(diào)整主題，提高了用戶體驗。

63、本發(fā)明提供了完善的ui組件管理方案，包括變量提取、調(diào)用關(guān)系構(gòu)建、designtoken庫維護等。提高了ui組件管理的數(shù)據(jù)處理一致性，降低了維護成本。

64、design?token庫可以在團隊內(nèi)共享和維護，提升了設(shè)計變量的一致性和準(zhǔn)確性。團隊成員可以更方便地協(xié)同工作，減少因設(shè)計變量不一致而導(dǎo)致的溝通和返工成本。通過封裝設(shè)計令牌為對象模型并明確變量之間的依賴關(guān)系，本發(fā)明增強了系統(tǒng)的可擴展性。當(dāng)需要添加新的設(shè)計變量或組件時，只需在design?token庫中進行更新即可，無需對整個系統(tǒng)進行大規(guī)模修改。

65、綜上所述，本發(fā)明通過一系列創(chuàng)新的技術(shù)手段，顯著提高了ui組件的設(shè)計效率、一致性、動態(tài)主題切換能力、管理效率和團隊協(xié)作效率，同時降低了維護成本，為軟件產(chǎn)品或應(yīng)用界面的開發(fā)帶來了顯著的有益效果。