本發(fā)明涉及界面設(shè)計領(lǐng)域，尤其涉及一種智能視覺界面自適應(yīng)設(shè)計系統(tǒng)。

背景技術(shù)：

1、用戶視覺交互界面簡稱視覺界面，是用戶通過視覺元素與機器進行交互的平臺，一個優(yōu)秀的視覺界面能夠讓用戶通過最少的操作得到最想要的結(jié)果，并在不同設(shè)備上都能獲得良好的瀏覽體驗，但視覺界面在設(shè)計時往往步驟重復(fù)且繁多，導(dǎo)致開發(fā)效率低下，且對設(shè)計人員具有較高的知識背景要求，導(dǎo)致大量人力資源被浪費。

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

1、要解決的技術(shù)問題

2、本發(fā)明為了克服用戶視覺交互界面步驟重復(fù)繁多，且對設(shè)計人員具有較高知識背景要求的缺點，本發(fā)明要解決的技術(shù)問題是提供一種輔助設(shè)計人員設(shè)計的智能視覺界面自適應(yīng)設(shè)計系統(tǒng)。

3、技術(shù)方案

4、為了解決上述技術(shù)問題，本發(fā)明提供了這樣一種智能視覺界面自適應(yīng)設(shè)計系統(tǒng)，包括有顯示模塊、操作模塊、分析模塊以及預(yù)測模塊；

5、顯示模塊用于顯示界面設(shè)計內(nèi)容，并能夠基于界面設(shè)計內(nèi)容中視覺元素的位置關(guān)系和元素類型生成父子集關(guān)系，進一步生成多級列表并顯示，視覺元素的元素類型包括按鈕、文本、輸入框、菜單、圖片和視頻；

6、操作模塊用于通過操作指令將顯示模塊顯示的界面設(shè)計內(nèi)容或多級列表移動，進而對已有的界面設(shè)計內(nèi)容重新布局；

7、分析模塊用于對現(xiàn)有的界面設(shè)計內(nèi)容或設(shè)計人員提供的關(guān)鍵詞或視覺界面圖片進行分析，生成視覺界面，并基于已經(jīng)完成的視覺界面生成視覺界面模板，將操作指令使用頻率的記錄保存在常用指令欄中，并調(diào)整操作指令在常用指令欄中的顯示順序；

8、預(yù)測模塊用于根據(jù)現(xiàn)有的界面設(shè)計內(nèi)容，預(yù)測后續(xù)未完成的界面設(shè)計內(nèi)容，若預(yù)測的界面設(shè)計內(nèi)容被加入現(xiàn)有的界面設(shè)計內(nèi)容，則預(yù)測的界面設(shè)計內(nèi)容會被組合為視覺元素模板，并被添加到可快速調(diào)用的菜單中。

9、優(yōu)選地，顯示模塊基于界面設(shè)計內(nèi)容中視覺元素的位置關(guān)系和元素類型生成父子集關(guān)系，進一步生成多級列表并顯示，具體包括以下步驟：

10、s11：顯示模塊基于界面設(shè)計內(nèi)容中相鄰視覺元素的不同元素類型，判斷相鄰的視覺元素的元素類型是否具有功能關(guān)系，功能關(guān)系表示兩個視覺元素之間具有的功能聯(lián)動作用，若相鄰視覺元素的元素類型的功能關(guān)系較為明顯，則劃分相鄰的視覺元素為一組，并基于界面設(shè)計內(nèi)容中視覺元素的位置關(guān)系，判斷相鄰的視覺元素是否具有陣列關(guān)系或遵循塊狀分布，若相鄰的視覺元素具有陣列關(guān)系或遵循塊狀分布，則劃分相鄰的視覺元素為一組，其中，一個視覺元素不能同時屬于多個組，通過功能關(guān)系判斷視覺元素為同組的優(yōu)先級更高；

11、s12：為屬于同一組的視覺元素添加外框，通過外框限制該組視覺元素的顯示范圍，此時外框為該組視覺元素的父集，該組視覺元素為外框的子集，并使該組視覺元素的定位從相對于整個視覺界面的絕對定位變?yōu)橄鄬τ谕饪騼?nèi)部的相對定位；

12、s13：將外框視為新的視覺元素，并認定外框包含其子集的所有功能，并忽略已經(jīng)成組的視覺元素，重復(fù)上述步驟s11和s12，使被視為視覺元素的外框與其它未劃分組的視覺元素劃分成新的組，并被更大的、新的外框所包含，同時保留被視為視覺元素的外框，直至所有的視覺元素被一個最大的新外框包含；

