[發(fā)明專利]一種用戶交互UI界面的生成方法及裝置

在審

• 申請?zhí)枺?/td>: 202211267280.3
• 申請日: 2022-10-17
• 公開（公告）號: CN115586898A
• 公開（公告）日: 2023-01-10
• 發(fā)明（設計）人: 何屹峰
• 申請（專利權）人: 抖音視界有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F40/143
• 代理公司: 北京中知法苑知識產(chǎn)權代理有限公司 11226
• 代理人: 李明

本公開提供了一種用戶交互UI界面的生成方法及裝置，其中，該方法包括：響應于對多個控件模板中的目標控件模板的觸發(fā)操作，在圖層生成畫布上生成與目標控件模板對應的控件圖層，并確定當前生成的控件圖層和已生成的目標控件圖層之間的圖層關系信息；基于控件圖層、控件圖層對應的目標控件的控件屬性信息、以及不同控件圖層之間的圖層關系信息，生成包括預設結(jié)構化數(shù)據(jù)關系的目標文件。本公開實施例中控件圖層之間的圖層關系可以在生成目標文件時自動生成，無需用戶手動編寫，減少了用戶的工作量；目標文件中的圖層關系和控件屬性信息是適用于目標引擎的，因此目標引擎可以快速獲取到圖層關系和控件屬性信息，提高了UI界面的生成效率。

技術領域

本公開涉及圖形技術領域，具體而言，涉及一種用戶交互UI界面的生成方法及裝置。

背景技術

在用戶交互UI界面的制作過程中，通常由美術人員繪制UI界面的設計稿，然后再把設計稿中包含的各個圖層進行切分，得到各個圖層資源。然后這些圖層資源可以由引擎渲染生成具有圖層結(jié)構的UI界面。

在渲染生成具有圖層結(jié)構的UI界面的過程中，需要根據(jù)圖層資源之間預先設計好的圖層關系對圖層資源進行搭建。而實際中，圖層資源、圖層資源之間的圖層關系是由美術人員手動生成的，美術人員的工作量較大，導致UI界面的生成效率較低。

發(fā)明內(nèi)容

本公開實施例至少提供一種用戶交互UI界面的生成方法及裝置。

第一方面，本公開實施例提供了一種用戶交互UI界面的生成方法，包括：

響應于對多個控件模板中的目標控件模板的觸發(fā)操作，在UI設計界面上的圖層生成畫布中生成與所述目標控件模板對應的控件圖層，并確定當前生成的所述控件圖層和已生成的目標控件圖層之間的圖層關系信息；

基于所述控件圖層、所述控件圖層對應的目標控件的控件屬性信息、以及不同控件圖層之間的所述圖層關系信息，生成包括預設結(jié)構化數(shù)據(jù)關系的目標文件；所述目標文件用于目標引擎基于所述目標文件生成目標UI界面；所述預設結(jié)構化數(shù)據(jù)關系用于描述所述控件圖層之間的圖層關系。

一種可選的實施方式中，響應于對多個控件模板中的目標控件模板的觸發(fā)操作，在UI設計界面上的圖層生成畫布中生成與所述目標控件模板對應的控件圖層之前，所述方法還包括：

響應于在目標圖形軟件中的目標觸發(fā)操作，展示所述UI設計界面；其中，所述UI設計界面包括：多個所述控件模板分別對應的觸發(fā)按鈕、以及所述圖層生成畫布。

一種可選的實施方式中，所述在UI設計界面上的圖層生成畫布中生成與所述目標控件模板對應的控件圖層，包括：

響應于對多個所述控件模板中目標控件模板對應的觸發(fā)按鈕的觸發(fā)操作，在所述UI設計界面中，展示與所述目標控件模板對應的屬性設置面板；

響應于對所述屬性設置面板中屬性值的設置操作，獲取與所述控件圖層對應的圖層屬性信息，并利用所述控件圖層對應的圖層屬性信息，在所述圖層生成畫布中生成對應的控件圖層。

一種可選的實施方式中，所述方法還包括：在生成所述控件圖層后，響應于對所述控件圖層的修改操作，基于所述修改操作修改的目標屬性的圖層屬性值，對所述控件圖層對應的圖層屬性信息進行更新。

一種可選的實施方式中，所述確定當前生成的所述控件圖層和已生成的目標控件圖層之間的圖層關系信息，包括：

將所述目標控件圖層作為父節(jié)點，并將所述觸發(fā)操作對應的控件圖層作為子節(jié)點，基于所述父節(jié)點的標識信息和所述子節(jié)點的標識信息，生成所述圖層關系信息。

一種可選的實施方式中，所述響應于對多個控件模板中的目標控件模板的觸發(fā)操作，在UI設計界面上的圖層生成畫布中生成與所述目標控件模板對應的控件圖層，并確定當前生成的所述控件圖層和已生成的目標控件圖層之間的圖層關系信息，包括：