13、s14：基于大外框與小外框、外框與視覺元素之間的包含關(guān)系，生成多級列表，多級列表能更清晰明了的表達視覺元素之間的功能關(guān)系與位置關(guān)系，且多級列表會展示在顯示模塊中界面設(shè)計內(nèi)容的一側(cè)。

14、優(yōu)選地，操作模塊通過操作指令將顯示模塊顯示的界面設(shè)計內(nèi)容或多級列表移動，進而對已有的界面設(shè)計內(nèi)容重新布局，包括以下內(nèi)容：

15、設(shè)計人員通過操作指令將界面設(shè)計內(nèi)容中的視覺元素移動至界面設(shè)計內(nèi)容內(nèi)的目標位置，或通過操作指令移動界面設(shè)計內(nèi)容中視覺元素對應(yīng)的外框，使外框內(nèi)的所有視覺元素隨外框同步移動，若將需要調(diào)整位置的外框移動至另一外框中，則被調(diào)整位置的外框會成為另一外框的子集，或者，設(shè)計人員通過操作指令將多級列表中的視覺元素或外框移動至另一外框中，使該視覺元素或該外框?qū)儆诹硪煌饪虻淖蛹?，則顯示模塊中顯示的該視覺元素或該外框會同步發(fā)生移動，實現(xiàn)視覺元素的移動。

16、優(yōu)選地，分析模塊用于對設(shè)計人員提供的關(guān)鍵詞進行分析，并生成視覺界面，包括以下步驟：

17、s21：分析模塊基于設(shè)計人員提供的關(guān)鍵詞，將關(guān)鍵詞轉(zhuǎn)換為與其對應(yīng)的數(shù)字向量，每個關(guān)鍵詞轉(zhuǎn)換的數(shù)字向量的長度是相同的；

18、s22：基于數(shù)字向量的長度構(gòu)建transformer模型，并引入已有的視覺界面訓(xùn)練集進行預(yù)訓(xùn)練；

19、s23：通過將已有的視覺界面訓(xùn)練集輸入transformer模型獲得含有多個視覺元素的多級列表，將多級列表變換為視覺界面，從而生成新的視覺界面。

20、優(yōu)選地，分析模塊對設(shè)計人員提供的視覺界面圖片進行分析，并生成視覺界面，包括以下步驟：

21、s31：分析模塊通過canny邊緣檢測提取視覺界面圖片中視覺元素的邊界輪廓，使視覺元素的邊緣特征更加明顯，通過視覺元素的邊緣特征提取視覺界面圖片中視覺元素的幾何形狀以及位置關(guān)系；

22、s32：將視覺界面沿著視覺元素的幾何形狀裁切，得到視覺元素的具體內(nèi)容，對裁切得到的視覺元素重復(fù)上述步驟s11至s14，得到可編輯的新的視覺界面以及對應(yīng)的多級列表。

23、優(yōu)選地，分析模塊對現(xiàn)有的界面設(shè)計內(nèi)容進行分析，并生成視覺界面，包括以下內(nèi)容：

24、分析模塊通過對現(xiàn)有的界面設(shè)計內(nèi)容進行截圖，并通過卷積神經(jīng)網(wǎng)絡(luò)得到現(xiàn)有界面設(shè)計內(nèi)容的特征顏色、視覺元素分布以及視覺元素大小，進而得到現(xiàn)有界面設(shè)計內(nèi)容的關(guān)鍵詞，并重復(fù)上述步驟s21至s23，進而得到新的視覺界面。

25、優(yōu)選地，分析模塊基于已經(jīng)完成的視覺界面生成視覺界面模板，包括以下步驟：

26、s41：分析模塊會提取已經(jīng)完成的視覺界面的多級列表，并將多級列表中的視覺元素所包含的文本信息全部替換為模板文本，并將多級列表中的視覺元素所包含的圖像信息全部替換為模板圖片；

27、s42：隨后分析模塊會檢查多級列表中屬于同一外框且表示陣列分布的外框或視覺元素，滿足屬于同一外框且表示陣列分布條件的外框或視覺元素將只保留一個，其它的外框或視覺元素會被刪除，從而實現(xiàn)視覺界面模板的生成，該視覺界面模板能夠被設(shè)計人員直接調(diào)用和修改調(diào)整，并導(dǎo)入transformer模型的視覺界面訓(xùn)練集中，對transformer模型進一步優(yōu)化，進而優(yōu)化分析模塊對新的視覺界面的生成。

28、優(yōu)選地，視覺界面模板作為訓(xùn)練集進一步優(yōu)化分析模塊對新的視覺界面的生成，包括以下步驟：

29、s51：分析模塊會基于視覺界面模板，通過卷積神經(jīng)網(wǎng)絡(luò)獲取視覺界面模板的特征顏色、視覺元素分布以及視覺元素大小，進而得到視覺界面模板的關(guān)鍵詞；

30、s52：以視覺界面模板的關(guān)鍵詞為輸入內(nèi)容，視覺界面模板對應(yīng)的多級列表為輸出參考，對transformer模型進行訓(xùn)練，從而使transformer模型生成的新的視覺界面更符合設(shè)計人員的設(shè)計風(fēng)格。

31、優(yōu)選地，分析模塊將操作指令的使用頻率記錄并保存在常用指令欄中，并調(diào)整操作指令在常用指令欄中的顯示順序，包括以下步驟：

32、s61：分析模塊會記錄每日設(shè)計人員對操作指令的使用次數(shù)，根據(jù)每日設(shè)計人員是否使用操作指令，確定設(shè)計人員在相同時間周期內(nèi)基于艾賓浩斯遺忘曲線對該操作指令的遺忘程度，以遺忘程度為權(quán)重，使遺忘程度與操作指令的使用頻率相乘并在多個周期累加得到排序積分，常用指令欄內(nèi)按照排序積分從大到小的順序?qū)Σ僮髦噶钸M行排列，便于設(shè)計人員在未定義操作指令的快捷鍵的前提下快速調(diào)用使用次數(shù)較少的操作指令；

33、s62：排序積分的公式為：?其中，表示操作指令的排序積分，表示記錄操作指令使用頻率的最大天數(shù)，表示天前操作指令的的使用頻率，表示第天前設(shè)計人員基于艾賓浩斯遺忘曲線對操作指令的使用方式遺忘的概率。

34、優(yōu)選地，預(yù)測模塊用于根據(jù)現(xiàn)有的界面設(shè)計內(nèi)容，預(yù)測后續(xù)未完成的界面設(shè)計內(nèi)容，若預(yù)測的界面設(shè)計內(nèi)容被加入現(xiàn)有的界面設(shè)計內(nèi)容，則預(yù)測的界面設(shè)計內(nèi)容會被組合為視覺元素模板，并被添加到可快速調(diào)用的菜單中，包括以下步驟：

35、s71：預(yù)測模塊根據(jù)設(shè)計人員當前編輯的視覺元素，判斷該視覺元素與相鄰的視覺元素是否具有功能關(guān)系、陣列關(guān)系或者遵循塊狀分布，從而對設(shè)計人員后續(xù)可能要編輯的視覺元素進行預(yù)測，預(yù)測到的視覺元素與當前編輯的視覺元素之間的關(guān)系以功能關(guān)系為優(yōu)先，其次是陣列關(guān)系，最后是遵循塊狀分布，預(yù)測到的視覺元素將以半透明的形式顯示在顯示模塊中，在預(yù)測到的視覺元素右下角會彈出一個按鈕，若設(shè)計人員需要對該視覺元素進行保留，則設(shè)計人員按下按鈕，將預(yù)測的視覺元素保留在現(xiàn)有的界面設(shè)計內(nèi)容中，而預(yù)測到的視覺元素會被組合為視覺元素模板，并重復(fù)該步驟，直至設(shè)計人員停止編輯視覺元素；

36、s72：預(yù)測到的視覺元素被設(shè)計人員加入界面設(shè)計內(nèi)容后，與該視覺元素對應(yīng)的視覺元素模板會被保存至可快速調(diào)用的菜單中，使設(shè)計人員能夠以復(fù)制或者移動的形式快速調(diào)用該視覺元素模板。

37、（3）有益效果

38、1、通過分析模塊用于對現(xiàn)有的界面設(shè)計內(nèi)容或設(shè)計人員提供的關(guān)鍵詞或視覺界面圖片進行分析，生成新的視覺界面，新生成的視覺界面越符合設(shè)計人員的設(shè)計風(fēng)格，則該視覺界面越符合設(shè)計人員的風(fēng)格需求，進而為設(shè)計人員提供更契合界面設(shè)計內(nèi)容的設(shè)計參考，提高設(shè)計人員的設(shè)計效率。

39、2、設(shè)計人員直接移動外框會使所有視覺元素隨外框同步移動，從而批量移動視覺元素并調(diào)整視覺元素的父子集關(guān)系，實現(xiàn)視覺元素的快速調(diào)整，進而提高設(shè)計人員的設(shè)計效率。

40、3、通過分析模塊基于排序積分對常用指令欄中的操作指令進行排序，能夠有效防止使用次數(shù)較少的操作指令在頻繁操作的過程中被擠出常用指令欄，進而避免因查找使用次數(shù)較少的操作指令而花費時間，從而提高設(shè)計人員的設(shè)計效率。